Skip to content

Commit 99d5891

Browse files
prathamesh-mutkureprathamesh-mutkure
authored
Added Tests Previews (#868)
* Installed jest-preview * Automatic Setup * Fiixed Failing Test Command * Added Basic CSS * Added PostCSS Module * Fixed MUI Styling * Minor Changes * Added cross-env to support windows * Adaptar for React 17 and CSS Modules Mock * Added Mocked Styles to Tests * Documentatin Updated * Fixed Failing Tests * Minorr change in documentation * Jest is now Dev Dependency * Workflow Test * Jest Module Path Updates * Module Path Tese 2 * Github Workflow Fixed * Removed Legacy Test Command * Added Documentation to Debug Tests * Fixed Documentation * Docs Image Added To Repo * Images Reorganization * Organized Images
1 parent 7288724 commit 99d5891

15 files changed

+8736
-57
lines changed

‎CONTRIBUTING.md

+41-22
Original file line numberDiff line numberDiff line change
@@ -87,47 +87,66 @@ The process of proposing a change to Talawa Admin can be summarized as:
8787
1. **_General_:**
8888
1. We need to get to 100% test coverage for the app. We periodically increase the desired test coverage for our pull requests to meet this goal.
8989
1. Pull requests that don't meet the minimum test coverage levels will not be accepted. This may mean that you will have to create tests for code you did not write. You can decide which part of the code base needs additional tests if this happens to you.
90-
1. **_Testing_:**
90+
91+
2. **_Testing_:**
92+
9193
1. Test using this set of commands:
92-
```
94+
95+
```
96+
npm install --legacy-peer-deps
97+
npm run test --watchAll=false --coverage
98+
```
99+
100+
2. Debug tests in browser
101+
102+
You can see the output of failing tests in broswer by running `jest-preview` package before running your tests
103+
104+
```
93105
npm install --legacy-peer-deps
106+
npm run jest-preview
94107
npm run test --watchAll=false --coverage
95-
```
96-
1. **_Test Code Coverage_:**
108+
```
109+
110+
You don't need to re-run the `npm run jest-preview` command each time, simply run the `npm run test` command if the Jest Preview server is already running in the background, it'll automatically detect any failing tests and show the preview at `http://localhost:3336` as shown in this screenshot -
111+
112+
![Debugging Test Demo](./public/images/jest-preview.webp)
113+
114+
115+
3. **_Test Code Coverage_:**
97116
1. _General Information_
98117
1. The current code coverage of the repo is: [![codecov](https://codecov.io/gh/PalisadoesFoundation/talawa-admin/branch/develop/graph/badge.svg?token=II0R0RREES)](https://codecov.io/gh/PalisadoesFoundation/talawa-admin)
99-
1. You can determine the percentage test coverage of your code by running these two commands in sequence:
118+
2. You can determine the percentage test coverage of your code by running these two commands in sequence:
100119
```
101120
npm install --legacy-peer-deps
102121
npm run test --watchAll=false --coverage
103122
genhtml coverage/lcov.info -o coverage
104123
```
105-
1. The output of the `npm run test` command will give you a tablular coverage report per file
106-
1. The overall coverage rate will be visible on the penultimate line of the `genhtml` command's output.
107-
1. The `genhtml` command is part of the Linux `lcov` package. Similar packages can be found for Windows and MacOS.
108-
1. The currently acceptable coverage rate can be found in the [GitHub Pull Request file](.github/workflows/pull-requests.yml). Search for the value below the line containing `min_coverage`.
109-
1. _Testing Individual Files_
124+
3. The output of the `npm run test` command will give you a tablular coverage report per file
125+
4. The overall coverage rate will be visible on the penultimate line of the `genhtml` command's output.
126+
5. The `genhtml` command is part of the Linux `lcov` package. Similar packages can be found for Windows and MacOS.
127+
6. The currently acceptable coverage rate can be found in the [GitHub Pull Request file](.github/workflows/pull-requests.yml). Search for the value below the line containing `min_coverage`.
128+
2. _Testing Individual Files_
110129
1. You can test an individual file by running this command:
111130
```
112131
npm run test --watchAll=false /path/to/test/file
113132
```
114-
1. You can get the test coverage report for that file by running this command. The report will list all tests in the suite. Those tests that are not run will have zero values. You will need to look for the output line relevant to your test file.
133+
2. You can get the test coverage report for that file by running this command. The report will list all tests in the suite. Those tests that are not run will have zero values. You will need to look for the output line relevant to your test file.
115134
```
116135
npm run test --watchAll=false --coverage /path/to/test/file
117136
```
118-
1. _Creating your code coverage account_
137+
3. _Creating your code coverage account_
119138
1. You can also see your code coverage online for your fork of the repo. This is provided by `codecov.io`
120139
1. Go to this link: `https://app.codecov.io/gh/XXXX/YYYY` where XXXX is your GitHub account username and YYYY is the name of the repository
121-
1. Login to `codecov.io` using your GitHub account, and add your **repo** and **branches** to the `codecov.io` dashboard.
122-
1. Remember to add the `Repository Upload Token` for your forked repo. This can be found under `Settings` of your `codecov.io` account.
123-
1. Use the value of this token to create a secret named CODE_COV for your forked repo.
124-
1. You will see your code coverage reports with every push to your repo after following these steps
125-
1. After making changes you can add them to git locally using `git add <file_name>`(to add changes only in a particular file) or `git add .` (to add all changes).
126-
1. After adding the changes you need to commit them using `git commit -m '<commit message>'`(look at the commit guidelines below for commit messages).
127-
1. Once you have successfully commited your changes, you need to push the changes to the forked repo on github using: `git push origin <branch_name>`.(Here branch name must be name of the branch you want to push the changes to.)
128-
1. Now create a pull request to the Talawa-admin repository from your forked repo. Open an issue regarding the same and link your PR to it.
129-
1. Ensure the test suite passes, either locally or on CI once a PR has been created.
130-
1. Review and address comments on your pull request if requested.
140+
2. Login to `codecov.io` using your GitHub account, and add your **repo** and **branches** to the `codecov.io` dashboard.
141+
3. Remember to add the `Repository Upload Token` for your forked repo. This can be found under `Settings` of your `codecov.io` account.
142+
4. Use the value of this token to create a secret named CODE_COV for your forked repo.
143+
5. You will see your code coverage reports with every push to your repo after following these steps
144+
2. After making changes you can add them to git locally using `git add <file_name>`(to add changes only in a particular file) or `git add .` (to add all changes).
145+
3. After adding the changes you need to commit them using `git commit -m '<commit message>'`(look at the commit guidelines below for commit messages).
146+
4. Once you have successfully commited your changes, you need to push the changes to the forked repo on github using: `git push origin <branch_name>`.(Here branch name must be name of the branch you want to push the changes to.)
147+
5. Now create a pull request to the Talawa-admin repository from your forked repo. Open an issue regarding the same and link your PR to it.
148+
6. Ensure the test suite passes, either locally or on CI once a PR has been created.
149+
7. Review and address comments on your pull request if requested.
131150
132151
## Internships
133152

‎INSTALLATION.md

+16-1
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ This document provides instructions on how to set up and start a running instanc
2323
- [Talawa-Admin Login](#talawa-admin-login)
2424
- [Testing](#testing)
2525
- [Running tests](#running-tests)
26+
- [Debugging tests](#debugging-tests)
2627
- [Linting code files](#linting-code-files)
2728
- [Husky for Git Hooks](#husky-for-git-hooks)
2829
- [pre-commit hook](#pre-commit-hook)
@@ -116,7 +117,7 @@ If you want to setup Google reCAPTCHA now, you may refer to to the `RECAPTCHA` s
116117

117118
`Talawa-admin` needs the `reCAPTCHA site key` for the `reCAPTCHA` service you set up during `talawa-api` installation as shown in this screenshot:
118119

119-
![reCAPTCHA site key](./public/REACT_SITE_KEY.webp)
120+
![reCAPTCHA site key](./public/images/REACT_SITE_KEY.webp)
120121

121122
Copy/paste this `reCAPTCHA site key` to the variable named `REACT_APP_RECAPTCHA_SITE_KEY` in `.env` file.
122123

@@ -163,6 +164,20 @@ You can run the tests for `talawa-admin` using this command:
163164
npm run test
164165
```
165166

167+
## Debugging tests
168+
169+
You can see the output of failing tests in broswer by running `jest-preview` package before running your tests
170+
171+
```
172+
npm run jest-preview
173+
npm run test
174+
```
175+
176+
You don't need to re-run the `npm run jest-preview` command each time, simply run the `npm run test` command if the Jest Preview server is already running in the background, it'll automatically detect any failing tests and show the preview at `http://localhost:3336` as shown in this screenshot -
177+
178+
![Debugging Test Demo](./public/images/jest-preview.webp)
179+
180+
166181
## Linting code files
167182

168183
You can lint your code files using this command:

‎jest-preview.config.ts

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export default {
2+
moduleNameMapper: {
3+
'^@mui/(.*)$': '<rootDir>/node_modules/@mui/$1',
4+
},
5+
};

‎jest.config.js

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
export default {
2+
roots: ['<rootDir>/src'],
3+
collectCoverageFrom: ['src/**/*.{ts,tsx}', '!src/index.tsx'],
4+
setupFiles: ['react-app-polyfill/jsdom'],
5+
setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
6+
testMatch: [
7+
'<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}',
8+
'<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}',
9+
],
10+
testEnvironment: 'jsdom',
11+
transform: {
12+
'^.+\\.(js|jsx|mjs|cjs|ts|tsx)$':
13+
'react-scripts/config/jest/babelTransform.js',
14+
'^.+\\.(css|scss|sass|less)$': 'jest-preview/transforms/css',
15+
'^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)':
16+
'jest-preview/transforms/file',
17+
},
18+
transformIgnorePatterns: [
19+
'[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$',
20+
],
21+
modulePaths: [
22+
'/Users/prathamesh/Desktop/Open-Source/palisadoes/talawa-admin/src',
23+
'<rootDir>/src',
24+
],
25+
moduleNameMapper: {
26+
'^react-native$': 'react-native-web',
27+
'^@mui/(.*)$': '<rootDir>/node_modules/@mui/$1',
28+
},
29+
moduleFileExtensions: [
30+
'web.js',
31+
'js',
32+
'web.ts',
33+
'ts',
34+
'web.tsx',
35+
'tsx',
36+
'json',
37+
'web.jsx',
38+
'jsx',
39+
'node',
40+
],
41+
watchPlugins: [
42+
'jest-watch-typeahead/filename',
43+
'jest-watch-typeahead/testname',
44+
],
45+
resetMocks: false,
46+
coveragePathIgnorePatterns: [
47+
'src/state/index.ts',
48+
'src/components/plugins/index.ts',
49+
'src/components/AddOn/support/services/Render.helper.ts',
50+
'src/components/SecuredRoute/SecuredRoute.tsx',
51+
'src/reportWebVitals.ts',
52+
],
53+
coverageThreshold: {
54+
global: {
55+
lines: 20,
56+
statements: 20,
57+
},
58+
},
59+
testPathIgnorePatterns: [
60+
'<rootDir>/node_modules/',
61+
'<rootDir>/build/',
62+
'<rootDir>/public/',
63+
],
64+
};

0 commit comments

Comments
 (0)