Skip to content

Commit

Permalink
test(TreeSelect): make test more robust by using cy.spy()
Browse files Browse the repository at this point in the history
  • Loading branch information
@eternalsky
eternalsky committed Oct 21, 2024
1 parent 00456e2 commit 1849be8
Showing 1 changed file with 43 additions and 87 deletions.
130 changes: 43 additions & 87 deletions components/tree-select/__tests__/index-spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -351,18 +351,9 @@ describe('TreeSelect', () => {
});

it('should trigger onChange and close dropdown when select tree node', () => {
const onClick = cy.spy();

const expectValue = '4';
const expectItem = _v2n[expectValue];
const handleChange = (
value: DataSourceItem | DataSourceItem[],
data: ObjectItem | ObjectItem[] | null
) => {
onClick();
expect(value).to.equal(expectValue);
expect(data).to.deep.equal(expectItem);
};
const handleChange = cy.spy();

cy.mount(
<TreeSelect
Expand All @@ -373,7 +364,7 @@ describe('TreeSelect', () => {
/>
);
selectTreeNode(expectValue);
cy.wrap(onClick).should('be.calledOnce');
cy.wrap(handleChange).should('be.calledWith', expectValue, expectItem);
shouldHideElement();
});

Expand All @@ -399,18 +390,10 @@ describe('TreeSelect', () => {
});

it('should trigger onChange but not close dropdown when select node and enable multiple', () => {
const onClick = cy.spy();
const initValue = '4';
const appendValue = '6';
const expectValue = [initValue, appendValue];
const handleChange = (
value: DataSourceItem | DataSourceItem[],
data: ObjectItem | ObjectItem[] | null
) => {
onClick();
expect(value).to.deep.equal(expectValue);
expect(data).to.deep.equal(expectValue.map(v => _v2n[v]));
};
const handleChange = cy.spy();

cy.mount(
<TreeSelect
Expand All @@ -423,23 +406,19 @@ describe('TreeSelect', () => {
/>
);
selectTreeNode(appendValue);
cy.wrap(onClick).should('be.calledOnce');
cy.wrap(handleChange).should(
'be.calledWith',
expectValue,
expectValue.map(v => _v2n[v])
);
shouldShowElement();
});

it('should trigger onChange when check node', () => {
const onClick = cy.spy();
const initValue = '4';
const appendValue = '6';
const expectValue = ['4', '3'];
const handleChange = (
value: DataSourceItem | DataSourceItem[],
data: ObjectItem | ObjectItem[] | null
) => {
onClick();
expect(value).to.deep.equal(expectValue);
expect(data).to.deep.equal(expectValue.map(v => _v2n[v]));
};
const handleChange = cy.spy();
cy.mount(
<TreeSelect
defaultVisible
Expand All @@ -451,24 +430,19 @@ describe('TreeSelect', () => {
value={initValue}
onChange={handleChange}
/>
).then(() => {
checkTreeNode(appendValue);
cy.wrap(onClick).should('be.calledOnce');
});
);
checkTreeNode(appendValue);
cy.wrap(handleChange).should(
'be.calledWith',
expectValue,
expectValue.map(v => _v2n[v])
);
});

it('should trigger onChange when check node and enable treeCheckStrictly', () => {
const onClick = cy.spy();
const appendValue = '6';
const expectValue = [appendValue];
const handleChange = (
value: DataSourceItem | DataSourceItem[],
data: ObjectItem | ObjectItem[] | null
) => {
onClick();
expect(value).to.deep.equal(expectValue);
expect(data).to.deep.equal(expectValue.map(v => _v2n[v]));
};
const handleChange = cy.spy();

cy.mount(
<TreeSelect
Expand All @@ -479,10 +453,13 @@ describe('TreeSelect', () => {
dataSource={dataSource}
onChange={handleChange}
/>
).then(() => {
checkTreeNode(appendValue);
cy.wrap(onClick).should('be.calledOnce');
});
);
checkTreeNode(appendValue);
cy.wrap(handleChange).should(
'be.calledWith',
expectValue,
expectValue.map(v => _v2n[v])
);
});

it('should render tag when defaultValue [{ label, value}]', () => {
Expand Down Expand Up @@ -598,35 +575,23 @@ describe('TreeSelect', () => {
];

cy.mount(<TreeSelect dataSource={dataSource} isPreview defaultValue={'2975'} />).as('Demo');
cy.get('.next-form-preview')
.should('exist')
.and($el => {
expect($el.text()).to.equal('西安市');
});
cy.get('.next-form-preview').should('have.text', '西安市');

const handleRenderPreview = cy.spy();

cy.rerender('Demo', {
renderPreview: (items: ObjectItem[]) => {
expect(items.length).to.equal(1);
expect(items[0].label).to.equal('西安市');
handleRenderPreview(items.length, items[0].label);
return 'Hello World';
},
});
cy.get('.next-form-preview').then($el => {
expect($el.text()).to.equal('Hello World');
});
cy.wrap(handleRenderPreview).should('be.calledWith', 1, '西安市');
cy.get('.next-form-preview').should('have.text', 'Hello World');
});

it('should trigger onChange when remove tag', () => {
const onClick = cy.spy();
const value = ['6'];
const handleChange = (
value: ObjectItem | ObjectItem[],
data: ObjectItem | ObjectItem[]
) => {
onClick();
expect(value).to.deep.equal([]);
expect(data).to.deep.equal([]);
};
const handleChange = cy.spy();

cy.mount(
<TreeSelect
Expand All @@ -639,31 +604,27 @@ describe('TreeSelect', () => {
/>
);
cy.get('.next-icon-close').click();
cy.wrap(onClick).should('be.called');
cy.wrap(handleChange).should('be.calledWith', [], []);
});

it('should support multiple with hasClear', () => {
const handleChange = cy.spy();
cy.mount(
<TreeSelect
multiple
hasClear
dataSource={dataSource}
value={['yyy', 'abcd']}
onChange={value => {
expect(value).to.equal(null);
}}
onChange={handleChange}
/>
);
cy.get('i.next-icon-delete-filling').click({ force: true });
cy.wrap(handleChange).should('be.calledWith', null);
});

it('should trigger onSearch when search some keyword', () => {
const onClick = cy.spy();
const searchedValue = '外套';
const handleSearch = (value: string) => {
onClick();
expect(value).to.equal(searchedValue);
};
const handleSearch = cy.spy();

cy.mount(
<TreeSelect
Expand All @@ -675,7 +636,7 @@ describe('TreeSelect', () => {
/>
);
cy.get('.next-select-trigger-search input').type('外套');
cy.wrap(onClick).should('be.calledOnce');
cy.wrap(handleSearch).should('be.calledWith', searchedValue);
});

it('should hightlight matched node when search some keyword', () => {
Expand Down Expand Up @@ -723,7 +684,6 @@ describe('TreeSelect', () => {
['INPUT', 'input'].forEach(kw => {
cy.get('.next-select-trigger-search input').clear(); // Need to clear first
cy.get('.next-select-trigger-search input').type(kw);

cy.get('.next-filtered').find('.next-tree-node-label').should('have.text', 'Input');
});
});
Expand Down Expand Up @@ -971,34 +931,29 @@ describe('TreeSelect', () => {

describe('should support useDetailValue', () => {
it('Support dataSource mode', () => {
const handleChange = (value: ObjectItem) => {
expect(typeof value).to.equal('object');
expect(value.value).to.equal('1');
};
const handleChange = cy.spy();
cy.mount(
<TreeSelect
followTrigger
useDetailValue
defaultVisible
treeDefaultExpandAll
dataSource={dataSource}
onChange={handleChange}
onChange={(value: ObjectItem) => handleChange(value.value)}
/>
);
selectTreeNode('1');
cy.wrap(handleChange).should('be.calledWith', '1');
});
it('Support children mode', () => {
const handleChange = (value: ObjectItem) => {
expect(typeof value).to.equal('object');
expect(value.value).to.equal('1');
};
const handleChange = cy.spy();
cy.mount(
<TreeSelect
followTrigger
useDetailValue
defaultVisible
treeDefaultExpandAll
onChange={handleChange}
onChange={(value: ObjectItem) => handleChange(value.value)}
>
<TreeNode key="1" className="k-1" value="1" label="Component">
<TreeNode key="2" value="2" label="Form">
Expand All @@ -1012,6 +967,7 @@ describe('TreeSelect', () => {
</TreeSelect>
);
selectTreeNode('1');
cy.wrap(handleChange).should('be.calledWith', '1');
});
it('Control mode available', () => {
function App() {
Expand Down

0 comments on commit 1849be8

Please sign in to comment.