Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

test: add unit test for explorer and searchPanel #393

Merged
merged 2 commits into from
Sep 3, 2021
Merged

test: add unit test for explorer and searchPanel #393

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
32d49c8
test: add unit test for explorer and searchPanel
mortalYoung Sep 2, 2021
9f79744
refactor: improve search controller types for testing
mortalYoung Sep 2, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions src/controller/search/search.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,23 +28,23 @@ import {
import { ISearchProps, ITreeNodeItemProps } from 'mo/components';

export interface ISearchController {
getSearchIndex: (text: string, queryVal?: string) => number;
setSearchValue: (value?: string) => void;
setReplaceValue: (value?: string) => void;
setValidateInfo: (info: string | ISearchProps['validationInfo']) => void;
toggleMode: (status: boolean) => void;
getSearchIndex?: (text: string, queryVal?: string) => number;
setSearchValue?: (value?: string) => void;
setReplaceValue?: (value?: string) => void;
setValidateInfo?: (info: string | ISearchProps['validationInfo']) => void;
toggleMode?: (status: boolean) => void;
toggleAddon?: (addon?: IActionBarItemProps) => void;
validateValue: (
validateValue?: (
value: string,
callback: (err: void | Error) => void
) => void;

onResultClick: (
onResultClick?: (
item: ITreeNodeItemProps,
resultData: ITreeNodeItemProps[]
) => void;
onChange: (value: string, replaceValue: string) => void;
onSearch: (value: string, replaceValue: string) => void;
onChange?: (value: string, replaceValue: string) => void;
onSearch?: (value: string, replaceValue: string) => void;
}

@singleton()
Expand Down
101 changes: 101 additions & 0 deletions src/workbench/sidebar/__tests__/__snapshots__/explore.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`The Explorer Component Match Snapshot 1`] = `
<div
className="mo-sidebar-explorer"
>
<header
className="mo-sidebar__header"
>
<div
className="mo-sidebar__title"
>
<h2>
浏览
</h2>
</div>
<div
className="mo-sidebar__toolbar"
>
<div
className="mo-tool-bar"
>
<div
className="mo-action-bar"
>
<ul
className="mo-action-bar__container"
>
<li
className="mo-action-bar__item"
id="test"
onClick={[Function]}
>
<span
onMouseEnter={[Function]}
onMouseLeave={[Function]}
>
test
</span>
</li>
</ul>
</div>
</div>
</div>
</header>
<div
className="mo-sidebar__content"
>
<div
className="mo-collapse"
>
<div
className="mo-collapse__item"
data-content="open"
>
<div
className="mo-collapse__header"
onClick={[Function]}
tabIndex={0}
>
<span
className="codicon codicon-chevron-right"
/>
Open
<div
className="mo-collapse__extra"
/>
</div>
<div
className="mo-collapse__content"
data-content="open"
tabIndex={0}
/>
</div>
<div
className="mo-collapse__item"
data-content="test"
>
<div
className="mo-collapse__header"
onClick={[Function]}
tabIndex={0}
>
<span
className="codicon codicon-chevron-right"
/>
test
<div
className="mo-collapse__extra"
/>
</div>
<div
className="mo-collapse__content"
data-content="test"
tabIndex={0}
/>
</div>
</div>
</div>
</div>
`;
170 changes: 170 additions & 0 deletions src/workbench/sidebar/__tests__/explore.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,170 @@
import React from 'react';
import renderer from 'react-test-renderer';
import { cleanup, fireEvent, render } from '@testing-library/react';
import '@testing-library/jest-dom';
import { expectFnCalled } from '@test/utils';
import { Explorer } from '../explore';
import { toolbarClassName } from 'mo/components/toolbar';

const mockContextMenu = {
id: 'contextMenu',
name: 'contextMenu',
'data-testid': 'test-toolbar',
};
const mockToolbar = {
id: 'test',
name: 'test',
contextMenu: [mockContextMenu],
};
const mockData = [
{
id: 'open',
name: 'Open',
},
{
id: 'test',
name: 'test',
panel: [mockToolbar],
},
];

// mock collapse
jest.mock('mo/components/collapse', () => {
const originalModule = jest.requireActual('mo/components/collapse');
return {
...originalModule,
Collapse: jest
.fn()
// to mock originalModule once for ensure snapshot is the actual component
.mockImplementationOnce(originalModule.Collapse)
.mockImplementation(
({ data, onCollapseChange, onToolbarClick }) => (
<div data-testid="collapse">
{data.map((item, index) => {
const { panel = [] } = item;
return (
<span key={index}>
<span
data-testid={item.id}
onClick={(e) =>
onCollapseChange(item.id)
}
>
collapse-{index}
</span>
{panel.map((p, index) => (
<span
data-testid={`${item.id}-${p.id}`}
key={index}
onClick={() =>
onToolbarClick(p, item)
}
>
panel-{index}
</span>
))}
</span>
);
})}
</div>
)
),
};
});

describe('The Explorer Component', () => {
afterEach(cleanup);

test('Match Snapshot', () => {
const component = renderer.create(
<Explorer data={mockData} headerToolBar={mockToolbar} />
);
expect(component.toJSON()).toMatchSnapshot();
});

test('Should trigger onToolbarClick event', () => {
expectFnCalled((mockFn) => {
const { getByTestId } = render(
<Explorer
data={mockData}
headerToolBar={mockToolbar}
onToolbarClick={mockFn}
/>
);

const toolbar = getByTestId(`${mockData[1].id}-${mockToolbar.id}`);
fireEvent.click(toolbar);

expect(mockFn.mock.calls[0][0]).toEqual(mockToolbar);
expect(mockFn.mock.calls[0][1]).toEqual(mockData[1]);
});
});

test('Should trigger onCollapseChange event', () => {
expectFnCalled((mockFn) => {
const { getByTestId } = render(
<Explorer
data={mockData}
headerToolBar={mockToolbar}
onCollapseChange={mockFn}
/>
);

const target = mockData[1];
const header = getByTestId(target.id);
fireEvent.click(header);

expect(mockFn.mock.calls[0][0]).toEqual(target.id);
});
});

test('Should trigger onActionsContextMenuClick event', () => {
expectFnCalled((mockFn) => {
const { container, getByTestId } = render(
<Explorer
data={mockData}
headerToolBar={mockToolbar}
onActionsContextMenuClick={mockFn}
/>
);

const toolbar = container.querySelector(`.${toolbarClassName}`);
const target = toolbar?.querySelector(`#${mockToolbar.id}`);

expect(target).toBeInTheDocument();
fireEvent.contextMenu(target!);

const toolbarItem = getByTestId(mockContextMenu['data-testid']);
fireEvent.click(toolbarItem);

expect(mockFn.mock.calls[0][1]).toEqual(
expect.objectContaining(mockContextMenu)
);
});
});

test('Should trigger onClick event in header toolbar', () => {
expectFnCalled((mockFn) => {
const { container, getByTestId } = render(
<Explorer
data={mockData}
headerToolBar={mockToolbar}
onClick={mockFn}
/>
);

const toolbar = container.querySelector(`.${toolbarClassName}`);
const target = toolbar?.querySelector(`#${mockToolbar.id}`);

expect(target).toBeInTheDocument();
fireEvent.click(target!);

const toolbarItem = getByTestId(mockContextMenu['data-testid']);
fireEvent.click(toolbarItem);

expect(mockFn.mock.calls[0][1]).toEqual(
expect.objectContaining(mockToolbar)
);
});
});
});
Loading