├── .github └── workflows │ └── codeql-analysis.yml ├── .gitignore ├── LICENSE ├── README.md ├── package.json ├── public ├── favicon.ico ├── index.html ├── manifest.json └── robots.txt ├── src ├── App.css ├── App.js ├── App.test.js ├── Documentation │ ├── 1. Introduction_to_testing.md │ ├── 2. Testing_strategy.md │ ├── 3. Project_walkthrough.md │ └── 4. Testing_props.md ├── components │ └── starbucks-input │ │ ├── StarbucksInput.js │ │ └── index.spec.js ├── index.css ├── index.js ├── reportWebVitals.js └── setupTests.js └── yarn.lock /.github/workflows/codeql-analysis.yml: -------------------------------------------------------------------------------- 1 | # For most projects, this workflow file will not need changing; you simply need 2 | # to commit it to your repository. 3 | # 4 | # You may wish to alter this file to override the set of languages analyzed, 5 | # or to provide custom queries or build logic. 6 | # 7 | # ******** NOTE ******** 8 | # We have attempted to detect the languages in your repository. Please check 9 | # the `language` matrix defined below to confirm you have the correct set of 10 | # supported CodeQL languages. 11 | # 12 | name: "CodeQL" 13 | 14 | on: 15 | push: 16 | branches: [ develop ] 17 | pull_request: 18 | # The branches below must be a subset of the branches above 19 | branches: [ develop ] 20 | schedule: 21 | - cron: '34 4 * * 2' 22 | 23 | jobs: 24 | analyze: 25 | name: Analyze 26 | runs-on: ubuntu-latest 27 | permissions: 28 | actions: read 29 | contents: read 30 | security-events: write 31 | 32 | strategy: 33 | fail-fast: false 34 | matrix: 35 | language: [ 'javascript' ] 36 | # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ] 37 | # Learn more: 38 | # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed 39 | 40 | steps: 41 | - name: Checkout repository 42 | uses: actions/checkout@v2 43 | 44 | # Initializes the CodeQL tools for scanning. 45 | - name: Initialize CodeQL 46 | uses: github/codeql-action/init@v1 47 | with: 48 | languages: ${{ matrix.language }} 49 | # If you wish to specify custom queries, you can do so here or in a config file. 50 | # By default, queries listed here will override any specified in a config file. 51 | # Prefix the list here with "+" to use these queries and those in the config file. 52 | # queries: ./path/to/local/query, your-org/your-repo/queries@main 53 | 54 | # Autobuild attempts to build any compiled languages (C/C++, C#, or Java). 55 | # If this step fails, then you should remove it and run the build manually (see below) 56 | - name: Autobuild 57 | uses: github/codeql-action/autobuild@v1 58 | 59 | # ℹ️ Command-line programs to run using the OS shell. 60 | # 📚 https://git.io/JvXDl 61 | 62 | # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines 63 | # and modify them (or add more) to build your code if your project 64 | # uses a compiled language 65 | 66 | #- run: | 67 | # make bootstrap 68 | # make release 69 | 70 | - name: Perform CodeQL Analysis 71 | uses: github/codeql-action/analyze@v1 72 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .vscode 16 | .DS_Store 17 | .env.local 18 | .env.development.local 19 | .env.test.local 20 | .env.production.local 21 | 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* 25 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Real Dev Squad 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. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Simple React App with Tests (Beta, WIP) 2 | 3 | > This is a work in progress repo, not ready for prime time yet - Ankush 4 | 5 | Create a simple react app that has tests working 6 | 7 | Clone this repo and ensure that you are following [Git Flow](https://www.atlassian.com/git/tutorials/comparing-workflows/gitflow-workflow) convention to submitting PRs to your OWN repo 8 | 9 | ## To Do 10 | 11 | - [ ] Setup testing framework 12 | - [ ] Add tests 13 | - [ ] Setup GitHub actions 14 | 15 | ## Requirements: 16 | 17 | > **Note** 18 | > This project uses volta, so please [set it up](https://docs.volta.sh/guide/getting-started). Also, read: [Why use Volta?](https://docs.volta.sh/guide/#why-volta) 19 | 20 | 21 | Ensure that you follow TDD approach to writing your code. 22 | The tests are available and marked as `skip`. Enable your tests by converting the 23 | `skip` into `test` 24 | 25 | Ensure that your milestone tests are passing, before submitting the PR 26 | 27 | ### Milestone `Tall` 28 | 29 | - [ ] Create a controlled component input box 30 | - [ ] Create a composed sign up component using the input box components 31 | - [ ] Perform validations on the input to enable/disable the Next step button 32 | 33 | ### Milestone `Grande` 34 | 35 | - [ ] Create an OTP component 36 | - [ ] Upon successful email/name entry, get to OTP step 37 | 38 | ## Milestone vocabulary 39 | 40 | Starbucks has the following denotations for sizes: 41 | 42 | ``` 43 | Tall - Small glass 44 | Grande - Regular glass 45 | Venti - Big mug 46 | Trenta - Biggest bucket 47 | ``` 48 | 49 | ## References to watch 50 | 51 | - Simple easy to understand video on doing TDD by Eve Porcello - [YouTube Link at time 5:46:14](https://youtu.be/K8MF3aDg-bM?t=20774) 52 | 53 | - Links and resources for Eve's talk about TDD with React! ⚛️ - eveporcello/women-of-react-2020 [GitHub Link](https://github.com/eveporcello/women-of-react-2020) 54 | 55 | - Testing React by Kent C Todds - [YouTube Link](https://youtu.be/kCR3JAR7CHE) 56 | 57 | - Testing Overview - [Official Docs](https://reactjs.org/docs/testing.html) 58 | 59 | ## What will we be developing? 60 | 61 | A guide for beginners to understand and learn Testing in ReactJS Project. This would be a detail documentation on Testing. 62 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-sign-up-with-tests", 3 | "version": "0.2.0", 4 | "license": "MIT", 5 | "dependencies": { 6 | "@testing-library/dom": "^10.4.0", 7 | "@testing-library/jest-dom": "^6.5.0", 8 | "@testing-library/react": "^16.0.1", 9 | "@testing-library/user-event": "14.5.2", 10 | "react": "^18.3.1", 11 | "react-dom": "^18.3.1", 12 | "react-scripts": "^5.0.1", 13 | "web-vitals": "^4.2.3" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": [ 23 | "react-app", 24 | "react-app/jest" 25 | ] 26 | }, 27 | "browserslist": { 28 | "production": [ 29 | ">0.2%", 30 | "not dead", 31 | "not op_mini all" 32 | ], 33 | "development": [ 34 | "last 1 chrome version", 35 | "last 1 firefox version", 36 | "last 1 safari version" 37 | ] 38 | }, 39 | "volta": { 40 | "node": "18.12.1", 41 | "yarn": "1.22.19" 42 | }, 43 | "devDependencies": { 44 | "@babel/plugin-proposal-private-property-in-object": "^7.21.11" 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Real-Dev-Squad/react-tests-tdd/9ff2d8946700f2919d53f453fa3a4f230ef0a87e/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import './App.css'; 2 | 3 | function App() { 4 | return ( 5 |
6 |
7 |

8 | Edit src/App.js and save to reload. 9 |

10 | 16 | Learn React 17 | 18 |
19 |
20 | ); 21 | } 22 | 23 | export default App; 24 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /src/Documentation/1. Introduction_to_testing.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Real-Dev-Squad/react-tests-tdd/9ff2d8946700f2919d53f453fa3a4f230ef0a87e/src/Documentation/1. Introduction_to_testing.md -------------------------------------------------------------------------------- /src/Documentation/2. Testing_strategy.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Real-Dev-Squad/react-tests-tdd/9ff2d8946700f2919d53f453fa3a4f230ef0a87e/src/Documentation/2. Testing_strategy.md -------------------------------------------------------------------------------- /src/Documentation/3. Project_walkthrough.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Real-Dev-Squad/react-tests-tdd/9ff2d8946700f2919d53f453fa3a4f230ef0a87e/src/Documentation/3. Project_walkthrough.md -------------------------------------------------------------------------------- /src/Documentation/4. Testing_props.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Real-Dev-Squad/react-tests-tdd/9ff2d8946700f2919d53f453fa3a4f230ef0a87e/src/Documentation/4. Testing_props.md -------------------------------------------------------------------------------- /src/components/starbucks-input/StarbucksInput.js: -------------------------------------------------------------------------------- 1 | export default function StarbucksInput() { 2 | return ( 3 |
Starbucks Coffee
4 | ) 5 | } 6 | -------------------------------------------------------------------------------- /src/components/starbucks-input/index.spec.js: -------------------------------------------------------------------------------- 1 | import StarbucksInput from './StarbucksInput.js'; 2 | import { render, screen } from '@testing-library/react'; 3 | import userEvent from '@testing-library/user-event'; 4 | 5 | describe.skip('starbucks input tests', () => { 6 | test('it renders input component', async () => { 7 | // Assemble 8 | const elName = 'nickname'; 9 | 10 | render(); 11 | 12 | // Act 13 | const sbInput = screen.getByRole('textbox', { name: /nickname/i }); 14 | 15 | // Assert 16 | expect(sbInput).toBeInTheDocument(); 17 | }); 18 | 19 | test('it responds with updated input', async () => { 20 | // Assemble 21 | const elName = 'nickname'; 22 | const currentVal = 'Ank'; 23 | const nextChar = 'u'; 24 | const expectedString = `${currentVal}${nextChar}`; 25 | 26 | const onChangeStub = jest.fn(); 27 | 28 | // Act 29 | render(); 30 | 31 | const sbInput = screen.getByRole('textbox', { name: /nickname/i }); 32 | 33 | await userEvent.type(sbInput, nextChar); 34 | 35 | // Assert 36 | expect(onChangeStub).toHaveBeenCalledTimes(1); 37 | expect(onChangeStub).toHaveBeenLastCalledWith(expectedString); 38 | }); 39 | 40 | test('it renders error correctly', async () => { 41 | // Assemble 42 | const error = 'Please provide valid star wars name'; 43 | 44 | render(); 45 | 46 | const sbError = screen.getByText(error) 47 | 48 | // Assert 49 | expect(sbError).toBeInTheDocument(); 50 | }); 51 | }) 52 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import { createRoot } from 'react-dom/client'; 2 | import './index.css'; 3 | import App from './App'; 4 | import reportWebVitals from './reportWebVitals'; 5 | 6 | const container = document.getElementById('app'); 7 | const root = createRoot(container); // createRoot(container!) if you use TypeScript 8 | root.render(); 9 | 10 | // If you want to start measuring performance in your app, pass a function 11 | // to log results (for example: reportWebVitals(console.log)) 12 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 13 | reportWebVitals(); 14 | -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | --------------------------------------------------------------------------------