Skip to content

Commit d071af3

Browse files
dev-javascriptdev-javascript
committed
add panel.test.js
1 parent 2332675 commit d071af3

File tree

4 files changed

+282
-6
lines changed

4 files changed

+282
-6
lines changed

‎src/panel/__snapshots__/panel.test.js.snap

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`panel structure : custom panelComponent 1`] = `
4+
<div>
5+
<div
6+
aria-hidden={false}
7+
aria-labelledby="rc-dyn-tabs-l-1"
8+
className="rc-dyn-tabs-panel rc-dyn-tabs-selected"
9+
id="rc-dyn-tabs-p-1"
10+
role="tabpanel"
11+
tab-id="1"
12+
>
13+
<span
14+
className="custom-panel-selected"
15+
>
16+
tab1 panel
17+
</span>
18+
</div>
19+
<div
20+
aria-hidden={true}
21+
aria-labelledby="rc-dyn-tabs-l-2"
22+
className="rc-dyn-tabs-panel"
23+
id="rc-dyn-tabs-p-2"
24+
role="tabpanel"
25+
tab-id="2"
26+
>
27+
<span
28+
className="custom-panel-none-selected"
29+
>
30+
tab2 panel
31+
</span>
32+
</div>
33+
</div>
34+
`;
35+
36+
exports[`panel structure : custom panelComponent with rtl and none accessibility options 1`] = `
37+
<div>
38+
<div
39+
className="rc-dyn-tabs-panel rc-dyn-tabs-selected"
40+
tab-id="1"
41+
>
42+
<span
43+
className="custom-panel-selected"
44+
>
45+
tab1 panel
46+
</span>
47+
</div>
48+
<div
49+
className="rc-dyn-tabs-panel"
50+
tab-id="2"
51+
>
52+
<span
53+
className="custom-panel-none-selected"
54+
>
55+
tab2 panel
56+
</span>
57+
</div>
58+
</div>
59+
`;
60+
61+
exports[`panel structure : default options 1`] = `
62+
<div>
63+
<div
64+
aria-hidden={false}
65+
aria-labelledby="rc-dyn-tabs-l-1"
66+
className="rc-dyn-tabs-panel rc-dyn-tabs-selected"
67+
id="rc-dyn-tabs-p-1"
68+
role="tabpanel"
69+
tab-id="1"
70+
>
71+
<p>
72+
tab1 panel
73+
</p>
74+
</div>
75+
<div
76+
aria-hidden={true}
77+
aria-labelledby="rc-dyn-tabs-l-2"
78+
className="rc-dyn-tabs-panel"
79+
id="rc-dyn-tabs-p-2"
80+
role="tabpanel"
81+
tab-id="2"
82+
>
83+
<p>
84+
tab2 panel
85+
</p>
86+
</div>
87+
<div
88+
aria-hidden={true}
89+
aria-labelledby="rc-dyn-tabs-l-3"
90+
className="rc-dyn-tabs-panel"
91+
id="rc-dyn-tabs-p-3"
92+
role="tabpanel"
93+
tab-id="3"
94+
>
95+
<div />
96+
</div>
97+
<div
98+
aria-hidden={true}
99+
aria-labelledby="rc-dyn-tabs-l-4"
100+
className="rc-dyn-tabs-panel"
101+
id="rc-dyn-tabs-p-4"
102+
role="tabpanel"
103+
tab-id="4"
104+
>
105+
<div
106+
class="custom-panel"
107+
>
108+
panel 4 is not selected
109+
</div>
110+
</div>
111+
<div
112+
aria-hidden={true}
113+
aria-labelledby="rc-dyn-tabs-l-5"
114+
className="rc-dyn-tabs-panel"
115+
id="rc-dyn-tabs-p-5"
116+
role="tabpanel"
117+
tab-id="5"
118+
>
119+
<span>
120+
panel 6
121+
</span>
122+
</div>
123+
</div>
124+
`;
125+
126+
exports[`panel structure : rtl and none accessibility options 1`] = `
127+
<div>
128+
<div
129+
className="rc-dyn-tabs-panel rc-dyn-tabs-selected"
130+
tab-id="1"
131+
>
132+
<p>
133+
tab1 panel
134+
</p>
135+
</div>
136+
<div
137+
className="rc-dyn-tabs-panel"
138+
tab-id="2"
139+
>
140+
<p>
141+
tab2 panel
142+
</p>
143+
</div>
144+
<div
145+
className="rc-dyn-tabs-panel"
146+
tab-id="3"
147+
>
148+
<div />
149+
</div>
150+
<div
151+
className="rc-dyn-tabs-panel"
152+
tab-id="4"
153+
>
154+
<div
155+
class="custom-panel"
156+
>
157+
panel 4 is not selected
158+
</div>
159+
</div>
160+
<div
161+
className="rc-dyn-tabs-panel"
162+
tab-id="5"
163+
>
164+
<span>
165+
panel 6
166+
</span>
167+
</div>
168+
</div>
169+
`;

‎src/panel/panel.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import React, { useContext, memo } from 'react';
1+
import React, { memo } from 'react';
22
import { ApiContext, ForceUpdateContext } from '../utils/context.js';
33
import panelPropsManager from './panelPropsManager.js';
44
const Panel = memo(function Panel(props) {
55
React.useContext(ForceUpdateContext);
66
const { id, selectedTabID } = props
7-
, api = useContext(ApiContext)
7+
, api = React.useContext(ApiContext)
88
, isSelected = id === selectedTabID
99
, panelProps = panelPropsManager({ isSelected, api, id })
1010
, PanelComponent = api.getTab(id).panelComponent;

‎src/panel/panel.test.js

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
import React from "react"
2+
import { unmountComponentAtNode } from "react-dom";
3+
import Panel from "./panel.js";
4+
import renderer from 'react-test-renderer';
5+
import Api from '../utils/api/api.js';
6+
let container = document.createElement("div"), realUseContext;
7+
const getDefaultApi = () => ({
8+
tabs: [
9+
{ id: '1', title: 'tab1', panelComponent: props => <p>{props.api.getTab(props.id).title + ' panel'}</p> },
10+
{ id: '2', title: 'tab2', disable: true, panelComponent: props => <p>{props.api.getTab(props.id).title + ' panel'}</p> },
11+
{ id: '3', title: 'tab3' },
12+
{
13+
id: '4', title: 'tab4', panelComponent: props => {
14+
let panelContent = 'panel 4 is ';
15+
props.isSelected || (panelContent = panelContent + 'not ');
16+
panelContent = panelContent + 'selected';
17+
return (<div class='custom-panel'>{panelContent}</div>);
18+
}
19+
},
20+
{ id: '5', title: 'tab5', panelComponent: <span>panel 6</span> }
21+
]
22+
});
23+
const setMockUseContext = (op = {}) => {
24+
const defaultOp = getDefaultApi();
25+
const instance = new (Api)({ options: Object.assign({}, defaultOp, op) });
26+
React.useContext = jest.fn(() => instance);
27+
};
28+
beforeAll(() => {
29+
document.body.appendChild(container);
30+
realUseContext = React.useContext;
31+
});
32+
beforeEach(() => {
33+
});
34+
afterEach(() => {
35+
unmountComponentAtNode(container);
36+
container.innerHTML = "";
37+
React.useContext = realUseContext;
38+
});
39+
afterAll(() => {
40+
document.body.removeChild(container);
41+
container = null;
42+
});
43+
describe('panel structure : ', () => {
44+
test('default options', () => {
45+
setMockUseContext();
46+
const tree = renderer
47+
.create(<div>
48+
<Panel id="1" selectedTabID='1' ></Panel>
49+
<Panel id="2" selectedTabID='1' ></Panel>
50+
<Panel id="3" selectedTabID='1' ></Panel>
51+
<Panel id="4" selectedTabID='1' ></Panel>
52+
<Panel id="5" selectedTabID='1' ></Panel>
53+
</div>)
54+
.toJSON();
55+
expect(tree).toMatchSnapshot();
56+
});
57+
test('rtl and none accessibility options', () => {
58+
setMockUseContext({ direction: 'rtl', accessibility: false });
59+
const tree = renderer
60+
.create(<div>
61+
<Panel id="1" selectedTabID='1' ></Panel>
62+
<Panel id="2" selectedTabID='1' ></Panel>
63+
<Panel id="3" selectedTabID='1' ></Panel>
64+
<Panel id="4" selectedTabID='1' ></Panel>
65+
<Panel id="5" selectedTabID='1' ></Panel>
66+
</div>)
67+
.toJSON();
68+
expect(tree).toMatchSnapshot();
69+
});
70+
test('custom panelComponent', () => {
71+
setMockUseContext({
72+
tabs: [{ id: '1', title: 'tab1' }, { id: '2', title: 'tab2' }],
73+
defaultPanelComponent: props => {
74+
const panelContent = props.api.getTab(props.id).title + ' panel';
75+
const className = props.isSelected ? 'custom-panel-selected' : 'custom-panel-none-selected';
76+
return <span className={className}>{panelContent}</span>;
77+
}
78+
});
79+
const tree = renderer
80+
.create(<div>
81+
<Panel id="1" selectedTabID='1'></Panel>
82+
<Panel id="2" selectedTabID='1'></Panel>
83+
</div>)
84+
.toJSON();
85+
expect(tree).toMatchSnapshot();
86+
});
87+
test('custom panelComponent with rtl and none accessibility options', () => {
88+
setMockUseContext({
89+
tabs: [{ id: '1', title: 'tab1' }, { id: '2', title: 'tab2' }],
90+
direction: 'rtl', accessibility: false,
91+
defaultPanelComponent: props => {
92+
const panelContent = props.api.getTab(props.id).title + ' panel';
93+
const className = props.isSelected ? 'custom-panel-selected' : 'custom-panel-none-selected';
94+
return <span className={className}>{panelContent}</span>;
95+
}
96+
});
97+
const tree = renderer
98+
.create(<div>
99+
<Panel id="1" selectedTabID='1'></Panel>
100+
<Panel id="2" selectedTabID='1'></Panel>
101+
</div>)
102+
.toJSON();
103+
expect(tree).toMatchSnapshot();
104+
});
105+
});
106+
107+

‎src/utils/api/optionManager/optionManager.test.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -155,12 +155,12 @@ describe('OptionManager.prototype.setOption : ', () => {
155155
describe('OptionManager.prototype.getOption : ', () => {
156156
it('it returns tabs prop as an immutable array', () => {
157157
const newTitle = 'newTitle';
158-
let oldTitle;
158+
let oldPanelComponent;
159159
const tabs = obj.getOption('tabs');
160-
oldTitle = tabs[0].title;
161-
tabs[0].title = newTitle;
160+
oldPanelComponent = tabs[0].panelComponent;
161+
tabs[0].panelComponent = () => { };
162162
const newTabs = obj.getOption('tabs');
163-
expect(newTabs[0].title).toBe(oldTitle);
163+
expect(newTabs[0].panelComponent).toBe(oldPanelComponent);
164164
});
165165
it('it returns undefined when it is called with wrong option name', () => {
166166
const result = obj.getOption('Tabs');

0 commit comments

Comments
 (0)