test(tooltip): add wtr visual regression example

.gitignore

@@ -81,6 +81,7 @@ dist/
 /backstop_data/bitmaps_test/
 /backstop_data/bitmaps_reference/
 /backstop_data/html_report/
+/screenshots/**/failed/**
 
 # GitHub Actions #
 ###############

README.md

@@ -44,13 +44,32 @@ Stacks uses [Web Test Runner](https://modern-web.dev/docs/test-runner/overview/)
 
 Execute the component tests suite via running:
 ```sh
-$ npm test
+npm test
 ```
 or if you prefer watch mode run:
 ```sh
-$ npm run test:watch
+npm run test:watch
 ```
+
 ### Visual Regression Tests
+🚧 Work in Progress 🚧
+
+This [Web Test Runner plugin](https://www.npmjs.com/package/@web/test-runner-visual-regression) is used to run visual regression tests. [DOM Testing Library](https://testing-library.com/docs/dom-testing-library/intro).
+Visual regression tests end with this suffix `*.visual.test.ts`.
+
+Execute the visual regression tests suite via running:
+```sh
+npm run test:visual
+```
+
+Update the visual baseline via:
+```sh
+npm run test:visual:update
+```
+
+Failing tests (including diffs) can be found under `screenshots/[browser]/failed/` folders.
+
+### Visual Regression Tests (Legacy)
 Stacks has implemented visual regression testing with [Backstop](https://github.com/garris/BackstopJS). To test if your new feature introduces visual regressions, run `npm run test:regression` in a new Terminal window while Stacks is running. After the tests have run, a new browser window with any regressions will show. If the regressions are desired, you can run `npm run approve` to establish the new baseline.
 
 Individual routes to test are found in [backstop.json](/backstop.json)

lib/test/tooltip.visual.test.ts

@@ -0,0 +1,31 @@
+import { html, fixture } from "@open-wc/testing";
+import { screen } from "@testing-library/dom";
+import userEvent from "@testing-library/user-event";
+import { visualDiff } from "@web/test-runner-visual-regression";
+import "../ts/index";
+
+const user = userEvent.setup();
+
+describe("tooltip", () => {
+    it("should not introduce visual regressions", async () => {
+        const wrapper = await fixture(html`
+            <div style="height: 100px; display: inline-block;">
+                <button
+                    class="s-btn s-btn__filled"
+                    role="button"
+                    data-controller="s-tooltip"
+                    title="tooltip content"
+                    data-s-tooltip-placement="bottom-start"
+                >
+                    Hover tooltip popover
+                </button>
+            </div>
+        `);
+
+        const trigger = screen.getByRole("button");
+        await user.hover(trigger);
+        await screen.findByRole("tooltip");
+
+        await visualDiff(wrapper, "tooltip");
+    });
+});