Add support for skipping examples

This will be similar to the feature we have for Cypress/Playwright, where you can tell Happo to skip certain examples. The idea here is that you can provide an array of `component`, `variant` items that will inform Happo to skip over certain stories and variants. https://docs.happo.io/docs/cypress#skipping-snapshots
happo · May 18, 2024 · 3a490e4 · 3a490e4
1 parent db08927
commit 3a490e4
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 2 deletions.
diff --git a/.happo.js b/.happo.js
@@ -37,6 +37,14 @@ module.exports = {
       configDir: '.storybook',
       outputDir: '.happo-out',
       usePrebuiltPackage: !!process.env.HAPPO_USE_PREBUILT_PACKAGE,
+      skip: () => {
+        return [
+          {
+            component: 'Stories',
+            variant: 'Button With Text',
+          },
+        ];
+      },
     }),
   ],
   stylesheets: [path.resolve(__dirname, 'test.css')],

diff --git a/index.js b/index.js
@@ -4,12 +4,22 @@ const path = require('path');
 
 const rimraf = require('rimraf');
 
-const getStorybook7BuildCommandParts =
-  require('./getStorybook7BuildCommandParts');
+const getStorybook7BuildCommandParts = require('./getStorybook7BuildCommandParts');
 const getStorybookVersionFromPackageJson = require('./getStorybookVersionFromPackageJson');
 
 const { HAPPO_DEBUG, HAPPO_STORYBOOK_BUILD_COMMAND } = process.env;
 
+function validateSkipped(skipped) {
+  if (!Array.isArray(skipped)) {
+    throw new Error(`The \`skip\` option didn't provide an array`);
+  }
+  if (skipped.some((item) => !item.component || !item.variant)) {
+    throw new Error(
+      `Each item provided by the \`skip\` option need a \`component\` and a \`variant\` property`,
+    );
+  }
+}
+
 function resolveBuildCommandParts() {
   if (HAPPO_STORYBOOK_BUILD_COMMAND) {
     return HAPPO_STORYBOOK_BUILD_COMMAND.split(' ');
@@ -111,6 +121,7 @@ module.exports = function happoStorybookPlugin({
   staticDir,
   outputDir = '.out',
   usePrebuiltPackage = false,
+  skip,
 } = {}) {
   return {
     generateStaticPackage: async () => {
@@ -124,6 +135,13 @@ module.exports = function happoStorybookPlugin({
         );
       }
       try {
+        const skipped =
+          typeof skip === 'function'
+            ? await skip()
+            : Array.isArray(skip)
+              ? skip
+              : [];
+        validateSkipped(skipped);
         const iframeContent = fs.readFileSync(iframePath, 'utf-8');
         fs.writeFileSync(
           iframePath,
@@ -132,6 +150,7 @@ module.exports = function happoStorybookPlugin({
             `<head>
             <meta name="viewport" content="width=device-width, initial-scale=1">
             <script type="text/javascript">window.__IS_HAPPO_RUN = true;</script>
+            <script type="text/javascript">window.happoSkipped = ${JSON.stringify(skipped)};</script>
           `,
           ),
         );

diff --git a/src/register.js b/src/register.js
@@ -216,6 +216,18 @@ window.happo.nextExample = async () => {
   } = examples[currentIndex];
 
   let variant = rawVariant;
+  if (
+    window.happoSkipped &&
+    window.happoSkipped.some(
+      (item) => item.component === component && item.variant === variant,
+    )
+  ) {
+    console.log(
+      `Skipping ${component}, ${variant} since it is in the skip list`,
+    );
+    return { component, variant, skipped: true };
+  }
+
   let pausedAtStep;
 
   try {