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

Jump to bottom

feat: update slide pane #385

Merged
merged 8 commits into from
Sep 26, 2023
Merged

feat: update slide pane #385

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
6e5c4bd
feat: update slidePane for mask
LuckyFBB Sep 6, 2023
779e109
feat(slidepane): add tabs for slidepane
LuckyFBB Sep 7, 2023
1db46bd
feat(slidepane): update motion for slidePane
LuckyFBB Sep 11, 2023
17bfdb0
feat(slidepane): update ts error and style
LuckyFBB Sep 12, 2023
4c6c79d
feat(slidepane): update doc and unit test
LuckyFBB Sep 16, 2023
423f19c
fix(slidepane): update props name and edit showMask to mask
LuckyFBB Sep 20, 2023
1860673
fix(unittest): update unit test
LuckyFBB Sep 20, 2023
b69f0e3
fix(slidepane): update ts type
LuckyFBB Sep 26, 2023
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
3 changes: 1 addition & 2 deletions src/blockHeader/__tests__/blockHeader.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
import React from 'react';
import { cleanup, fireEvent, render } from '@testing-library/react';
import { SizeType } from 'dt-react-component/esm/blockHeader';
import '@testing-library/jest-dom/extend-expect';

import BlockHeader from '../index';
import BlockHeader, { SizeType } from '../index';

const props = {
title: '标题1',
Expand Down Expand Up @@ -45,15 +44,15 @@
test('should render BlockHeader props default in BlockHeader', () => {
const { container } = render(<BlockHeader title="测试" showBackground />);
const wrap = container.firstChild;
expect(wrap!.firstChild!.firstChild!.firstChild).toHaveClass(`${prefixCls}-before-title`);

Check warning on line 47 in src/blockHeader/__tests__/blockHeader.test.tsx

View workflow job for this annotation

GitHub Actions / setup 

Forbidden non-null assertion

Check warning on line 47 in src/blockHeader/__tests__/blockHeader.test.tsx

View workflow job for this annotation

GitHub Actions / setup 

Forbidden non-null assertion

Check warning on line 47 in src/blockHeader/__tests__/blockHeader.test.tsx

View workflow job for this annotation

GitHub Actions / setup 

Forbidden non-null assertion
fireEvent.click(document.getElementsByClassName(`${prefixCls}-title-row`)[0]);
});
test('should render BlockHeader with different props', () => {
const { container, getByText } = render(<BlockHeader {...props2} />);
const wrap = container.firstChild;
expect(wrap).toHaveClass(`${prefixCls}`);
expect(wrap!.lastChild).toHaveClass(`${prefixCls}-content`);

Check warning on line 54 in src/blockHeader/__tests__/blockHeader.test.tsx

View workflow job for this annotation

GitHub Actions / setup 

Forbidden non-null assertion
expect(wrap!.firstChild).toHaveClass(`test-row-className`);

Check warning on line 55 in src/blockHeader/__tests__/blockHeader.test.tsx

View workflow job for this annotation

GitHub Actions / setup 

Forbidden non-null assertion
expect(getByText('标题2')).toHaveClass('test-title-className');
expect(getByText('说明文字')).toHaveClass(`${prefixCls}-after-title`);
expect(getByText('新增按钮')).toHaveClass(`test-button-after`);
Expand Down Expand Up @@ -85,8 +84,8 @@
const { container, getByText } = render(<BlockHeader {...props2} />);
const wrap = container.firstChild;
expect(wrap).toHaveClass(`${prefixCls}`);
expect(wrap!.lastChild).toHaveClass(`${prefixCls}-content`);

Check warning on line 87 in src/blockHeader/__tests__/blockHeader.test.tsx

View workflow job for this annotation

GitHub Actions / setup 

Forbidden non-null assertion
expect(wrap!.firstChild).toHaveClass(`test-row-className`);

Check warning on line 88 in src/blockHeader/__tests__/blockHeader.test.tsx

View workflow job for this annotation

GitHub Actions / setup 

Forbidden non-null assertion
expect(getByText('标题2')).toHaveClass('test-title-className');
expect(getByText('说明文字')).toHaveClass(`${prefixCls}-after-title`);
expect(getByText('Icon')).toBeTruthy();
Expand All @@ -95,11 +94,11 @@
const props = { title: '测试1', showBackground: false };
const { container } = render(<BlockHeader {...props} />);
const wrap = container.firstChild;
expect(wrap!.firstChild).not.toHaveClass(`background`);

Check warning on line 97 in src/blockHeader/__tests__/blockHeader.test.tsx

View workflow job for this annotation

GitHub Actions / setup 

Forbidden non-null assertion
});
test('should render BlockHeader className when isSmall is small', () => {
const { container, getByText } = render(<BlockHeader {...props2} />);
const wrap = container.firstChild!;

Check warning on line 101 in src/blockHeader/__tests__/blockHeader.test.tsx

View workflow job for this annotation

GitHub Actions / setup 

Forbidden non-null assertion
expect(wrap).toHaveClass(`${prefixCls}`);
expect(wrap.lastChild).toHaveClass(`${prefixCls}-content`);
expect(wrap.firstChild).toHaveClass(`test-row-className`);
Expand All @@ -110,7 +109,7 @@

test('should render BlockHeader tooltip success', () => {
const { container } = render(<BlockHeader {...props3} />);
const wrap = container.firstChild!;

Check warning on line 112 in src/blockHeader/__tests__/blockHeader.test.tsx

View workflow job for this annotation

GitHub Actions / setup 

Forbidden non-null assertion
const afterTitleWrap = wrap.firstChild!.firstChild!.lastChild;
expect(afterTitleWrap!.firstChild).toHaveClass('anticon-question-circle');
});
Expand Down
101 changes: 100 additions & 1 deletion src/slidePane/__tests/__snapshots__/index.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,102 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`test SlidePane snapshot match 1`] = `<DocumentFragment />`;
exports[`test SlidePane snapshot match 1`] = `
{
"asFragment": [Function],
"baseElement": <body>
<div />
<div>
<div
class="dtc-slide-pane dtc-slide-pane-right dtc-slide-pane-open"
tabindex="-1"
>
<div
aria-hidden="true"
data-sentinel="start"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
<div
class="dtc-slide-pane-content-wrapper"
style="width: 378px;"
>
<div
aria-modal="true"
class="dtc-slide-pane-content"
role="dialog"
>
<img
alt="closeBtn"
class="dtc-slide-pane-icon"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAABwCAYAAAAE0LDPAAAAAXNSR0IArs4c6QAAAnlJREFUaEPtmk9IVHEQx78jufpw7ykouuEaBG6dEmrXOmRRt476VgvyEngKlNqQMu3PoSU7iCBq4CW2olNdRMRr7HasnnZb0y57WGODzUDjt/RIonbeyzfQYd51h/m8+c7395u3MOSs5Xexr4dKRLt5AhYJtbPRaNO7velo/4Bf6YhoB8B0R3vzNSLaNr8ECnBRRLTc0d583kBEAJU3J5o6HG0ZkgTs1OBATAxgqqghTIoCiPBeFABQSRggZFOxg/anC0ElYq9JlUglYhVgA9RFKhGrABugLlKJWAXYAHWRSsQqwAaoi1QiVgE2gHVRejKDUKgWQ1cvmj/XbMLfA3jA42dwVvPo7+tBd/xo8ICNzQLG7y3AskIYvz2IcEO9LwhbgcmWebGCpeUcEvEYBvrOBg8ol7cxOjaP4lYJqZEkIm2NniGeKjDZ3mQ/YPbJa7S1NiI1YntuuGeAgTx8lMHqx3XYvWdwOnHMUxW+AJufC7hzdwH1VggTt64gHLZYiC+Ayfb85QoWl3KIn+jEpeS54AHlb98xOjaHYrGEG8M2DkWaqkJ8V2CyZd86mJl7hdaWg7h5PVm14f8EMJD0zxM+ePkCuo4f+WsV/ycgm3MwMy8k0d4mp4ZtRIJusmvTxMlODNgB21T8oLlXRbK3B6cS3maDZxeJXnbudb315Wvl9AZ+XbsDpzseQ3/QA+fTRgET9wVHpvmqcNbWK6PSjEy/D9vkB+mnaLDq5D5b/L6x7+8iBbBNVolUItYDKpFKxCrABqiLVCJWATZAXaQSsQqwAeoilYhVgA1QFzESCS8wia9giS6Rma1B0TU40UU+sVVEoWXK6uugPwBjVkdxauLcgwAAAABJRU5ErkJggg=="
/>
<div
class="dtc-slide-pane-body"
>
Hello World
</div>
</div>
</div>
<div
aria-hidden="true"
data-sentinel="end"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
</div>
</div>
</body>,
"container": <div />,
"debug": [Function],
"findAllByAltText": [Function],
"findAllByDisplayValue": [Function],
"findAllByLabelText": [Function],
"findAllByPlaceholderText": [Function],
"findAllByRole": [Function],
"findAllByTestId": [Function],
"findAllByText": [Function],
"findAllByTitle": [Function],
"findByAltText": [Function],
"findByDisplayValue": [Function],
"findByLabelText": [Function],
"findByPlaceholderText": [Function],
"findByRole": [Function],
"findByTestId": [Function],
"findByText": [Function],
"findByTitle": [Function],
"getAllByAltText": [Function],
"getAllByDisplayValue": [Function],
"getAllByLabelText": [Function],
"getAllByPlaceholderText": [Function],
"getAllByRole": [Function],
"getAllByTestId": [Function],
"getAllByText": [Function],
"getAllByTitle": [Function],
"getByAltText": [Function],
"getByDisplayValue": [Function],
"getByLabelText": [Function],
"getByPlaceholderText": [Function],
"getByRole": [Function],
"getByTestId": [Function],
"getByText": [Function],
"getByTitle": [Function],
"queryAllByAltText": [Function],
"queryAllByDisplayValue": [Function],
"queryAllByLabelText": [Function],
"queryAllByPlaceholderText": [Function],
"queryAllByRole": [Function],
"queryAllByTestId": [Function],
"queryAllByText": [Function],
"queryAllByTitle": [Function],
"queryByAltText": [Function],
"queryByDisplayValue": [Function],
"queryByLabelText": [Function],
"queryByPlaceholderText": [Function],
"queryByRole": [Function],
"queryByTestId": [Function],
"queryByText": [Function],
"queryByTitle": [Function],
"rerender": [Function],
"unmount": [Function],
}
`;
120 changes: 96 additions & 24 deletions src/slidePane/__tests/index.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,46 +1,118 @@
import React from 'react';
import { fireEvent, render, screen } from '@testing-library/react';
import { fireEvent, render } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';

import SlidePane from '../index';

describe('test SlidePane ', () => {
const expectValues = {
children: (
<div>
<h1>success</h1>
</div>
),
visible: true,
style: { color: 'red', background: '#FF7C12' },
};
test('snapshot match', () => {
const { asFragment } = render(
<SlidePane visible={expectValues.visible}>{expectValues.children}</SlidePane>
const wrapper = render(<SlidePane visible>Hello World</SlidePane>);
expect(wrapper).toMatchSnapshot();
});
test('should be invisible', () => {
const { container } = render(<SlidePane visible={false}>Hello World</SlidePane>);
expect(container).not.toHaveClass();
});
test('should render mask correct ', () => {
const { unmount } = render(<SlidePane visible>Hello World</SlidePane>);
const dom = document.querySelector('.dtc-slide-pane-mask');
expect(dom).toBe(null);
unmount();
render(
<SlidePane visible mask>
Hello World
</SlidePane>
);
expect(asFragment()).toMatchSnapshot();
const domMask = document.querySelector('.dtc-slide-pane-mask');
expect(domMask).not.toBe(null);
});
test('should render correct', () => {
test('should render width correct', () => {
render(
<SlidePane visible={expectValues.visible} style={expectValues.style}>
{expectValues.children}
<SlidePane visible width={640}>
Hello World
</SlidePane>
);
const wrapper = document.getElementsByClassName('dtc-slide-pane');
expect(wrapper?.[0]).toHaveStyle(expectValues.style);
expect(screen.getByRole('heading')).toHaveTextContent('success');
expect(document.querySelector('.dtc-slide-pane-content-wrapper')).toHaveStyle({
width: '640px',
});
});
test('should be invisible', () => {
const { container } = render(
<SlidePane visible={false}>{expectValues.children}</SlidePane>
test('should render className/style correct', () => {
const { unmount } = render(
<SlidePane
visible
rootClassName="root-className"
bodyClassName="body-className"
rootStyle={{ color: 'red' }}
bodyStyle={{ backgroundColor: 'forestgreen' }}
>
Hello World
</SlidePane>
);
expect(container).not.toHaveClass();
expect(document.querySelector('.dtc-slide-pane')).toHaveClass('root-className');
expect(document.querySelector('.dtc-slide-pane-body')).toHaveClass('body-className');
expect(document.querySelector('.dtc-slide-pane')).toHaveStyle({ color: 'red' });
expect(document.querySelector('.dtc-slide-pane-body')).toHaveStyle({
backgroundColor: 'forestgreen',
});
unmount();
});
test('should render tab correct', () => {
const { getByText, unmount } = render(
<SlidePane
visible
width={640}
tabs={[
{ key: '1', title: 'tab1' },
{ key: '2', title: 'tab2' },
]}
>
{(key) => {
switch (key) {
case '1':
return <div>基本信息</div>;
case '2':
return <div>变更记录</div>;
default:
break;
}
}}
</SlidePane>
);
expect(document.querySelector('.dtc-slide-pane-tabs')).not.toBe(null);
expect(getByText('tab1')).toBeTruthy();
expect(getByText('基本信息')).toBeTruthy();
unmount();

const { getByText: getByText1 } = render(
<SlidePane
visible
width={640}
tabs={[
{ key: '1', title: 'tab1' },
{ key: '2', title: 'tab2' },
]}
activeKey="2"
>
{(key) => {
switch (key) {
case '1':
return <div>基本信息</div>;
case '2':
return <div>变更记录</div>;
default:
break;
}
}}
</SlidePane>
);
expect(getByText1('变更记录')).toBeTruthy();
expect(getByText1('tab2').parentNode).toHaveClass('ant-tabs-tab-active');
});
test('should callback to be called', () => {
const fn = jest.fn();
const { getByRole } = render(
<SlidePane visible onClose={fn}>
{expectValues.children}
Hello World
</SlidePane>
);
const oImg = getByRole('img');
Expand Down
7 changes: 2 additions & 5 deletions src/slidePane/demos/basic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,9 @@ export default () => {
</Button>
<SlidePane
visible={visible}
style={{
width: `${width}%`,
minHeight: '600px',
height: '100%',
}}
width={`${width}%`}
onClose={() => setVisible(false)}
title="title"
>
<div>hello world</div>
</SlidePane>
Expand Down
36 changes: 36 additions & 0 deletions src/slidePane/demos/basic_mask.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import React, { useState } from 'react';
import { Button, Slider } from 'antd';
import { SlidePane } from 'dt-react-component';

export default () => {
const [visible, setVisible] = useState(false);
const [width, setWidth] = useState(80);

return (
<>
<Slider
defaultValue={width}
min={10}
max={100}
onChange={(value: number) => setWidth(value)}
/>
<span>width:{width}%</span>
<Button style={{ margin: '10px' }} onClick={() => setVisible((v) => !v)}>
click me
</Button>
<SlidePane
visible={visible}
rootStyle={{
minHeight: '600px',
height: '100%',
}}
width={`${width}%`}
onClose={() => setVisible(false)}
title="title"
mask
>
<div>hello world</div>
</SlidePane>
</>
);
};
32 changes: 32 additions & 0 deletions src/slidePane/demos/customTitle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import React, { useState } from 'react';
import { Button } from 'antd';
import { SlidePane } from 'dt-react-component';

export default () => {
const [visible, setVisible] = useState(false);

return (
<>
<Button onClick={() => setVisible(true)}>打开</Button>
<SlidePane
visible={visible}
rootStyle={{
minHeight: '600px',
height: '100%',
}}
onClose={() => setVisible(false)}
title={
<div>
<div>增信方式</div>
<div>
<span>创建时间： xxxx</span>
<span>更新时间： xxxx</span>
</div>
</div>
}
>
<div>hello world</div>
</SlidePane>
</>
);
};
40 changes: 40 additions & 0 deletions src/slidePane/demos/tabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import React, { useState } from 'react';
import { Button } from 'antd';
import { SlidePane } from 'dt-react-component';

export default () => {
const [visible, setVisible] = useState(false);

return (
<>
<Button onClick={() => setVisible(true)}>打开</Button>
<SlidePane
visible={visible}
onClose={() => setVisible(false)}
title={'Title'}
tabs={[
{
key: 'basicInfo',
title: '基本信息',
},
{
key: 'changelog',
title: '变更记录',
},
]}
activeKey="changelog"
>
{(key: string) => {
switch (key) {
case 'basicInfo':
return <div>基本信息</div>;
case 'changelog':
return <div>变更记录</div>;
default:
break;
}
}}
</SlidePane>
</>
);
};
Loading