Skip to content

Commit

Permalink
fix: renderPane exec twice
Browse files Browse the repository at this point in the history
  • Loading branch information
@mortalYoung
mortalYoung committed Sep 17, 2021
1 parent 3dc3f49 commit b783e75
Show file tree
Hide file tree
Showing 6 changed files with 4 additions and 146 deletions.
22 changes: 0 additions & 22 deletions src/components/tabs/__tests__/__snapshots__/tabs.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,27 +44,5 @@ exports[`The Tabs Components The snapshot 1`] = `
</a>
</div>
</div>
<div
className="mo-tabs__content"
>
<div
className="mo-tabs__content__item"
>
<div
data-testid="test1"
>
test1
</div>
</div>
<div
className="mo-tabs__content__item"
>
<div
data-testid="test2"
>
test2
</div>
</div>
</div>
</div>
`;
22 changes: 2 additions & 20 deletions src/components/tabs/__tests__/tabs.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from 'react';
import { cleanup, fireEvent, render, waitFor } from '@testing-library/react';
import renderer from 'react-test-renderer';
import '@testing-library/jest-dom';
import { Tabs, tabsClassName, tabsContentActiveClassName } from '..';
import { Tabs, tabsClassName } from '..';
import { ITabProps, tabItemActiveClassName } from '../tab';
import { dragToTargetNode } from '@test/utils';

Expand Down Expand Up @@ -32,10 +32,8 @@ describe('The Tabs Components', () => {

test('Should render nothing', () => {
const { container } = render(<Tabs />);
const content = container.querySelector('.mo-tabs__content');
const header = container.querySelector('.mo-tabs__header');

expect(content?.childElementCount).toBe(0);
expect(header?.childElementCount).toBe(0);
});

Expand All @@ -49,18 +47,6 @@ describe('The Tabs Components', () => {
expect(body.classList).toContain('test-tabs');
});

test('Should support to renderPane via function', () => {
const data = mockData.concat();
data.push({
id: '3',
name: 'test-title-3',
renderPane: () => <div data-testid="test3">test3</div>,
closable: true,
});
const { getByTestId } = render(<Tabs data={data} />);
expect(getByTestId('test3')).toBeInTheDocument();
});

test('Should render card type', () => {
const { container } = render(<Tabs type="card" data={mockData} />);

Expand All @@ -69,13 +55,9 @@ describe('The Tabs Components', () => {
});

test('Should active specific tab', () => {
const { getByText, getByTestId } = render(
<Tabs activeTab="1" data={mockData} />
);
const { getByText } = render(<Tabs activeTab="1" data={mockData} />);
const testHeader = getByText('test-title-1');
const testContent = getByTestId('test1').parentElement;
expect(testHeader?.classList).toContain(tabItemActiveClassName);
expect(testContent?.classList).toContain(tabsContentActiveClassName);
});

test('Should trigger events', async () => {
Expand Down
26 changes: 1 addition & 25 deletions src/components/tabs/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
classNames,
} from 'mo/common/className';

import { Tab, ITabProps, tabItemClassName } from './tab';
import { Tab, ITabProps } from './tab';
import DragAndDrop from './dragAndDrop';

export type TabsType = 'line' | 'card';
Expand All @@ -28,13 +28,6 @@ export interface ITabsProps<T> extends React.ComponentProps<any> {

export const tabsClassName = prefixClaName('tabs');
export const tabsHeader = getBEMElement(tabsClassName, 'header');
export const tabsContent = getBEMElement(tabsClassName, 'content');
export const tabsContentItem = getBEMElement(tabsContent, 'item');
export const tabsContentActiveClassName = getBEMModifier(
tabsContentItem,
'active'
);
export const tabItemCloseClassName = getBEMElement(tabItemClassName, 'close');

export function Tabs<T>(props: ITabsProps<T>) {
const {
Expand Down Expand Up @@ -88,23 +81,6 @@ export function Tabs<T>(props: ITabsProps<T>) {
);
})}
</div>
<div className={tabsContent}>
{data?.map((tab: ITabProps<T>) => {
return (
<div
key={tab.id}
className={classNames(tabsContentItem, {
[tabsContentActiveClassName]:
activeTab === tab.id,
})}
>
{tab.renderPane instanceof Function
? tab.renderPane(tab)
: tab.renderPane}
</div>
);
})}
</div>
</div>
</DragAndDrop>
);
Expand Down
13 changes: 0 additions & 13 deletions src/workbench/__tests__/__snapshots__/workbench.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -433,19 +433,6 @@ exports[`Test Workbench Component Match The WorkbenchView snapshot 1`] = `
问题
</div>
</div>
<div
class="mo-tabs__content"
>
<div
class="mo-tabs__content__item"
>
<div
style="margin: 0px 18px; user-select: none;"
>
未在工作区检测到问题
</div>
</div>
</div>
</div>
<div
class="mo-action-bar mo-panel__toolbar"
Expand Down
63 changes: 0 additions & 63 deletions src/workbench/panel/__tests__/__snapshots__/panel.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,32 +32,6 @@ exports[`Test Panel Component Match the Panel snapshot 1`] = `
输出
</div>
</div>
<div
className="mo-tabs__content"
>
<div
className="mo-tabs__content__item"
/>
<div
className="mo-tabs__content__item mo-tabs__content__item--active"
>
<div
className="mo-output"
>
<div
className="mo-monaco-editor"
style={
Object {
"height": "100%",
"minHeight": "400px",
"position": "relative",
"width": "100%",
}
}
/>
</div>
</div>
</div>
</div>
<div
className="mo-action-bar mo-panel__toolbar"
Expand Down Expand Up @@ -145,43 +119,6 @@ exports[`Test Panel Component Match the PanelView snapshot 1`] = `
输出
</div>
</div>
<div
className="mo-tabs__content"
>
<div
className="mo-tabs__content__item"
>
<div
style={
Object {
"margin": "0 18px",
"userSelect": "none",
}
}
>
未在工作区检测到问题
</div>
</div>
<div
className="mo-tabs__content__item mo-tabs__content__item--active"
>
<div
className="mo-output"
>
<div
className="mo-monaco-editor"
style={
Object {
"height": "100%",
"minHeight": "400px",
"position": "relative",
"width": "100%",
}
}
/>
</div>
</div>
</div>
</div>
<div
className="mo-action-bar mo-panel__toolbar"
Expand Down
4 changes: 1 addition & 3 deletions src/workbench/panel/__tests__/panel.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,9 +82,7 @@ describe('Test Panel Component', () => {
expect(
container.querySelector('.mo-monaco-editor')
).not.toBeInTheDocument();
// The customizedPane element are rendered in two places(mo-panel__container/mo-tabs__content),
// so the expect value is 2
expect(getAllByText('customizedPane').length).toBe(2);
expect(getAllByText('customizedPane').length).toBe(1);
});

test('Sort the Panel ', () => {
Expand Down

0 comments on commit b783e75

Please sign in to comment.