Merge pull request #1013 from gemini-testing/sp.storybook-example

chore(storybook-example): add example with storybook screenshot tests

examples/storybook-autoscreenshots/.gitignore

@@ -0,0 +1,10 @@
+# dependencies
+/node_modules
+
+# misc
+.DS_Store
+
+# reports
+/testplane-report
+.testplane
+*storybook.log

examples/storybook-autoscreenshots/.nvmrc

@@ -0,0 +1 @@
+20

examples/storybook-autoscreenshots/.storybook/main.ts

@@ -0,0 +1,17 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+    stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+    addons: [
+        "@storybook/addon-onboarding",
+        "@storybook/addon-links",
+        "@storybook/addon-essentials",
+        "@chromatic-com/storybook",
+        "@storybook/addon-interactions",
+    ],
+    framework: {
+        name: "@storybook/react-vite",
+        options: {},
+    },
+};
+export default config;

examples/storybook-autoscreenshots/.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+    parameters: {
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+            },
+        },
+    },
+};
+
+export default preview;

examples/storybook-autoscreenshots/.testplane.conf.ts

@@ -0,0 +1,55 @@
+import path from "path";
+import {getStoryFile} from "@testplane/storybook"
+
+export default {
+    gridUrl: "http://localhost:4444/wd/hub",
+    baseUrl: "http://localhost",
+    pageLoadTimeout: 0,
+    httpTimeout: 60000,
+    testTimeout: 90000,
+    resetCursor: false,
+    // allows you to store references next to your story files
+    screenshotsDir: (test) => {
+        const storyFilePath = getStoryFile(test);
+        const storyFileDirPath = path.dirname(storyFilePath);
+        const storyFileName = path.basename(storyFilePath);
+
+        return path.join(
+            storyFileDirPath,
+            `${storyFileName}-screens`,
+            test.id,
+            test.browserId
+        );
+    },
+    sets: {
+        desktop: {
+            files: [
+                "testplane-tests/**/*.testplane.(t|j)s"
+            ],
+            browsers: [
+                "chrome"
+            ]
+        }
+    },
+    browsers: {
+        chrome: {
+            automationProtocol: "devtools",
+            headless: true,
+            desiredCapabilities: {
+                browserName: "chrome"
+            }
+        }
+    },
+    plugins: {
+        // https://github.com/gemini-testing/testplane-storybook
+        "@testplane/storybook": {},
+
+        // https://github.com/gemini-testing/html-reporter
+        "html-reporter/testplane": {
+            enabled: true,
+            path: "testplane-report",
+            defaultView: "all",
+            diffMode: "3-up-scaled"
+        }
+    }
+};

examples/storybook-autoscreenshots/README.md

@@ -0,0 +1,42 @@
+# Visual testing with Storybook
+
+A project with an example of using automatic screenshot testing of Storybook components.
+
+## How to start
+
+Install dependencies:
+
+```bash
+nvm use
+npm ci
+```
+
+Run storybook-tests with `--update-refs` option to generate reference image at first time:
+
+```
+npx testplane --storybook --update-refs
+```
+
+You can also use GUI-mode to view results, launch/relaunch tests and accept/update screenshots:
+
+```
+npx testplane gui --storybook
+```
+
+Storybook examples will be available at `http://localhost:6006/` after the `npm run storybook` command has been run.
+
+## Project structure
+
+
+```
+|____.storybook // storybook config
+|____.testplane.conf.ts // file with testplane configuration
+|____testplane-tests // directory with testplane test example (without storybook)
+|____src
+| |____stories // directory with your stories
+| | |____Button.stories.ts // file with a single story for the Button component
+| | |____Button.stories.ts-screens // directory where your screenshots for the Button tests will be stored
+| | |____Page.stories.ts
+| | |____Page.stories.ts-screens
+
+```

examples/storybook-autoscreenshots/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>