Skip to content
This repository has been archived by the owner on Jun 17, 2021. It is now read-only.

[WIP] Component unit tests using react-testing-library #339

Closed
wants to merge 5 commits into from
Closed

[WIP] Component unit tests using react-testing-library #339

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3c62710
WIP: React-testing-library setup working. Next check styled-component…
AWolf81 Nov 3, 2018
2663e21
WIP: Style testing not working.
AWolf81 Nov 4, 2018
1fc10b2
Additional configuration for react-testing-library
Dec 7, 2018
341f95b
Adding unit tests for Sidebar component
Dec 7, 2018
484640a
Merged origin/master into current
Dec 9, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions config/testFrameworkSetup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
const { JSDOM } = require('jsdom');
const { window } = new JSDOM('<!doctype html><html><body></body></html>');

global.window = window;
global.document = window.document;

global.navigator = {
userAgent: 'node.js',
};

// Import test framework for styled components for better snapshot messages
require('jest-styled-components');

require('jest-dom/extend-expect');
require('react-testing-library/cleanup-after-each');
11 changes: 9 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,9 @@
"immer": "1.3.1",
"import-all.macro": "2.0.3",
"jest": "23.3",
"jest-dom": "^3.0.0",
"jest-styled-components": "^6.2.2",
"jsdom": "^13.0.0",
"lint-staged": "7.2.0",
"loader-utils": "1.1.0",
"mixpanel-browser": "2.22.4",
Expand All @@ -127,6 +130,7 @@
"react-powerplug": "1.0.0-rc.1",
"react-redux": "5.0.7",
"react-spring": "5.3.8",
"react-testing-library": "^5.2.3",
"react-tippy": "1.2.2",
"react-transition-group": "2.3.1",
"redux": "4.0.0",
Expand Down Expand Up @@ -158,20 +162,23 @@
"browserslist": "chrome 61",
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx,mjs}"
"src/**/*.{js,jsx,mjs}",
"!src/**/*.stories.js",
"!src/components/**/index.js"
],
"setupFiles": [
"<rootDir>/config/jest/electron.js",
"<rootDir>/config/polyfills.js"
],
"setupTestFrameworkScriptFile": "<rootDir>/config/testFrameworkSetup.js",
"testMatch": [
"**/__tests__/**/*.{js,jsx,mjs}",
"**/?(*.)(spec|test).{js,jsx,mjs}"
],
"roots": [
"<rootDir>/src"
],
"testEnvironment": "node",
"testEnvironment": "jest-environment-jsdom",
"testURL": "http://localhost",
"transform": {
"^.+\\.(js|jsx|mjs)$": "<rootDir>/config/jest/babelTransform.js",
Expand Down
33 changes: 33 additions & 0 deletions src/components/ProgressBar/ProgressBar.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import React from 'react';
import { render } from 'react-testing-library';
import ProgressBar, { Wrapper } from './ProgressBar';

describe('ProgressBar component', () => {
describe('should render', () => {
// we could do the tests in a loop but for three test cases
// it's OK to duplicate code
it('with 0%', () => {
const wrapper = render(<ProgressBar progress={0} />);
expect(wrapper).toMatchSnapshot();
});

it('with 50%', () => {
const wrapper = render(<ProgressBar progress={0.5} />);
expect(wrapper).toMatchSnapshot();
});

it('with 100%', () => {
const wrapper = render(<ProgressBar progress={1.0} />);
expect(wrapper).toMatchSnapshot();
});
});

it('should apply height style to Wrapper', () => {
const { container, debug } = render(
<ProgressBar height={10} progress={0.5} />
);
debug();
expect(container.querySelector('div').getAttribute('height')).toEqual('10');
//expect(getByTestId('wrapper')).toEqual('test'); //toHaveStyleRule('height', '10px');
});
});
232 changes: 232 additions & 0 deletions src/components/ProgressBar/__snapshots__/ProgressBar.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,232 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`ProgressBar component should render with 0% 1`] = `
Object {
"asFragment": [Function],
"baseElement": <body>
<div>
<div
class="sc-bdVaJa cvfKJm"
height="8"
>
<div
class="sc-bwzfXH ffuotK"
/>
</div>
</div>
</body>,
"container": <div>
<div
class="sc-bdVaJa cvfKJm"
height="8"
>
<div
class="sc-bwzfXH ffuotK"
/>
</div>
</div>,
"debug": [Function],
"getAllByAltText": [Function],
"getAllByLabelText": [Function],
"getAllByPlaceholderText": [Function],
"getAllByRole": [Function],
"getAllBySelectText": [Function],
"getAllByTestId": [Function],
"getAllByText": [Function],
"getAllByTitle": [Function],
"getAllByValue": [Function],
"getByAltText": [Function],
"getByLabelText": [Function],
"getByPlaceholderText": [Function],
"getByRole": [Function],
"getBySelectText": [Function],
"getByTestId": [Function],
"getByText": [Function],
"getByTitle": [Function],
"getByValue": [Function],
"queryAllByAltText": [Function],
"queryAllByLabelText": [Function],
"queryAllByPlaceholderText": [Function],
"queryAllByRole": [Function],
"queryAllBySelectText": [Function],
"queryAllByTestId": [Function],
"queryAllByText": [Function],
"queryAllByTitle": [Function],
"queryAllByValue": [Function],
"queryByAltText": [Function],
"queryByLabelText": [Function],
"queryByPlaceholderText": [Function],
"queryByRole": [Function],
"queryBySelectText": [Function],
"queryByTestId": [Function],
"queryByText": [Function],
"queryByTitle": [Function],
"queryByValue": [Function],
"rerender": [Function],
"unmount": [Function],
}
`;

exports[`ProgressBar component should render with 50% 1`] = `
Object {
"asFragment": [Function],
"baseElement": <body>
<div>
<div
class="sc-bdVaJa cvfKJm"
height="8"
>
<div
class="sc-bwzfXH ffuotK"
/>
</div>
</div>
<div>
<div
class="sc-bdVaJa cvfKJm"
height="8"
>
<div
class="sc-bwzfXH ffuotK"
/>
</div>
</div>
</body>,
"container": <div>
<div
class="sc-bdVaJa cvfKJm"
height="8"
>
<div
class="sc-bwzfXH ffuotK"
/>
</div>
</div>,
"debug": [Function],
"getAllByAltText": [Function],
"getAllByLabelText": [Function],
"getAllByPlaceholderText": [Function],
"getAllByRole": [Function],
"getAllBySelectText": [Function],
"getAllByTestId": [Function],
"getAllByText": [Function],
"getAllByTitle": [Function],
"getAllByValue": [Function],
"getByAltText": [Function],
"getByLabelText": [Function],
"getByPlaceholderText": [Function],
"getByRole": [Function],
"getBySelectText": [Function],
"getByTestId": [Function],
"getByText": [Function],
"getByTitle": [Function],
"getByValue": [Function],
"queryAllByAltText": [Function],
"queryAllByLabelText": [Function],
"queryAllByPlaceholderText": [Function],
"queryAllByRole": [Function],
"queryAllBySelectText": [Function],
"queryAllByTestId": [Function],
"queryAllByText": [Function],
"queryAllByTitle": [Function],
"queryAllByValue": [Function],
"queryByAltText": [Function],
"queryByLabelText": [Function],
"queryByPlaceholderText": [Function],
"queryByRole": [Function],
"queryBySelectText": [Function],
"queryByTestId": [Function],
"queryByText": [Function],
"queryByTitle": [Function],
"queryByValue": [Function],
"rerender": [Function],
"unmount": [Function],
}
`;

exports[`ProgressBar component should render with 100% 1`] = `
Object {
"asFragment": [Function],
"baseElement": <body>
<div>
<div
class="sc-bdVaJa cvfKJm"
height="8"
>
<div
class="sc-bwzfXH ffuotK"
/>
</div>
</div>
<div>
<div
class="sc-bdVaJa cvfKJm"
height="8"
>
<div
class="sc-bwzfXH ffuotK"
/>
</div>
</div>
<div>
<div
class="sc-bdVaJa cvfKJm"
height="8"
>
<div
class="sc-bwzfXH ffuotK"
/>
</div>
</div>
</body>,
"container": <div>
<div
class="sc-bdVaJa cvfKJm"
height="8"
>
<div
class="sc-bwzfXH ffuotK"
/>
</div>
</div>,
"debug": [Function],
"getAllByAltText": [Function],
"getAllByLabelText": [Function],
"getAllByPlaceholderText": [Function],
"getAllByRole": [Function],
"getAllBySelectText": [Function],
"getAllByTestId": [Function],
"getAllByText": [Function],
"getAllByTitle": [Function],
"getAllByValue": [Function],
"getByAltText": [Function],
"getByLabelText": [Function],
"getByPlaceholderText": [Function],
"getByRole": [Function],
"getBySelectText": [Function],
"getByTestId": [Function],
"getByText": [Function],
"getByTitle": [Function],
"getByValue": [Function],
"queryAllByAltText": [Function],
"queryAllByLabelText": [Function],
"queryAllByPlaceholderText": [Function],
"queryAllByRole": [Function],
"queryAllBySelectText": [Function],
"queryAllByTestId": [Function],
"queryAllByText": [Function],
"queryAllByTitle": [Function],
"queryAllByValue": [Function],
"queryByAltText": [Function],
"queryByLabelText": [Function],
"queryByPlaceholderText": [Function],
"queryByRole": [Function],
"queryBySelectText": [Function],
"queryByTestId": [Function],
"queryByText": [Function],
"queryByTitle": [Function],
"queryByValue": [Function],
"rerender": [Function],
"unmount": [Function],
}
`;
7 changes: 6 additions & 1 deletion src/components/Sidebar/AddProjectButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,12 @@ type Props = {
};

const AddProjectButton = ({ size, isVisible, onClick }: Props) => (
<Button size={size} isVisible={isVisible} onClick={onClick}>
<Button
size={size}
isVisible={isVisible}
onClick={onClick}
data-testid="add-project-button"
>
<IconWrapper>
<IconBase size={30} icon={plus} style={{ color: COLORS.white }} />
</IconWrapper>
Expand Down
2 changes: 2 additions & 0 deletions src/components/Sidebar/Sidebar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -248,6 +248,8 @@ const mapDispatchToProps = {
selectProject: actions.selectProject,
};

export { Sidebar };

export default connect(
mapStateToProps,
mapDispatchToProps
Expand Down
Loading