@quickpickle/vitest-browser 0.1.0 → 0.2.1

package/src/actions.steps.ts

@@ -148,10 +148,10 @@ When('I uncheck (the ){string}( checkbox)( box)', async function (world:VitestBr
 // })
 
 When('I wait (for ){int}ms', async function (world:VitestBrowserWorld, num) {
-  await world.waitForTimeout(num)
+  await world.wait(num)
 })
 When('I wait (for ){float} second(s)', async function (world:VitestBrowserWorld, num) {
-  await world.waitForTimeout(num * 1000)
+  await world.wait(num * 1000)
 })
 
 // ================

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,79 +1,41 @@
-@todo
 Feature: Basic tests of Vitest Browser Mode and steps
 
-  @skip-ci
+  Background:
+    Given I render the "Example" component
+
   Rule: Visual regression testing must be supported
 
+    @soft
+    Example: New visual regression test
+      Given the screenshot "example" does not exist
+      When the screenshot "example" should match
+      Then the screenshot "example" should exist--delete it
+      And there should have been 1 error
+
     Example: Passing visual regression test
-      When I render the "Example" component
-      Then the screenshot should match
+      Given 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
-    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
-
-  @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:
-          mask:
-            - form
-        ```
-      Then the screenshot should match
-
-    Scenario: Setting a clip area
-      Given I render the "Example" component
-      And the following world config:
-        ```yaml
-          screenshotOptions:
-            clip:
-              x: 0
-              y: 60
-              width: 300
-              height: 180
-        ```
-      Then the screenshot should match
-
-  Rule: Screenshots should be placed in the proper directory
-
-    Scenario: Taking a screenshot
-      When I take a screenshot
-      Then the screenshot "Feature Basic tests of Vitest Browser Mode and steps_Taking a screenshot_01.png" should exist--delete it
-
-    Scenario: Taking a named screenshot
-      When I take a screenshot named "test"
-      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
-
-    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
-
+    @soft
+    Example: Failing visual regression test (different image content)
+      Given the screenshot "visual-regression-example-page" should exist
+      When headings have a green background
+      And the screenshot "visual-regression-example-page" should match
+      Then error 1 should contain "images were too different"
+      And there should have been 1 error
+
+    @soft
+    Example: Failing visual regression test (different image size)
+      Given the screenshot "visual-regression-example-page" should exist
+      When the screenshot "visual-regression-example-page" of the "Image" header should match
+      Then error 1 should contain "sizes do not match"
+      And there should have been 1 error

package/tests/generic/generic.steps.ts

@@ -1,4 +1,4 @@
-import { Before, Then } from 'quickpickle'
+import { Before, Then, When } from 'quickpickle'
 import type { VitestBrowserWorld } from '../../src/VitestBrowserWorld'
 import { expect } from 'vitest'
 import { commands } from '@vitest/browser/context'
@@ -7,17 +7,38 @@ import { commands } from '@vitest/browser/context'
 
 // Screenshots
 Then('the screenshot {string} should exist(--delete it)', async function (world:VitestBrowserWorld, filepath:string) {
-  let fullpath = world.fullPath(`${world.screenshotDir}/${filepath}`)
+  let fullpath = world.fullPath(`${world.screenshotDir}/${filepath}.png`)
   await expect(commands.readFile(fullpath)).toBeTruthy();
   if (world.info.step?.match(/--delete it$/)) await commands.removeFile(fullpath)
 })
-Then('the screenshot {string} should not exist', async function (world:VitestBrowserWorld, filepath:string) {
-  let fullpath = world.fullPath(`${world.screenshotDir}/${filepath}`)
+Then('the screenshot {string} should/does not exist', async function (world:VitestBrowserWorld, filepath:string) {
+  let fullpath = world.fullPath(`${world.screenshotDir}/${filepath}.png`)
   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('(the )error {int} should contain {string}', async (world, idx, expected) => {
+  let error = world.info.errors[idx-1]
+  await expect(error.message).toContain(expected)
+})
+Then('(the )error {int} should contain the following text:', async (world, idx, expected) => {
+  let error = world.info.errors[idx-1]
+  await expect(error.message).toContain(expected.toString())
+})
+Then('the stack for error {int} should contain {string}', async (world, idx, expected) => {
+  let stack = world.info.errors[idx-1].stack.split('\n')[0]
+  await expect(stack).toContain(expected)
+})
+Then('there should have been {int} error(s)', async (world:VitestBrowserWorld, int:number) => {
+  expect(world.info.errors.length).toBe(int)
+  world.info.errors = []
+})
+When('headings have a {word} background', async (world:VitestBrowserWorld, color:string) => {
+  await world.page.getByRole('heading').all().map(el => {
+    el.element().setAttribute('style', `background-color: ${color};`)
+  })
+})

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',