From 7bc3d4f22289f79ce55cfe6f1e3fddee78943d6f Mon Sep 17 00:00:00 2001 From: Eric Wang Date: Mon, 13 Apr 2020 15:36:23 +1000 Subject: [PATCH] chore: Refactor the button test to use typescript (#22953) * Refactor the button test to use typescript * update tsconfig.json * Change file name as a workaround * update antd-tools --- .jest.js | 11 ++++++++--- .jest.node.js | 2 +- .../{demo.test.js.snap => demo.test.ts.snap} | 0 ...{index.test.js.snap => type.test.tsx.snap} | 0 .../__tests__/{demo.test.js => demo.test.ts} | 0 .../{index.test.js => type.test.tsx} | 13 +++++++------ package.json | 2 +- tests/shared/{demoTest.js => demoTest.ts} | 19 +++++++++++-------- tests/shared/{mountTest.js => mountTest.tsx} | 2 +- tests/shared/{rtlTest.js => rtlTest.tsx} | 4 ++-- tests/{utils.js => utils.ts} | 2 +- tsconfig.json | 2 +- 12 files changed, 33 insertions(+), 24 deletions(-) rename components/button/__tests__/__snapshots__/{demo.test.js.snap => demo.test.ts.snap} (100%) rename components/button/__tests__/__snapshots__/{index.test.js.snap => type.test.tsx.snap} (100%) rename components/button/__tests__/{demo.test.js => demo.test.ts} (100%) rename components/button/__tests__/{index.test.js => type.test.tsx} (94%) rename tests/shared/{demoTest.js => demoTest.ts} (81%) rename tests/shared/{mountTest.js => mountTest.tsx} (86%) rename tests/shared/{rtlTest.js => rtlTest.tsx} (81%) rename tests/{utils.js => utils.ts} (86%) diff --git a/.jest.js b/.jest.js index 778b157c91..d162b283be 100644 --- a/.jest.js +++ b/.jest.js @@ -1,5 +1,3 @@ -const libDir = process.env.LIB_DIR; - const transformIgnorePatterns = [ '/dist/', // Ignore modules without es dir. @@ -7,6 +5,13 @@ const transformIgnorePatterns = [ 'node_modules/(?!.*@babel)[^/]+?/(?!(es|node_modules)/)', ]; +function getTestRegex(libDir) { + if (libDir === 'dist') { + return 'demo\\.test\\.js$'; + } + return '.*\\.test\\.(j|t)sx?$'; +} + module.exports = { verbose: true, setupFiles: ['./tests/setup.js'], @@ -28,7 +33,7 @@ module.exports = { '\\.md$': './node_modules/@ant-design/tools/lib/jest/demoPreprocessor', '\\.(jpg|png|gif|svg)$': './node_modules/@ant-design/tools/lib/jest/imagePreprocessor', }, - testRegex: `${libDir === 'dist' ? 'demo' : '.*'}\\.test\\.js$`, + testRegex: getTestRegex(process.env.LIB_DIR), collectCoverageFrom: [ 'components/**/*.{ts,tsx}', '!components/*/style/index.tsx', diff --git a/.jest.node.js b/.jest.node.js index d91949fea1..1b76c15762 100644 --- a/.jest.node.js +++ b/.jest.node.js @@ -12,7 +12,7 @@ module.exports = { '\\.md$': './node_modules/@ant-design/tools/lib/jest/demoPreprocessor', '\\.(jpg|png|gif|svg)$': './node_modules/@ant-design/tools/lib/jest/imagePreprocessor', }, - testRegex: 'demo\\.test\\.js$', + testRegex: 'demo\\.test\\.(j|t)s$', testEnvironment: 'node', transformIgnorePatterns, snapshotSerializers: ['enzyme-to-json/serializer'], diff --git a/components/button/__tests__/__snapshots__/demo.test.js.snap b/components/button/__tests__/__snapshots__/demo.test.ts.snap similarity index 100% rename from components/button/__tests__/__snapshots__/demo.test.js.snap rename to components/button/__tests__/__snapshots__/demo.test.ts.snap diff --git a/components/button/__tests__/__snapshots__/index.test.js.snap b/components/button/__tests__/__snapshots__/type.test.tsx.snap similarity index 100% rename from components/button/__tests__/__snapshots__/index.test.js.snap rename to components/button/__tests__/__snapshots__/type.test.tsx.snap diff --git a/components/button/__tests__/demo.test.js b/components/button/__tests__/demo.test.ts similarity index 100% rename from components/button/__tests__/demo.test.js rename to components/button/__tests__/demo.test.ts diff --git a/components/button/__tests__/index.test.js b/components/button/__tests__/type.test.tsx similarity index 94% rename from components/button/__tests__/index.test.js rename to components/button/__tests__/type.test.tsx index 425326aca5..1dd1443be9 100644 --- a/components/button/__tests__/index.test.js +++ b/components/button/__tests__/type.test.tsx @@ -1,12 +1,12 @@ import React, { Component } from 'react'; import { mount, render } from 'enzyme'; -import renderer from 'react-test-renderer'; import { SearchOutlined } from '@ant-design/icons'; import Button from '..'; import ConfigProvider from '../../config-provider'; import mountTest from '../../../tests/shared/mountTest'; import rtlTest from '../../../tests/shared/rtlTest'; import { sleep } from '../../../tests/utils'; +import { SizeType } from '../../config-provider/SizeContext'; describe('Button', () => { mountTest(Button); @@ -30,13 +30,14 @@ describe('Button', () => { }); it('mount correctly', () => { - expect(() => renderer.create()).not.toThrow(); + expect(() => mount()).not.toThrow(); }); it('warns if size is wrong', () => { const mockWarn = jest.fn(); jest.spyOn(console, 'warn').mockImplementation(mockWarn); - render(); + const size = ('who am I' as any) as SizeType; + render(); expect(mockWarn).toHaveBeenCalledTimes(1); expect(mockWarn.mock.calls[0][0]).toMatchObject({ message: 'unreachable case: "who am I"', @@ -74,7 +75,7 @@ describe('Button', () => { }); it('renders Chinese characters correctly in HOC', () => { - const Text = ({ children }) => {children}; + const Text = ({ children }: { children: React.ReactNode }) => {children}; const wrapper = mount( ); - expect(wrapper.type().__ANT_BUTTON).toBe(true); + expect((wrapper.type() as any).__ANT_BUTTON).toBe(true); }); it('should change loading state instantly by default', () => { @@ -189,7 +190,7 @@ describe('Button', () => { it('should has click wave effect', async () => { const wrapper = mount(); - wrapper.find('.ant-btn').getDOMNode().click(); + wrapper.find('.ant-btn').getDOMNode().click(); await new Promise(resolve => setTimeout(resolve, 0)); expect(wrapper.render()).toMatchSnapshot(); }); diff --git a/package.json b/package.json index 6cf9c38e08..5f5a4c0192 100644 --- a/package.json +++ b/package.json @@ -144,7 +144,7 @@ "@ant-design/bisheng-plugin": "^2.3.0", "@ant-design/colors": "^4.0.0", "@ant-design/hitu": "^0.0.0-alpha.13", - "@ant-design/tools": "^8.0.4", + "@ant-design/tools": "^8.2.0", "@qixian.cs/github-contributors-list": "^1.0.3", "@stackblitz/sdk": "^1.3.0", "@types/classnames": "^2.2.8", diff --git a/tests/shared/demoTest.js b/tests/shared/demoTest.ts similarity index 81% rename from tests/shared/demoTest.js rename to tests/shared/demoTest.ts index 1ea55183da..42991ffda5 100644 --- a/tests/shared/demoTest.js +++ b/tests/shared/demoTest.ts @@ -3,6 +3,8 @@ import { render } from 'enzyme'; import MockDate from 'mockdate'; import moment from 'moment'; +type CheerIO = ReturnType; +type CheerIOElement = CheerIO[0]; // We should avoid use it in 4.0. Reopen if can not handle this. const USE_REPLACEMENT = false; const testDist = process.env.LIB_DIR === 'dist'; @@ -13,12 +15,12 @@ const testDist = process.env.LIB_DIR === 'dist'; * Or `f7fa7a3c-a675-47bc-912e-0c45fb6a74d9`(randomly) when not test env. * So we need hack of this to modify the `aria-controls`. */ -function ariaConvert(wrapper) { +function ariaConvert(wrapper: CheerIO) { if (!testDist || !USE_REPLACEMENT) return wrapper; const matches = new Map(); - function process(entry) { + function process(entry: CheerIOElement) { const { attribs, children } = entry; if (matches.has(entry)) return; matches.set(entry, true); @@ -33,15 +35,16 @@ function ariaConvert(wrapper) { (Array.isArray(children) ? children : [children]).forEach(process); } - Object.keys(wrapper).forEach(key => { - const entry = wrapper[key]; - process(entry); - }); + wrapper.each((_, entry) => process(entry)); return wrapper; } -export default function demoTest(component, options = {}) { +type Options = { + skip?: boolean; +}; + +export default function demoTest(component: string, options: Options = {}) { const files = glob.sync(`./components/${component}/demo/*.md`); files.forEach(file => { @@ -50,7 +53,7 @@ export default function demoTest(component, options = {}) { testMethod = test.skip; } testMethod(`renders ${file} correctly`, () => { - MockDate.set(moment('2016-11-22')); + MockDate.set(moment('2016-11-22').toDate()); const demo = require(`../.${file}`).default; // eslint-disable-line global-require, import/no-dynamic-require const wrapper = render(demo); diff --git a/tests/shared/mountTest.js b/tests/shared/mountTest.tsx similarity index 86% rename from tests/shared/mountTest.js rename to tests/shared/mountTest.tsx index 3793bfb7b4..7e4dee4a9f 100644 --- a/tests/shared/mountTest.js +++ b/tests/shared/mountTest.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { mount } from 'enzyme'; // eslint-disable-next-line jest/no-export -export default function mountTest(Component) { +export default function mountTest(Component: React.ComponentType) { describe(`mount and unmount`, () => { // https://github.com/ant-design/ant-design/pull/18441 it(`component could be updated and unmounted without errors`, () => { diff --git a/tests/shared/rtlTest.js b/tests/shared/rtlTest.tsx similarity index 81% rename from tests/shared/rtlTest.js rename to tests/shared/rtlTest.tsx index 94446a7e82..aba03cffd5 100644 --- a/tests/shared/rtlTest.js +++ b/tests/shared/rtlTest.tsx @@ -5,11 +5,11 @@ import { mount } from 'enzyme'; import ConfigProvider from '../../components/config-provider'; // eslint-disable-next-line jest/no-export -export default function rtlTest(Component, mockDate) { +export default function rtlTest(Component: React.ComponentType, mockDate?: boolean) { describe(`rtl render`, () => { it(`component should be rendered correctly in RTL direction`, () => { if (mockDate) { - MockDate.set(Moment('2000-09-28')); + MockDate.set(Moment('2000-09-28').toDate()); } const wrapper = mount( diff --git a/tests/utils.js b/tests/utils.ts similarity index 86% rename from tests/utils.js rename to tests/utils.ts index 423e01c0c5..26f9adee07 100644 --- a/tests/utils.js +++ b/tests/utils.ts @@ -2,7 +2,7 @@ import moment from 'moment'; import MockDate from 'mockdate'; export function setMockDate(dateString = '2017-09-18T03:30:07.795') { - MockDate.set(moment(dateString)); + MockDate.set(moment(dateString).toDate()); } export function resetMockDate() { diff --git a/tsconfig.json b/tsconfig.json index cf511ab415..e0015c0709 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -17,5 +17,5 @@ "lib": ["dom", "es2017"], "skipLibCheck": true }, - "exclude": ["node_modules", "lib", "es"] + "exclude": ["node_modules", "lib", "es", "**/__tests__/**"] }