-
Notifications
You must be signed in to change notification settings - Fork 213
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
3 changed files
with
173 additions
and
23 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,52 @@ | ||
import * as h from '../helpers'; | ||
|
||
const getSelect = () => { | ||
return cy.get(`select`); | ||
}; | ||
|
||
const selectedValue = 'mail'; | ||
|
||
describe('Select', () => { | ||
before(() => { | ||
h.stories.visit(); | ||
}); | ||
['Plain', 'Alert', 'Error'].forEach(story => { | ||
context(`given the '${story}' story is rendered`, () => { | ||
beforeEach(() => { | ||
h.stories.load('Components|Inputs/Select/React/Top Label', story); | ||
}); | ||
|
||
it('should pass accessibility checks', () => { | ||
cy.checkA11y(); | ||
}); | ||
|
||
context(`when '${selectedValue}' is selected`, () => { | ||
beforeEach(() => { | ||
getSelect().select(selectedValue); | ||
}); | ||
|
||
it('should be focused', () => { | ||
getSelect().should('be.focused'); | ||
}); | ||
|
||
it(`should have a value of '${selectedValue}'`, () => { | ||
getSelect().should('have.value', selectedValue); | ||
}); | ||
}); | ||
}); | ||
}); | ||
|
||
context(`given the 'Disabled' story is rendered`, () => { | ||
beforeEach(() => { | ||
h.stories.load('Components|Inputs/Select/React/Top Label', 'Disabled'); | ||
}); | ||
|
||
it('should pass accessibility checks', () => { | ||
cy.checkA11y(); | ||
}); | ||
|
||
it('should be disabled', () => { | ||
getSelect().should('be.disabled'); | ||
}); | ||
}); | ||
}); |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,38 +1,90 @@ | ||
import * as React from 'react'; | ||
import {mount} from 'enzyme'; | ||
import {render, fireEvent} from '@testing-library/react'; | ||
import SelectOption from '../lib/SelectOption'; | ||
import Select from '../lib/Select'; | ||
|
||
describe('Select', () => { | ||
const cb = jest.fn(); | ||
|
||
const role = 'listbox'; | ||
|
||
afterEach(() => { | ||
cb.mockReset(); | ||
}); | ||
|
||
test('renders two select options as expected', () => { | ||
const component = mount( | ||
<Select name="contact"> | ||
<SelectOption value="email" label="E-mail" /> | ||
<SelectOption value="phone" label="Phone" /> | ||
</Select> | ||
); | ||
describe('when rendered with an id', () => { | ||
it('should render a select with id', () => { | ||
const id = 'mySelect'; | ||
const {getByRole} = render( | ||
<Select id={id} onChange={cb}> | ||
<SelectOption value="email" label="E-mail" /> | ||
<SelectOption value="phone" label="Phone" /> | ||
</Select> | ||
); | ||
expect(getByRole(role)).toHaveAttribute('id', id); | ||
}); | ||
}); | ||
|
||
describe('when rendered with disabled attribute', () => { | ||
it('should render a disabled select', () => { | ||
const {getByRole} = render( | ||
<Select disabled={true} onChange={cb}> | ||
<SelectOption value="email" label="E-mail" /> | ||
<SelectOption value="phone" label="Phone" /> | ||
</Select> | ||
); | ||
expect(getByRole(role)).toHaveProperty('disabled', true); | ||
}); | ||
}); | ||
|
||
describe('when rendered with a value', () => { | ||
it('it should render a select whose selected option matches value', () => { | ||
const selectedValue = 'phone'; | ||
const {getByDisplayValue} = render( | ||
<Select onChange={cb} value={selectedValue}> | ||
<SelectOption value="email" label="E-mail" /> | ||
<SelectOption value={selectedValue} label={selectedValue} /> | ||
</Select> | ||
); | ||
expect(getByDisplayValue(selectedValue)).toBeDefined(); | ||
}); | ||
}); | ||
|
||
const options = component.find('option'); | ||
describe('when rendered with extra, arbitrary props', () => { | ||
it('should spread extra props onto the select', () => { | ||
const attr = 'test'; | ||
const {getByRole} = render( | ||
<Select data-propspread={attr} onChange={cb}> | ||
<SelectOption value="email" label="E-mail" /> | ||
<SelectOption value="phone" label="Phone" /> | ||
</Select> | ||
); | ||
expect(getByRole(role)).toHaveAttribute('data-propspread', attr); | ||
}); | ||
}); | ||
|
||
expect(options.length).toEqual(2); | ||
describe('when rendered with two select options as children', () => { | ||
it('should render two options', () => { | ||
const {getAllByRole} = render( | ||
<Select onChange={cb}> | ||
<SelectOption value="email" label="E-mail" /> | ||
<SelectOption value="phone" label="Phone" /> | ||
</Select> | ||
); | ||
expect(getAllByRole('option')).toHaveLength(2); | ||
}); | ||
}); | ||
|
||
test('Select should spread extra props', () => { | ||
const component = mount( | ||
<Select name="contact" data-propspread="test"> | ||
<SelectOption value="email" label="E-mail" /> | ||
<SelectOption value="phone" label="Phone" /> | ||
</Select> | ||
); | ||
const select = component | ||
.find('select') // TODO: Standardize on prop spread location (see #150) | ||
.getDOMNode(); | ||
expect(select.getAttribute('data-propspread')).toBe('test'); | ||
component.unmount(); | ||
describe('when changed', () => { | ||
it('should call a callback function', () => { | ||
const {getByRole} = render( | ||
<Select onChange={cb}> | ||
<SelectOption value="email" label="E-mail" /> | ||
<SelectOption value="phone" label="Phone" /> | ||
</Select> | ||
); | ||
fireEvent.change(getByRole(role)); | ||
expect(cb).toHaveBeenCalledTimes(1); | ||
}); | ||
}); | ||
}); |