test(coverage): add code coverage

.gitignore

@@ -166,4 +166,5 @@ __pypackages__/
 src/backend/*.db
 .npmrc
 .yarnrc
-*.local
+*.local
+screenshots/

src/frontend/.env.development.local.example

@@ -1,3 +1,2 @@
 VITE_API_URL=http://localhost:8181
-
-
+VITE_COVERAGE=true

src/frontend/babel.config.js

@@ -1,3 +1,4 @@
 module.exports = {
   presets: ["@vue/cli-plugin-babel/preset"],
+  plugins: ["istanbul"],
 };

src/frontend/cypress/integration/frontend.spec.ts

@@ -0,0 +1,18 @@
+/// <reference types="cypress" />
+// var date = new Date();
+describe("SFM Frontend Tests", () => {
+  const dayjs = require("dayjs");
+  const todaysDate = dayjs().format("YYYY-MM-DD");
+  const todaysDateConfirm = dayjs().format("DD MMM YYYY");
+  const historicalDate = dayjs().subtract(60, "day").format("YYYY-MM-DD");
+  const historicalDateConfirm = dayjs()
+    .subtract(60, "day")
+    .format("DD MMM YYYY");
+  it("Load Home Page", function () {
+    cy.visit("localhost:3000");
+  });
+
+  it("Load About Page", function () {
+    cy.visit("localhost:3000/about");
+  });
+});

src/frontend/cypress/plugins/index.js

@@ -1,11 +1,13 @@
 const { startDevServer } = require("@cypress/vite-dev-server");
+const codeCoverageTask = require("@cypress/code-coverage/task");
 
 /**
  * @type {Cypress.PluginConfig}
  */
 
 module.exports = (on, config) => {
   on("dev-server:start", async (options) => startDevServer({ options }));
+  codeCoverageTask(on, config);
 
   return config;
 };

src/frontend/cypress/support/index.js

@@ -15,6 +15,7 @@
 
 // Import commands.js using ES2015 syntax:
 import "./commands";
+import "@cypress/code-coverage/support";
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

src/frontend/package.json

@@ -35,6 +35,7 @@
     "yup": "^0.32.9"
   },
   "devDependencies": {
+    "@cypress/code-coverage": "^3.9.11",
     "@cypress/vite-dev-server": "^2.0.7",
     "@cypress/vue": "^3.0.3",
     "@tailwindcss/aspect-ratio": "^0.2.1",
@@ -44,7 +45,7 @@
     "@vitejs/plugin-vue": "^1.4.0",
     "@vue/compiler-sfc": "^3.0.11",
     "autoprefixer": "^10.2.5",
-    "cypress": "^8.2.0",
+    "cypress": "^8.4.1",
     "eslint": "^7.32.0",
     "eslint-config-airbnb-base": "^14.2.1",
     "eslint-plugin-import": "^2.24.1",
@@ -56,7 +57,8 @@
     "tailwindcss": "^2.2.7",
     "trim-newlines": "^3.0.1",
     "typescript": "~3.9.3",
-    "vite": "^2.4.4"
+    "vite": "^2.4.4",
+    "vite-plugin-istanbul": "^2.2.0"
   },
   "eslintConfig": {
     "root": true,

src/frontend/src/components/Header.spec.ts

@@ -0,0 +1,15 @@
+/// <reference types="cypress" />
+import { mount } from "@cypress/vue";
+import Header from "./Header.vue";
+import "../index.css";
+
+describe("Meeting Statistics", () => {
+  it("Header is visible", () => {
+    mount(Header);
+    cy.get(".flex").should("be.visible");
+  });
+  it("Logo is visible", () => {
+    mount(Header);
+    cy.get(".w-8").should("be.visible");
+  });
+});

src/frontend/vite.config.js

@@ -1,8 +1,16 @@
 import vue from "@vitejs/plugin-vue";
-import { defineConfig } from "vite";
+import istanbul from "vite-plugin-istanbul";
 
 export default {
-  plugins: [vue()],
+  plugins: [
+    vue(),
+    istanbul({
+      include: "src/*",
+      exclude: ["node_modules", "test/"],
+      extension: [".js", ".ts", ".vue"],
+      requireEnv: false,
+    }),
+  ],
   define: {
     "process.env": {},
   },