Update tests and storybook

Migrated stories to 7.6.3. The storyshots addon is no longer supported. I had to remove our existing tests which relied on storyshots and puppeteer. These tests will have to be rewritten using storybook's new test-runner API.
lukePeavey · Dec 3, 2023 · 2cc6097 · 2cc6097
1 parent 4501b13
commit 2cc6097
Show file tree

Hide file tree

Showing 18 changed files with 12 additions and 1,360 deletions.
diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
@@ -18,7 +18,7 @@ jobs:
     steps:
       - uses: actions/checkout@v1
       - name: Install dependencies
-        run: yarn
+        run: npm install
         # 👇 Adds Chromatic as a step in the workflow
       - name: Publish to Chromatic
         uses: chromaui/action@v1

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -17,9 +17,9 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v1
         with:
-          node-version: 16.x
-      - run: yarn install
-      - run: yarn run build
-      - run: yarn test
+          node-version: 20.x
+      - run: npm install
+      - run: npm run build
+      - run: npm test
         env:
           CI: true
diff --git a/.github/workflows/storybook.yml b/.github/workflows/storybook.yml
@@ -20,8 +20,8 @@ jobs:
         # Install npm packages and build the Storybook files# Install npm
         # packages and build the Storybook files
         run: |
-          yarn install
-          yarn run storybook:build
+          npm install
+          npm run storybook:build
       - name: Deploy 🚀
         uses: JamesIves/[email protected]
         with:

diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,6 +1,6 @@
 // .storybook/main.js
 
-module.exports = {
+export default {
   stories: [
     '../__stories__/**/*.stories.mdx',
     '../__stories__/**/*.stories.js',
@@ -9,17 +9,17 @@ module.exports = {
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
-    '@storybook/addon-mdx-gfm'
+    '@storybook/addon-mdx-gfm',
   ],
 
   staticDirs: ['../__stories__/assets'],
 
   framework: {
     name: '@storybook/svelte-webpack5',
-    options: {}
+    options: {},
   },
 
   docs: {
-    autodocs: true
-  }
+    autodocs: false,
+  },
 }
diff --git a/__stories__/01-basic.stories.js b/__stories__/01-basic.stories.js
@@ -17,69 +17,21 @@ NotSplit.args = { types: 'none' }
 
 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(words)
-    expect((await page.$$('.word > .char')).length).toEqual(chars)
-  },
-}
 
 export const SplitLinesAndWords = Template.bind({})
 SplitLinesAndWords.args = { types: 'lines, words' }
-SplitLinesAndWords.parameters = {
-  async puppeteerTest(page) {
-    expect((await page.$$('.target > .line')).length).toEqual(1)
-    expect((await page.$$('.line > .word')).length).toEqual(words)
-    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(1)
-    expect((await page.$$('.line > .char')).length).toEqual(chars)
-  },
-}
 
 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(words)
-    expect((await page.$$('.word > .char')).length).toEqual(chars)
-  },
-}
 
 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(words)
-    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(chars)
-  },
-}
diff --git a/__stories__/02-mult-line-text.stories.js b/__stories__/02-mult-line-text.stories.js
@@ -19,61 +19,18 @@ NotSplit.args = { types: 'none' }
 
 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 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', absolute: false }
-SplitLinesAndChars.parameters = {
-  async puppeteerTest(page) {
-    expect((await page.$$('.target > .line')).length).toEqual(lineCount)
-    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)
-  },
-}
 
 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)
-  },
-}
diff --git a/__stories__/03-absolute-position.stories.js b/__stories__/03-absolute-position.stories.js
@@ -24,59 +24,18 @@ SplitLinesWordsAndChars.args = {
   types: 'lines, words, chars',
   absolute: true,
 }
-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 SplitLinesAndWords = Template.bind({})
 SplitLinesAndWords.args = { types: 'lines, words', absolute: true }
-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', absolute: true }
-SplitLinesAndChars.parameters = {
-  async puppeteerTest(page) {
-    expect((await page.$$('.target > .line')).length).toEqual(lineCount)
-    expect((await page.$$('.line > .char')).length).toEqual(charCount)
-  },
-}
 
 export const SplitWordsAndChars = Template.bind({})
 SplitWordsAndChars.args = { types: 'words, chars', absolute: true }
-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)
-  },
-}
 
 export const SplitLines = Template.bind({})
 SplitLines.args = { types: 'lines', absolute: true }
-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', absolute: true }
-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)
-  },
-}
diff --git a/__stories__/04-nested-elements.stories.js b/__stories__/04-nested-elements.stories.js
@@ -24,110 +24,16 @@ NotSplit.args = { types: 'none' }
 
 export const SplitLinesWordsAndChars = Template.bind({})
 SplitLinesWordsAndChars.args = { types: 'lines, words, chars' }
-SplitLinesWordsAndChars.parameters = {
-  async puppeteerTest(page) {
-    // Total number of line, word, and character elements is correct
-    expect((await page.$$('.target .line')).length).toEqual(lineCount)
-    expect((await page.$$('.target .word')).length).toEqual(words)
-    expect((await page.$$('.target .char')).length).toEqual(chars)
-    // Number of words directly inside a line element
-    expect((await page.$$('.target > .line > .word')).length).toEqual(
-      plainWords
-    )
-    // Nested link element
-    // - is immediate child of a line element
-    // - contains a single word element, which contains 9 character elements
-    expect((await page.$$('.target > .line > a')).length).toEqual(1)
-    expect((await page.$$('a > .word')).length).toEqual(1)
-    expect((await page.$$('a > .word > .char')).length).toEqual(9)
-
-    // nested `<strong>` element...
-    // - is an immediate child a line element
-    // - contains two word elements, which contain a total of 14 characters
-    expect((await page.$$('.target > .line > strong')).length).toEqual(1)
-    expect((await page.$$('strong > .word')).length).toEqual(2)
-    expect((await page.$$('strong > .word > .char')).length).toEqual(14)
-  },
-}
 
 export const SplitLinesAndWords = Template.bind({})
 SplitLinesAndWords.args = { types: 'lines, words' }
-SplitLinesAndWords.parameters = {
-  async puppeteerTest(page) {
-    // Total number of line, word, and character elements is correct
-    expect((await page.$$('.target .line')).length).toEqual(lineCount)
-    expect((await page.$$('.target .word')).length).toEqual(words)
-    expect((await page.$$('.target .char')).length).toEqual(0)
-
-    // Number of words directly inside a line element
-    expect((await page.$$('.target > .line > .word')).length).toEqual(
-      plainWords
-    )
-
-    // Nested link element(s)
-    // Are immediate children of line element
-    // Contain a total of two word elements, which contain a total of 13
-    // character elements
-    expect((await page.$$('.target > .line > a')).length).toEqual(1)
-    expect((await page.$$('.line > a > .word')).length).toEqual(1)
-
-    // nested `<strong>` element...
-    // - is an immediate child the line element
-    // - contains two word elements, which contain a total of 14 characters
-    expect((await page.$$('.target > .line > strong')).length).toEqual(1)
-    expect((await page.$$('.line > strong > .word')).length).toEqual(2)
-  },
-}
 
 export const SplitLinesAndChars = Template.bind({})
 SplitLinesAndChars.args = { types: 'lines, chars' }
 SplitLinesAndChars.parameters = {}
 
 export const SplitWordsAndChars = Template.bind({})
 SplitWordsAndChars.args = { types: 'words, chars' }
-SplitWordsAndChars.parameters = {
-  async puppeteerTest(page) {
-    // Total number of line, word, and character elements is correct
-    expect((await page.$$('.target .line')).length).toEqual(0)
-    expect((await page.$$('.target .word')).length).toEqual(words)
-    expect((await page.$$('.target .char')).length).toEqual(chars)
-
-    // Nested link element(s)
-    // Are immediate children of line element
-    // Contain a total of two word elements, which contain a total of 13
-    // character elements
-    expect((await page.$$('.target > a')).length).toEqual(1)
-    expect((await page.$$('.target a > .word')).length).toEqual(1)
-    expect((await page.$$('.target a > .word > .char')).length).toEqual(9)
-
-    // nested `<strong>` element...
-    // - is an immediate child the target element
-    // - contains two word elements, which contains a total of 14 characters
-    expect((await page.$$('.target > strong')).length).toEqual(1)
-    expect((await page.$$('strong > .word')).length).toEqual(2)
-    expect((await page.$$('strong > .word > .char')).length).toEqual(14)
-  },
-}
 
 export const SplitWords = Template.bind({})
 SplitWords.args = { types: 'words' }
-SplitWords.parameters = {
-  async puppeteerTest(page) {
-    // Total number of line, word, and character elements is correct
-    expect((await page.$$('.target .line')).length).toEqual(0)
-    expect((await page.$$('.target .word')).length).toEqual(words)
-    expect((await page.$$('.target .char')).length).toEqual(0)
-
-    // Nested link element(s)
-    // Are immediate children of target element
-    // Contain a total of two word elements
-    expect((await page.$$('.target > a')).length).toEqual(1)
-    expect((await page.$$('.target > a > .word')).length).toEqual(1)
-
-    // nested `<strong>` element...
-    // - is an immediate child the target element
-    // - contains two word elements
-    expect((await page.$$('.target > strong')).length).toEqual(1)
-    expect((await page.$$('.target > strong > .word')).length).toEqual(2)
-  },
-}