refactor(SplitButton): improve tests

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 => <SplitButton.Item key={item}>{item}</SplitButton.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(
             <SplitButton label="hello world" popupProps={popupProps}>
                 {menu}
             </SplitButton>
@@ -49,7 +33,7 @@ describe.skip('SplitButton A11y', () => {
         portalContainer = createContainer(portalContainerId);
         const popupProps = { container: portalContainer };
 
-        wrapper = await testReact(
+        await testReact(
             <SplitButton label="hello world" popupProps={popupProps} visible>
                 {menu}
             </SplitButton>

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 => <SplitButton.Item key={item}>{item}</SplitButton.Item>);
 
-    let wrapper;
-
-    afterEach(() => {
-        if (wrapper) {
-            wrapper.unmount();
-            wrapper = null;
-        }
-    });
-
     describe('render', () => {
         it('should render', () => {
-            const wrapper = mount(<SplitButton label="hello world">{menu}</SplitButton>);
-            assert(wrapper.find('div.next-split-btn').length === 1);
+            cy.mount(<SplitButton label="hello world">{menu}</SplitButton>);
+            cy.get('div.next-split-btn');
         });
 
         it('should controlled selectedkeys', () => {
-            const wrapper = mount(
+            cy.mount(
                 <SplitButton label="hello world" visible selectedKeys={['a']} selectMode="single">
                     {menu}
                 </SplitButton>
-            );
-            wrapper.setProps({ selectedKeys: ['b'] });
-            assert(wrapper.find('li[title="b"][role="option"]').hasClass('next-selected'));
+            ).as('btn');
+            cy.get<MountReturn>('@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(<SplitButton label="hello world">{menu}</SplitButton>);
-            assert(wrapper.find('.next-menu').length === 0);
-            wrapper.setProps({ visible: true });
-            assert(wrapper.find('.next-menu').length === 1);
+            cy.mount(<SplitButton label="hello world">{menu}</SplitButton>).as('btn');
+            cy.get('.next-menu').should('have.length', 0);
+            cy.get<MountReturn>('@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(
-                <SplitButton label="hello world" onVisibleChange={vis => (visible = vis)}>
+            const onVisibleChange = cy.spy();
+            cy.mount(
+                <SplitButton label="hello world" onVisibleChange={onVisibleChange}>
                     {menu}
                 </SplitButton>
             );
-            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(
                 <SplitButton label="hello world" visible selectMode="single">
                     {menu}
                 </SplitButton>
             );
-            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(
                 <SplitButton label="hello world" visible selectedKeys={['a']} selectMode="single">
                     {menu}
                 </SplitButton>
             );
-            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');
         });
     });
 });