CircleCI config updated

Author: osheinonen

.circleci/config.yml

@@ -13,56 +13,94 @@ executors:
       - *node
 
 jobs:
-  build:
+  install:
     executor: node
     steps:
       - checkout:
           path: ~/project/build_path
       - restore_cache:
-          key: v1-circleci-nextjs-project-{{ .Branch }}-{{ .Revision }}
+          keys:
+            - v1-circleci-nextjs-dependecies-{{ .Branch }}-{{ .Revision }}
       - run:
           name: Install Dependencies
-          command: cd build_path && npm install
-      - run:
-          name: Build
-          command: cd build_path && npm run build
-
-      # Cache node_modules for tests.
+          command: cd build_path && npm ci
       - save_cache:
-          key: v1-circleci-nextjs-project-{{ .Branch }}-{{ .Revision }}
+          key: v1-circleci-nextjs-dependecies-{{ .Branch }}-{{ .Revision }}
           paths:
-            - build_path
-
-  unit-test:
+            - ~/.npm
+            - ~/.cache
+  jest:
     docker:
       - image: circleci/node:12.16.1-browsers
     resource_class: large
     steps:
-      - checkout
+      - checkout:
+          path: ~/project/build_path
       - restore_cache:
-          key: v1-circleci-nextjs-project-{{ .Branch }}-{{ .Revision }}
+          key: v1-circleci-nextjs-dependecies-{{ .Branch }}-{{ .Revision }}
+      - run:
+          name: Install dependecies
+          command: cd build_path && npm ci
       - run:
           name: Jest tests
           command: cd build_path && npm run test:jest
       - store_artifacts:
-          path: ~/project/build_path/src/tests/__image_snapshots__/__diff_output__
-          destination: diff_output
+          path: ~/project/build_path/jest/snapshots/diff_output
+          # destination: jest/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/src/tests/__image_snapshots__
-          destination: image_snapshots
-
+          path: ~/project/build_path/jest/snapshots/current_output
+          # destination: jest/image_snapshots
+  cypress:
+    docker:
+      - image: circleci/node:12.16.1-browsers
+    resource_class: large
+    steps:
+      - checkout:
+          path: ~/project/build_path
+      - restore_cache:
+          key: v1-circleci-nextjs-dependecies-{{ .Branch }}-{{ .Revision }}
+      - run:
+          name: Install dependecies
+          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/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/image_snapshots
+          
 workflows:
   version: 2
   commit:
     jobs:
-      - build
-      - unit-test:
+      - install
+      - jest:
+          requires:
+            - install
+      - cypress:
           requires:
-            - build
+            - 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
@@ -75,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
+/jest/snapshots/diff_output
+
+# cypress screenshots
+/cypress/screenshots
 
 # next.js
 /.next/

cypress/integration/home-page.spec.ts

@@ -7,5 +7,6 @@ import {
 describe("The Home Page", () => {
   it("successfully loads homepage", () => {
     cy.visit("/");
+    cy.matchImageSnapshot();
   });
 });

cypress/plugins/index.ts

@@ -1,14 +1,7 @@
 /// <reference types="cypress" />
-// const { initPlugin } = require("cypress-plugin-snapshots/plugin");
+import { addMatchImageSnapshotPlugin } from "cypress-image-snapshot/plugin";
 
-// module.exports = (on, config) => {
-//   initPlugin(on, config);
-//   return config;
-// };
-
-// import { initPlugin } from "cypress-plugin-snapshots/plugin";
-
-// export default (on, config) => {
-//   initPlugin(on, config);
-//   return config;
-// };
+export default (on, config) => {
+  addMatchImageSnapshotPlugin(on, config);
+  return config;
+};

cypress/snapshots/current_output/home-page.spec.ts/The Home Page -- successfully loads homepage.snap.png

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

cypress/support/index.ts

@@ -1,7 +1,7 @@
 module.exports = {
   verbose: true,
   testEnvironment: "jsdom",
-  setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
+  setupFilesAfterEnv: ["<rootDir>/jest/jest.setup.ts"],
   testPathIgnorePatterns: [
     "<rootDir>/cypress/",
     "<rootDir>/.next/",

jest.config.js

@@ -0,0 +1,10 @@
+import { expect } from "@jest/globals";
+import "@testing-library/jest-dom";
+import { configureToMatchImageSnapshot } from "jest-image-snapshot";
+
+const toMatchImageSnapshot = configureToMatchImageSnapshot({
+  customSnapshotsDir: "jest/snapshots/current_output",
+  customDiffDir: "jest/snapshots/diff_output",
+});
+
+expect.extend({ toMatchImageSnapshot });