@quickpickle/vitest-browser 0.1.0 → 0.2.0

package/src/outcomes.steps.ts

@@ -232,34 +232,16 @@ Then('a/an/the (value of )(the ){string} {word} should not/NOT be/equal {int}',
 
 // Visual regression testing
 Then('(the )screenshot/snapshot should match', async function (world:VitestBrowserWorld) {
-  await expect(world.page).toMatchImageSnapshot({
-    ...world.worldConfig.screenshotOptions,
-    customSnapshotsDir: world.screenshotDir,
-    customSnapshotIdentifier: world.screenshotFilename,
-  })
+  await world.expectScreenshotMatch(world.page)
 })
 Then('(the )screenshot/snapshot {string} should match', async function (world:VitestBrowserWorld, name:string) {
-  let explodedTags = world.info.explodedIdx ? `_(${world.info.tags.join(',')})` : ''
-  await expect(world.page).toMatchImageSnapshot({
-    ...world.worldConfig.screenshotOptions,
-    customSnapshotsDir: world.screenshotDir,
-    customSnapshotIdentifier: `${name}${explodedTags}`,
-  })
+  await world.expectScreenshotMatch(world.page, name)
 })
 Then('(the )screenshot/snapshot of the {string} {word} should match', async function (world:VitestBrowserWorld, identifier, role) {
   let locator = await world.getLocator(world.page, identifier, role)
-  await expect(locator).toMatchImageSnapshot({
-    ...world.worldConfig.screenshotOptions,
-    customSnapshotsDir: world.screenshotDir,
-    customSnapshotIdentifier: world.screenshotFilename,
-  })
+  await world.expectScreenshotMatch(locator)
 })
 Then('(the )screenshot/snapshot {string} of the {string} {word} should match', async function (world:VitestBrowserWorld, name, identifier, role) {
   let locator = await world.getLocator(world.page, identifier, role)
-  let explodedTags = world.info.explodedIdx ? `_(${world.info.tags.join(',')})` : ''
-  await expect(locator).toMatchImageSnapshot({
-    ...world.worldConfig.screenshotOptions,
-    customSnapshotsDir: world.screenshotDir,
-    customSnapshotIdentifier: `${name}${explodedTags}`,
-  })
+  await world.expectScreenshotMatch(locator, name)
 })

package/tests/generic/browser-actions.feature

@@ -168,7 +168,7 @@ Feature: Actions step definitions in Vitest Browser
 
     Scenario: Taking a default screenshot
       When I take a screenshot
-      Then the screenshot "Actions step definitions in Vitest Browser_Taking a default screenshot_01.png" should exist--delete it
+      Then the screenshot "Feature Actions step definitions in Vitest Browser_Taking a default screenshot_01.png" should exist--delete it
 
     Scenario: Taking a named screenshot
       When I take a screenshot named "pickles"
@@ -184,10 +184,10 @@ Feature: Actions step definitions in Vitest Browser
 
     @sequential
     Scenario: Cleaning up the screenshots with exploded tags
-      Then the screenshot "Actions step definitions in Vitest Browser_Taking a default screenshot with exploded tags (sequential,tag1)_01.png" should exist--delete it
-      And the screenshot "Actions step definitions in Vitest Browser_Taking a default screenshot with exploded tags (sequential,tag2)_01.png" should exist--delete it
+      Then the screenshot "Feature Actions step definitions in Vitest Browser_Taking a default screenshot with exploded tags (sequential,tag1)_01.png" should exist--delete it
+      And the screenshot "Feature Actions step definitions in Vitest Browser_Taking a default screenshot with exploded tags (sequential,tag2)_01.png" should exist--delete it
 
     @sequential @skip-ci
     Scenario: Cleaning up the screenshots with exploded tags
-      And the screenshot "temp (sequential,tag1).png" should exist--delete it
-      And the screenshot "temp (sequential,tag2).png" should exist--delete it
+      And the screenshot "temp_(sequential,tag1).png" should exist--delete it
+      And the screenshot "temp_(sequential,tag2).png" should exist--delete it

package/tests/generic/browser-generic.feature

@@ -1,41 +1,41 @@
-@todo
 Feature: Basic tests of Vitest Browser Mode and steps
 
+  Background:
+    Given I render the "Example" component
+
   @skip-ci
   Rule: Visual regression testing must be supported
 
     Example: Passing visual regression test
-      When I render the "Example" component
       Then the screenshot should match
 
     Example: Passing named visual regression test
-      When I render the "Example" component
       Then the screenshot "visual-regression-example-page" should match
 
     Example: Passing visual regression test of an element
-      When I render the "Example" component
       Then the screenshot of the "XKCD Comic" img should match
 
+    @todo
     Example: Passing named visual regression test of an element
-      When I render the "Example" component
       Then the screenshot "visual-regression-faq-section" of the "#faq" element should match
 
-    @fails
+    @soft
     Example: Failing visual regression test
-      When I render the "Example" component
-      Then the screenshot "visual-regression-simple-page.png.diff.png" should not exist
-      And the screenshot "visual-regression-simple-page.png.actual.png" should not exist
-      And the screenshot "visual-regression-simple-page" should match
-
-    Scenario: Delete the visual regression failure file
-      Then the screenshot "visual-regression-simple-page.png.diff.png" should not exist
-      And the screenshot "visual-regression-simple-page.png.actual.png" should exist--delete it
+      When I take a screenshot of the "Image" link named "made-to-fail"
+      And I take a screenshot of the "FAQ" link named "faq"
+      Then the screenshot "made-to-fail.png.diff.png" should not exist
+      And the screenshot "made-to-fail.png.actual.png" should not exist
+      And the screenshot "made-to-fail" of the "FAQ" link should match
+      Then the screenshot "made-to-fail.png.diff.png" should not exist
+      And the screenshot "made-to-fail.png.actual.png" should exist--delete it
+      And the screenshot "faq.png" should exist--delete it
+      And the screenshot "made-to-fail.png" should exist--delete it
+      Then there should have been 1 error
 
   @todo
   Rule: Setting screenshot options must be supported
 
     Scenario: Setting a screenshot mask
-      Given I render the "Example" component
       And the following world config:
         ```yaml
         screenshotOptions:
@@ -45,7 +45,6 @@ Feature: Basic tests of Vitest Browser Mode and steps
       Then the screenshot should match
 
     Scenario: Setting a clip area
-      Given I render the "Example" component
       And the following world config:
         ```yaml
           screenshotOptions:
@@ -68,12 +67,10 @@ Feature: Basic tests of Vitest Browser Mode and steps
       Then the screenshot "test.png" should exist--delete it
 
     Scenario: Taking a screenshot of an element
-      Given I load the file "tests/examples/example.html"
       When I take a screenshot of the "Image" link
-      Then the screenshot "Feature Basic tests of Vitest Browser Mode and steps_Taking a screenshot of an element_02.png" should exist--delete it
+      Then the screenshot "Feature Basic tests of Vitest Browser Mode and steps_Taking a screenshot of an element_01.png" should exist--delete it
 
     Scenario: Taking a named screenshot of an element
-      Given I load the file "tests/examples/example.html"
       When I take a screenshot of the "XKCD Comic" img named "test2"
       Then the screenshot "test2.png" should exist--delete it
 

package/tests/generic/generic.steps.ts

@@ -14,10 +14,14 @@ Then('the screenshot {string} should exist(--delete it)', async function (world:
 Then('the screenshot {string} should not exist', async function (world:VitestBrowserWorld, filepath:string) {
   let fullpath = world.fullPath(`${world.screenshotDir}/${filepath}`)
   try {
-    await expect(commands.readFile(fullpath)).toBeTruthy();
+    await commands.readFile(fullpath);
     throw new Error(`Screenshot ${filepath} should not exist`)
   }
   catch(e) {
-    if (e.message === `Screenshot ${filepath} should not exist`) throw e
+    if (!e.message.match(/ENOENT/i)) throw e
   }
 })
+Then('there should have been {int} error(s)', async (world:VitestBrowserWorld, int:number) => {
+  expect(world.info.errors.length).toBe(int)
+  world.info.errors = []
+})

package/vitest.workspace.ts

@@ -17,6 +17,7 @@ export default [
     quickpickle: {
       worldConfig: {
         componentDir: 'tests/svelte',
+        screenshotDir: 'tests/svelte/screenshots',
       }
     },
     environment: 'browser',
@@ -33,33 +34,34 @@ export default [
     }
   }
 },
-{
-  name: 'react',
-  extends: 'vite.config.ts',
-  plugins: [react()],
-  test: {
-    name: 'react',
-    include: [ 'tests/react/*.feature' ],
-    setupFiles: [ 'src/frameworks/react.ts', 'src/actions.steps.ts', 'src/outcomes.steps.ts' ],
-    quickpickle: {
-      worldConfig: {
-        componentDir: 'tests/react',
-      }
-    },
-    environment: 'browser',
-    browser: {
-      enabled: true,
-      screenshotFailures: false,
-      name: 'chromium',
-      provider: 'playwright',
-      ui: showBrowser,
-      headless: !showBrowser,
-      instances: [
-        { browser:'chromium' },
-      ]
-    }
-  }
-},
+// {
+//   name: 'react',
+//   extends: 'vite.config.ts',
+//   plugins: [react()],
+//   test: {
+//     name: 'react',
+//     include: [ 'tests/react/*.feature' ],
+//     setupFiles: [ 'src/frameworks/react.ts', 'src/actions.steps.ts', 'src/outcomes.steps.ts' ],
+//     quickpickle: {
+//       worldConfig: {
+//         componentDir: 'tests/react',
+//         screenshotDir: 'tests/react/screenshots',
+//       }
+//     },
+//     environment: 'browser',
+//     browser: {
+//       enabled: true,
+//       screenshotFailures: false,
+//       name: 'chromium',
+//       provider: 'playwright',
+//       ui: showBrowser,
+//       headless: !showBrowser,
+//       instances: [
+//         { browser:'chromium' },
+//       ]
+//     }
+//   }
+// },
 {
   name: 'vue',
   extends: 'vite.config.ts',
@@ -71,6 +73,7 @@ export default [
     quickpickle: {
       worldConfig: {
         componentDir: 'tests/vue',
+        screenshotDir: 'tests/vue/screenshots',
       }
     },
     environment: 'browser',