Testing improvements milan

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["next/babel"]
+}

.circleci/config.yml

@@ -3,10 +3,104 @@ version: 2.1
 orbs:
   silta: silta/[email protected]
 
+images:
+  - &node
+    image: circleci/node:12.16.1-browsers
+
+executors:
+  node:
+    docker:
+      - *node
+
+jobs:
+  install:
+    executor: node
+    steps:
+      - checkout:
+          path: ~/project/build_path
+      - restore_cache:
+          keys:
+            - v1-circleci-nextjs-dependencies-{{ .Branch }}-{{ .Revision }}
+      - run:
+          name: Install Dependencies
+          command: cd build_path && npm ci
+      - save_cache:
+          key: v1-circleci-nextjs-dependencies-{{ .Branch }}-{{ .Revision }}
+          paths:
+            - ~/.npm
+            - ~/.cache
+  jest:
+    docker:
+      - image: circleci/node:12.16.1-browsers
+    resource_class: large
+    steps:
+      - checkout:
+          path: ~/project/build_path
+      - restore_cache:
+          key: v1-circleci-nextjs-dependencies-{{ .Branch }}-{{ .Revision }}
+      - run:
+          name: Install dependencies
+          command: cd build_path && npm ci
+      - run:
+          name: Jest tests
+          command: cd build_path && npm run test:jest
+      - store_artifacts:
+          path: ~/project/build_path/tests/jest/snapshots/diff_output
+          destination: tests/jest/snapshots/diff_output
+      - run:
+          name: Update image snapshots when tests fails
+          command: cd build_path && npm run test:jest:update
+          when: on_fail
+      - store_artifacts:
+          path: ~/project/build_path/tests/jest/snapshots/current_output
+          destination: tests/jest/snapshots/current_output
+  cypress:
+    docker:
+      - image: circleci/node:12.16.1-browsers
+    resource_class: large
+    steps:
+      - checkout:
+          path: ~/project/build_path
+      - restore_cache:
+          key: v1-circleci-nextjs-dependencies-{{ .Branch }}-{{ .Revision }}
+      - run:
+          name: Install dependencies
+          command: cd build_path && npm ci
+      - run:
+          name: Build application
+          command: cd build_path && npm run build
+      - run:
+          name: Run application
+          command: cd build_path && npm run start
+          background: true
+      - run:
+          name: Cypress tests
+          command: cd build_path && npm run test:cypress:run
+      - store_artifacts:
+          path: ~/project/build_path/cypress/screenshots
+          destination: cypress/screenshots
+      - store_artifacts:
+          path: ~/project/build_path/cypress/snapshots/diff_output
+          destination: cypress/snapshots/diff_output
+      - run:
+          name: Update image snapshots when tests fails
+          command: cd build_path && npm run test:cypress:run:update
+          when: on_fail
+      - store_artifacts:
+          path: ~/project/build_path/cypress/snapshots/current_output
+          destination: cypress/snapshots/current_output
+
 workflows:
   version: 2
   commit:
     jobs:
+      - install
+      - jest:
+          requires:
+            - install
+      - cypress:
+          requires:
+            - install
       # silta/frontend-build-deploy is defined here https://github.com/wunderio/silta-circleci/blob/master/orb/jobs/%40frontend.yml
       # &build-deploy is a yaml anchor, so we can reference it later
       - silta/frontend-build-deploy: &frontend-build-deploy
@@ -19,7 +113,6 @@ workflows:
           filters:
             branches:
               ignore: production
-
       - silta/frontend-build-deploy:
           # Extend the build-deploy configuration for the production environment.
           <<: *frontend-build-deploy

.gitignore

@@ -5,8 +5,12 @@
 /.pnp
 .pnp.js
 
-# testing
-/coverage
+# testing image snapshot diffs
+/cypress/snapshots/diff_output
+/tests/jest/snapshots/diff_output
+
+# cypress screenshots
+/cypress/screenshots
 
 # next.js
 /.next/

cypress.json

@@ -0,0 +1,8 @@
+{
+  "baseUrl": "http://localhost:3000",
+  "testFiles": "**/*.*spec.*",
+  "ignoreTestFiles": ["**/snapshots/*"],
+  "pluginsFile": "cypress/plugins/index.ts",
+  "supportFile": "cypress/support/index.ts",
+  "video": false
+}

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/integration/home-page.spec.ts

@@ -0,0 +1,15 @@
+import { breakpointList } from "../../tests/test-utils/constants";
+
+describe("Home page", () => {
+  it("should successfully load", () => {
+    cy.visit("/");
+  });
+
+  breakpointList.forEach((width) => {
+    it(`should match current snapshot ('${width}px' viewport width)`, () => {
+      cy.viewport(width, 1080);
+      cy.visit(`/`);
+      cy.matchImageSnapshot();
+    });
+  });
+});

cypress/plugins/index.ts

@@ -0,0 +1,7 @@
+/// <reference types="cypress" />
+import { addMatchImageSnapshotPlugin } from "cypress-image-snapshot/plugin";
+
+export default (on, config) => {
+  addMatchImageSnapshotPlugin(on, config);
+  return config;
+};

cypress/support/index.ts

@@ -0,0 +1,8 @@
+import { addMatchImageSnapshotCommand } from "cypress-image-snapshot/command";
+
+addMatchImageSnapshotCommand({
+  customSnapshotsDir: "cypress/snapshots/current_output",
+  customDiffDir: "cypress/snapshots/diff_output",
+});
+
+export {};

cypress/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "types": ["cypress"]
+  },
+  "include": [
+    "../node_modules/cypress",
+    "./**/*.ts"
+  ]
+}

jest.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  verbose: true,
+  testEnvironment: "jsdom",
+  setupFilesAfterEnv: ["<rootDir>/tests/jest/jest.setup.ts"],
+  testPathIgnorePatterns: [
+    "<rootDir>/cypress/",
+    "<rootDir>/.next/",
+    "<rootDir>/node_modules/",
+  ],
+  moduleNameMapper: {
+    "\\.(scss|sass|css)$": "identity-obj-proxy",
+    "@/components/(.*)": "<rootDir>/src/components/$1",
+    "@/utils/(.*)": "<rootDir>/src/utils/$1",
+  },
+};