Skip to content

Commit

Permalink
chore(testing): migrate to react-testing-library (#36)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ryanseddon
ryanseddon committed May 23, 2019
1 parent dc6fa0f commit 9baa918
Show file tree
Hide file tree
Showing 16 changed files with 772 additions and 1,058 deletions.
7 changes: 2 additions & 5 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,9 +44,6 @@
"chalk": "2.4.2",
"core-js": "3.0.1",
"coveralls": "3.0.3",
"enzyme": "3.9.0",
"enzyme-adapter-react-16": "1.12.1",
"enzyme-to-json": "3.3.5",
"eslint": "5.16.0",
"eslint-config-prettier": "4.2.0",
"eslint-plugin-jest": "22.5.1",
Expand All @@ -60,16 +57,16 @@
"husky": "2.2.0",
"inquirer": "6.3.1",
"jest": "24.7.1",
"jest-enzyme": "7.0.2",
"jest-dom": "3.2.2",
"lerna": "3.13.4",
"lint-staged": "8.1.6",
"markdownlint-cli": "0.15.0",
"mock-raf": "1.0.1",
"popper.js": "1.15.0",
"prettier": "1.17.0",
"prettier-package-json": "2.1.0",
"react": "16.8.6",
"react-dom": "16.8.6",
"react-testing-library": "7.0.0",
"regenerator-runtime": "0.13.2",
"rimraf": "2.6.3",
"uglifyjs-webpack-plugin": "2.1.2",
Expand Down
16 changes: 4 additions & 12 deletions packages/.template/src/ExampleContainer.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,30 +6,22 @@
*/

import React from 'react';
import { mount } from 'enzyme';
import { render } from 'react-testing-library';

import { ExampleContainer } from './ExampleContainer';

describe('ExampleContainer', () => {
let wrapper;

const basicExample = () => (
const BasicExample = () => (
<ExampleContainer>
{({ getCoolProps }) => <div {...getCoolProps({ 'data-test-id': 'div' })} />}
</ExampleContainer>
);

beforeEach(() => {
wrapper = mount(basicExample());
});

const findDiv = enzymeWrapper => enzymeWrapper.find('[data-test-id="div"]');

describe('getCoolProps', () => {
it('applies correct accessibility role', () => {
const div = findDiv(wrapper);
const { getByTestId } = render(<BasicExample />);

expect(div).toHaveProp('role', 'region');
expect(getByTestId('div')).toHaveAttribute('role', 'region');
});
});
});
38 changes: 16 additions & 22 deletions packages/breadcrumb/src/BreadcrumbContainer.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,42 +6,36 @@
*/

import React from 'react';
import { mount } from 'enzyme';
import { render } from 'react-testing-library';

import BreadcrumbContainer from './BreadcrumbContainer';

describe('BreadcrumbContainer', () => {
let wrapper;

beforeEach(() => {
wrapper = mount(
<BreadcrumbContainer>
{({ getContainerProps, getCurrentPageProps }) => (
<div {...getContainerProps({ 'data-test-id': 'container' })}>
<a {...getCurrentPageProps({ 'data-test-id': 'anchor' })}>Test</a>
</div>
)}
</BreadcrumbContainer>
);
});

const findContainer = enzymeWrapper => enzymeWrapper.find('[data-test-id="container"]');
const findAnchor = enzymeWrapper => enzymeWrapper.find('[data-test-id="anchor"]');
const BasicExample = () => (
<BreadcrumbContainer>
{({ getContainerProps, getCurrentPageProps }) => (
<div {...getContainerProps({ 'data-test-id': 'container' })}>
<a {...getCurrentPageProps({ 'data-test-id': 'anchor' })}>Test</a>
</div>
)}
</BreadcrumbContainer>
);

describe('getContainerProps()', () => {
it('applies correct accessibility attributes', () => {
const container = findContainer(wrapper);
const { getByTestId } = render(<BasicExample />);
const container = getByTestId('container');

expect(container).toHaveProp('role', 'navigation');
expect(container).toHaveProp('aria-label', 'Breadcrumb navigation');
expect(container).toHaveAttribute('role', 'navigation');
expect(container).toHaveAttribute('aria-label', 'Breadcrumb navigation');
});
});

describe('getCurrentPageProps()', () => {
it('applies correct accessibility attributes', () => {
const anchor = findAnchor(wrapper);
const { getByTestId } = render(<BasicExample />);

expect(anchor).toHaveProp('aria-current', 'page');
expect(getByTestId('anchor')).toHaveAttribute('aria-current', 'page');
});
});
});
44 changes: 23 additions & 21 deletions packages/buttongroup/src/ButtonGroupContainer.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,15 @@
*/

import React, { createRef } from 'react';
import { mount } from 'enzyme';
import { render, fireEvent } from 'react-testing-library';

import { ButtonGroupContainer } from './ButtonGroupContainer';

describe('ButtonGroupContainer', () => {
let wrapper;
const buttons = ['button-1', 'button-2', 'button-3'];
const buttonRefs = buttons.map(() => createRef(null));

const basicExample = () => (
const BasicExample = () => (
<ButtonGroupContainer>
{({ getGroupProps, getButtonProps, selectedKey, focusedKey }) => (
<div {...getGroupProps({ 'data-test-id': 'group' })}>
Expand All @@ -38,43 +37,46 @@ describe('ButtonGroupContainer', () => {
</ButtonGroupContainer>
);

beforeEach(() => {
wrapper = mount(basicExample());
});

const findButtonGroup = enzymeWrapper => enzymeWrapper.find('[data-test-id="group"]');
const findButtons = enzymeWrapper => enzymeWrapper.find('[data-test-id="button"]');

describe('getGroupProps', () => {
it('applies correct accessibility role', () => {
expect(findButtonGroup(wrapper)).toHaveProp('role', 'group');
const { getByTestId } = render(<BasicExample />);

expect(getByTestId('group')).toHaveAttribute('role', 'group');
});
});

describe('getButtonProps', () => {
it('applies the correct accessibility role', () => {
findButtons(wrapper).forEach(button => {
expect(button).toHaveProp('role', 'button');
const { getAllByTestId } = render(<BasicExample />);

getAllByTestId('button').forEach(button => {
expect(button).toHaveAttribute('role', 'button');
});
});

it('applies the correct accessibility tabIndex', () => {
findButtons(wrapper).forEach((button, index) => {
const tabIndex = index === 0 ? 0 : -1;
const { getAllByTestId } = render(<BasicExample />);

expect(button).toHaveProp('tabIndex', tabIndex);
getAllByTestId('button').forEach((button, index) => {
const tabIndex = index === 0 ? '0' : '-1';

expect(button).toHaveAttribute('tabIndex', tabIndex);
});
});

it('applies the correct accessibility selected value when not selected', () => {
expect(findButtons(wrapper).first()).toHaveProp('aria-pressed', false);
const { getAllByTestId } = render(<BasicExample />);

expect(getAllByTestId('button')[0]).toHaveAttribute('aria-pressed', 'false');
});

it('applies the correct accessibility selected value when selected', () => {
findButtons(wrapper)
.first()
.simulate('click');
expect(findButtons(wrapper).first()).toHaveProp('aria-pressed', true);
const { getAllByTestId } = render(<BasicExample />);
const firstButton = getAllByTestId('button')[0];

fireEvent.click(firstButton);

expect(firstButton).toHaveAttribute('aria-pressed', 'true');
});
});
});
37 changes: 16 additions & 21 deletions packages/field/src/FieldContainer.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,14 @@
*/

import React from 'react';
import { mount } from 'enzyme';
import { render } from 'react-testing-library';

import { FieldContainer } from './FieldContainer';

describe('FieldContainer', () => {
const CONTAINER_ID = 'test';
let wrapper;

const basicExample = () => (
const BasicExample = () => (
<FieldContainer id={CONTAINER_ID}>
{({ getLabelProps, getInputProps, getHintProps }) => (
<div>
Expand All @@ -26,34 +25,28 @@ describe('FieldContainer', () => {
</FieldContainer>
);

beforeEach(() => {
wrapper = mount(basicExample());
});

const findLabel = enzymeWrapper => enzymeWrapper.find('[data-test-id="label"]');
const findInput = enzymeWrapper => enzymeWrapper.find('[data-test-id="input"]');
const findHint = enzymeWrapper => enzymeWrapper.find('[data-test-id="hint"]');

describe('getLabelProps', () => {
it('applies correct accessibility role', () => {
const label = findLabel(wrapper);
const { getByTestId } = render(<BasicExample />);
const label = getByTestId('label');

expect(label).toHaveProp('id', `${CONTAINER_ID}--label`);
expect(label).toHaveProp('htmlFor', `${CONTAINER_ID}--input`);
expect(label).toHaveAttribute('id', `${CONTAINER_ID}--label`);
expect(label).toHaveAttribute('for', `${CONTAINER_ID}--input`);
});
});

describe('getInputProps', () => {
it('applies correct accessibility attributes', () => {
const input = findInput(wrapper);
const { getByTestId } = render(<BasicExample />);
const input = getByTestId('input');

expect(input).toHaveProp('id', `${CONTAINER_ID}--input`);
expect(input).toHaveProp('aria-labelledby', `${CONTAINER_ID}--label`);
expect(input).toHaveProp('aria-describedby', null);
expect(input).toHaveAttribute('id', `${CONTAINER_ID}--input`);
expect(input).toHaveAttribute('aria-labelledby', `${CONTAINER_ID}--label`);
expect(input).not.toHaveAttribute('aria-describedby');
});

it('includes aria-describedby if option is provided', () => {
wrapper = mount(
const { getByTestId } = render(
<FieldContainer id={CONTAINER_ID}>
{({ getInputProps }) => (
<div>
Expand All @@ -63,13 +56,15 @@ describe('FieldContainer', () => {
</FieldContainer>
);

expect(findInput(wrapper)).toHaveProp('aria-describedby', `${CONTAINER_ID}--hint`);
expect(getByTestId('input')).toHaveAttribute('aria-describedby', `${CONTAINER_ID}--hint`);
});
});

describe('getHintProps', () => {
it('applies correct accessibility role', () => {
expect(findHint(wrapper)).toHaveProp('id', `${CONTAINER_ID}--hint`);
const { getByTestId } = render(<BasicExample />);

expect(getByTestId('hint')).toHaveAttribute('id', `${CONTAINER_ID}--hint`);
});
});
});
Loading

0 comments on commit 9baa918

Please sign in to comment.