Skip to content

Commit 374736e

Browse files
authored
Merge pull request #3 from oslabs-beta/feature-testing
Feature testing finished.
2 parents fe70345 + 4ccd849 commit 374736e

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+1369
-389
lines changed

jest.config.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ module.exports = {
66
transform: {
77
'^.+\\.(js|ts|tsx)$': 'ts-jest',
88
},
9-
testPathIgnorePatterns: ['www', './src/backend/__tests__/ignore'],
10-
coveragePathIgnorePatterns: ['/src/backend/__tests__/ignore/'],
9+
testPathIgnorePatterns: ['www', './src/backend/__tests__/ignore', './src/app/__tests__enzyme/ignore'],
10+
coveragePathIgnorePatterns: ['/src/backend/__tests__/ignore/', '/src/app/__tests__enzyme/ignore'],
1111
transformIgnorePatterns: ['/node_modules/(?!d3|d3-array|internmap|delaunator|robust-predicates)'],
1212
testRegex: '(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$',
1313
moduleFileExtensions: ['ts', 'tsx', 'js'],

package.json

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,6 @@
99
"test": "jest --verbose --coverage",
1010
"test-backend": "jest --verbose --coverage src/backend",
1111
"test-frontend": "jest --verbose --coverage src/app",
12-
"test-newfront": "jest --verbose --coverage src/app/__tests__new",
13-
"test-zo": "jest --verbose --coverage src/app/__tests__zo",
1412
"test-on": "./node_modules/.bin/jest $1",
1513
"docker-test-lint": "eslint --ext .js --ext .jsx src",
1614
"docs": "typedoc --json docs --inputFiles src/app --inputFiles src/backend --readme docs/readme.md",

src/app/__tests__/ActionContainer.test.tsx

Lines changed: 34 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,10 @@
11
/* eslint-disable @typescript-eslint/no-explicit-any */
22
/* eslint-disable react/jsx-filename-extension */
3-
4-
import { shallow, configure } from 'enzyme';
53
import React from 'react';
6-
import Adapter from 'enzyme-adapter-react-16';
4+
import { render, screen, fireEvent } from '@testing-library/react';
5+
import '@testing-library/jest-dom/extend-expect';
76
import ActionContainer from '../containers/ActionContainer';
87
import { useStoreContext } from '../store';
9-
import { emptySnapshots } from '../actions/actions';
10-
import Action from '../components/Action';
11-
import RouteDescription from '../components/RouteDescription';
12-
13-
configure({ adapter: new (Adapter as any)() });
148

159
const state = {
1610
tabs: {
@@ -112,33 +106,45 @@ const state = {
112106
};
113107

114108
const dispatch = jest.fn();
115-
109+
jest.spyOn(React, 'useEffect').mockImplementation(() => jest.fn());
116110
jest.mock('../store');
117-
useStoreContext.mockImplementation(() => [state, dispatch]);
118111

119-
let wrapper;
112+
const mockeduseStoreContext = jest.mocked(useStoreContext);
113+
mockeduseStoreContext.mockImplementation(() => [state, dispatch]);
120114

121-
// actionView={true} must be passed in to <ActionContainer /> in beforeEach() to deal with new
122-
// conditional rendering in ActionContainer that shows/hides time-travel functionality
115+
const MockRouteDescription = jest.fn();
116+
jest.mock('../components/RouteDescription', () => () => {
117+
MockRouteDescription();
118+
return <div>MockRouteDescription</div>;
119+
});
123120

124-
beforeEach(() => {
125-
wrapper = shallow(<ActionContainer actionView={true} />);
126-
// wrapper2 = shallow(<RouteDescription />);
127-
useStoreContext.mockClear();
128-
dispatch.mockClear();
121+
const MockSwitchApp = jest.fn();
122+
jest.mock('../components/SwitchApp', () => () => {
123+
MockSwitchApp();
124+
return <div>MockSwitchApp</div>;
129125
});
130126

131-
describe('testing the emptySnapshot button', () => {
132-
test('emptySnapshot button should dispatch action upon click', () => {
133-
wrapper.find('.empty-button').simulate('click');
134-
expect(dispatch.mock.calls.length).toBe(1);
127+
describe('unit testing for ActionContainer', () => {
128+
beforeEach(() => {
129+
mockeduseStoreContext.mockClear();
130+
dispatch.mockClear();
131+
render(<ActionContainer actionView={true} />);
135132
});
136-
test('emptying snapshots should send emptySnapshot action to dispatch', () => {
137-
wrapper.find('.empty-button').simulate('click');
138-
expect(dispatch.mock.calls[0][0]).toEqual(emptySnapshots());
133+
134+
test('Expect top arrow to be rendered', () => {
135+
expect(screen.getByRole('complementary')).toBeInTheDocument();
139136
});
140-
});
141137

142-
test('number of RouteDescription components should reflect number of unique routes', () => {
143-
expect(wrapper.find(RouteDescription).length).toBe(2);
138+
test('Expect RouteDescription to be rendered', () => {
139+
expect(screen.getAllByText('MockRouteDescription')).toHaveLength(2);
140+
});
141+
142+
test('Expect SwitchApp to be rendered', () => {
143+
expect(screen.getByText('MockSwitchApp')).toBeInTheDocument();
144+
});
145+
146+
test('Click works on clear button', async () => {
147+
fireEvent.click(screen.getAllByRole('button')[0]);
148+
await expect(dispatch).toHaveBeenCalledTimes(1);
149+
});
144150
});
Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import React from 'react';
2+
import { render, screen, fireEvent } from '@testing-library/react';
3+
import '@testing-library/jest-dom/extend-expect'; // needed this to extend the jest-dom assertions (ex toHaveTextContent)
4+
import { TextEncoder } from 'util';
5+
global.TextEncoder = TextEncoder;
6+
import ButtonsContainer from '../containers/ButtonsContainer';
7+
import { useStoreContext } from '../store';
8+
9+
// const { Steps } = require('intro.js-react');
10+
jest.mock('../store');
11+
const mockedUsedStoreContext = jest.mocked(useStoreContext);
12+
// useStoreContext as jest.Mock<useStoreContext>.mockImplementaton(() => [state, dispatch])
13+
14+
global.URL.createObjectURL = jest.fn(() => 'https://pdf.com');
15+
global.URL.revokeObjectURL = jest.fn();
16+
17+
describe('Unit testing for ButtonContainer', () => {
18+
beforeEach;
19+
20+
const state = {
21+
tabs: {
22+
87: {
23+
snapshots: [1, 2, 3, 4],
24+
sliderIndex: 0,
25+
viewIndex: -1,
26+
mode: {
27+
paused: false,
28+
locked: false,
29+
persist: false,
30+
},
31+
},
32+
},
33+
currentTab: 87,
34+
};
35+
36+
const currentTab = state.tabs[state.currentTab];
37+
const dispatch = jest.fn();
38+
const exportHandler = jest.fn().mockImplementation(() => 'clicked');
39+
const importHandler = jest.fn();
40+
const fileDownload = jest.fn();
41+
42+
mockedUsedStoreContext.mockImplementation(() => [state, dispatch]);
43+
// useStoreContext.mockImplementation(() => [state, dispatch]);
44+
45+
beforeEach(() => {
46+
dispatch.mockClear();
47+
mockedUsedStoreContext.mockClear();
48+
currentTab.mode = {
49+
paused: false,
50+
persist: false,
51+
};
52+
});
53+
54+
describe('When button container is loaded', () => {
55+
test('should have 4 buttons ', () => {
56+
render(<ButtonsContainer />);
57+
expect(screen.getAllByRole('button')).toHaveLength(4);
58+
expect(screen.getAllByRole('button')[0]).toHaveTextContent('Lock');
59+
expect(screen.getAllByRole('button')[1]).toHaveTextContent('Download');
60+
expect(screen.getAllByRole('button')[2]).toHaveTextContent('Upload');
61+
expect(screen.getAllByRole('button')[3]).toHaveTextContent('How to use');
62+
});
63+
});
64+
65+
describe('When view is unlock', () => {
66+
test('Button should show as unlocked', () => {
67+
state.tabs['87'].mode.paused = true;
68+
render(<ButtonsContainer />);
69+
expect(screen.getAllByRole('button')[0]).toHaveTextContent('Unlock');
70+
});
71+
});
72+
73+
describe('Upload/Download', () => {
74+
test('Clicking upload and download buttons', async () => {
75+
render(<ButtonsContainer />);
76+
fireEvent.click(screen.getAllByRole('button')[1]);
77+
fireEvent.click(screen.getAllByRole('button')[2]);
78+
expect(screen.getAllByRole('button')[1]).toBeInTheDocument();
79+
expect(screen.getAllByRole('button')[2]).toBeInTheDocument();
80+
});
81+
});
82+
});
Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import React from 'react';
2+
import { render, screen } from '@testing-library/react';
3+
import '@testing-library/jest-dom/extend-expect'; // needed this to extend the jest-dom assertions (ex toHaveTextContent)
4+
import ErrorContainer from '../containers/ErrorContainer';
5+
import { useStoreContext } from '../store';
6+
7+
const state = {
8+
currentTab: null,
9+
currentTitle: 'No Target',
10+
tabs: {},
11+
};
12+
13+
const MockErrorMsg = jest.fn();
14+
jest.mock('../components/ErrorMsg', () => () => {
15+
MockErrorMsg();
16+
return <div>MockErrorMsg</div>;
17+
});
18+
19+
jest.mock('../store');
20+
const mockeduseStoreContext = jest.mocked(useStoreContext);
21+
22+
const dispatch = jest.fn();
23+
mockeduseStoreContext.mockImplementation(() => [state, dispatch]);
24+
25+
describe('unit testing for ErrorContainer.tsx', () => {
26+
test('logo image renders as expected', () => {
27+
render(<ErrorContainer />);
28+
expect(screen.getByAltText('Reactime Logo')).toBeInTheDocument();
29+
});
30+
31+
test('ErrorMsg component renders as expected', () => {
32+
render(<ErrorContainer />);
33+
expect(screen.getByText('MockErrorMsg')).toBeInTheDocument();
34+
});
35+
36+
test('Reactime website shows as expected', () => {
37+
render(<ErrorContainer />);
38+
expect(
39+
screen.getByText('Please visit the Reactime website for more info.'),
40+
).toBeInTheDocument();
41+
});
42+
43+
describe('Loading Checks show up as expected', () => {
44+
test('Content script launching check shows', () => {
45+
render(<ErrorContainer />);
46+
expect(
47+
screen.getByText(`Checking if content script has been launched on current tab`),
48+
).toBeInTheDocument();
49+
});
50+
test('React Dev Tool Install check shows', () => {
51+
render(<ErrorContainer />);
52+
expect(
53+
screen.getByText(`Checking if React Dev Tools has been installed`),
54+
).toBeInTheDocument();
55+
});
56+
test('Compatible app check shows', () => {
57+
render(<ErrorContainer />);
58+
expect(screen.getByText(`Checking if target is a compatible React app`)).toBeInTheDocument();
59+
});
60+
});
61+
62+
describe('Launching header shows correct tab info', () => {
63+
test('When currentTitle has no target', () => {
64+
render(<ErrorContainer />);
65+
expect(screen.getByText(`Launching Reactime on tab: No Target`)).toBeInTheDocument();
66+
expect(screen.queryByText(`Launching Reactime on tab: Test Page`)).not.toBeInTheDocument();
67+
});
68+
69+
test('When currentTitle has a target title', () => {
70+
state.currentTitle = 'Test Page';
71+
render(<ErrorContainer />);
72+
expect(screen.getByText(`Launching Reactime on tab: Test Page`)).toBeInTheDocument();
73+
expect(screen.queryByText(`Launching Reactime on tab: No Target`)).not.toBeInTheDocument();
74+
});
75+
});
76+
});

src/app/__tests__/ErrorMsg.test.tsx

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import React from 'react';
2+
import { render, screen } from '@testing-library/react';
3+
import '@testing-library/jest-dom/extend-expect'; // needed this to extend the jest-dom assertions (ex toHaveTextContent)
4+
import ErrorMsg from '../components/ErrorMsg';
5+
6+
const props = {
7+
loadingArray: [false],
8+
status: {
9+
contentScriptLaunched: true,
10+
reactDevToolsInstalled: true,
11+
targetPageisaReactApp: true,
12+
},
13+
launchContent: null,
14+
};
15+
16+
const parseError = jest.fn();
17+
18+
describe('unit testing for ErrorContainer.tsx', () => {
19+
describe('When there are no errors', () => {
20+
test('Returns empty div', () => {
21+
const { container } = render(<ErrorMsg {...props} />);
22+
expect(container.firstChild).toBeNull();
23+
});
24+
});
25+
26+
describe("when there's a RDT Error", () => {
27+
test('RDT error related text shows', () => {
28+
props.status.reactDevToolsInstalled = false;
29+
render(<ErrorMsg {...props} />);
30+
expect(
31+
screen.getByText('React Dev Tools isnt installed!', { exact: false }),
32+
).toBeInTheDocument();
33+
props.status.reactDevToolsInstalled = true;
34+
});
35+
});
36+
37+
describe("when there's a Content Script Errorr", () => {
38+
test('Content Script Error related text shows', () => {
39+
props.status.contentScriptLaunched = false;
40+
render(<ErrorMsg {...props} />);
41+
expect(
42+
screen.getByText(
43+
'Could not connect to the Target App. Try closing Reactime and reloading the page.',
44+
{ exact: false },
45+
),
46+
).toBeInTheDocument();
47+
expect(
48+
screen.getByText(
49+
'NOTE: By default Reactime only launches the content script on URLS starting with localhost.',
50+
{ exact: false },
51+
),
52+
).toBeInTheDocument();
53+
expect(
54+
screen.getByText(
55+
'If your target URL does not match, you can manually launch the content script below.',
56+
{ exact: false },
57+
),
58+
).toBeInTheDocument();
59+
});
60+
61+
test('launch button shows', () => {
62+
render(<ErrorMsg {...props} />);
63+
expect(screen.getByRole('button')).toBeInTheDocument();
64+
props.status.contentScriptLaunched = true;
65+
});
66+
});
67+
68+
describe("when there's a Not React Error", () => {
69+
test('Not React App text shows', () => {
70+
props.status.targetPageisaReactApp = false;
71+
render(<ErrorMsg {...props} />);
72+
expect(
73+
screen.getByText(
74+
'The Target app is either not a React application or is not compatible with Reactime',
75+
{ exact: false },
76+
),
77+
).toBeInTheDocument();
78+
props.status.targetPageisaReactApp = true;
79+
});
80+
});
81+
});

src/app/__tests__/Loader.test.tsx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from 'react';
2+
import { render } from '@testing-library/react';
3+
import '@testing-library/jest-dom/extend-expect'; // needed this to extend the jest-dom assertions (ex toHaveTextContent)
4+
import Loader from '../components/Loader';
5+
6+
describe('unit testing for Loader.tsx', () => {
7+
test('renders a loading icon', () => {
8+
const { container } = render(<Loader loading={true} result={false} />);
9+
expect(container.firstChild).toHaveClass('css-xp4o0b');
10+
});
11+
12+
test('renders a fail icon', () => {
13+
const { container } = render(<Loader loading={false} result={false} />);
14+
expect(container.getElementsByClassName('fail').length).toBe(1);
15+
});
16+
17+
test('renders a check icon', () => {
18+
const { container } = render(<Loader loading={false} result={true} />);
19+
expect(container.getElementsByClassName('check').length).toBe(1);
20+
});
21+
});

0 commit comments

Comments
 (0)