test: add search component unit test (#345)

* test: add search component unit test

* test: add search component with input unit test

* feat: optimized expression

* test: update snapshot

src/components/search/__tests__/__snapshots__/search.test.tsx.snap

@@ -0,0 +1,110 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Test Input Component Match the Group Input snapshot 1`] = `
+<div>
+  <textarea
+    autoCapitalize="off"
+    autoCorrect="off"
+    className=""
+    onBlur={[Function]}
+    onChange={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    spellCheck={false}
+    value=""
+  />
+  <div
+    className="mo-action-bar mo-search__toolbar"
+  >
+    <ul
+      className="mo-action-bar__container"
+    />
+  </div>
+</div>
+`;
+
+exports[`Test Input Component Match the Group Input snapshot 2`] = `
+<div
+  className="mo-search__group"
+>
+  <div>
+    <textarea
+      autoCapitalize="off"
+      autoCorrect="off"
+      className=""
+      onBlur={[Function]}
+      onChange={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      spellCheck={false}
+      value=""
+    />
+    <div
+      className="mo-action-bar mo-search__toolbar"
+    >
+      <ul
+        className="mo-action-bar__container"
+      />
+    </div>
+  </div>
+  <div>
+    <textarea
+      autoCapitalize="off"
+      autoCorrect="off"
+      className=""
+      onBlur={[Function]}
+      onChange={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      spellCheck={false}
+      value=""
+    />
+    <div
+      className="mo-action-bar mo-search__toolbar"
+    >
+      <ul
+        className="mo-action-bar__container"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Test Search Component Match the Search snapshot 1`] = `
+<div
+  className="mo-search"
+>
+  <span
+    className="mo-search__replace__button codicon codicon-chevron-right"
+    onClick={[Function]}
+  />
+  <div
+    className="mo-search__group"
+  >
+    <div
+      className="mo-search__input mo-search__target"
+    >
+      <textarea
+        autoCapitalize="off"
+        autoCorrect="off"
+        className=""
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        placeholder="Search"
+        spellCheck={false}
+        title="Search"
+        value=""
+      />
+      <div
+        className="mo-action-bar mo-search__toolbar"
+      >
+        <ul
+          className="mo-action-bar__container"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;

src/components/search/__tests__/search.test.tsx

@@ -0,0 +1,200 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import renderer from 'react-test-renderer';
+import '@testing-library/jest-dom';
+
+import { IActionBarItemProps } from '../../actionBar';
+import Input, { InfoTypeEnums } from '../input';
+import { Search } from '../index';
+import {
+    replaceBtnClassName,
+    replaceContainerClassName,
+    validationWarningInputClassName,
+    validationBaseInputClassName,
+} from '../base';
+
+const { Group } = Input;
+
+const TEST_ID = 'test';
+
+const mockData: IActionBarItemProps[] = [
+    {
+        id: TEST_ID,
+        name: 'mockDataTitle',
+        title: 'mockDataTitle',
+        icon: 'add',
+        checked: true,
+    },
+];
+
+describe('Test Input Component', () => {
+    test('Match the Group Input snapshot', () => {
+        const componentInput = renderer.create(<Input />);
+        const treeInput = componentInput.toJSON();
+
+        expect(treeInput).toMatchSnapshot();
+
+        const componentGroupWithChildren = renderer.create(
+            <Group>
+                <Input />
+                <Input />
+            </Group>
+        );
+        const treeChilren = componentGroupWithChildren.toJSON();
+
+        expect(treeChilren).toMatchSnapshot();
+    });
+
+    test('Input with Group snapshot', () => {
+        render(
+            <Group>
+                <Input />
+            </Group>
+        );
+
+        const textArea = screen.getByText(/.*/i, { selector: 'textarea' });
+
+        expect(textArea).not.toBeNull();
+    });
+
+    test('Input className', () => {
+        const INPUT_CLASSNAME = 'test-name';
+
+        render(<Input className={INPUT_CLASSNAME} />);
+
+        const div = screen.getByText(/.*/i, {
+            selector: 'textarea',
+        }).parentNode as HTMLDivElement;
+
+        expect(div.classList).toContain(INPUT_CLASSNAME);
+    });
+
+    test('Input placeholder', () => {
+        const INPUT_PLACEHOLDER = 'molecule';
+
+        render(<Input placeholder={INPUT_PLACEHOLDER} />);
+
+        const div = screen.getByText(/.*/i, {
+            selector: 'textarea',
+        });
+
+        expect(div.getAttribute('placeholder')).toBe(INPUT_PLACEHOLDER);
+    });
+
+    test('Input info', () => {
+        const INPUT_INFO = { type: InfoTypeEnums.warning, text: TEST_ID };
+        render(<Input info={INPUT_INFO} />);
+
+        const textArea = screen.getByText(/.*/i, {
+            selector: 'textarea',
+        });
+        expect(textArea.classList).toContain(validationWarningInputClassName);
+
+        fireEvent.focus(textArea);
+        const div = textArea.nextElementSibling as HTMLDivElement;
+
+        expect(div.textContent).toBe(TEST_ID);
+        expect(div.classList).toContain(validationBaseInputClassName);
+        expect(div.classList).toContain(validationWarningInputClassName);
+    });
+});
+
+describe('Test Search Component', () => {
+    test('Match the Search snapshot', () => {
+        const componentInput = renderer.create(<Search />);
+        const search = componentInput.toJSON();
+
+        expect(search).toMatchSnapshot();
+    });
+
+    test('Search className', () => {
+        const INPUT_CLASSNAME = 'test-name';
+        const wrapper = render(<Search className={INPUT_CLASSNAME} />);
+        const div = wrapper.container.firstElementChild as HTMLDivElement;
+
+        expect(div.classList).toContain(INPUT_CLASSNAME);
+    });
+
+    test('Search style', () => {
+        const INPUT_STYLE = { background: 'red' };
+        const wrapper = render(<Search style={INPUT_STYLE} />);
+        const div = wrapper.container.firstElementChild as HTMLDivElement;
+
+        expect(div.getAttribute('style')).toBe('background: red;');
+    });
+
+    test('Search value', () => {
+        const INPUT_VALUE = 'test';
+        const wrapper = render(
+            <Search data-testid={TEST_ID} values={[INPUT_VALUE]} />
+        );
+        const textarea = wrapper.container.querySelector<HTMLTextAreaElement>(
+            `textarea[autoCorrect='off']`
+        );
+
+        expect(textarea!.value).toBe(INPUT_VALUE);
+    });
+
+    test('Search dafult placeholder', () => {
+        const INPUT_VALUE = 'test';
+        const wrapper = render(<Search values={[INPUT_VALUE]} />);
+        const textarea = wrapper.container.querySelector<HTMLTextAreaElement>(
+            `textarea[autoCorrect='off']`
+        );
+
+        expect(textarea!.value).toBe(INPUT_VALUE);
+    });
+
+    test('Search placeholder', () => {
+        const DEFAULT_VALUE = 'Search';
+        const wrapper = render(<Search />);
+        const textarea = wrapper.container.querySelector<HTMLTextAreaElement>(
+            `textarea[autoCorrect='off']`
+        );
+
+        expect(textarea!.placeholder).toBe(DEFAULT_VALUE);
+    });
+
+    test('Search addons', () => {
+        const wrapper = render(<Search addons={[mockData]} />);
+        const li = wrapper.container.querySelector<HTMLLIElement>(
+            `li[id=${TEST_ID}]`
+        );
+
+        expect(li).toBeInTheDocument();
+    });
+
+    test('Search onButtonClick and replace show', () => {
+        const TEST_FN = jest.fn();
+        const INPUT_VALUE = 'test';
+        const wrapper = render(
+            <Search
+                addons={[, mockData]}
+                values={[, INPUT_VALUE]}
+                onButtonClick={TEST_FN}
+            />
+        );
+        const icon = wrapper.container.getElementsByClassName(
+            replaceBtnClassName
+        )[0];
+        expect(icon).not.toBeNull();
+
+        fireEvent.click(icon);
+        expect(TEST_FN).toBeCalled();
+
+        const input = wrapper.container.getElementsByClassName(
+            replaceContainerClassName
+        )[0];
+        expect(input).toBeInTheDocument();
+
+        const textarea = wrapper.container.querySelectorAll<HTMLTextAreaElement>(
+            `textarea[autoCorrect='off']`
+        )[1];
+        expect(textarea!.value).toBe(INPUT_VALUE);
+
+        const li = wrapper.container.querySelector<HTMLLIElement>(
+            `li[id=${TEST_ID}]`
+        );
+        expect(li).toBeInTheDocument();
+    });
+});