Add storybook render tests with CI integration (#12477)

* add storybook unit tests with CI integration

* fix command and fix casing for test

* change ci ordering for storybook tasks

* fix syntax error

* fix jest

* lint

* Add transaction-total-banner render test to Storybook (#12517)

* transaction-total-banner

* lint

* confirm to spec

* lint

* fix jest ocnfig for snapshot test failure

.circleci/config.yml

@@ -56,9 +56,12 @@ workflows:
       - prep-build-test-metrics:
           requires:
             - prep-deps
-      - prep-build-storybook:
+      - test-storybook:
           requires:
             - prep-deps
+      - prep-build-storybook:
+          requires:
+            - test-storybook
       - test-lint:
           requires:
             - prep-deps
@@ -335,6 +338,16 @@ jobs:
           root: .
           paths:
             - storybook-build
+  
+  test-storybook:
+    executor: node-browsers
+    steps:
+      - checkout
+      - attach_workspace:
+          at: .
+      - run:
+          name: Test Storybook
+          command: yarn storybook:test
 
   test-yarn-dedupe:
     executor: node-browsers

jest.config.js

@@ -23,4 +23,8 @@ module.exports = {
     '<rootDir>/app/scripts/platforms/*.test.js',
   ],
   testTimeout: 2500,
+  transform: {
+    '^.+\\.[tj]sx?$': 'babel-jest',
+    '^.+\\.mdx$': '@storybook/addon-docs/jest-transform-mdx',
+  },
 };

jest.stories.config.js

@@ -0,0 +1,26 @@
+/* eslint-disable import/unambiguous */
+module.exports = {
+  collectCoverageFrom: ['<rootDir>/ui/**/*.js'],
+  coverageDirectory: './jest-coverage/main',
+  coveragePathIgnorePatterns: ['.stories.js', '.snap'],
+  coverageReporters: ['json', 'lcov', 'text', 'clover'],
+  coverageThreshold: {
+    global: {
+      branches: 35,
+      functions: 37,
+      lines: 43,
+      statements: 43,
+    },
+  },
+  // TODO: enable resetMocks
+  // resetMocks: true,
+  restoreMocks: true,
+  setupFiles: ['<rootDir>/test/setup.js', '<rootDir>/test/env.js'],
+  setupFilesAfterEnv: ['<rootDir>/test/jest/setup.js'],
+  testMatch: ['<rootDir>/ui/**/*stories.test.js'],
+  testTimeout: 2500,
+  transform: {
+    '^.+\\.[tj]sx?$': 'babel-jest',
+    '^.+\\.mdx$': '@storybook/addon-docs/jest-transform-mdx',
+  },
+};

package.json

@@ -60,6 +60,7 @@
     "start:dev": "concurrently -k -n build,react,redux yarn:start yarn:devtools:react yarn:devtools:redux",
     "announce": "node development/announcer.js",
     "storybook": "start-storybook -p 6006 -c .storybook -s ./app,./.storybook/images",
+    "storybook:test": "jest --config=./jest.stories.config.js",
     "storybook:build": "build-storybook -c .storybook -o storybook-build -s ./app,./.storybook/images",
     "storybook:deploy": "storybook-to-ghpages --existing-output-dir storybook-build --remote storybook --branch master",
     "update-changelog": "auto-changelog update",

ui/components/app/transaction-total-banner/transaction-total-banner.stories.js

@@ -6,7 +6,7 @@ export default {
   id: __filename,
 };
 
-export const basic = () => {
+export const DefaultStory = () => {
   return (
     <TransactionTotalBanner
       total="~18.73"
@@ -19,3 +19,5 @@ export const basic = () => {
     />
   );
 };
+
+DefaultStory.storyName = 'Default';

ui/components/app/transaction-total-banner/transaction-total-banner.stories.test.js

@@ -0,0 +1,11 @@
+/* eslint-disable jest/require-top-level-describe */
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import '@testing-library/jest-dom/extend-expect';
+import { DefaultStory } from './transaction-total-banner.stories';
+
+it('renders transaction total banner stories with Base state', () => {
+  render(<DefaultStory {...DefaultStory.args} />);
+  expect(screen.findByTestId('#popover-content')).toBeDefined();
+});

ui/components/ui/button/button.stories.test.js

@@ -0,0 +1,12 @@
+/* eslint-disable jest/require-top-level-describe */
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+
+import '@testing-library/jest-dom/extend-expect';
+import { DefaultStory } from './button.stories';
+
+it('renders the button in the primary state', () => {
+  render(<DefaultStory {...DefaultStory.args} />);
+  expect(screen.getByRole('button')).toHaveTextContent('Default');
+});