feat: #1920 element next jest test (#2069)

packages/elements-next/config/jest/css-transform.js

@@ -0,0 +1,14 @@
+'use strict'
+
+// This is a custom Jest transformer turning style imports into empty objects.
+// http://facebook.github.io/jest/docs/en/webpack.html
+
+module.exports = {
+  process() {
+    return 'module.exports = {};'
+  },
+  getCacheKey() {
+    // The output is always the same.
+    return 'cssTransform'
+  },
+}

packages/elements-next/config/jest/file-transform.js

@@ -0,0 +1,40 @@
+'use strict'
+
+const path = require('path')
+const camelcase = require('camelcase')
+
+// This is a custom Jest transformer turning file imports into filenames.
+// http://facebook.github.io/jest/docs/en/webpack.html
+
+module.exports = {
+  process(src, filename) {
+    const assetFilename = JSON.stringify(path.basename(filename))
+
+    if (filename.match(/\.svg$/)) {
+      // Based on how SVGR generates a component name:
+      // https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6
+      const pascalCaseFilename = camelcase(path.parse(filename).name, {
+        pascalCase: true,
+      })
+      const componentName = `Svg${pascalCaseFilename}`
+      return `const React = require('react')
+      module.exports = {
+        __esModule: true,
+        default: ${assetFilename},
+        ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
+          return {
+            $$typeof: Symbol.for('react.element'),
+            type: 'svg',
+            ref: ref,
+            key: null,
+            props: Object.assign({}, props, {
+              children: ${assetFilename}
+            })
+          }
+        }),
+      }`
+    }
+
+    return `module.exports = ${assetFilename}`
+  },
+}

packages/elements-next/doczrc.js

@@ -1,5 +1,6 @@
 // TODO - a start on theming - needs some work - ideally, should look like Elements itself
 export default {
+  dest: '/public/dist',
   typescript: true,
   showDarkModeSwitch: false,
   themeConfig: {

packages/elements-next/jest.config.js

@@ -2,27 +2,32 @@ const baseConfig = require('../../scripts/jest/jest.config')
 
 module.exports = {
   ...baseConfig,
-  testPathIgnorePatterns: ['<rootDir>/src/tests/'],
-  collectCoverageFrom: ['<rootDir>/src/**/*.ts', '<rootDir>/src/**/*.tsx'],
+  testPathIgnorePatterns: ['<rootDir>/src/tests/', 'dist', '.docz', 'config'],
+  collectCoverageFrom: [
+    "src/**/*.{js,jsx,ts,tsx}",
+    "!src/**/*.d.ts"
+  ],
   coveragePathIgnorePatterns: [
-    '<rootDir>[/\\\\](node_modules|src/types|src/tests|src/scripts|src/helpers|src/styles|src/utils)[/\\\\]',
-    '__styles__',
+    '<rootDir>[/\\\\](node_modules|src/tests|dist|.docz|config)[/\\\\]',
     'src/index.tsx',
     'index.ts'
   ],
   modulePathIgnorePatterns: ['<rootDir>[/\\\\](node_modules|public|dist)[/\\\\]'],
   transform: {
-    '^.+\\.svg$': '<rootDir>/src/scripts/svg-transform.js'
+    '^.+\\.css$': '<rootDir>/config/jest/css-transform.js',
+    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '<rootDir>/config/jest/file-transform.js'
   },
   moduleNameMapper: {
-    '\\.(css|less|scss|sass)$': '<rootDir>/src/scripts/style-mock.js'
+    '^react-native$': 'react-native-web',
+    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
+    '^@/(.*)$': '<rootDir>/src/$1'
   },
   coverageThreshold: {
     global: {
-      branches: 90,
-      functions: 90,
-      lines: 90,
-      statements: 90
+      branches: 75,
+      functions: 75,
+      lines: 75,
+      statements: 75
     }
   }
 }

packages/elements-next/package.json

@@ -4,9 +4,18 @@
   "description": "Next generation of elements",
   "scripts": {
     "test": "",
-    "build:prod": "rollup -c && docz build",
+    "build:prod": "concurrently \"cross-env NODE_ENV=production && rimraf dist && rollup -c\" \"docz build\"",
     "start:dev": "docz dev",
-    "start:prod": "docz build && docz serve"
+    "start:prod": "docz build && docz serve",
+    "lint": "concurrently \"tsc --noEmit\" \"eslint --cache --ext=ts,tsx,js src\"",
+    "release:dev": "node ../../scripts/release/release-dev.js elements reapit-elements-dev",
+    "lint:fix": "eslint --cache --ext=ts,tsx,js src --fix",
+    "test:ci": "cross-env TZ=UTC jest --ci --colors --coverage --silent --forceExit --detectOpenHandles --runInBand",
+    "test:dev": "cross-env TZ=UTC jest --watch --verbose",
+    "test:update-badges": "yarn test:ci && jest-coverage-badges --input src/tests/coverage/coverage-summary.json --output src/tests/badges",
+    "fetch-config": "yarn config-manager fetchConfig elements",
+    "snyk-protect": "snyk protect",
+    "prepublish": "npm run snyk-protect"
   },
   "files": [
     "dist"
@@ -29,12 +38,17 @@
     "@rollup/plugin-commonjs": "^13.0.0",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^8.1.0",
+    "@types/jest": "^24.0.23",
+    "@types/node": "10.17.13",
+    "@types/react": "^16.9.0",
     "@types/react-copy-to-clipboard": "^4.3.0",
     "babel-preset-gatsby": "^0.5.1",
     "babel-plugin-module-resolver": "^4.0.0",
     "dashify": "^2.0.0",
     "docz": "^2.3.1",
     "gatsby-plugin-linaria": "^2.0.0",
+    "identity-obj-proxy": "3.0.0",
+    "jest": "^26.1.0",
     "linaria": "1.4.0-beta.10",
     "prism-react-renderer": "^1.1.1",
     "react-copy-to-clipboard": "^5.0.2",

packages/elements-next/src/components/headings/__tests__/__snapshots__/headings.test.tsx.snap

@@ -0,0 +1,65 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`headings HeadingMain should match snapshot when have props 1`] = `
+<h1
+  className=""
+>
+  mockHeading
+</h1>
+`;
+
+exports[`headings HeadingMain should match snapshot when no props 1`] = `
+<h1
+  className=""
+>
+  mockHeading
+</h1>
+`;
+
+exports[`headings HeadingSecondary should match snapshot when have props 1`] = `
+<h4
+  className=""
+>
+  Mock Heading
+</h4>
+`;
+
+exports[`headings HeadingSecondary should match snapshot when no props 1`] = `
+<h4
+  className=""
+>
+  Mock Heading
+</h4>
+`;
+
+exports[`headings SubHeadingMain should match snapshot when have props 1`] = `
+<h3
+  className=""
+>
+  Mock Heading
+</h3>
+`;
+
+exports[`headings SubHeadingMain should match snapshot when no props 1`] = `
+<h3
+  className=""
+>
+  Mock Heading
+</h3>
+`;
+
+exports[`headings SubHeadingSecondary should match snapshot when have props 1`] = `
+<h6
+  className=""
+>
+  Mock Heading
+</h6>
+`;
+
+exports[`headings SubHeadingSecondary should match snapshot when no props 1`] = `
+<h6
+  className=""
+>
+  Mock Heading
+</h6>
+`;

packages/elements-next/src/components/headings/__tests__/headings.test.tsx

@@ -0,0 +1,69 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import { HeadingMain, HeadingSecondary, SubHeadingMain, SubHeadingSecondary } from '../headings'
+
+describe('headings', () => {
+  describe('HeadingMain', () => {
+    it('should match snapshot when have props', () => {
+      const wrapper = shallow(
+        <HeadingMain className="mockClassName" isTextCentered={true}>
+          mockHeading
+        </HeadingMain>,
+      )
+      expect(wrapper).toMatchSnapshot()
+    })
+
+    it('should match snapshot when no props', () => {
+      const wrapper = shallow(<HeadingMain>mockHeading</HeadingMain>)
+      expect(wrapper).toMatchSnapshot()
+    })
+  })
+
+  describe('SubHeadingMain', () => {
+    it('should match snapshot when have props', () => {
+      const wrapper = shallow(
+        <SubHeadingMain className="mockClassName" isTextCentered={true}>
+          Mock Heading
+        </SubHeadingMain>,
+      )
+      expect(wrapper).toMatchSnapshot()
+    })
+
+    it('should match snapshot when no props', () => {
+      const wrapper = shallow(<SubHeadingMain>Mock Heading</SubHeadingMain>)
+      expect(wrapper).toMatchSnapshot()
+    })
+  })
+
+  describe('HeadingSecondary', () => {
+    it('should match snapshot when have props', () => {
+      const wrapper = shallow(
+        <HeadingSecondary className="mockClassName" isTextCentered={true}>
+          Mock Heading
+        </HeadingSecondary>,
+      )
+      expect(wrapper).toMatchSnapshot()
+    })
+
+    it('should match snapshot when no props', () => {
+      const wrapper = shallow(<HeadingSecondary>Mock Heading</HeadingSecondary>)
+      expect(wrapper).toMatchSnapshot()
+    })
+  })
+
+  describe('SubHeadingSecondary', () => {
+    it('should match snapshot when have props', () => {
+      const wrapper = shallow(
+        <SubHeadingSecondary className="mockClassName" isTextCentered={true}>
+          Mock Heading
+        </SubHeadingSecondary>,
+      )
+      expect(wrapper).toMatchSnapshot()
+    })
+
+    it('should match snapshot when no props', () => {
+      const wrapper = shallow(<SubHeadingSecondary>Mock Heading</SubHeadingSecondary>)
+      expect(wrapper).toMatchSnapshot()
+    })
+  })
+})

packages/elements-next/src/components/headings/headings.mdx

@@ -1,19 +1,23 @@
 ---
-name: Headings
+name: Heading
 route: /headings
 ---
 
 import { Playground, Props } from 'docz'
-import { HeadingMain } from './headings'
+import { Heading } from './headings'
 import { DocsWrapper } from '@/utils/docs-wrapper'
 
-# Headings
-
-<Props of={HeadingMain} />
+# Heading
+## Document
+<Props of={Heading.Main} />
 
+## Usage
 <Playground>
   <DocsWrapper>
-    <HeadingMain>Heading Main</HeadingMain>
+    <Heading.Main>Heading Main</Heading.Main>
+    <Heading.SubMain>SubHeading Main</Heading.SubMain>
+    <Heading.Secondary>Heading Secondary</Heading.Secondary>
+    <Heading.SubSecondary>SubHeading Secondary</Heading.SubSecondary>
   </DocsWrapper>
 </Playground>
 

packages/elements-next/src/components/headings/headings.tsx

@@ -30,3 +30,12 @@ export const HeadingSecondary: React.FC<HeadingProps> = ({ children, isTextCente
 export const SubHeadingSecondary: React.FC<HeadingProps> = ({ children, isTextCentered, className }) => (
   <h6 className={cx(elHeadingMain, isTextCentered && elIsTextCentered, className)}>{children}</h6>
 )
+
+export const Heading = {
+  Main: HeadingMain,
+  SubMain: SubHeadingMain,
+  Secondary: HeadingSecondary,
+  SubSecondary: SubHeadingSecondary,
+} as { [key: string]: React.ReactNode }
+
+export default Heading

packages/elements-next/src/components/headings/index.ts

@@ -1 +1 @@
-export * from './headings'
+export { default } from './headings'

packages/elements-next/src/components/modal/__styles__/index.ts

@@ -0,0 +1,19 @@
+import { css } from 'linaria'
+
+export const modalContainer = css`
+  .rc-dialog-content {
+    border-radius: 0;
+  }
+  .rc-dialog-header {
+    background-color: #f5f5f5;
+  }
+  .rc-dialog-footer {
+    background-color: #f5f5f5;
+  }
+`
+
+export const modalCentered = css`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`