test: add grid and codesnippet visual regression tests (#9365)

* test: add grid and codesnippet visual regression tests * fix(grid): remove unused component import from e2e test
carbon-design-system · Aug 4, 2021 · 98555dc · 98555dc
1 parent 06acc24
commit 98555dc
Show file tree

Hide file tree

Showing 4 changed files with 346 additions and 0 deletions.
diff --git a/packages/react/src/components/CodeSnippet/__tests__/CodeSnippet b/packages/react/src/components/CodeSnippet/__tests__/CodeSnippet
diff --git a/packages/react/src/components/CodeSnippet/__tests__/CodeSnippet-test.e2e.js b/packages/react/src/components/CodeSnippet/__tests__/CodeSnippet-test.e2e.js
@@ -0,0 +1,97 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import 'carbon-components/scss/globals/scss/styles.scss';
+
+import React from 'react';
+import { mount } from '@cypress/react';
+import { default as CodeSnippet } from '../CodeSnippet';
+import { default as CodeSnippetSkeleton } from '../CodeSnippet.Skeleton';
+
+describe('CodeSnippet', () => {
+  beforeEach(() => {
+    mount(
+      <>
+        <CodeSnippet
+          className="some-class"
+          type="single"
+          style={{ marginBottom: 8 }}>
+          {'node -v'}
+        </CodeSnippet>
+
+        <CodeSnippet
+          type="inline"
+          feedback="Copied to clipboard"
+          style={{ marginBottom: 8 }}>
+          {'node -v'}
+        </CodeSnippet>
+
+        <CodeSnippet
+          type="multi"
+          feedback="Copied to clipboard"
+          style={{ marginBottom: 8 }}>
+          {`  "scripts": {
+                "build": "lerna run build --stream --prefix --npm-client yarn",
+                "ci-check": "carbon-cli ci-check",
+                "clean": "lerna run clean && lerna clean --yes && rimraf node_modules",
+                "doctoc": "doctoc --title '## Table of Contents'",
+                "format": "prettier --write '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**'",
+                "format:diff": "prettier --list-different '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**' '!packages/components/**'",
+                "lint": "eslint actions config codemods packages",
+                "lint:styles": "stylelint '**/*.{css,scss}' --report-needless-disables --report-invalid-scope-disables",
+                "sync": "carbon-cli sync",
+                "test": "cross-env BABEL_ENV=test jest",
+                "test:e2e": "cross-env BABEL_ENV=test jest --testPathPattern=e2e --testPathIgnorePatterns='examples,/packages/components/,/packages/react/'"
+            },
+            "resolutions": {
+                "react": "~16.9.0",
+                "react-dom": "~16.9.0",
+                "react-is": "~16.9.0",
+                "react-test-renderer": "~16.9.0"
+            },
+            "devDependencies": {
+                "@babel/core": "^7.10.0",
+                "@babel/plugin-proposal-class-properties": "^7.7.4",
+                "@babel/plugin-proposal-export-default-from": "^7.7.4",
+                "@babel/plugin-proposal-export-namespace-from": "^7.7.4",
+                "@babel/plugin-transform-runtime": "^7.10.0",
+                "@babel/preset-env": "^7.10.0",
+                "@babel/preset-react": "^7.10.0",
+                "@babel/runtime": "^7.10.0",
+                "@commitlint/cli": "^8.3.5",`}
+        </CodeSnippet>
+
+        <CodeSnippetSkeleton type="single" style={{ marginBottom: 8 }} />
+        <CodeSnippetSkeleton type="multi" style={{ marginBottom: 8 }} />
+      </>
+    );
+  });
+
+  it('should render', () => {
+    cy.findAllByText(/node/).should('be.visible');
+
+    // snapshots should always be taken _after_ an assertion that
+    // a element/component should be visible. This is to ensure
+    // the DOM has settled and the element has fully loaded.
+    cy.percySnapshot();
+  });
+
+  it('should render expanded snippet on show more', () => {
+    cy.findAllByText(/Show more/)
+      .should('be.visible')
+      .first()
+      .click();
+    cy.findAllByText(/Show less/)
+      .first()
+      .should('be.visible');
+
+    // snapshots should always be taken _after_ an assertion that
+    // a element/component should be visible. This is to ensure
+    // the DOM has settled and the element has fully loaded.
+    cy.percySnapshot();
+  });
+});
diff --git a/packages/react/src/components/Grid/__tests__/Grid-test.e2e.js b/packages/react/src/components/Grid/__tests__/Grid-test.e2e.js
@@ -0,0 +1,187 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import 'carbon-components/scss/globals/scss/vendor/@carbon/grid/scss/modules/_css-grid.scss';
+import './Grid-test.e2e.scss';
+
+import React from 'react';
+import { mount } from '@cypress/react';
+import { Grid, Column } from '..';
+import { FeatureFlags } from '../../FeatureFlags';
+
+describe('Grid', () => {
+  beforeEach(() => {
+    mount(
+      <FeatureFlags flags={{ 'enable-css-grid': true }}>
+        <Grid>
+          <Column sm={4} />
+          <Column sm={4} />
+          <Column sm={4} />
+          <Column sm={4} />
+        </Grid>
+
+        <Grid narrow>
+          <Column sm={4} />
+          <Column sm={4} />
+          <Column sm={4} />
+          <Column sm={4} />
+        </Grid>
+
+        <Grid condensed>
+          <Column sm={4} />
+          <Column sm={4} />
+          <Column sm={4} />
+          <Column sm={4} />
+        </Grid>
+
+        <Grid fullWidth>
+          <Column sm={4} />
+          <Column sm={4} />
+          <Column sm={4} />
+          <Column sm={4} />
+        </Grid>
+
+        <Grid>
+          <Column sm={2} md={4} lg={6}>
+            <p>Small: Span 2 of 4</p>
+            <p>Medium: Span 4 of 8</p>
+            <p>Large: Span 6 of 16</p>
+          </Column>
+          <Column sm={2} md={2} lg={3}>
+            <p>Small: Span 2 of 4</p>
+            <p>Medium: Span 2 of 8</p>
+            <p>Large: Span 3 of 16</p>
+          </Column>
+          <Column sm={0} md={2} lg={3}>
+            <p>Small: Span 0 of 4</p>
+            <p>Medium: Span 2 of 8</p>
+            <p>Large: Span 3 of 16</p>
+          </Column>
+          <Column sm={0} md={0} lg={4}>
+            <p>Small: Span 0 of 4</p>
+            <p>Medium: Span 0 of 8</p>
+            <p>Large: Span 4 of 16</p>
+          </Column>
+        </Grid>
+
+        <Grid>
+          <Column sm={2} md={4} lg={3}>
+            <p>Small: Span 2 of 4</p>
+            <p>Medium: Span 4 of 8</p>
+            <p>Large: Span 3 of 16</p>
+          </Column>
+          <Column sm={2} md={4} lg={10}>
+            <p>Small: Span 2 of 4</p>
+            <p>Medium: Span 4 of 8</p>
+            <p>Large: Span 10 of 16</p>
+            <Grid className="example">
+              <Column sm={1} md={1} lg={2}>
+                <p>sm={1}</p> <p>md={1}</p> <p>lg={2}</p>
+              </Column>
+              <Column sm={1} md={1} lg={2}>
+                <p>sm={1}</p> <p>md={1}</p> <p>lg={2}</p>
+              </Column>
+              <Column sm={0} md={1} lg={1}>
+                <p>sm={0}</p> <p>md={1}</p> <p>lg={1}</p>
+              </Column>
+              <Column sm={0} md={1} lg={1}>
+                <p>sm={0}</p> <p>md={1}</p> <p>lg={1}</p>
+              </Column>
+              <Column sm={0} md={0} lg={1}>
+                <p>sm={0}</p> <p>md={0}</p> <p>lg={1}</p>
+              </Column>
+              <Column sm={0} md={0} lg={1}>
+                <p>sm={0}</p> <p>md={0}</p> <p>lg={1}</p>
+              </Column>
+              <Column sm={0} md={0} lg={1}>
+                <p>sm={0}</p> <p>md={0}</p> <p>lg={1}</p>
+              </Column>
+              <Column sm={0} md={0} lg={1}>
+                <p>sm={0}</p> <p>md={0}</p> <p>lg={1}</p>
+              </Column>
+            </Grid>
+          </Column>
+          <Column sm={0} md={0} lg={3}>
+            <p>Small: Span 0 of 4</p>
+            <p>Medium: Span 0 of 8</p>
+            <p>Large: Span 3 of 16</p>
+          </Column>
+        </Grid>
+
+        <Grid>
+          <Column sm={1} md={2} lg={4}>
+            <Grid narrow>
+              <Column sm={1} md={2} lg={4}>
+                <p>narrow</p>
+              </Column>
+            </Grid>
+          </Column>
+          <Column sm={3} md={6} lg={12}>
+            <Grid condensed>
+              <Column sm={3} md={6} lg={12}>
+                <p>condensed</p>
+              </Column>
+            </Grid>
+          </Column>
+          <Column sm={1} md={2} lg={4}>
+            <Grid condensed>
+              <Column sm={1} md={2} lg={4}>
+                <p>condensed</p>
+              </Column>
+            </Grid>
+          </Column>
+          <Column sm={3} md={6} lg={12}>
+            <Grid narrow>
+              <Column sm={3} md={6} lg={12}>
+                <p>narrow</p>
+              </Column>
+            </Grid>
+          </Column>
+        </Grid>
+
+        <Grid>
+          <Column
+            sm={{ span: 1, offset: 3 }}
+            md={{ span: 2, offset: 6 }}
+            lg={{ span: 4, offset: 12 }}
+          />
+          <Column
+            sm={{ span: 2, offset: 2 }}
+            md={{ span: 4, offset: 4 }}
+            lg={{ span: 8, offset: 8 }}
+          />
+          <Column
+            sm={{ span: 3, offset: 1 }}
+            md={{ span: 6, offset: 2 }}
+            lg={{ span: 12, offset: 4 }}
+          />
+          <Column sm={{ span: 4 }} md={{ span: 8 }} lg={{ span: 16 }} />
+        </Grid>
+        <Grid>
+          <Column></Column>
+          <Column></Column>
+          <Column></Column>
+          <Column></Column>
+          <Column></Column>
+          <Column></Column>
+          <Column></Column>
+          <Column></Column>
+        </Grid>
+      </FeatureFlags>
+    );
+  });
+
+  it('should render', () => {
+    cy.viewport(1400, 500);
+    cy.findAllByText(/narrow/).should('be.visible');
+
+    // snapshots should always be taken _after_ an assertion that
+    // a element/component should be visible. This is to ensure
+    // the DOM has settled and the element has fully loaded.
+    cy.percySnapshot();
+  });
+});
diff --git a/packages/react/src/components/Grid/__tests__/Grid-test.e2e.scss b/packages/react/src/components/Grid/__tests__/Grid-test.e2e.scss
@@ -0,0 +1,62 @@
+@import '~carbon-components/scss/globals/scss/vars';
+@import '~carbon-components/scss/globals/scss/colors';
+@import '~carbon-components/scss/globals/scss/typography';
+
+p {
+  @include type-style('body-short-02');
+
+  margin-top: $spacing-05;
+}
+
+// Grid modes
+.bx--css-grid {
+  background-color: $blue-20;
+  outline: 1px dashed $blue-40;
+}
+
+.bx--css-grid p {
+  @include type-style('code-02');
+}
+
+p:first-of-type:not(.bx--progress-label) {
+  //messing up progress indicator stories
+  margin-top: 0;
+}
+
+.bx--css-grid.bx--css-grid--narrow {
+  background-color: $teal-20;
+  outline: 1px dashed $teal-40;
+}
+
+.bx--css-grid.bx--css-grid--condensed {
+  background-color: $purple-20;
+  outline: 1px dashed $purple-40;
+}
+
+// Only use background for subgrid example, not other subgrids in "mixed modes" story or others
+.bx--subgrid.example {
+  background-color: $green-20;
+}
+
+// Columns
+.bx--css-grid > [class*='col'],
+.bx--subgrid > [class*='col'] {
+  min-height: 80px;
+}
+
+.bx--css-grid > [class*='col'] {
+  background: $blue-10;
+}
+
+.bx--subgrid > [class*='col'] {
+  background: $green-10;
+  outline: 1px dashed $green-30;
+}
+
+.bx--css-grid.bx--css-grid--narrow > [class*='col'] {
+  background: $teal-10;
+}
+
+.bx--css-grid.bx--css-grid--condensed > [class*='col'] {
+  background: $purple-10;
+}