Improve testing (#27)

Use storybook, puppeteer, and jest for visual testing.

Co-authored-by: Luke Peavey <1williampeavey@gmail.com>

.gitignore

@@ -3,10 +3,10 @@
 /es
 /cjs
 /dist
+/storybook-static
 
 # Examples/docs
 /examples
-/.storybook
 
 
 # Dependencies

.storybook/main.js

@@ -0,0 +1,10 @@
+// .storybook/main.js
+
+module.exports = {
+  stories: [
+    '../__stories__/**/*.stories.mdx',
+    '../__stories__/**/*.stories.js',
+  ],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  staticDirs: ['../__stories__/assets'],
+}

.storybook/manager.js

@@ -0,0 +1,17 @@
+// .storybook/manager.js
+
+import { addons } from '@storybook/addons'
+
+addons.setConfig({
+  isFullscreen: false,
+  showNav: true,
+  showPanel: false,
+  panelPosition: 'bottom',
+  sidebarAnimations: true,
+  enableShortcuts: true,
+  isToolshown: true,
+  theme: undefined,
+  selectedPanel: undefined,
+  initialActive: 'sidebar',
+  showRoots: false,
+})

.storybook/preview-head.html

@@ -0,0 +1 @@
+<link rel="stylesheet" href="styles.css" />

.storybook/preview.js

@@ -0,0 +1,3 @@
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+}

CONTRIBUTING.md

@@ -0,0 +1,10 @@
+# Contributing
+
+## Setup
+
+1. Fork and clone the repository
+2. Install dependencies
+
+### Tests and Examples
+
+We use storybook, jest, and puppeteer for testing and visual examples.

__stories__/01-basic.stories.js

@@ -0,0 +1,69 @@
+import getTemplate from './helpers/getTemplate'
+
+const text = `Hello World!`
+
+export default {
+  title: 'Basic',
+  argTypes: {
+    children: { control: 'text' },
+    types: { control: 'array' },
+  },
+}
+
+const wordCount = text.split(' ').length
+const charCount = text.replace(/\s+/g, '').split('').length
+
+const Template = getTemplate({ children: text })
+
+export const NotSplit = Template.bind({})
+NotSplit.args = { types: [] }
+
+export const SplitLinesWordsAndChars = Template.bind({})
+SplitLinesWordsAndChars.args = { types: ['lines', 'words', 'chars'] }
+SplitLinesWordsAndChars.parameters = {
+  async puppeteerTest(page) {
+    expect((await page.$$('.target > .line')).length).toEqual(1)
+    expect((await page.$$('.line > .word')).length).toEqual(wordCount)
+    expect((await page.$$('.word > .char')).length).toEqual(charCount)
+  },
+}
+
+export const SplitLines = Template.bind({})
+SplitLines.args = { types: ['lines'] }
+SplitLines.parameters = {
+  async puppeteerTest(page) {
+    expect((await page.$$('.target > .line')).length).toEqual(1)
+    expect((await page.$$('.word')).length).toEqual(0)
+    expect((await page.$$('.char')).length).toEqual(0)
+  },
+}
+
+export const SplitWords = Template.bind({})
+SplitWords.args = { types: ['words'] }
+SplitWords.parameters = {
+  async puppeteerTest(page) {
+    expect((await page.$$('.line')).length).toEqual(0)
+    expect((await page.$$('.target > .word')).length).toEqual(wordCount)
+    expect((await page.$$('.char')).length).toEqual(0)
+  },
+}
+
+export const SplitChars = Template.bind({})
+SplitChars.args = { types: ['chars'] }
+SplitChars.parameters = {
+  async puppeteerTest(page) {
+    expect((await page.$$('.line')).length).toEqual(0)
+    expect((await page.$$('.word')).length).toEqual(0)
+    expect((await page.$$('.target > .char')).length).toEqual(charCount)
+  },
+}
+
+export const SplitWordsAndChars = Template.bind({})
+SplitWordsAndChars.args = { types: 'words, chars' }
+SplitWordsAndChars.parameters = {
+  async puppeteerTest(page) {
+    expect((await page.$$('.line')).length).toEqual(0)
+    expect((await page.$$('.target > .word')).length).toEqual(wordCount)
+    expect((await page.$$('.word > .char')).length).toEqual(charCount)
+  },
+}

__stories__/02-mult-line-text.stories.js

@@ -0,0 +1,82 @@
+import getTemplate from './helpers/getTemplate'
+
+const text = `Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The term typography is also applied to the style, arrangement, and appearance of the letters, numbers, and symbols created by the process.`
+
+const lineCount = 5
+const wordCount = text.split(' ').length
+const charCount = text.replace(/\s+/g, '').split('').length
+
+export default {
+  title: 'Multi-line text',
+  argTypes: {
+    children: { control: 'text' },
+    types: { control: 'array' },
+  },
+}
+
+const Template = getTemplate({ children: text })
+
+export const NotSplit = Template.bind({})
+NotSplit.args = { types: [] }
+
+export const SplitLinesWordsAndChars = Template.bind({})
+SplitLinesWordsAndChars.args = { types: ['lines', 'words', 'chars'] }
+SplitLinesWordsAndChars.parameters = {
+  async puppeteerTest(page) {
+    expect((await page.$$('.target > .line')).length).toEqual(lineCount)
+    expect((await page.$$('.line > .word')).length).toEqual(wordCount)
+    expect((await page.$$('.word > .char')).length).toEqual(charCount)
+  },
+}
+
+export const SplitLines = Template.bind({})
+SplitLines.args = { types: ['lines'] }
+SplitLines.parameters = {
+  async puppeteerTest(page) {
+    expect((await page.$$('.target > .line')).length).toEqual(lineCount)
+    expect((await page.$$('.word')).length).toEqual(0)
+    expect((await page.$$('.char')).length).toEqual(0)
+  },
+}
+
+export const SplitWords = Template.bind({})
+SplitWords.args = { types: ['words'] }
+SplitWords.parameters = {
+  async puppeteerTest(page) {
+    expect((await page.$$('.line')).length).toEqual(0)
+    expect((await page.$$('.target > .word')).length).toEqual(wordCount)
+    expect((await page.$$('.char')).length).toEqual(0)
+  },
+}
+
+export const SplitLinesAndWords = Template.bind({})
+SplitLinesAndWords.args = { types: ['lines', 'words'] }
+SplitLinesAndWords.parameters = {
+  async puppeteerTest(page) {
+    expect((await page.$$('.target > .line')).length).toEqual(lineCount)
+    expect((await page.$$('.line > .word')).length).toEqual(wordCount)
+    expect((await page.$$('.char')).length).toEqual(0)
+  },
+}
+
+export const SplitLinesAndChars = Template.bind({})
+SplitLinesAndChars.args = { types: ['lines', 'chars'] }
+SplitLinesAndChars.parameters = {
+  async puppeteerTest(page) {
+    expect((await page.$$('.target > .line')).length).toEqual(lineCount)
+    expect((await page.$$('.word')).length).toEqual(0)
+    expect((await page.$$('.line > .char')).length).toEqual(charCount)
+  },
+}
+
+export const SplitWordsAndChars = Template.bind({})
+SplitWordsAndChars.args = { types: ['words', 'chars'] }
+SplitWordsAndChars.parameters = {
+  async puppeteerTest(page) {
+    // Should not contain any line elements
+    expect((await page.$$('.line')).length).toEqual(0)
+    //
+    expect((await page.$$('.target > .word')).length).toEqual(wordCount)
+    expect((await page.$$('.word > .char')).length).toEqual(charCount)
+  },
+}

__stories__/03-with-absolute-position.stories.js

@@ -0,0 +1,82 @@
+import getTemplate from './helpers/getTemplate'
+
+const text = `Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The term typography is also applied to the style, arrangement, and appearance of the letters, numbers, and symbols created by the process.`
+const lineCount = 5
+const wordCount = text.split(' ').length
+const charCount = text.replace(/\s+/g, '').split('').length
+
+// Story config
+export default {
+  title: 'With Absolute Position',
+  argTypes: {
+    children: { control: 'text' },
+    types: { control: 'array' },
+    absolute: { control: 'boolean' },
+  },
+}
+
+// Create the template used to render stories in this section
+const Template = getTemplate({ children: text })
+
+export const NotSplit = Template.bind({})
+NotSplit.args = { types: [] }
+
+export const SplitLinesWordsAndChars = Template.bind({})
+SplitLinesWordsAndChars.args = { types: ['lines', 'words', 'chars'] }
+SplitLinesWordsAndChars.parameters = {
+  async puppeteerTest(page) {
+    expect((await page.$$('.target > .line')).length).toEqual(lineCount)
+    expect((await page.$$('.line > .word')).length).toEqual(wordCount)
+    expect((await page.$$('.word > .char')).length).toEqual(charCount)
+  },
+}
+
+export const SplitLines = Template.bind({})
+SplitLines.args = { types: ['lines'] }
+SplitLines.parameters = {
+  async puppeteerTest(page) {
+    expect((await page.$$('.target > .line')).length).toEqual(lineCount)
+    expect((await page.$$('.word')).length).toEqual(0)
+    expect((await page.$$('.char')).length).toEqual(0)
+  },
+}
+
+export const SplitWords = Template.bind({})
+SplitWords.args = { types: ['words'] }
+SplitWords.parameters = {
+  async puppeteerTest(page) {
+    expect((await page.$$('.line')).length).toEqual(0)
+    expect((await page.$$('.target > .word')).length).toEqual(wordCount)
+    expect((await page.$$('.char')).length).toEqual(0)
+  },
+}
+
+export const SplitChars = Template.bind({})
+SplitChars.args = { types: ['chars'] }
+SplitChars.parameters = {
+  async puppeteerTest(page) {
+    expect((await page.$$('.line')).length).toEqual(0)
+    expect((await page.$$('.word')).length).toEqual(0)
+    expect((await page.$$('.target > .char')).length).toEqual(charCount)
+  },
+}
+
+export const SplitLinesAndWords = Template.bind({})
+SplitLinesAndWords.args = { types: ['lines', 'words'] }
+SplitLinesAndWords.parameters = {
+  async puppeteerTest(page) {
+    expect((await page.$$('.target > .line')).length).toEqual(lineCount)
+    expect((await page.$$('.line > .word')).length).toEqual(wordCount)
+    expect((await page.$$('.char')).length).toEqual(0)
+  },
+}
+
+export const SplitLinesAndChars = Template.bind({})
+SplitLinesAndChars.args = { types: ['lines', 'chars'] }
+SplitLinesAndChars.parameters = {
+  async puppeteerTest(page) {
+    expect((await page.$$('.target > .line')).length).toEqual(lineCount)
+    expect((await page.$$('.word')).length).toEqual(0)
+    expect((await page.$$('.line > .char')).length).toEqual(charCount)
+  },
+}

__stories__/04-with-line-breaks.stories.js

@@ -0,0 +1,73 @@
+import getTemplate from './helpers/getTemplate'
+
+const text = `
+This is the first line. <br>
+Followed by the second line. <br>
+Then the last one.`
+
+const lineCount = 3
+const wordCount = text.replace(/<br\s*\/?>/g, '').split(' ').length
+const charCount = text.replace(/(<br\s*\/?>)|\s+/g, '').split('').length
+
+export default {
+  title: 'With Line Breaks',
+  argTypes: {
+    children: { control: 'text' },
+    types: { control: 'array' },
+  },
+}
+
+const Template = getTemplate({ children: text })
+
+export const NotSplit = Template.bind({})
+NotSplit.args = { types: [] }
+
+export const SplitLinesWordsAndChars = Template.bind({})
+SplitLinesWordsAndChars.args = { types: ['lines', 'words', 'chars'] }
+SplitLinesWordsAndChars.parameters = {
+  async puppeteerTest(page) {
+    expect((await page.$$('.target > .line')).length).toEqual(lineCount)
+    expect((await page.$$('.line > .word')).length).toEqual(wordCount)
+    expect((await page.$$('.word > .char')).length).toEqual(charCount)
+  },
+}
+
+export const SplitLines = Template.bind({})
+SplitLines.args = { types: ['lines'] }
+SplitLines.parameters = {
+  async puppeteerTest(page) {
+    expect((await page.$$('.target > .line')).length).toEqual(lineCount)
+    expect((await page.$$('.word')).length).toEqual(0)
+    expect((await page.$$('.char')).length).toEqual(0)
+  },
+}
+
+export const SplitWords = Template.bind({})
+SplitWords.args = { types: ['words'] }
+SplitWords.parameters = {
+  async puppeteerTest(page) {
+    expect((await page.$$('.line')).length).toEqual(0)
+    expect((await page.$$('.target > .word')).length).toEqual(wordCount)
+    expect((await page.$$('.char')).length).toEqual(0)
+  },
+}
+
+export const SplitLinesAndWords = Template.bind({})
+SplitLinesAndWords.args = { types: ['lines', 'words'] }
+SplitLinesAndWords.parameters = {
+  async puppeteerTest(page) {
+    expect((await page.$$('.target > .line')).length).toEqual(lineCount)
+    expect((await page.$$('.line > .word')).length).toEqual(wordCount)
+    expect((await page.$$('.char')).length).toEqual(0)
+  },
+}
+
+export const SplitLinesAndChars = Template.bind({})
+SplitLinesAndChars.args = { types: ['lines', 'chars'] }
+SplitLinesAndChars.parameters = {
+  async puppeteerTest(page) {
+    expect((await page.$$('.target > .line')).length).toEqual(lineCount)
+    expect((await page.$$('.word')).length).toEqual(0)
+    expect((await page.$$('.line > .char')).length).toEqual(charCount)
+  },
+}