-
Notifications
You must be signed in to change notification settings - Fork 1.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(react): refactor Modal and ModalFooter to functional components (#…
…10046) * chore: check in progress * chore: check in progress * chore: check in progress * feat(react): update modal and modal footer to functional component * fix(react): add forwardRef to Modal and ModalFooter * Update packages/react/src/components/Modal/next/Modal.js Co-authored-by: Josh Black <[email protected]> * Update packages/react/src/components/Modal/next/Modal.js Co-authored-by: Josh Black <[email protected]> * fix(react): pull out secondarybuttonset into local component * fix(react): update snapshot * fix(react): update Modal with various style conventions * fix(react): remove knobs from v11 story and change other to rest Co-authored-by: Josh Black <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
- Loading branch information
3 people
authored
Nov 15, 2021
1 parent
5b4efa9
commit 8c0b660
Showing
11 changed files
with
1,571 additions
and
24 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
124 changes: 124 additions & 0 deletions
124
packages/react/src/components/ComposedModal/next/ModalFooter-test.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,124 @@ | ||
| import React from 'react'; | ||
| import { shallow, mount } from 'enzyme'; | ||
| import Button from '../../Button'; | ||
| import { ModalFooter } from './ModalFooter'; | ||
| import InlineLoading from '../../InlineLoading'; | ||
| import { settings } from 'carbon-components'; | ||
|
|
||
| const { prefix } = settings; | ||
|
|
||
| describe('<ModalFooter />', () => { | ||
| describe('Renders as expected', () => { | ||
| const wrapper = mount( | ||
| <ModalFooter className="extra-class"> | ||
| <p>Test</p> | ||
| </ModalFooter> | ||
| ); | ||
|
|
||
| it('renders children as expected', () => { | ||
| expect(wrapper.find('p').length).toBe(1); | ||
| }); | ||
|
|
||
| it('renders wrapper as expected', () => { | ||
| expect(wrapper.length).toBe(1); | ||
| }); | ||
|
|
||
| it('renders extra classes passed in via className', () => { | ||
| expect(wrapper.hasClass('extra-class')).toEqual(true); | ||
| }); | ||
| }); | ||
|
|
||
| describe('Should render buttons only if appropriate prop passed in', () => { | ||
| const wrapper = shallow( | ||
| <ModalFooter className="extra-class"> | ||
| <p>Test</p> | ||
| </ModalFooter> | ||
| ); | ||
|
|
||
| const primaryWrapper = shallow(<ModalFooter primaryButtonText="test" />); | ||
| const secondaryWrapper = mount(<ModalFooter secondaryButtonText="test" />); | ||
| const multipleSecondaryWrapper = mount( | ||
| <ModalFooter | ||
| secondaryButtons={[ | ||
| { | ||
| buttonText: <InlineLoading />, | ||
| onClick: jest.fn(), | ||
| }, | ||
| { | ||
| buttonText: 'Cancel', | ||
| onClick: jest.fn(), | ||
| }, | ||
| ]} | ||
| /> | ||
| ); | ||
|
|
||
| it('does not render primary button if no primary text', () => { | ||
| expect(wrapper.find(`.${prefix}--btn--primary`).exists()).toBe(false); | ||
| }); | ||
|
|
||
| it('does not render secondary button if no secondary text', () => { | ||
| expect(wrapper.find(`.${prefix}--btn--secondary`).exists()).toBe(false); | ||
| }); | ||
|
|
||
| it('renders primary button if primary text', () => { | ||
| const buttonComponent = primaryWrapper.find(Button); | ||
| expect(buttonComponent.exists()).toBe(true); | ||
| expect(buttonComponent.props().kind).toBe('primary'); | ||
| }); | ||
|
|
||
| it('renders primary button if secondary text', () => { | ||
| const buttonComponent = secondaryWrapper.find(Button); | ||
| expect(buttonComponent.exists()).toBe(true); | ||
| expect(buttonComponent.props().kind).toBe('secondary'); | ||
| }); | ||
|
|
||
| it('correctly renders multiple secondary buttons', () => { | ||
| const buttonComponents = multipleSecondaryWrapper.find(Button); | ||
| expect(buttonComponents.length).toEqual(2); | ||
| expect(buttonComponents.at(0).props().kind).toBe('secondary'); | ||
| expect(buttonComponents.at(1).props().kind).toBe('secondary'); | ||
| }); | ||
| }); | ||
|
|
||
| describe('Should render the appropriate buttons when `danger` prop is true', () => { | ||
| const primaryWrapper = shallow( | ||
| <ModalFooter primaryButtonText="test" danger /> | ||
| ); | ||
| const secondaryWrapper = mount( | ||
| <ModalFooter secondaryButtonText="test" danger /> | ||
| ); | ||
| const multipleSecondaryWrapper = mount( | ||
| <ModalFooter | ||
| secondaryButtons={[ | ||
| { | ||
| buttonText: <InlineLoading />, | ||
| onClick: jest.fn(), | ||
| }, | ||
| { | ||
| buttonText: 'Cancel', | ||
| onClick: jest.fn(), | ||
| }, | ||
| ]} | ||
| /> | ||
| ); | ||
|
|
||
| it('renders danger button if primary text && danger', () => { | ||
| const buttonComponent = primaryWrapper.find(Button); | ||
| expect(buttonComponent.exists()).toBe(true); | ||
| expect(buttonComponent.props().kind).toBe('danger'); | ||
| }); | ||
|
|
||
| it('renders secondary button if secondary text && danger', () => { | ||
| const buttonComponent = secondaryWrapper.find(Button); | ||
| expect(buttonComponent.exists()).toBe(true); | ||
| expect(buttonComponent.prop('kind')).toBe('secondary'); | ||
| }); | ||
|
|
||
| it('correctly renders multiple secondary buttons', () => { | ||
| const buttonComponents = multipleSecondaryWrapper.find(Button); | ||
| expect(buttonComponents.length).toEqual(2); | ||
| expect(buttonComponents.at(0).props().kind).toBe('secondary'); | ||
| expect(buttonComponents.at(1).props().kind).toBe('secondary'); | ||
| }); | ||
| }); | ||
| }); |
Oops, something went wrong.