diff --git a/components/split-button/__tests__/a11y-spec.tsx b/components/split-button/__tests__/a11y-spec.tsx
index d16376224b..cd795ac039 100644
--- a/components/split-button/__tests__/a11y-spec.tsx
+++ b/components/split-button/__tests__/a11y-spec.tsx
@@ -1,43 +1,27 @@
-import React from 'react';
-import Enzyme from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
-import {
- test,
- testReact,
- unmount,
- createContainer,
-} from '../../util/__tests__/legacy/a11y/validate';
+import * as React from 'react';
+import { test, testReact, createContainer } from '../../util/__tests__/a11y/validate';
import SplitButton from '../index';
import '../style';
-Enzyme.configure({ adapter: new Adapter() });
const portalContainerId = 'a11y-portal-id';
-/* eslint-disable no-undef, react/jsx-filename-extension */
// TODO: `button-name` - add label for down arrow button
describe.skip('SplitButton A11y', () => {
- let wrapper;
- let portalContainer;
+ let portalContainer: HTMLDivElement;
const menu = ['a', 'b'].map(item => {item});
afterEach(() => {
- if (wrapper) {
- wrapper.unmount();
- wrapper = null;
- }
if (portalContainer) {
portalContainer.remove();
}
-
- unmount();
});
it('should not have any violations when menu NOT visible', async () => {
portalContainer = createContainer(portalContainerId);
const popupProps = { container: portalContainer };
- wrapper = await testReact(
+ await testReact(
{menu}
@@ -49,7 +33,7 @@ describe.skip('SplitButton A11y', () => {
portalContainer = createContainer(portalContainerId);
const popupProps = { container: portalContainer };
- wrapper = await testReact(
+ await testReact(
{menu}
diff --git a/components/split-button/__tests__/index-spec.tsx b/components/split-button/__tests__/index-spec.tsx
index 7d0944b1ae..03ac0e95a4 100644
--- a/components/split-button/__tests__/index-spec.tsx
+++ b/components/split-button/__tests__/index-spec.tsx
@@ -1,80 +1,75 @@
-import React from 'react';
-import Enzyme, { mount } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
-import assert from 'power-assert';
+import * as React from 'react';
+import { MountReturn } from 'cypress/react';
import SplitButton from '../index';
import '../style';
-Enzyme.configure({ adapter: new Adapter() });
-
-/* eslint-disable no-undef,react/jsx-filename-extension */
describe('SplitButton', () => {
const menu = ['a', 'b'].map(item => {item});
- let wrapper;
-
- afterEach(() => {
- if (wrapper) {
- wrapper.unmount();
- wrapper = null;
- }
- });
-
describe('render', () => {
it('should render', () => {
- const wrapper = mount({menu});
- assert(wrapper.find('div.next-split-btn').length === 1);
+ cy.mount({menu});
+ cy.get('div.next-split-btn');
});
it('should controlled selectedkeys', () => {
- const wrapper = mount(
+ cy.mount(
{menu}
- );
- wrapper.setProps({ selectedKeys: ['b'] });
- assert(wrapper.find('li[title="b"][role="option"]').hasClass('next-selected'));
+ ).as('btn');
+ cy.get('@btn').then(({ component, rerender }) => {
+ return rerender(
+ React.cloneElement(component as React.ReactElement, { selectedKeys: ['b'] })
+ );
+ });
+ cy.get('li[title="b"][role="option"]').should('have.class', 'next-selected');
});
it('should controlled popup visible', () => {
- const wrapper = mount({menu});
- assert(wrapper.find('.next-menu').length === 0);
- wrapper.setProps({ visible: true });
- assert(wrapper.find('.next-menu').length === 1);
+ cy.mount({menu}).as('btn');
+ cy.get('.next-menu').should('have.length', 0);
+ cy.get('@btn').then(({ component, rerender }) => {
+ return rerender(
+ React.cloneElement(component as React.ReactElement, { visible: true })
+ );
+ });
+ cy.get('.next-menu').should('have.length', 1);
});
});
describe('action', () => {
it('should click trigger to open the popup', () => {
- let visible;
- const wrapper = mount(
- (visible = vis)}>
+ const onVisibleChange = cy.spy();
+ cy.mount(
+
{menu}
);
- wrapper.find('button.next-split-btn-trigger').simulate('click');
- assert(wrapper.find('.next-menu').length === 1);
- assert(visible);
+
+ cy.get('button.next-split-btn-trigger').click();
+ cy.get('.next-menu');
+ cy.wrap(onVisibleChange).should('be.calledOnceWith', true, 'fromTrigger');
});
it('should select in uncontrolled mode', () => {
- const wrapper = mount(
+ cy.mount(
{menu}
);
- wrapper.find('li[title="b"][role="option"]').simulate('click');
- assert(wrapper.find('li[title="b"][role="option"]').hasClass('next-selected'));
+ cy.get('li[title="b"][role="option"]').click();
+ cy.get('li[title="b"][role="option"]').should('have.class', 'next-selected');
});
it('should select in controlled mode', () => {
- const wrapper = mount(
+ cy.mount(
{menu}
);
- wrapper.find('li[title="b"][role="option"]').simulate('click');
- assert(wrapper.find('li[title="a"][role="option"]').hasClass('next-selected'));
+ cy.get('li[title="b"][role="option"]').click();
+ cy.get('li[title="a"][role="option"]').should('have.class', 'next-selected');
});
});
});