Merge pull request #55 from chromaui/steven/cypress-api

Cypress: User-facing API

src/cypress-api/index.ts

@@ -63,7 +63,7 @@ let watcher: Watcher = null;
 let host = '';
 let port = 0;
 
-export const setupNetworkListener = async (): Promise<null> => {
+const setupNetworkListener = async (): Promise<null> => {
   try {
     const { webSocketDebuggerUrl } = await Version({
       host,
@@ -85,7 +85,7 @@ export const setupNetworkListener = async (): Promise<null> => {
   return null;
 };
 
-export const saveArchives = (archiveInfo: WriteParams) => {
+const saveArchives = (archiveInfo: WriteParams) => {
   return new Promise((resolve) => {
     // the watcher's archives come from the server, everything else (DOM snapshots, test info, etc) comes from the browser
     // notice we're not calling + awaiting watcher.idle() here...
@@ -97,6 +97,25 @@ export const saveArchives = (archiveInfo: WriteParams) => {
   });
 };
 
+interface TaskParams {
+  action: 'setup-network-listener' | 'save-archives';
+  payload?: any;
+}
+
+// Handles all server-side tasks, dispatching each to its proper handler.
+// Why? So users don't have to register all these individual tasks
+// (they can just import and register prepareArchives)
+export const prepareArchives = async ({ action, payload }: TaskParams) => {
+  switch (action) {
+    case 'setup-network-listener':
+      return setupNetworkListener();
+    case 'save-archives':
+      return saveArchives(payload);
+    default:
+      return null;
+  }
+};
+
 // We use this lifecycle hook because we need to know what host and port Chrome Devtools Protocol is listening at.
 export const onBeforeBrowserLaunch = (
   // we don't use the browser parameter but we're keeping it here in case we'd ever need to read from it
@@ -125,3 +144,11 @@ export const onBeforeBrowserLaunch = (
 
   return launchOptions;
 };
+
+export const installPlugin = (on: any) => {
+  // these events are run on the server (in Node)
+  on('task', {
+    prepareArchives,
+  });
+  on('before:browser:launch', onBeforeBrowserLaunch);
+};

src/cypress-api/support.ts

@@ -7,7 +7,7 @@ beforeEach(() => {
   // then cleaned up before the next test is run
   // (see https://docs.cypress.io/guides/core-concepts/variables-and-aliases#Aliases)
   cy.wrap([]).as('manualSnapshots');
-  cy.task('setupNetworkListener');
+  cy.task('prepareArchives', { action: 'setup-network-listener' });
 });
 
 afterEach(() => {
@@ -18,13 +18,16 @@ afterEach(() => {
     cy.get('@manualSnapshots').then((manualSnapshots = []) => {
       cy.url().then((url) => {
         // pass the snapshot to the server to write to disk
-        cy.task('saveArchives', {
-          testTitle: Cypress.currentTest.title,
-          domSnapshots: [...manualSnapshots, snap],
-          chromaticStorybookParams: {
-            diffThreshold: Cypress.env('diffThreshold'),
+        cy.task('prepareArchives', {
+          action: 'save-archives',
+          payload: {
+            testTitle: Cypress.currentTest.title,
+            domSnapshots: [...manualSnapshots, snap],
+            chromaticStorybookParams: {
+              diffThreshold: Cypress.env('diffThreshold'),
+            },
+            pageUrl: url,
           },
-          pageUrl: url,
         });
       });
     });

tests/cypress.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig } from 'cypress';
-import { setupNetworkListener, onBeforeBrowserLaunch, saveArchives } from '../src/cypress-api';
+import { installPlugin } from '../src/cypress-api';
 
 export default defineConfig({
   // needed since we use common mock images between Cypress and Playwright
@@ -8,12 +8,7 @@ export default defineConfig({
   e2e: {
     baseUrl: 'http://localhost:3000',
     setupNodeEvents(on, config) {
-      // these events are run on the server (in Node)
-      on('task', {
-        setupNetworkListener,
-        saveArchives,
-      });
-      on('before:browser:launch', onBeforeBrowserLaunch);
+      installPlugin(on);
     },
   },
 });