feat: setup basic cypress testing with snapshots, add button test

.github/workflows/test.yml

@@ -12,4 +12,7 @@ jobs:
     - name: Install and Run Tests
       run: |
         yarn install
+        yarn build
         yarn test
+      env:
+        CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}

.gitignore

@@ -23,4 +23,8 @@ docs/node_modules
 .docusaurus
 .cache-loader
 
-.tsbuildinfo
+.tsbuildinfo
+
+# cypress
+cypress/videos
+cypress/screenshots

cypress.json

@@ -0,0 +1,9 @@
+{
+  "experimentalComponentTesting": true,
+  "componentFolder": "cypress/components",
+  "ignoreTestFiles": [
+    "**/__snapshots__/*",
+    "**/__image_snapshots__/*"
+  ],
+  "projectId": "rbewju"
+}

cypress/components/button.spec.tsx

@@ -0,0 +1,52 @@
+/// <reference types="cypress" />
+
+import React from 'react';
+import { mount } from 'cypress-react-unit-test';
+import {
+  Button,
+  ThemeProvider,
+  GlobalStyles,
+  defaultTheme,
+} from '../../dist/minerva-ui.esm';
+import { createGlobalStyle } from 'styled-components';
+
+const text = 'Button';
+
+// by default, we are using the native font stack
+// but this font is different on macOS, Linux and Windows
+// to make sure our screenshots are consistent, we force them all to use the same font family
+const StandardizeFont = createGlobalStyle`
+  html {
+    font-family: Helvetica;
+  }
+`;
+
+const customTheme = {
+  ...defaultTheme,
+  fonts: {
+    ...defaultTheme.fonts,
+    body: 'Helvetica',
+    heading: 'Helvetica',
+  },
+};
+
+const MinervaProvider = ({ children, theme = customTheme }) => (
+  <ThemeProvider theme={theme}>
+    <GlobalStyles />
+    <StandardizeFont />
+    {children}
+  </ThemeProvider>
+);
+
+describe('<Button />', () => {
+  it('renders with a theme provider', () => {
+    mount(
+      <MinervaProvider>
+        <Button>{text}</Button>
+      </MinervaProvider>
+    );
+
+    cy.contains(text).should('be.visible');
+    cy.get('button').toMatchImageSnapshot();
+  });
+});

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/plugins/index.js

@@ -0,0 +1,35 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+const browserify = require('@cypress/browserify-preprocessor');
+
+const { initPlugin } = require('cypress-plugin-snapshots/plugin');
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+module.exports = (on, config) => {
+  on(
+    'file:preprocessor',
+    browserify({
+      typescript: require.resolve('typescript'),
+    })
+  );
+
+  initPlugin(on, config);
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+
+  return config;
+};

cypress/support/commands.ts

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

cypress/support/index.js

@@ -0,0 +1,23 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands';
+import 'cypress-plugin-snapshots/commands';
+
+require('cypress-react-unit-test/support');
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

cypress/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../tsconfig.json"
+}

package.json

@@ -16,14 +16,15 @@
     "start": "tsdx watch --format esm",
     "dev:docs": "lerna run --parallel start",
     "build": "tsdx build",
-    "test": "tsdx test --env=jsdom",
+    "test": "tsdx test --env=jsdom && yarn e2e",
     "lint": "yarn tsdx lint src test 'docs/**/*.{ts,tsx,js,jsx,mdx}' --ext js,tsx,ts,mdx --fix --cache --quiet",
     "bootstrap": "lerna bootstrap",
     "release": "np",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
     "sb": "yarn storybook",
-    "semantic-release": "semantic-release"
+    "semantic-release": "semantic-release",
+    "e2e": "yarn cypress run --record --key $CYPRESS_RECORD_KEY"
   },
   "peerDependencies": {
     "react": "16.x || 17.x",
@@ -58,13 +59,17 @@
     "@typescript-eslint/parser": "^4.6.0",
     "babel-loader": "^8.0.6",
     "babel-plugin-styled-components": "^1.11.1",
+    "cypress": "^6.0.1",
+    "cypress-plugin-snapshots": "^1.4.4",
+    "cypress-react-unit-test": "^4.17.1",
     "cz-conventional-changelog": "3.1.0",
     "cz-customizable": "^6.2.0",
     "eslint": "^6.8.0",
     "eslint-config-prettier": "^6.10.0",
     "eslint-plugin-flowtype": "^4.7.0",
     "eslint-plugin-mdx": "^1.6.8",
     "eslint-plugin-prettier": "^3.1.2",
+    "faker": "^5.1.0",
     "fork-ts-checker-webpack-plugin": "^6.0.3",
     "husky": "^3.0.9",
     "jest-axe": "^3.4.0",
@@ -133,6 +138,7 @@
       "(.d.ts)$",
       ".stories.tsx$"
     ],
+    "testPathIgnorePatterns": ["/node_modules/", "cypress"],
     "moduleNameMapper": {
       "\\.(css|less)$": "<rootDir>/test/__mocks__/styleMock.js"
     },

src/Button/index.tsx

@@ -2,11 +2,7 @@ import React, { forwardRef } from 'react';
 import warning from 'tiny-warning';
 import Spinner from '../Spinner';
 import PseudoBox, { PseudoBoxProps } from '../PseudoBox';
-import { useTheme } from '../theme';
-// import PropTypes from 'prop-types';
-// import { variant } from 'styled-system';
-// import styled from 'styled-components';
-// import exact from 'prop-types-exact';
+import { useComponentStyles, useTheme } from '../theme';
 import { MinervaProps } from '../layout';
 
 export const buttonVariants = {
@@ -85,6 +81,8 @@ export const Button = forwardRef(function Button(
   const variantStyles =
     variant && theme?.variants?.Button ? theme.variants.Button[variant] : {};
 
+  const componentStyles = useComponentStyles('Button');
+
   return (
     <PseudoBox
       ref={ref}
@@ -114,7 +112,7 @@ export const Button = forwardRef(function Button(
       }}
       aria-busy={isLoading}
       name={name}
-      {...theme.Button}
+      {...componentStyles}
       {...variantStyles}
       {...props}
     >

types/index.d.ts

@@ -1 +1,9 @@
 declare var __DEV__: boolean;
+
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      toMatchImageSnapshot: any;
+    }
+  }
+}