@quickpickle/vitest-browser 0.0.3 → 0.1.0

package/tests/generic/browser-outcomes.feature

@@ -0,0 +1,138 @@
+Feature: Outcome step definitions on a static page
+
+  As a developer or tester
+  I need to be sure that the step definitions work as promised
+
+  Background: Load the example HTML page
+    Given I render the "Example" component
+
+  Scenario: test if text is visible when a single element matches
+    Then I should see "Item 1"
+    And the text "Item 1" should be visible
+
+  Scenario: test if text is visible when multiple elements match
+    Then I should see "Image"
+    And the text "Image" should be visible
+
+  Scenario: test that text is not visible
+    Then I should not see "FWAH!!!"
+    And the text "FWAH!!!" should not be visible
+
+  Scenario: test that elements are visible with name and role
+    Then I should see an "Email:" textbox
+    And I should see a "Form" heading
+
+  Scenario: test that elements are visible with inexact name and role
+    Then I should see an "orm" heading
+
+  Scenario: test that elements are not visible
+    Then I should not see a "FWAH!!!" textbox
+    And I should not see a "Form" notheading
+
+  Scenario: test that an element hidden with display:none is not visible
+    Then I should not see "Hidden item"
+
+  Scenario: test that an element hidden with visibility:hidden is not visible
+    Then I should not see "Invisible item"
+
+  @todo
+  Scenario: test that elements matching text are visible
+    Then I should see an "h1" element with the text "HTML Test Page"
+    And I should see an "li" with the text "First item"
+
+  @todo
+  Scenario: test that elements matching text are not visible
+    Then I should NOT see an "h1" element with the text "FWAH!!!"
+    And I should NOT see a "fwah" element with the text "FWEEE!!!"
+
+  Rule: All of the ways of addressing an element should be tested
+
+    @todo
+    Example: it works to address an element with css selector
+      Then a "textarea#message" element should be visible
+      And an 'input[type="submit"]' element should be visible
+      And a "ul>li" element should be visible
+      And a "li.hidden" element should be hidden
+
+    @should-fail @todo
+    Example: it FAILS to address an element with a css selector AND a role other than "element"
+      Then a "ul>li" listitem should be visible
+
+    @todo
+    Example: it works to address an element with name and role
+      Then an "XKCD Comic" img should be visible
+      And a "message" textbox should be visible
+      And a "lists" link should be visible
+
+    @should-fail @todo
+    Example: it FAILS to address an element with name and role IF the element is hidden
+      And a "Hidden item" listitem should be hidden
+
+    @todo
+    Example: it works to address an element with css selector and text
+      Then the 'a[href="https://xkcd.com/2928"]' element with the text "2928" should be visible
+      And the "li.hidden" element with the text "Hidden item" should be hidden
+
+  Rule: Testing for invisible elements should be possible
+
+    @todo
+    Scenario: "I should not see" does not ensure presence of invisible elements
+      Then I should not see an "li.absent" with the text "nothing"
+
+    @todo
+    Scenario: "the {string} should be hidden" passes when elements are present and invisible
+      Then the "li.hidden" element should be invisible
+
+    @should-fail @todo
+    Scenario: "the {string} should be hidden" FAILS when elements are not present
+      Then the "li.imaginary" element should be invisible
+
+  Rule: Testing for disabled / enabled state should be possible
+
+    Scenario: test that elements are disabled
+      Then the "From" textbox should be disabled
+
+    Scenario: test that elements are enabled
+      Then the "Email" textbox should be enabled
+
+  Rule: Testing for checked / unchecked state should be possible
+
+    Scenario: Checking a checkbox
+      Then the "I agree" checkbox should be unchecked
+      When I click the "I agree" checkbox
+      Then the "I agree" checkbox should be checked
+
+    Scenario: Checking a radio button
+      Then the "now" radio should be checked
+      When I click the "later" radio
+      Then the "now" radio should be unchecked
+      And the "later" radio should be checked
+
+  Rule: Testing for focused / unfocused state should be possible
+
+    Scenario: navigating through the form
+      When I click the "Name" textbox
+      Then the "Name" textbox should be focused
+      When I activate the "Email" textbox
+      Then the "Name" textbox should be blurred
+      And the "Email" textbox should be focused
+      When I type the following keys: Tab
+      Then the "Email" textbox should be blurred
+      And the "Message" textbox should be focused
+
+  Rule: Testing for form input values should be possible
+
+    Scenario: default values should be available
+      Then the value of the "From" textbox should be "example@example.com"
+      And the value of the "From" textbox should contain "example"
+      And the value of the "From" textbox should not include "FWAH!"
+      And the value of the "From" textbox should NOT be "example"
+      And the value of "From" should contain "example"
+      And the value of "From" should NOT be "example"
+
+    Scenario: date values
+      Then the value of the "Date" textbox should be "2024-10-19"
+      When I focus on the "Date" textbox
+      And I type the following keys: ArrowLeft ArrowLeft ArrowLeft ArrowUp
+      Then the value of the "Date" textbox should be "2024-11-19"
+

package/tests/generic/generic.steps.ts

@@ -0,0 +1,23 @@
+import { Before, Then } from 'quickpickle'
+import type { VitestBrowserWorld } from '../../src/VitestBrowserWorld'
+import { expect } from 'vitest'
+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}`)
+  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}`)
+  try {
+    await expect(commands.readFile(fullpath)).toBeTruthy();
+    throw new Error(`Screenshot ${filepath} should not exist`)
+  }
+  catch(e) {
+    if (e.message === `Screenshot ${filepath} should not exist`) throw e
+  }
+})

package/tests/svelte/Example.svelte

@@ -0,0 +1,153 @@
+<style>
+  .hidden { display:none; }
+  .invisible { visibility:hidden; }
+
+  .faq-item:has(input:checked) .faq-answer {
+    display: block;
+    max-height: 200px; /* Adjust this value based on your content */
+    transition: max-height 0.5s ease-in;
+  }
+  .faq-toggle { cursor: pointer;}
+  .faq-answer {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.3s ease-out;
+  }
+  .faq-item {
+    cursor: pointer;
+  }
+  .faq-item input[type="checkbox"] {
+    display: none;
+  }
+</style>
+
+<header>
+  <h1>HTML Test Page</h1>
+  <nav>
+    <ul>
+      <li><a href="#text">Text</a></li>
+      <li><a href="#lists">Lists</a></li>
+      <li><a href="#table">Table</a></li>
+      <li><a href="#form">Form</a></li>
+      <li><a href="#faq">FAQ</a></li>
+      <li><a href="#image">Image</a></li>
+    </ul>
+  </nav>
+</header>
+
+<main>
+  <section id="text">
+    <h2>Text Elements</h2>
+    <p>This is a paragraph with <strong>bold</strong> and <em>italic</em> text.</p>
+    <p>Here's a <a href="https://www.example.com">link</a> to an example website.</p>
+    <blockquote>This is a blockquote.</blockquote>
+  </section>
+
+  <section id="lists">
+    <h2>Lists</h2>
+    <h3>Unordered List</h3>
+    <ul>
+      <li>Item 1</li>
+      <li>Item 2</li>
+      <li>Item 3</li>
+    </ul>
+    <h3>Ordered List</h3>
+    <ol>
+      <li>First item</li>
+      <li>Second item</li>
+      <li>Third item</li>
+      <li class="hidden">Hidden item</li>
+      <li class="invisible">Invisible item</li>
+    </ol>
+  </section>
+
+  <section id="table">
+    <h2>Table</h2>
+    <table border="1">
+      <thead>
+        <tr>
+          <th>Header 1</th>
+          <th>Header 2</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Row 1, Cell 1</td>
+          <td>Row 1, Cell 2</td>
+        </tr>
+        <tr>
+          <td>Row 2, Cell 1</td>
+          <td>Row 2, Cell 2</td>
+        </tr>
+      </tbody>
+    </table>
+  </section>
+
+  <section id="form">
+    <h2>Form</h2>
+    <form action="#" method="post">
+      <label for="name">Name:</label>
+      <input type="text" id="name" name="name" required><br><br>
+
+      <label for="email">Email:</label>
+      <input type="email" id="email" name="email" required><br><br>
+
+      <label for="message">Message:</label><br>
+      <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>
+
+      <label for="from">From:</label>
+      <input type="text" id="from" name="from" disabled value="example@example.com"><br><br>
+
+      <label for="date">Date:</label>
+      <input type="date" id="date" name="date" value="2024-10-19"><br><br>
+
+      <label for="number">Number:</label>
+      <input type="number" id="number" name="number"><br><br>
+
+      <label for="color">Color:</label>
+      <select id="color" name="color">
+        <option value="">- none -</option>
+        <option value="red">Red</option>
+        <option value="green">Green</option>
+        <option value="blue">Blue</option>
+      </select><br><br>
+
+      <div>Send this message:</div>
+      <input type="radio" name="sendtime" id="sendtime-now" value="now" checked>
+      <label for="sendtime-now">Now</label>
+      <input type="radio" name="sendtime" id="sendtime-later" value="later">
+      <label for="sendtime-later">Later</label><br><br>
+
+      <input type="checkbox" name="tnc" id="tnc">
+      <label for="tnc">I agree to the terms and conditions</label><br><br>
+
+      <input type="submit" value="Submit">
+    </form>
+  </section>
+
+  <section id="faq">
+    <h2>FAQ</h2>
+    <div class="faq-item" id="faq-item-1">
+      <label for="faq-1" class="faq-toggle">
+        <input type="checkbox" id="faq-1" class="faq-toggle">
+        <h3>Do CSS transitions affect Playwright awaits?</h3>
+      </label>
+      <p class="faq-answer">
+        AI says: "CSS transitions can affect Playwright awaits if not handled properly.
+        Playwright's default waiting mechanism might not account for CSS transitions,
+        potentially leading to flaky tests. It's important to use appropriate waiting
+        strategies or disable transitions in test environments to ensure consistency."
+      </p>
+    </div>
+  </section>
+
+  <section id="image">
+    <h2>Image</h2>
+    <img src="https://imgs.xkcd.com/comics/software_testing_day.png" alt="XKCD Comic 2928: Software Testing Day" width="320">
+    <p>Image source: <a href="https://xkcd.com/2928">xkcd.com/2928</a></p>
+  </section>
+</main>
+
+<footer>
+  <p>© 2023 HTML Test Page. All rights reserved.</p>
+</footer>

package/vite.config.ts

@@ -5,4 +5,12 @@ export default {
   optimizeDeps: {
     exclude: ['unicorn-magic'],
   },
+  test: {
+    quickpickle: {
+      failTags: ['@fail', '@fails', '@should-fail'],
+      explodeTags: [
+        ['@tag1', '@tag2'],
+      ],
+    }
+  }
 }

package/vitest.workspace.ts

@@ -10,17 +10,10 @@ export default [
   name: 'svelte',
   extends: `vite.config.ts`,
   plugins: [svelte()],
-  optimizeDeps: {
-    include: [
-      'vue',
-      'react',
-      'svelte',
-    ],
-  },
   test: {
     name: 'svelte',
-    include: [ `tests/svelte/*.feature` ],
-    setupFiles: [ `src/frameworks/svelte.ts`, 'src/actions.steps.ts', 'src/outcomes.steps.ts' ],
+    include: [ `tests/svelte/*.feature`, `tests/generic/*.feature` ],
+    setupFiles: [ `src/frameworks/svelte.ts`, 'src/actions.steps.ts', 'src/outcomes.steps.ts', 'tests/generic/generic.steps.ts' ],
     quickpickle: {
       worldConfig: {
         componentDir: 'tests/svelte',
@@ -29,6 +22,7 @@ export default [
     environment: 'browser',
     browser: {
       enabled: true,
+      screenshotFailures: false,
       name: 'chromium',
       provider: 'playwright',
       ui: showBrowser,
@@ -55,6 +49,7 @@ export default [
     environment: 'browser',
     browser: {
       enabled: true,
+      screenshotFailures: false,
       name: 'chromium',
       provider: 'playwright',
       ui: showBrowser,
@@ -81,6 +76,7 @@ export default [
     environment: 'browser',
     browser: {
       enabled: true,
+      screenshotFailures: false,
       name: 'chromium',
       provider: 'playwright',
       ui: showBrowser,