From 98555dcfc1ae83b2813cb1eed90fc4f6836b6d51 Mon Sep 17 00:00:00 2001 From: Taylor Jones Date: Wed, 4 Aug 2021 09:42:26 -0500 Subject: [PATCH] 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 --- .../CodeSnippet/__tests__/CodeSnippet | 0 .../__tests__/CodeSnippet-test.e2e.js | 97 +++++++++ .../Grid/__tests__/Grid-test.e2e.js | 187 ++++++++++++++++++ .../Grid/__tests__/Grid-test.e2e.scss | 62 ++++++ 4 files changed, 346 insertions(+) create mode 100644 packages/react/src/components/CodeSnippet/__tests__/CodeSnippet create mode 100644 packages/react/src/components/CodeSnippet/__tests__/CodeSnippet-test.e2e.js create mode 100644 packages/react/src/components/Grid/__tests__/Grid-test.e2e.js create mode 100644 packages/react/src/components/Grid/__tests__/Grid-test.e2e.scss diff --git a/packages/react/src/components/CodeSnippet/__tests__/CodeSnippet b/packages/react/src/components/CodeSnippet/__tests__/CodeSnippet new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/packages/react/src/components/CodeSnippet/__tests__/CodeSnippet-test.e2e.js b/packages/react/src/components/CodeSnippet/__tests__/CodeSnippet-test.e2e.js new file mode 100644 index 000000000000..bfbea2773380 --- /dev/null +++ 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( + <> + + {'node -v'} + + + + {'node -v'} + + + + {` "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",`} + + + + + + ); + }); + + 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 new file mode 100644 index 000000000000..3a3de454f2cb --- /dev/null +++ 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( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Small: Span 2 of 4

+

Medium: Span 4 of 8

+

Large: Span 6 of 16

+ + +

Small: Span 2 of 4

+

Medium: Span 2 of 8

+

Large: Span 3 of 16

+ + +

Small: Span 0 of 4

+

Medium: Span 2 of 8

+

Large: Span 3 of 16

+ + +

Small: Span 0 of 4

+

Medium: Span 0 of 8

+

Large: Span 4 of 16

+ + + + + +

Small: Span 2 of 4

+

Medium: Span 4 of 8

+

Large: Span 3 of 16

+ + +

Small: Span 2 of 4

+

Medium: Span 4 of 8

+

Large: Span 10 of 16

+ + +

sm={1}

md={1}

lg={2}

+ + +

sm={1}

md={1}

lg={2}

+ + +

sm={0}

md={1}

lg={1}

+ + +

sm={0}

md={1}

lg={1}

+ + +

sm={0}

md={0}

lg={1}

+ + +

sm={0}

md={0}

lg={1}

+ + +

sm={0}

md={0}

lg={1}

+ + +

sm={0}

md={0}

lg={1}

+ + + + +

Small: Span 0 of 4

+

Medium: Span 0 of 8

+

Large: Span 3 of 16

+ + + + + + + +

narrow

+ + + + + + +

condensed

+ + + + + + +

condensed

+ + + + + + +

narrow

+ + + + + + + + + + + + + + + + + + + + + + + ); + }); + + 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 new file mode 100644 index 000000000000..898520b21692 --- /dev/null +++ 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; +}