Skip to content

Commit cde878e

Browse files
StephWoodStephWood
authored
Merge pull request #27 from gspletzer/reactTestingLib
React Testing Library initial integration
2 parents ad9adcd + 9829ee8 commit cde878e

File tree

11 files changed

+4579
-758
lines changed

11 files changed

+4579
-758
lines changed

‎__mocks__/fileMock.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = "test-file-stub";

‎__mocks__/styleMocks.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
module.exports = 'test-file-stub';
1+
// module.exports = 'test-file-stub';
2+
3+
module.exports = {};

‎__tests__/historyUnitTest.js‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
import React from "react";
2+
import { createStore } from "redux";
3+
import { Provider } from "react-redux";
4+
import format from "date-fns/format";
5+
import uuid from "uuid/v4";
6+
import {
7+
render,
8+
screen,
9+
fireEvent,
10+
getAllByAltText,
11+
queryAllByRole,
12+
} from "@testing-library/react";
13+
import HistoryContainer from "../src/client/components/containers/HistoryContainer";
14+
import * as actions from "../src/client/actions/actions.js";
15+
import reducers from "../src/client/reducers/index.js";
16+
import "@testing-library/jest-dom/extend-expect";
17+
// import store from "../src/client/store";
18+
19+
//generate date for today
20+
const today = new Date();
21+
//generate date for yesterday
22+
const yesterday = new Date();
23+
yesterday.setDate(yesterday.getDate() - 1);
24+
//generate date for two days prior
25+
const twoDaysAgo = new Date();
26+
twoDaysAgo.setDate(twoDaysAgo.getDate() - 2);
27+
28+
describe("history container test", () => {
29+
const initialState = {
30+
business: {
31+
history: [
32+
{
33+
date: format(today, "MM/DD/YYYY"),
34+
history: [
35+
{
36+
id: 1,
37+
created_at: today,
38+
url: "http://google.com",
39+
request: {
40+
method: "GET",
41+
},
42+
},
43+
],
44+
},
45+
{
46+
date: format(yesterday, "MM/DD/YYYY"),
47+
history: [
48+
{
49+
id: 2,
50+
created_at: yesterday,
51+
url: "http://facebook.com",
52+
request: {
53+
method: "GET",
54+
},
55+
},
56+
],
57+
},
58+
{
59+
date: format(twoDaysAgo, "MM/DD/YYYY"),
60+
history: [
61+
{
62+
id: 3,
63+
created_at: twoDaysAgo,
64+
url: "http://instagram.com",
65+
request: {
66+
method: "GET",
67+
},
68+
},
69+
],
70+
},
71+
],
72+
},
73+
};
74+
const renderWithRedux = (
75+
component,
76+
{ store = createStore(reducers, initialState) } = {}
77+
) => {
78+
return {
79+
...render(<Provider store={store}>{component}</Provider>),
80+
store,
81+
};
82+
};
83+
84+
beforeEach(() => {
85+
renderWithRedux(<HistoryContainer />);
86+
screen.debug();
87+
});
88+
test("renders all items in history array from store", () => {
89+
expect(screen.queryAllByLabelText("queryDate").length).toBe(3);
90+
});
91+
test("correctly renders headers in history container", () => {
92+
expect(screen.queryByText("Today")).toBeTruthy();
93+
expect(screen.queryByText("Yesterday")).toBeTruthy();
94+
expect(
95+
screen.queryByText(format(twoDaysAgo, "ddd, MMM D, YYYY"))
96+
).toBeTruthy();
97+
});
98+
test("correctly renders url for each header in history", () => {
99+
expect(screen.queryByText("http://google.com")).toBeTruthy();
100+
expect(screen.queryByText("http://facebook.com")).toBeTruthy();
101+
expect(screen.queryByText("http://instagram.com")).toBeTruthy();
102+
});
103+
test("correctly renders request method for each header in history", () => {
104+
expect(screen.queryAllByText("GET").length).toBe(3);
105+
});
106+
test("clear history button renders", () => {
107+
expect(screen.queryByText("Clear History")).toBeTruthy();
108+
});
109+
/* Doesn't work in RTL at present */
110+
// test("clear history pop-up clears history", () => {
111+
// store.dispatch(actions.clearHistory());
112+
// expect(screen.queryAllByLabelText("queryDate").length).toBe(0);
113+
// });
114+
});
115+
116+
/* FOR EACH COMPONENT - UNIT TESTING */
117+
//renders
118+
//buttons work (clear history, etc.)
119+
//forms function (accepts input)
120+
//state updates appropriately

‎__tests__/test-utils.js‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
// test-utils.js
2+
import React from "react";
3+
import { render as rtlRender } from "@testing-library/react";
4+
import { createStore } from "redux";
5+
import { Provider } from "react-redux";
6+
import reducers from "../src/client/reducers/index.js";
7+
// const initialState = {
8+
// currentTab: "First Tab",
9+
// reqResArray: [],
10+
// history: [],
11+
// collections: [],
12+
// warningMessage: "",
13+
// newRequestFields: {
14+
// protocol: "",
15+
// url: "http://",
16+
// method: "GET",
17+
// graphQL: false,
18+
// gRPC: false,
19+
// },
20+
// newRequestHeaders: {
21+
// headersArr: [],
22+
// count: 0,
23+
// },
24+
// newRequestStreams: {
25+
// streamsArr: [],
26+
// count: 0,
27+
// streamContent: [],
28+
// selectedPackage: null,
29+
// selectedRequest: null,
30+
// selectedService: null,
31+
// selectedStreamingType: null,
32+
// initialQuery: null,
33+
// queryArr: null,
34+
// protoPath: null,
35+
// services: null,
36+
// protoContent: "",
37+
// },
38+
// newRequestCookies: {
39+
// cookiesArr: [],
40+
// count: 0,
41+
// },
42+
// newRequestBody: {
43+
// bodyContent: "",
44+
// bodyVariables: "",
45+
// bodyType: "raw",
46+
// rawType: "Text (text/plain)",
47+
// JSONFormatted: true,
48+
// },
49+
// newRequestSSE: {
50+
// isSSE: false,
51+
// },
52+
// };
53+
// function render(
54+
// ui,
55+
// {
56+
// initialState,
57+
// store = createStore(reducers, initialState),
58+
// ...renderOptions
59+
// }
60+
// ) {
61+
// function Wrapper({ children }) {
62+
// return <Provider store={store}>{children}</Provider>;
63+
// }
64+
// return rtlRender(ui, { wrapper: Wrapper, ...renderOptions });
65+
// }
66+
// // re-export everything
67+
// export * from "@testing-library/react";
68+
// // override render method
69+
// export { render };
70+
const renderWithRedux = (
71+
component,
72+
{ initialState, store = createStore(reducer, initialState) } = {}
73+
) => {
74+
return {
75+
...render(<Provider store={store}>{component}</Provider>),
76+
store,
77+
};
78+
};

‎jest.config.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
module.exports = {
2+
verbose: true,
3+
runner: "@jest-runner/electron",
4+
testEnvironment: "@jest-runner/electron/environment",
5+
moduleNameMapper: {
6+
// "collectCoverage": true,
7+
electron: "<rootDir>/__mocks__/electronMock.js",
8+
"\\.(css|less|sass|scss)$": "<rootDir>/__mocks__/styleMocks.js",
9+
"\\.(gif|ttf|eot|svg|png)$": "<rootDir>/__mocks__/fileMock.js",
10+
},
11+
resolver: null,
12+
};

0 commit comments

Comments
 (0)