Only display active roles in CaseParticipantsTab component, add Vitest, and unit test(s) (#2960)

* Change commaSeperated filter to only show active participant roles

* Add vitest and add unit tests for ParticipantsTab

* Try running w/o coverage to resolve error

* try to update various componenets in gh actions workflow

* add another test case for renouncedRoles not being displayed

* Run coverage again

* Fix tests to actually test things

* Only display active participant roles for incidents

* correctly import component

* remove debug log lines

Author: wssheldon

.github/workflows/javascript.yml

@@ -8,11 +8,11 @@ jobs:
 
     steps:
       - name: Check out Git repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - name: Setup Node.js environment
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v3
         with:
-          node-version: '12'
+          node-version: 16
       - name: Install dev deps
         working-directory: src/dispatch/static/dispatch
         run: |
@@ -21,3 +21,7 @@ jobs:
         working-directory: src/dispatch/static/dispatch
         run: |
           npm run lint
+      - name: Run Vitest
+        working-directory: src/dispatch/static/dispatch
+        run: |
+          npm run test:coverage

.gitignore

@@ -211,3 +211,5 @@ docker/.env
 /playwright-report/
 /playwright/.cache/
 /tests/static/e2e/artifacts/*
+src/dispatch/static/dispatch/tests/__snapshots__
+src/dispatch/static/dispatch/coverage

src/dispatch/static/dispatch/package-lock.json

@@ -4,10 +4,13 @@
   "private": true,
   "scripts": {
     "serve": "cross-env NODE_ENV=dev NODE_OPTIONS='--max-http-header-size=100000' vite",
-    "preview": "vite preview --open --port 8080",
     "build": "vite build --out-dir dist",
+    "test:unit": "vue-cli-service test:unit",
     "lint": "eslint src",
-    "lint:fix": "eslint src --fix"
+    "lint:fix": "eslint src --fix",
+    "preview": "vite preview --open --port 8080",
+    "test": "vitest",
+    "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
     "@json2csv/plainjs": "^6.1.1",
@@ -42,25 +45,30 @@
   "devDependencies": {
     "@mdi/font": "^5.9.55",
     "@playwright/test": "^1.30.0",
-    "@vitejs/plugin-vue2": "^2.0.0",
+    "@vitejs/plugin-vue2": "^2.2.0",
+    "@vitest/coverage-c8": "^0.28.4",
+    "@vitest/coverage-istanbul": "^0.28.4",
     "@vue/compiler-sfc": "^3.0.11",
+    "@vue/test-utils": "^1.3.4",
     "babel-runtime": "^6.26.0",
     "cross-env": "^7.0.3",
     "eslint": "^8.26.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-vue": "^9.7.0",
     "jquery": "^3.6.0",
+    "jsdom": "^21.1.0",
     "jwt-decode": "^3.1.2",
     "prettier": "^2.7.1",
     "sass": "~1.32.12",
     "stylus": "^0.54.8",
     "stylus-loader": "^3.0.2",
     "unplugin-vue-components": "^0.22.9",
-    "vite": "^3.2.1",
+    "vite": "^4.0.0",
     "vite-plugin-babel": "^1.1.2",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-monaco-editor": "^1.1.0",
+    "vitest": "^0.28.4",
     "vue-cli-plugin-vuetify": "^2.3.1",
     "vue-template-compiler": "^2.6.12",
     "vuetify-loader": "^1.7.2",

src/dispatch/static/dispatch/package.json

@@ -4,9 +4,9 @@
             <span v-for="participant in participants" :key="participant.id">
                 <v-list-item :href="participant.individual.weblink" target="_blank">
                     <v-list-item-content>
-                        <v-list-item-title>
+                        <v-list-item-title ref="participants">
                             {{ participant.individual.name }} ({{
-                                participant.participant_roles | commaSeparatedRoles
+                                participant.participant_roles | activeRoles
                             }})
                         </v-list-item-title>
                         <v-list-item-subtitle>
@@ -37,15 +37,5 @@ export default {
   computed: {
     ...mapFields("case_management", ["selected.participants"]),
   },
-
-  filters: {
-    commaSeparatedRoles: function (value) {
-      return value
-        .map(function (v) {
-          return v.role
-        })
-        .join(", ")
-    },
-  },
 }
 </script>

src/dispatch/static/dispatch/src/case/ParticipantsTab.vue

@@ -104,3 +104,16 @@ Vue.filter("commaString", function (value, key) {
       .join(", ")
   }
 })
+
+export const activeRoles = function (value) {
+  if (value) {
+    return value
+      .filter((role) => !role.renounced_at)
+      .map(function (role) {
+        return role.role
+      })
+      .join(", ")
+  }
+}
+
+Vue.filter("activeRoles", activeRoles)

src/dispatch/static/dispatch/src/filters.js

@@ -6,7 +6,7 @@
           <v-list-item-content>
             <v-list-item-title>
               {{ participant.individual.name }} ({{
-                participant.participant_roles | commaSeparatedRoles
+                participant.participant_roles | activeRoles
               }})
             </v-list-item-title>
             <v-list-item-subtitle>
@@ -37,15 +37,5 @@ export default {
   computed: {
     ...mapFields("incident", ["selected.participants"]),
   },
-
-  filters: {
-    commaSeparatedRoles: function (value) {
-      return value
-        .map(function (v) {
-          return v.role
-        })
-        .join(", ")
-    },
-  },
 }
 </script>

src/dispatch/static/dispatch/src/incident/ParticipantsTab.vue

@@ -0,0 +1,86 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { describe, expect, it, vi } from "vitest"
+import { createLocalVue, shallowMount } from "@vue/test-utils"
+import CaseParticipantsTab from "src/case/ParticipantsTab.vue"
+import { activeRoles } from "src/filters"
+
+describe("CaseParticipantsTab", () => {
+  const localVue = createLocalVue()
+  localVue.filter("activeRoles", activeRoles)
+
+  vi.mock("vuex-map-fields", () => ({
+    getterType: vi.fn(),
+    mapFields: vi.fn(),
+  }))
+
+  const participants = [
+    {
+      id: 1,
+      individual: {
+        name: "John Doe",
+        weblink: "https://example.com/john-doe",
+      },
+      participant_roles: [
+        { role: "Participant", renounced_at: null },
+        { role: "Reporter", renounced_at: "2022-01-01T00:00:00.000Z" },
+      ],
+      team: "Team A",
+      location: "Location A",
+    },
+    {
+      id: 2,
+      individual: {
+        name: "Jane Doe",
+        weblink: "https://example.com/jane-doe",
+      },
+      participant_roles: [{ role: "Assignee", renounced_at: null }],
+      team: "Team B",
+      location: "Location B",
+    },
+  ]
+
+  const computed = {
+    participants: () => participants,
+  }
+
+  it("assert if there's participants that we render them", () => {
+    const wrapper = shallowMount(CaseParticipantsTab, { localVue, computed })
+    const participantListItems = wrapper.findAll("v-list-item-title").wrappers
+    expect(participantListItems).to.have.lengthOf(2)
+  })
+
+  it("displays active roles", () => {
+    const wrapper = shallowMount(CaseParticipantsTab, { localVue, computed })
+    const participantListItems = wrapper.findAll("v-list-item-title").wrappers
+
+    participantListItems.forEach((participantListItem, index) => {
+      const participant = participants[index]
+      const activeRoles = participant.participant_roles
+        .filter((role) => !role.renounced_at)
+        .map((role) => role.role)
+        .join(", ")
+
+      expect(participantListItem.text()).to.include(activeRoles)
+    })
+  })
+
+  it("does not display renounced roles", () => {
+    const wrapper = shallowMount(CaseParticipantsTab, { localVue, computed })
+    const participantListItems = wrapper.findAll("v-list-item-title").wrappers
+
+    participantListItems.forEach((participantListItem, index) => {
+      const participant = participants[index]
+      const renouncedRoles = participant.participant_roles
+        .filter((role) => role.renounced_at)
+        .map((role) => role.role)
+        .join(", ")
+
+      if (renouncedRoles) {
+        expect(participantListItem.text()).to.not.include(renouncedRoles)
+      }
+    })
+  })
+})

src/dispatch/static/dispatch/tests/participants-tab.spec.js

@@ -0,0 +1,10 @@
+import { defineConfig } from "vite"
+import vue from "@vitejs/plugin-vue2"
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+  test: {
+    globals: true,
+  },
+})