Merge pull request #112 from happo/hide-logs

Allow logs to be hidden
happo · Apr 23, 2024 · e0bad97 · e0bad97
2 parents 4c67374 + 364c1c4
commit e0bad97
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 64 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -1,16 +1,14 @@
 version: 2.1
 orbs:
-  node: circleci/node@5.0.2
+  node: circleci/node@5.2.0
   cypress: cypress-io/[email protected]
 executors:
-  node-16:
+  node:
     docker:
-      - image: 'cypress/base:16.14.2'
+      - image: 'cypress/base:20.12.2'
 jobs:
   build-and-test:
-    executor:
-      name: node/default
-      tag: '16.13.2'
+    executor: node
     steps:
       - checkout
       - node/install-packages:
@@ -24,11 +22,11 @@ workflows:
   cypress:
     jobs:
       - cypress/install:
-          executor: node-16
+          executor: node
           yarn: true
 
       - cypress/run:
-          executor: node-16
+          executor: node
           name: cypress-download-all
           requires:
             - cypress/install
@@ -37,7 +35,7 @@ workflows:
           command-prefix: 'HAPPO_PROJECT=download-all HAPPO_DOWNLOAD_ALL=true yarn happo-e2e -- -- yarn'
 
       - cypress/run:
-          executor: node-16
+          executor: node
           name: cypress-local-snapshots
           requires:
             - cypress/install
@@ -46,7 +44,7 @@ workflows:
           command-prefix: 'CYPRESS_HAPPO_USE_LOCAL_SNAPSHOTS=true HAPPO_PROJECT=local-snapshots yarn happo-e2e -- -- yarn'
 
       - cypress/run:
-          executor: node-16
+          executor: node
           name: cypress-allow-failures
           requires:
             - cypress/install
@@ -55,7 +53,7 @@ workflows:
           command-prefix: 'CYPRESS_INTRODUCE_FAILING_ASSERTION=true HAPPO_PROJECT=allow-failures yarn happo-e2e -- --allow-failures -- yarn'
 
       - cypress/run:
-          executor: node-16
+          executor: node
           name: cypress-parallel
           requires:
             - cypress/install
@@ -69,7 +67,7 @@ workflows:
             - run: 'HAPPO_PROJECT=parallel HAPPO_NONCE=${CIRCLE_WORKFLOW_ID} yarn happo-e2e -- finalize'
 
       - cypress/run:
-          executor: node-16
+          executor: node
           name: cypress-parallel-allow-failures
           requires:
             - cypress/install

diff --git a/cypress/integration/home_page_spec.js b/cypress/integration/home_page_spec.js
@@ -1,14 +1,17 @@
 describe('The Home Page', () => {
   it('successfully loads', () => {
-    cy.visit('/');
-    cy.wait(100);
-    cy.scrollTo('bottom', { duration: 100 });
-    cy.scrollTo('top');
+    cy.visit('/', { log: false });
+    cy.wait(100, { log: false });
+    cy.scrollTo('bottom', { duration: 100, log: false });
+    cy.scrollTo('top', { log: false });
 
-    cy.happoHideDynamicElements({ selectors: ['.hide-me'] });
+    cy.happoHideDynamicElements({ selectors: ['.hide-me'], log: false });
 
-    cy.get('body').happoScreenshot({ component: 'Full-page' });
-    cy.get('body').happoScreenshot({
+    cy.get('body', { log: false }).happoScreenshot({
+      component: 'Full-page',
+      log: false,
+    });
+    cy.get('body', { log: false }).happoScreenshot({
       component: 'Full-page',
       variant: 'replaced-card',
       transformDOM: {
@@ -19,8 +22,9 @@ describe('The Home Page', () => {
           return div;
         },
       },
+      log: false,
     });
-    cy.get('body').happoScreenshot({
+    cy.get('body', { log: false }).happoScreenshot({
       component: 'Full-page',
       variant: 'replaced-images',
       transformDOM: {
@@ -31,72 +35,94 @@ describe('The Home Page', () => {
           return div;
         },
       },
+      log: false,
     });
-    cy.get('.card').happoScreenshot({ component: 'Card' });
-    cy.get('.card,.button').happoScreenshot({
+    cy.get('.card', { log: false }).happoScreenshot({
+      component: 'Card',
+      log: false,
+    });
+    cy.get('.card,.button', { log: false }).happoScreenshot({
       includeAllElements: true,
       component: 'Card + Button',
+      log: false,
     });
 
-    cy.happoHideDynamicElements({ selectors: ['.hide-me'] });
-    cy.get('.dynamic-text').happoScreenshot({
+    cy.happoHideDynamicElements({ selectors: ['.hide-me'], log: false });
+    cy.get('.dynamic-text', { log: false }).happoScreenshot({
       component: 'Dynamic text',
+      log: false,
     });
 
-    cy.happoHideDynamicElements({ replace: true });
-    cy.get('.dynamic-text').happoScreenshot({
+    cy.happoHideDynamicElements({ replace: true, log: false });
+    cy.get('.dynamic-text', { log: false }).happoScreenshot({
       component: 'Dynamic text',
       variant: 'replaced',
+      log: false,
     });
 
-    cy.get('.scrollcontainer')
-      .scrollTo('center')
-      .happoScreenshot({ component: 'Scrollcontainer', variant: 'center' });
+    cy.get('.scrollcontainer', { log: false })
+      .scrollTo('center', { log: false })
+      .happoScreenshot({
+        component: 'Scrollcontainer',
+        variant: 'center',
+        log: false,
+      });
 
-    cy.visit('/');
-    cy.happoHideDynamicElements({ replace: true, selectors: ['.hide-me'] });
-    cy.wait(100);
-    cy.get('.button').happoScreenshot({
+    cy.visit('/', { log: false });
+    cy.happoHideDynamicElements({
+      replace: true,
+      selectors: ['.hide-me'],
+      log: false,
+    });
+    cy.wait(100, { log: false });
+    cy.get('.button', { log: false }).happoScreenshot({
       component: 'Button',
       variant: 'default',
       targets: [
         'chromeSmall',
         { name: 'firefoxSmall', browser: 'firefox', viewport: '400x800' },
       ],
+      log: false,
     });
-    cy.get('.card').happoScreenshot({
+    cy.get('.card', { log: false }).happoScreenshot({
       component: 'Card',
       variant: 'firefox-only',
       targets: [
         { name: 'firefoxSmall', browser: 'firefox', viewport: '400x800' },
       ],
+      log: false,
     });
 
-    cy.get('.images').happoScreenshot({
+    cy.get('.images', { log: false }).happoScreenshot({
       component: 'Images',
       variant: 'multiple',
+      log: false,
     });
 
-    cy.get('.button').happoScreenshot();
-    cy.get('.button').happoScreenshot();
-    cy.get('.button').happoScreenshot();
+    cy.get('.button', { log: false }).happoScreenshot({ log: false });
+    cy.get('.button', { log: false }).happoScreenshot({ log: false });
+    cy.get('.button', { log: false }).happoScreenshot();
 
-    cy.get('[data-test="untainted-canvas"]').happoScreenshot({
+    cy.get('[data-test="untainted-canvas"]', { log: false }).happoScreenshot({
       component: 'Canvas',
       variant: 'untainted',
+      log: false,
     });
-    cy.get('.responsive-canvas-wrapper').happoScreenshot({
+    cy.get('.responsive-canvas-wrapper', { log: false }).happoScreenshot({
       component: 'Canvas',
       variant: 'wrapped, responsive',
       responsiveInlinedCanvases: true,
+      log: false,
     });
-    cy.get('[data-test="tainted-canvas"]').happoScreenshot({
+    cy.get('[data-test="tainted-canvas"]', { log: false }).happoScreenshot({
       component: 'Canvas',
       variant: 'tainted',
+      log: false,
     });
-    cy.get('[data-test="empty-canvas"]').happoScreenshot({
+    cy.get('[data-test="empty-canvas"]', { log: false }).happoScreenshot({
       component: 'Canvas',
       variant: 'empty',
+      log: false,
     });
   });
 });
diff --git a/index.js b/index.js
@@ -21,13 +21,13 @@ function resolveTargetName() {
   return `${Cypress.browser.name}-${viewportWidth}x${viewportHeight}`;
 }
 
-function takeLocalSnapshot({ originalSubject, component, variant, options }) {
+function takeLocalSnapshot({ originalSubject, component, variant, targets, options }) {
   const imageId = `${Math.random()}`.slice(2);
   cy.task('happoRegisterLocalSnapshot', {
     imageId,
     component,
     variant,
-    targets: options.targets,
+    targets,
     target: resolveTargetName(),
   });
   cy.wrap(originalSubject, { log: false }).first().screenshot(imageId, options);
@@ -37,32 +37,38 @@ Cypress.Commands.add(
   'happoScreenshot',
   { prevSubject: true },
   (originalSubject, options = {}) => {
-    const component = options.component || cy.state('runnable').fullTitle();
-    const variant = options.variant || 'default';
+    const {
+      component = cy.state('runnable').fullTitle(),
+      variant = 'default',
+      responsiveInlinedCanvases,
+      includeAllElements,
+      transformDOM,
+      targets,
+      ...otherOptions
+    } = options;
 
     if (config.localSnapshots) {
       return takeLocalSnapshot({
         originalSubject,
         component,
         variant,
-        options,
+        targets,
+        options: otherOptions,
       });
     }
 
     const doc = originalSubject[0].ownerDocument;
 
-    const responsiveInlinedCanvases =
-      typeof options.responsiveInlinedCanvases === 'boolean'
-        ? options.responsiveInlinedCanvases
+    const resInCan =
+      typeof responsiveInlinedCanvases === 'boolean'
+        ? responsiveInlinedCanvases
         : config.responsiveInlinedCanvases;
 
     const domSnapshot = takeDOMSnapshot({
       doc,
-      element: options.includeAllElements
-        ? originalSubject
-        : originalSubject[0],
-      responsiveInlinedCanvases,
-      transformDOM: options.transformDOM,
+      element: includeAllElements ? originalSubject : originalSubject[0],
+      responsiveInlinedCanvases: resInCan,
+      transformDOM: transformDOM,
       handleBase64Image: ({ src, base64Url }) => {
         const rawBase64 = base64Url.replace(/^data:image\/png;base64,/, '');
         const chunks = chunked(rawBase64, config.canvasChunkSize);
@@ -75,18 +81,22 @@ Cypress.Commands.add(
             src,
             isFirst,
             isLast,
-          });
+          }, otherOptions);
         }
       },
     });
 
-    cy.task('happoRegisterSnapshot', {
-      timestamp: Date.now(),
-      component,
-      variant,
-      targets: options.targets,
-      ...domSnapshot,
-    });
+    cy.task(
+      'happoRegisterSnapshot',
+      {
+        timestamp: Date.now(),
+        component,
+        variant,
+        targets,
+        ...domSnapshot,
+      },
+      otherOptions,
+    );
   },
 );
 
@@ -101,10 +111,11 @@ Cypress.Commands.add('happoHideDynamicElements', (options = {}) => {
     defaultSelectors = ['time'],
     selectors = [],
     replace = false,
+    ...otherOptions
   } = options;
   const allMatchers = defaultMatchers.concat(matchers);
   const allSelectors = defaultSelectors.concat(selectors);
-  cy.document().then(doc => {
+  cy.document(otherOptions).then(doc => {
     const elementsToHide = [];
     doc.body.querySelectorAll('*').forEach(e => {
       if (e.firstElementChild) {