test: refactor VRT workflow and preview page

test/visual/index.html

@@ -1,25 +1,44 @@
 <script type="module">
     import '@spectrum-web-components/story-decorator/sp-story-decorator.js';
-    import { render } from 'lit';
+    import { html, render } from 'lit';
 
     const queryString = window.location.search;
     const urlParams = new URLSearchParams(queryString);
 
     const packageName = urlParams.get('p') || 'action-bar';
     const file = urlParams.get('f') || 'action-bar';
-    const story = urlParams.get('s') || 'Default';
-    const vrt = await import(
+    const storyName = urlParams.get('s') || 'Default';
+    const story = await import(
         `../../packages/${packageName}/stories/${file}.stories.js`
     ).then((stories) => {
-        return stories[story];
+        return stories[storyName];
     });
 
+    const args = {
+        ...(story.args || {}),
+    };
+    const decorators = [...(story.decorators || [])];
+    let decoratedStory = () =>
+        html`
+            ${story(args)}
+        `;
+    const decorate = (story, decorator) => {
+        return () => decorator(story, { args });
+    };
+
+    while (decorators.length) {
+        const decorator = decorators.shift();
+        decoratedStory = decorate(decoratedStory, decorator);
+    }
+
     const decorator = document.createElement('sp-story-decorator');
+    decorator.reduceMotion = true;
+    decorator.screenshot = true;
     document.body.append(decorator);
-    render(vrt(), decorator);
+    render(decoratedStory(), decorator);
 </script>
 <style>
     body {
-        margin: 0;
+        margin: 0 !important;
     }
 </style>

test/visual/test.ts

@@ -58,6 +58,16 @@ export type TestsType = StoriesType & {
     };
 };
 
+async function testReady(test: StoryDecorator, retry = 0): Promise<void> {
+    await waitUntil(
+        () => test.ready,
+        `Wait for decorator to become ready on try number ${retry + 1}`,
+        {
+            timeout: 20000,
+        }
+    );
+}
+
 export const test = (
     tests: TestsType,
     name: string,
@@ -95,24 +105,20 @@ export const test = (
                 ) => {
                     return () => decorator(story, { args });
                 };
-
                 while (decorators.length) {
                     const decorator = decorators.shift();
                     decoratedStory = decorate(decoratedStory, decorator);
                 }
                 render(decoratedStory(), test);
-                await waitUntil(
-                    () => test.ready,
-                    'Wait for decorator to become ready...',
-                    { timeout: 20000 }
-                );
+                await testReady(test);
                 await nextFrame();
                 const testName = `${color} - ${scale} - ${dir} - ${name} - ${story}`;
                 const allowedRetries = 4;
                 let retries = allowedRetries;
                 let passed = false;
                 while (retries && !passed) {
                     retries -= 1;
+                    const retry = allowedRetries - retries;
                     try {
                         await visualDiff(test, testName);
                         passed = true;
@@ -136,11 +142,7 @@ export const test = (
                             test = await fixture<StoryDecorator>(wrap());
                             await elementUpdated(test);
                             render(decoratedStory(), test);
-                            await waitUntil(
-                                () => test.ready,
-                                'Wait for decorator to become ready...',
-                                { timeout: 20000 }
-                            );
+                            await testReady(test, retry);
                             await nextFrame();
                             if (!retries) {
                                 try {