initial

.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "env": {
+    "commonjs": true,
+    "es2021": true,
+    "node": true,
+    "browser": true,
+    "jest": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended"
+  ],
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "rules": {}
+}

.gitignore

@@ -0,0 +1,133 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+.DS_Store
+.vscode

LICENSE

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

README.md

@@ -0,0 +1,107 @@
+# Testing React Module Project - Stranger Things
+
+## ✨ Requirements
+
+1. Node >= 18.x
+2. Git Bash (Windows users)
+
+## ✨ Usage
+
+1. Fork and clone repo
+2. Run `npm install`
+3. Run `npm run dev`
+4. Run `npm test`
+5. Load app in `http://localhost:3003`
+
+## ✨ Prototype
+
+![Stranger Example](project_example.gif)
+
+## ✨ Instructions
+
+Welcome to your Module Project! In this module you practiced testing React applications with React Testing Library.
+
+In this project you will write tests for an existing website which displays information about the Stranger Things TV show.
+
+### 🥷 Tasks
+
+**❗ Preliminary notes about your tasks:**
+
+- Watch the first minutes of the **Solution Video** if you need help getting started.
+- There is no need to install any extra NPM dependencies.
+- You will make changes to two files:
+  1. [App.test.js](./frontend/components/tests/App.test.js)
+  2. [Episode.test.js](./frontend/components/tests/Episode.test.js)
+
+#### 👉 TASK 1 - Study the UI
+
+Load the application and get a sense of how it works by studying the component code and the interface in Chrome.
+
+#### 👉 TASK 2 - Test the App component
+
+Inside [App.test.js](./frontend/components/tests/App.test.js) you will write the tests found in that file.
+
+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.
+
+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.
+
+#### 👉 TASK 3 - Test the Episode component
+
+Inside [Episode.test.js](./frontend/components/tests/Episode.test.js) you will write the tests found in that file.
+
+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.
+
+#### 👉 TASK 4 - Watch the Solution Video
+
+This step is only required if you need help getting started or get stuck at any point. HAVE FUN!
+
+## FAQ
+
+<details>
+  <summary>I feel very stuck. What can I do?</summary>
+
+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.
+
+</details>
+
+<details>
+  <summary>I am getting errors when I run npm install. What is going on?</summary>
+
+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!
+
+</details>
+
+<details>
+  <summary>Do I need to install extra libraries with NPM?</summary>
+
+No. Everything you need should be installed already.
+
+</details>
+
+<details>
+  <summary>Can I edit the HTML or the CSS?</summary>
+
+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!
+
+</details>
+
+<details>
+  <summary>My page does not work! How do I debug it?</summary>
+
+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.
+
+</details>
+
+<details>
+  <summary>How do I run tests against my code?</summary>
+
+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.
+
+</details>
+
+<details>
+  <summary>I messed up and want to start over! How do I do that?</summary>
+
+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.
+
+</details>

__jest__/jest.fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub'

__jest__/jest.styleMock.js

@@ -0,0 +1 @@
+module.exports = {}

__jest__/jsdom.extended.js

@@ -0,0 +1,23 @@
+const JSDOMEnvironment = require("jest-environment-jsdom").default
+
+class JSDOMEnvironmentExtended extends JSDOMEnvironment {
+  constructor(...args) {
+    super(...args)
+
+    this.global.ReadableStream = ReadableStream
+    this.global.TextDecoder = TextDecoder
+    this.global.TextEncoder = TextEncoder
+    this.global.Blob = Blob
+    this.global.File = File
+    this.global.Headers = Headers
+    this.global.FormData = FormData
+    this.global.Request = Request
+    this.global.Response = Response
+    this.global.Request = Request
+    this.global.Response = Response
+    this.global.fetch = fetch
+    this.global.structuredClone = structuredClone
+  }
+}
+
+module.exports = JSDOMEnvironmentExtended

babel.config.js

@@ -0,0 +1,30 @@
+const PLUGIN_STYLED_COMPONENTS = 'babel-plugin-styled-components'
+const PRESET_REACT = '@babel/preset-react'
+const PRESET_ENV = '@babel/preset-env'
+
+const configTesting = {
+  plugins: [],
+  presets: [
+    [PRESET_REACT],
+    [PRESET_ENV, { modules: 'commonjs' }]
+  ]
+}
+
+const configNotTesting = {
+  plugins: [
+    [PLUGIN_STYLED_COMPONENTS],
+  ],
+  presets: [
+    [PRESET_REACT],
+    [PRESET_ENV, { targets: { chrome: '115' } }]
+  ]
+}
+
+module.exports = {
+  env: {
+    test: configTesting,
+    testing: configTesting,
+    development: configNotTesting,
+    production: configNotTesting,
+  }
+}