Skip to content

Commit deb1120

Browse files
LadrilloLadrillo
committed
initial
0 parents  commit deb1120

32 files changed

+18081
-0
lines changed

‎.eslintrc.json

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"env": {
3+
"commonjs": true,
4+
"es2021": true,
5+
"node": true,
6+
"browser": true,
7+
"jest": true
8+
},
9+
"extends": [
10+
"eslint:recommended",
11+
"plugin:react/recommended"
12+
],
13+
"parserOptions": {
14+
"ecmaVersion": "latest",
15+
"sourceType": "module"
16+
},
17+
"rules": {}
18+
}

‎.gitignore

+133
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
lerna-debug.log*
8+
.pnpm-debug.log*
9+
10+
# Diagnostic reports (https://nodejs.org/api/report.html)
11+
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
12+
13+
# Runtime data
14+
pids
15+
*.pid
16+
*.seed
17+
*.pid.lock
18+
19+
# Directory for instrumented libs generated by jscoverage/JSCover
20+
lib-cov
21+
22+
# Coverage directory used by tools like istanbul
23+
coverage
24+
*.lcov
25+
26+
# nyc test coverage
27+
.nyc_output
28+
29+
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
30+
.grunt
31+
32+
# Bower dependency directory (https://bower.io/)
33+
bower_components
34+
35+
# node-waf configuration
36+
.lock-wscript
37+
38+
# Compiled binary addons (https://nodejs.org/api/addons.html)
39+
build/Release
40+
41+
# Dependency directories
42+
node_modules/
43+
jspm_packages/
44+
45+
# Snowpack dependency directory (https://snowpack.dev/)
46+
web_modules/
47+
48+
# TypeScript cache
49+
*.tsbuildinfo
50+
51+
# Optional npm cache directory
52+
.npm
53+
54+
# Optional eslint cache
55+
.eslintcache
56+
57+
# Optional stylelint cache
58+
.stylelintcache
59+
60+
# Microbundle cache
61+
.rpt2_cache/
62+
.rts2_cache_cjs/
63+
.rts2_cache_es/
64+
.rts2_cache_umd/
65+
66+
# Optional REPL history
67+
.node_repl_history
68+
69+
# Output of 'npm pack'
70+
*.tgz
71+
72+
# Yarn Integrity file
73+
.yarn-integrity
74+
75+
# dotenv environment variable files
76+
.env
77+
.env.development.local
78+
.env.test.local
79+
.env.production.local
80+
.env.local
81+
82+
# parcel-bundler cache (https://parceljs.org/)
83+
.cache
84+
.parcel-cache
85+
86+
# Next.js build output
87+
.next
88+
out
89+
90+
# Nuxt.js build / generate output
91+
.nuxt
92+
dist
93+
94+
# Gatsby files
95+
.cache/
96+
# Comment in the public line in if your project uses Gatsby and not Next.js
97+
# https://nextjs.org/blog/next-9-1#public-directory-support
98+
# public
99+
100+
# vuepress build output
101+
.vuepress/dist
102+
103+
# vuepress v2.x temp and cache directory
104+
.temp
105+
.cache
106+
107+
# Docusaurus cache and generated files
108+
.docusaurus
109+
110+
# Serverless directories
111+
.serverless/
112+
113+
# FuseBox cache
114+
.fusebox/
115+
116+
# DynamoDB Local files
117+
.dynamodb/
118+
119+
# TernJS port file
120+
.tern-port
121+
122+
# Stores VSCode versions used for testing VSCode extensions
123+
.vscode-test
124+
125+
# yarn v2
126+
.yarn/cache
127+
.yarn/unplugged
128+
.yarn/build-state.yml
129+
.yarn/install-state.gz
130+
.pnp.*
131+
132+
.DS_Store
133+
.vscode

‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2023 BloomTech Inc.
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

+107
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
# Testing React Module Project - Stranger Things
2+
3+
## ✨ Requirements
4+
5+
1. Node >= 18.x
6+
2. Git Bash (Windows users)
7+
8+
## ✨ Usage
9+
10+
1. Fork and clone repo
11+
2. Run `npm install`
12+
3. Run `npm run dev`
13+
4. Run `npm test`
14+
5. Load app in `http://localhost:3003`
15+
16+
## ✨ Prototype
17+
18+
![Stranger Example](project_example.gif)
19+
20+
## ✨ Instructions
21+
22+
Welcome to your Module Project! In this module you practiced testing React applications with React Testing Library.
23+
24+
In this project you will write tests for an existing website which displays information about the Stranger Things TV show.
25+
26+
### 🥷 Tasks
27+
28+
**❗ Preliminary notes about your tasks:**
29+
30+
- Watch the first minutes of the **Solution Video** if you need help getting started.
31+
- There is no need to install any extra NPM dependencies.
32+
- You will make changes to two files:
33+
1. [App.test.js](./frontend/components/tests/App.test.js)
34+
2. [Episode.test.js](./frontend/components/tests/Episode.test.js)
35+
36+
#### 👉 TASK 1 - Study the UI
37+
38+
Load the application and get a sense of how it works by studying the component code and the interface in Chrome.
39+
40+
#### 👉 TASK 2 - Test the App component
41+
42+
Inside [App.test.js](./frontend/components/tests/App.test.js) you will write the tests found in that file.
43+
44+
The entire React component tree is being mounted completely for you to test, and the project includes mocking of the API using Mock Service Worker. This means that the tests do not depend on the API but rather on an imitation of it. This is set up for you, and you don't need to worry about it. Just remember it would be very bad if tests depended on a live API because this would make them slow and unreliable.
45+
46+
In these tests, you will check the presence of correct texts, but you will also operate the site the same way a real user would, thanks to the [User Event](https://testing-library.com/docs/user-event/intro/) library.
47+
48+
#### 👉 TASK 3 - Test the Episode component
49+
50+
Inside [Episode.test.js](./frontend/components/tests/Episode.test.js) you will write the tests found in that file.
51+
52+
This will be a totally different approach: instead of mounting the entire component tree and mocking the API, we will mount a single component in isolation, re-rendering it with a variety of props to make sure everything works correctly for the "happy path" and for a number of edge cases.
53+
54+
#### 👉 TASK 4 - Watch the Solution Video
55+
56+
This step is only required if you need help getting started or get stuck at any point. HAVE FUN!
57+
58+
## FAQ
59+
60+
<details>
61+
<summary>I feel very stuck. What can I do?</summary>
62+
63+
Redo the Guided Project for the module, or check out the Solution Video for this project. In these recordings, an industry expert walks you through their thinking in detail, while they solve the tasks.
64+
65+
</details>
66+
67+
<details>
68+
<summary>I am getting errors when I run npm install. What is going on?</summary>
69+
70+
This project requires Node >= V18 correctly installed in order to work. Sometimes Node can be misconfigured. Try deleting `node_modules` and running `npm install`. If this fails, try deleting both `node_modules` and `package-lock.json` before reinstalling. If all fails, please request support!
71+
72+
</details>
73+
74+
<details>
75+
<summary>Do I need to install extra libraries with NPM?</summary>
76+
77+
No. Everything you need should be installed already.
78+
79+
</details>
80+
81+
<details>
82+
<summary>Can I edit the HTML or the CSS?</summary>
83+
84+
You can edit the CSS of the project to give it a personal touch so you can add it to your portfolio, but only after you've finished your tasks!
85+
86+
</details>
87+
88+
<details>
89+
<summary>My page does not work! How do I debug it?</summary>
90+
91+
Remember to use console.logs and breakpoints to troubleshoot your code. Do not panic if you see errors in the console, just read them carefully looking for clues.
92+
93+
</details>
94+
95+
<details>
96+
<summary>How do I run tests against my code?</summary>
97+
98+
Execute `npm test` in your terminal. You can also do `npm test -- App.test.js` for example, to run a single test suite in isolation.
99+
100+
</details>
101+
102+
<details>
103+
<summary>I messed up and want to start over! How do I do that?</summary>
104+
105+
Do NOT delete your repository from GitHub! Instead, commit frequently as you work. This in practice creates restore points. If you find yourself in a mess, use git reset --hard to simply discard all changes to your code since your last commit. If you are dead-set on restarting the challenge from scratch, you can do this with Git as well. Research how to reset --hard to a specific commit.
106+
107+
</details>

‎__jest__/jest.fileMock.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = 'test-file-stub'

‎__jest__/jest.styleMock.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = {}

‎__jest__/jsdom.extended.js

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
const JSDOMEnvironment = require("jest-environment-jsdom").default
2+
3+
class JSDOMEnvironmentExtended extends JSDOMEnvironment {
4+
constructor(...args) {
5+
super(...args)
6+
7+
this.global.ReadableStream = ReadableStream
8+
this.global.TextDecoder = TextDecoder
9+
this.global.TextEncoder = TextEncoder
10+
this.global.Blob = Blob
11+
this.global.File = File
12+
this.global.Headers = Headers
13+
this.global.FormData = FormData
14+
this.global.Request = Request
15+
this.global.Response = Response
16+
this.global.Request = Request
17+
this.global.Response = Response
18+
this.global.fetch = fetch
19+
this.global.structuredClone = structuredClone
20+
}
21+
}
22+
23+
module.exports = JSDOMEnvironmentExtended

‎babel.config.js

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
const PLUGIN_STYLED_COMPONENTS = 'babel-plugin-styled-components'
2+
const PRESET_REACT = '@babel/preset-react'
3+
const PRESET_ENV = '@babel/preset-env'
4+
5+
const configTesting = {
6+
plugins: [],
7+
presets: [
8+
[PRESET_REACT],
9+
[PRESET_ENV, { modules: 'commonjs' }]
10+
]
11+
}
12+
13+
const configNotTesting = {
14+
plugins: [
15+
[PLUGIN_STYLED_COMPONENTS],
16+
],
17+
presets: [
18+
[PRESET_REACT],
19+
[PRESET_ENV, { targets: { chrome: '115' } }]
20+
]
21+
}
22+
23+
module.exports = {
24+
env: {
25+
test: configTesting,
26+
testing: configTesting,
27+
development: configNotTesting,
28+
production: configNotTesting,
29+
}
30+
}

0 commit comments

Comments
 (0)