Skip to content

Commit 21af97d

Browse files
abaaskhorramiabaaskhorrami
authored
Merge pull request #4 from oslabs-beta/sandboxes
Reactime End-to-End Testing with Jest and Puppeteer
2 parents 3c9ca56 + 60510d4 commit 21af97d

File tree

173 files changed

+42504
-2
lines changed

Some content is hidden

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

173 files changed

+42504
-2
lines changed

‎.gitignore‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
node_modules
1+
/node_modules
22
.DS_Store
33
src/extension/build/bundles
44
package/reactime-*.tgz
@@ -8,4 +8,5 @@ coverage
88
src/extension/build.zip
99
src/extension/build.crx
1010
src/extension/build.pem
11-
bower_components
11+
bower_components
12+
sandboxes/manual-tests/NextJS/.next

‎sandboxes/README.md‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
# Reactime End-to-End Testing
2+
3+
This folder contains automated tests as well as manual tests. The automated Jest / Puppeteer tests can be run by issuing the npm test command from within the root of the automated-tests directory.
4+
5+
Manual tests have been created for both Concurrent Mode and NextJS. These sandboxes can be launched by issuing the npm start command from within either of the directories inside of the manual-tests folder. Note that for the NextJS sandbox, npm run build should be issued before npm start. These manual sandboxes can also be automated by using the same approach as the automated testing sandboxes.
6+
7+
Automated Tests
8+
9+
- useState
10+
- useEffect
11+
- useContext
12+
- useMemo
13+
- Redux
14+
- React Router
15+
- setState
16+
- Conditional setState
17+
- componentDidMount
18+
19+
Manual Tests
20+
21+
- Concurrent Mode / Suspense
22+
- Next.js

‎sandboxes/automated-tests/.eslintrc.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
module.exports = {
2+
extends: ['airbnb', 'prettier'],
3+
parser: 'babel-eslint',
4+
plugins: ['prettier'],
5+
rules: {
6+
'prettier/prettier': ['error'],
7+
'react/jsx-filename-extension': [0],
8+
'no-console': [0],
9+
'react/prop-types': [0]
10+
}
11+
};

‎sandboxes/automated-tests/.gitignore‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
/node_modules/*
2+
!/node_modules/reactime
3+
.DS_Store
4+
index-bundle.js
5+
typescript-bundle.js
6+
example.png

‎sandboxes/automated-tests/Backend/server.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
const express = require('express');
2+
const path = require('path');
3+
4+
const app = express();
5+
6+
app.use(express.static(path.resolve(__dirname, '../', 'Frontend', 'public')));
7+
8+
const server = app.listen(3000);
9+
// () => {console.log('Express listening on port 3000');}
10+
11+
module.exports = server;

‎sandboxes/automated-tests/Frontend/public/index.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<meta name="theme-color" content="#000000" />
7+
<meta name="description" content="Reactime Sandboxes" />
8+
<title>Reactime Sandboxes</title>
9+
</head>
10+
<body>
11+
<noscript>You need to enable JavaScript to run this app.</noscript>
12+
<div id="root">
13+
HTML in the Root Div
14+
</div>
15+
<script src="./index-bundle.js"></script>
16+
</body>
17+
</html>

‎sandboxes/automated-tests/Frontend/public/typescript.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<meta name="theme-color" content="#000000" />
7+
<meta name="description" content="Reactime Sandboxes" />
8+
<title>Typescript Reactime Sandboxes</title>
9+
</head>
10+
<body>
11+
<noscript>You need to enable JavaScript to run this app.</noscript>
12+
<div id="root">
13+
HTML in the Root Div
14+
</div>
15+
<script src="./typescript-bundle.js"></script>
16+
</body>
17+
</html>

‎sandboxes/automated-tests/README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# reactime-sandboxes
2+
Sandboxes for testing Reactime

‎sandboxes/automated-tests/__tests__/hooks-redux-router-typescript.js‎

Lines changed: 185 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
1+
/* eslint-disable no-undef */
2+
import 'babel-polyfill';
3+
4+
const puppeteer = require('puppeteer');
5+
6+
const SERVER = require('../Backend/server');
7+
8+
const APP = 'http://localhost:3000';
9+
const TYPESCRIPT = 'http://localhost:3000/typescript.html';
10+
11+
let browser;
12+
let page;
13+
14+
describe('Sandbox Tests', () => {
15+
beforeAll(async () => {
16+
await SERVER;
17+
18+
browser = await puppeteer.launch({
19+
args: ['--no-sandbox', '--disable-setuid-sandbox']
20+
// headless: false
21+
});
22+
page = await browser.newPage();
23+
});
24+
25+
afterAll(async () => {
26+
await SERVER.close();
27+
28+
await browser.close();
29+
});
30+
31+
describe('Non-Typescript Tests', () => {
32+
describe('Sandbox Launch', () => {
33+
it('Sandboxes Load Successfully', async () => {
34+
await page.goto(APP);
35+
const title = await page.$eval('title', el => el.innerHTML);
36+
expect(title).toBe('Reactime Sandboxes');
37+
38+
// await page.screenshot({ path: 'example.png' }); // Add a screenshot
39+
});
40+
});
41+
42+
describe('Hook Tests', () => {
43+
it('The parent count should be 1 after the button is clicked 2 times', async () => {
44+
await page.$eval('#increaseButton', el => el.click());
45+
await page.$eval('#increaseButton', el => el.click());
46+
47+
const lastSnapshotJSON = await page.$eval(
48+
'#lastSnapshot',
49+
el => el.innerHTML
50+
);
51+
52+
const lastSnapshot = await JSON.parse(lastSnapshotJSON);
53+
54+
// The snapshot is 1 event behind currently; if this is changed then the expected value would be 2
55+
// console.log(JSON.parse(document.querySelector('#lastSnapshot').innerHTML).children[0].children[1].state.count)
56+
expect(lastSnapshot.children[0].children[1].state.count).toBe(1);
57+
});
58+
59+
it('After the both button is clicked 2 times, the first child count should be 1 and the second child count should be 999', async () => {
60+
await page.$eval('#childBothButton', el => el.click());
61+
await page.$eval('#childBothButton', el => el.click());
62+
63+
const lastSnapshotJSON = await page.$eval(
64+
'#lastSnapshot',
65+
el => el.innerHTML
66+
);
67+
68+
const lastSnapshot = await JSON.parse(lastSnapshotJSON);
69+
70+
// console.log(JSON.parse(document.querySelector('#lastSnapshot').innerHTML).children[0].children[1].children[0].state.count2)
71+
expect(
72+
lastSnapshot.children[0].children[1].children[0].state.count2
73+
).toBe(1);
74+
75+
expect(
76+
lastSnapshot.children[0].children[1].children[0].state.count3
77+
).toBe(999);
78+
});
79+
});
80+
81+
describe('UseEffect Tests', () => {
82+
it('Should navigate to the useEffect Tests', async () => {
83+
await page.$eval('#UseEffect', el => el.click());
84+
});
85+
});
86+
87+
describe('UseContext Tests', () => {
88+
it('Should navigate to the UseContext Tests', async () => {
89+
await page.$eval('#UseContext', el => el.click());
90+
});
91+
});
92+
93+
describe('UseMemo Tests', () => {
94+
it('Should navigate to the UseMemo Tests', async () => {
95+
await page.$eval('#UseMemo', el => el.click());
96+
});
97+
});
98+
99+
describe('Redux Tests', () => {
100+
it('Should navigate to the Redux Tests', async () => {
101+
await page.$eval('#Redux', el => el.click());
102+
});
103+
});
104+
105+
describe('Router Tests', () => {
106+
it('Should navigate to the Router Tests', async () => {
107+
await page.$eval('#Router', el => el.click());
108+
});
109+
});
110+
111+
describe('SetState Tests', () => {
112+
it('Should navigate to the SetState Tests', async () => {
113+
await page.$eval('#SetState', el => el.click());
114+
});
115+
});
116+
117+
describe('SetStateConditional Tests', () => {
118+
it('Should navigate to the SetStateConditional Tests', async () => {
119+
await page.$eval('#SetStateConditional', el => el.click());
120+
});
121+
});
122+
123+
describe('ComponentDidMount Tests', () => {
124+
it('Should navigate to the ComponentDidMount Tests', async () => {
125+
await page.$eval('#ComponentDidMount', el => el.click());
126+
});
127+
});
128+
});
129+
130+
describe('Typescript Tests', () => {
131+
describe('Typescript Sandbox Launch', () => {
132+
it('Typescript Sandboxes Load Successfully', async () => {
133+
await page.goto(TYPESCRIPT);
134+
const title = await page.$eval('title', el => el.innerHTML);
135+
expect(title).toBe('Typescript Reactime Sandboxes');
136+
137+
// await page.screenshot({ path: 'example.png' }); // Add a screenshot
138+
});
139+
});
140+
141+
describe('Typescript Hook Tests', () => {
142+
describe('UseEffect Tests', () => {
143+
it('Should navigate to the useEffect Tests', async () => {
144+
await page.$eval('#UseEffect', el => el.click());
145+
});
146+
});
147+
148+
describe('UseContext Tests', () => {
149+
it('Should navigate to the UseContext Tests', async () => {
150+
await page.$eval('#UseContext', el => el.click());
151+
});
152+
});
153+
154+
describe('UseMemo Tests', () => {
155+
it('Should navigate to the UseMemo Tests', async () => {
156+
await page.$eval('#UseMemo', el => el.click());
157+
});
158+
});
159+
160+
describe('Redux Tests', () => {
161+
it('Should navigate to the Redux Tests', async () => {
162+
await page.$eval('#Redux', el => el.click());
163+
});
164+
});
165+
166+
describe('Router Tests', () => {
167+
it('Should navigate to the Router Tests', async () => {
168+
await page.$eval('#Router', el => el.click());
169+
});
170+
});
171+
172+
describe('SetState Tests', () => {
173+
it('Should navigate to the SetState Tests', async () => {
174+
await page.$eval('#SetState', el => el.click());
175+
});
176+
});
177+
178+
describe('ComponentDidMount Tests', () => {
179+
it('Should navigate to the ComponentDidMount Tests', async () => {
180+
await page.$eval('#ComponentDidMount', el => el.click());
181+
});
182+
});
183+
});
184+
});
185+
});

‎sandboxes/automated-tests/babel.config.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
module.exports = {
2+
presets: ['@babel/preset-env', '@babel/preset-react'],
3+
plugins: [['@babel/plugin-proposal-class-properties', { loose: true }]]
4+
};

0 commit comments

Comments
 (0)