Merge branch 'add_frontend_testing' into 'master'

Add frontend testing

See merge request !54

.gitlab-ci.yml

@@ -60,6 +60,19 @@ test_back:
   tags:
     - docker
 
+test_frontend:
+  stage: test
+  image: node:10.15.1-alpine
+  cache:
+    paths:
+      - frontend/node_modules/
+  before_script:
+    - cd frontend && npm i
+  script:
+    - npm run test
+  tags:
+    - docker
+
 flake8:
   stage: lint
   image: registry.gitlab.utc.fr/rex-dri/rex-dri/backend

Makefile

@@ -15,6 +15,9 @@ reformat_backend:
 test_backend:
 	docker-compose exec backend sh -c "cd backend && pytest base_app/ backend_app/"
 
+test_frontend:
+	docker-compose exec frontend sh -c "cd frontend && npm run test"
+
 check_backend:
 	docker-compose exec backend sh -c "cd backend && ./manage.py check"
 

documentation/_sidebar.md

@@ -7,5 +7,6 @@
 * [Architecture](architecture.md)
 * [Tags](tags.md)
 * [API](API.md)
+* [Tests](tests.md)
 * [About this documentation](this_doc.md)
 * [Contributions](contributions.md)

documentation/tests.md

+Tests
+======
+
+*Rex-DRI* comes in with several *tests* that you can perform locally using the commands `make test_backend` and `make test_frontend` once the project is up and running (`make up`).
+
+## Backend testing
+
+
+### General words
+
+Testing the backend is handled with a combination of `pytest` and `Django` (and `pytest-django` package).
+
+The tests are found in the `backend_app/tests/` folder and they mostly test the custom behaviors that are implemented in the app such as moderation and versioning.
+
+Also, there are tests regarding some custom validation.
+
+Finally, the initial and example loading data scripts are tested.
+
+
+### Documentation
+
+Some usefull links to get inspired:
+- [General information about testing in Django](https://docs.djangoproject.com/fr/2.1/topics/testing/overview/)
+- [`pytest` documentation](https://docs.pytest.org/en/latest/)
+- [`pytest-django` documentation](https://pytest-django.readthedocs.io/en/latest/)
+
+
+## Frontend testing
+
+### General words
+
+Testing the frontend is done with `jest`.
+
+### Documentation
+
+- [`jest` documentation](https://jestjs.io/docs/en/getting-started)

frontend/.eslintrc.js

@@ -2,6 +2,7 @@ module.exports = {
   "env": {
     "browser": true,
     "es6": true,
+    "jest/globals": true
   },
   "extends": [
     "eslint:recommended",
@@ -16,7 +17,8 @@ module.exports = {
     }
   },
   "plugins": [
-    "react"
+    "react",
+    "jest",
   ],
   "rules": {
     "indent": [

frontend/package.json

@@ -8,7 +8,7 @@
     "lint-fix": "eslint \"./src/**/*.js\" --fix",
     "dev": "node server.js",
     "build": "webpack --config webpack.config.build.js",
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "jest",
     "stats": "webpack --config webpack.config.build.js --profile --json > stats.json",
     "view-stats": "webpack-bundle-analyzer --host 0.0.0.0 --port 8888 stats.json"
   },
@@ -54,11 +54,14 @@
     "@babel/preset-react": "^7.0.0",
     "autoprefixer": "^9.4.8",
     "babel-eslint": "^10.0.1",
+    "babel-jest": "^24.1.0",
     "babel-loader": "^8.0.5",
     "css-loader": "^2.1.0",
     "eslint": "^5.14.1",
+    "eslint-plugin-jest": "^22.3.0",
     "eslint-plugin-react": "^7.12.4",
     "file-loader": "^3.0.1",
+    "jest": "^24.1.0",
     "js-yaml-loader": "^1.0.1",
     "mini-css-extract-plugin": "^0.5.0",
     "node-sass": "^4.11.0",

frontend/tests/utils/areSameObjects.test.js

+import areSameObjects from "../../src/utils/areSameObjects";
+
+// a very basic test to check that the areSameObjects function performs as expected
+test("Are same objects", () => {
+  const a = { test: true },
+    b = { test: true };
+
+  expect(areSameObjects(a, b)).toBe(true);
+});