You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
133 lines
3.9 KiB
133 lines
3.9 KiB
import React from 'react'
|
|
import assert from 'assert'
|
|
import { mount, shallow } from 'enzyme'
|
|
import sinon from 'sinon'
|
|
import Modal from '../modal.component'
|
|
import Button from '../../button'
|
|
|
|
describe('Modal Component', () => {
|
|
it('should render a modal with a submit button', () => {
|
|
const wrapper = shallow(<Modal />)
|
|
|
|
assert.equal(wrapper.find('.modal-container').length, 1)
|
|
const buttons = wrapper.find(Button)
|
|
assert.equal(buttons.length, 1)
|
|
assert.equal(buttons.at(0).props().type, 'primary')
|
|
})
|
|
|
|
it('should render a modal with a cancel and a submit button', () => {
|
|
const handleCancel = sinon.spy()
|
|
const handleSubmit = sinon.spy()
|
|
const wrapper = shallow(
|
|
<Modal
|
|
onCancel={handleCancel}
|
|
cancelText="Cancel"
|
|
onSubmit={handleSubmit}
|
|
submitText="Submit"
|
|
/>
|
|
)
|
|
|
|
const buttons = wrapper.find(Button)
|
|
assert.equal(buttons.length, 2)
|
|
const cancelButton = buttons.at(0)
|
|
const submitButton = buttons.at(1)
|
|
|
|
assert.equal(cancelButton.props().type, 'default')
|
|
assert.equal(cancelButton.props().children, 'Cancel')
|
|
assert.equal(handleCancel.callCount, 0)
|
|
cancelButton.simulate('click')
|
|
assert.equal(handleCancel.callCount, 1)
|
|
|
|
assert.equal(submitButton.props().type, 'primary')
|
|
assert.equal(submitButton.props().children, 'Submit')
|
|
assert.equal(handleSubmit.callCount, 0)
|
|
submitButton.simulate('click')
|
|
assert.equal(handleSubmit.callCount, 1)
|
|
})
|
|
|
|
it('should render a modal with different button types', () => {
|
|
const wrapper = shallow(
|
|
<Modal
|
|
onCancel={() => {}}
|
|
cancelText="Cancel"
|
|
cancelType="secondary"
|
|
onSubmit={() => {}}
|
|
submitText="Submit"
|
|
submitType="confirm"
|
|
/>
|
|
)
|
|
|
|
const buttons = wrapper.find(Button)
|
|
assert.equal(buttons.length, 2)
|
|
assert.equal(buttons.at(0).props().type, 'secondary')
|
|
assert.equal(buttons.at(1).props().type, 'confirm')
|
|
})
|
|
|
|
it('should render a modal with children', () => {
|
|
const wrapper = shallow(
|
|
<Modal
|
|
onCancel={() => {}}
|
|
cancelText="Cancel"
|
|
onSubmit={() => {}}
|
|
submitText="Submit"
|
|
>
|
|
<div className="test-child" />
|
|
</Modal>
|
|
)
|
|
|
|
assert.ok(wrapper.find('.test-class'))
|
|
})
|
|
|
|
it('should render a modal with a header', () => {
|
|
const handleCancel = sinon.spy()
|
|
const handleSubmit = sinon.spy()
|
|
const wrapper = shallow(
|
|
<Modal
|
|
onCancel={handleCancel}
|
|
cancelText="Cancel"
|
|
onSubmit={handleSubmit}
|
|
submitText="Submit"
|
|
headerText="My Header"
|
|
onClose={handleCancel}
|
|
/>
|
|
)
|
|
|
|
assert.ok(wrapper.find('.modal-container__header'))
|
|
assert.equal(wrapper.find('.modal-container__header-text').text(), 'My Header')
|
|
assert.equal(handleCancel.callCount, 0)
|
|
assert.equal(handleSubmit.callCount, 0)
|
|
wrapper.find('.modal-container__header-close').simulate('click')
|
|
assert.equal(handleCancel.callCount, 1)
|
|
assert.equal(handleSubmit.callCount, 0)
|
|
})
|
|
|
|
it('should disable the submit button if submitDisabled is true', () => {
|
|
const handleCancel = sinon.spy()
|
|
const handleSubmit = sinon.spy()
|
|
const wrapper = mount(
|
|
<Modal
|
|
onCancel={handleCancel}
|
|
cancelText="Cancel"
|
|
onSubmit={handleSubmit}
|
|
submitText="Submit"
|
|
submitDisabled={true}
|
|
headerText="My Header"
|
|
onClose={handleCancel}
|
|
/>
|
|
)
|
|
|
|
const buttons = wrapper.find(Button)
|
|
assert.equal(buttons.length, 2)
|
|
const cancelButton = buttons.at(0)
|
|
const submitButton = buttons.at(1)
|
|
|
|
assert.equal(handleCancel.callCount, 0)
|
|
cancelButton.simulate('click')
|
|
assert.equal(handleCancel.callCount, 1)
|
|
|
|
assert.equal(submitButton.props().disabled, true)
|
|
assert.equal(handleSubmit.callCount, 0)
|
|
submitButton.simulate('click')
|
|
assert.equal(handleSubmit.callCount, 0)
|
|
})
|
|
})
|
|
|