test: setup tests and write tests to TextInput component (#71)

test: setup tests and write tests to TextInput component

.eslintrc

@@ -1,4 +1,7 @@
 {
     "extends": ["@yandex-cloud/eslint-config", "@yandex-cloud/eslint-config/prettier"],
-    "root": true
+    "root": true,
+    "env": {
+        "node": true
+    }
 }

.github/workflows/ci.yml

@@ -26,3 +26,22 @@ jobs:
       run: npm run lint
     - name: Typecheck
       run: npm run typecheck
+
+  tests:
+    name: Tests
+    runs-on: ubuntu-latest
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v2
+      with:
+        fetch-depth: 0
+    - name: Setup Node
+      uses: actions/setup-node@v2
+      with:
+        node-version: '14.x'
+        cache: 'npm'
+    - name: Install Packages
+      run: npm ci
+    - name: Unit Tests
+      run: npm run test
+

.gitignore

@@ -5,3 +5,4 @@ node_modules
 /storybook-static
 /build
 /styles/**/*.css
+/coverage

jest.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+    verbose: true,
+    moduleFileExtensions: ['js', 'json', 'ts', 'tsx'],
+    rootDir: '.',
+    transform: {
+        '^.+\\.tsx?$': 'ts-jest',
+    },
+    coverageDirectory: './coverage',
+    testEnvironment: 'node',
+    setupFiles: ['<rootDir>/src/setup-tests.ts'],
+    moduleNameMapper: {
+        '\\.(css|less|scss|sass)$': 'jest-transform-css',
+    },
+};

package.json

@@ -19,7 +19,7 @@
         "styles"
     ],
     "scripts": {
-        "test": "exit 0",
+        "test": "jest",
         "clean": "gulp clean",
         "build": "gulp",
         "start": "start-storybook -p 7007",
@@ -50,6 +50,9 @@
         "@storybook/addon-essentials": "^6.4.4",
         "@storybook/preset-scss": "^1.0.3",
         "@storybook/react": "^6.4.4",
+        "@types/enzyme": "^3.10.6",
+        "@types/enzyme-adapter-react-16": "^1.0.6",
+        "@types/jest": "^27.4.0",
         "@types/lodash": "^4.14.177",
         "@types/react": "^16.14.21",
         "@types/react-copy-to-clipboard": "^5.0.2",
@@ -62,12 +65,16 @@
         "@yandex-cloud/stylelint-config": "^1.0.0",
         "@yandex-cloud/tsconfig": "^1.0.0",
         "css-loader": "^5.2.7",
+        "enzyme": "^3.11.0",
+        "enzyme-adapter-react-16": "^1.15.6",
         "eslint": "^8.2.0",
         "gulp": "^4.0.2",
         "gulp-cli": "^2.3.0",
         "gulp-dart-sass": "^1.0.2",
         "gulp-replace": "^1.1.3",
         "gulp-typescript": "^5.0.1",
+        "jest": "^27.4.7",
+        "jest-transform-css": "^3.0.0",
         "npm-run-all": "^4.1.5",
         "postcss": "^8.3.11",
         "prettier": "2.4.1",
@@ -80,6 +87,7 @@
         "sass-loader": "^10.2.0",
         "style-loader": "^2.0.0",
         "stylelint": "^14.1.0",
+        "ts-jest": "^27.1.3",
         "typescript": "^4.4.4",
         "webpack": "^4.46.0"
     },

src/components/TextInput/__tests__/TextInput.test.tsx

@@ -0,0 +1,111 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+
+import {TextInput} from '../TextInput';
+import {TextAreaControl} from '../TextAreaControl/TextAreaControl';
+import {InputControl} from '../InputControl/InputControl';
+
+type TextInputEvent = React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>;
+
+describe('TextInput', () => {
+    it('should render text area component when component receives multiline props', () => {
+        const wrapper = shallow(<TextInput multiline />);
+
+        expect(wrapper.find(TextAreaControl).exists()).toBeTruthy();
+    });
+
+    it("shouldn render text input component when component doesn't receive multiline props", () => {
+        const wrapper = shallow(<TextInput />);
+
+        expect(wrapper.find(InputControl).exists()).toBeTruthy();
+    });
+
+    it('should render error message in input when component receives error props', () => {
+        const wrapper = shallow(<TextInput error="FAKE_ERROR" />);
+
+        expect(wrapper.find('.yc-text-input__error').exists()).toBeTruthy();
+    });
+
+    it("shouldn't render error message in input when component doesn't receive error props", () => {
+        const wrapper = shallow(<TextInput />);
+
+        expect(wrapper.find('.yc-text-input__error').exists()).toBeFalsy();
+    });
+
+    it('should render clear button when component receives hasClear props', () => {
+        const wrapper = shallow(<TextInput hasClear />);
+
+        expect(wrapper.find('.yc-text-input__clear').exists()).toBeTruthy();
+    });
+
+    it("shouldn't render clear button when component doesn't receive hasClear props", () => {
+        const wrapper = shallow(<TextInput />);
+
+        expect(wrapper.find('.yc-text-input__clear').exists()).toBeFalsy();
+    });
+
+    it('should call onChange with event function when input changes value', () => {
+        const FAKE_ON_CHANGE_FN = jest.fn();
+        const FAKE_EVENT = {target: {}} as TextInputEvent;
+
+        const wrapper = shallow(<TextInput onChange={FAKE_ON_CHANGE_FN} />);
+        wrapper.find(InputControl).props().onChange?.(FAKE_EVENT);
+
+        expect(FAKE_ON_CHANGE_FN).toBeCalledWith({...FAKE_EVENT});
+    });
+
+    it('should call onUpdate with "FAKE_VALUE" function when input changes value', () => {
+        const FAKE_VALUE = 'FAKE_VALUE';
+        const FAKE_ON_UPDATE_FN = jest.fn();
+        const FAKE_EVENT = {target: {value: FAKE_VALUE}} as TextInputEvent;
+
+        const wrapper = shallow(<TextInput onUpdate={FAKE_ON_UPDATE_FN} />);
+        wrapper.find(InputControl).props().onChange?.(FAKE_EVENT);
+
+        expect(FAKE_ON_UPDATE_FN).toBeCalledWith(FAKE_VALUE);
+    });
+
+    it('should call onChange function when it clickes to clean button and component receives hasClear', () => {
+        const FAKE_ON_CHANGE_FN = jest.fn();
+        const FAKE_EVENT = {target: {}} as TextInputEvent;
+        const FAKE_CONTROL_REF = {
+            current: {focus: jest.fn(), value: ''} as any as HTMLInputElement,
+        };
+
+        const wrapper = shallow(
+            <TextInput controlRef={FAKE_CONTROL_REF} hasClear onChange={FAKE_ON_CHANGE_FN} />,
+        );
+        (wrapper.find(InputControl).props().controlRef as Function)(FAKE_CONTROL_REF.current);
+        wrapper.find('.yc-text-input__clear').simulate('click', FAKE_EVENT);
+
+        expect(FAKE_ON_CHANGE_FN).toBeCalled();
+    });
+
+    it('should call onUpdate with "FAKE_VALUE" function when it clickes to clean button and component receives hasClear', () => {
+        const FAKE_ON_UPDATE_FN = jest.fn();
+        const FAKE_EVENT = {target: {}} as TextInputEvent;
+        const FAKE_CONTROL_REF = {
+            current: {focus: jest.fn(), value: ''} as any as HTMLInputElement,
+        };
+
+        const wrapper = shallow(
+            <TextInput controlRef={FAKE_CONTROL_REF} hasClear onUpdate={FAKE_ON_UPDATE_FN} />,
+        );
+        (wrapper.find(InputControl).props().controlRef as Function)(FAKE_CONTROL_REF.current);
+        wrapper.find('.yc-text-input__clear').simulate('click', FAKE_EVENT);
+
+        expect(FAKE_ON_UPDATE_FN).toBeCalledWith('');
+    });
+
+    it('should pass autoComplete = on to InputControl component when component recieves autoComplete props = true', () => {
+        const wrapper = shallow(<TextInput autoComplete />);
+
+        expect(wrapper.find(InputControl).props().autoComplete).toBe('on');
+    });
+
+    it('should pass autoComplete = off to InputControl component when component recieves autoComplete props = false', () => {
+        const wrapper = shallow(<TextInput autoComplete={false} />);
+
+        expect(wrapper.find(InputControl).props().autoComplete).toBe('off');
+    });
+});

src/setup-tests.ts

@@ -0,0 +1,4 @@
+import {configure} from 'enzyme';
+import EnzymeAdapter from 'enzyme-adapter-react-16';
+
+configure({adapter: new EnzymeAdapter()});