Skip to content

Commit

Permalink
Only display active roles in CaseParticipantsTab component, add Vites…
Browse files Browse the repository at this point in the history
…t, 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
  • Loading branch information
wssheldon authored Feb 9, 2023
1 parent e580795 commit 470e36c
Show file tree
Hide file tree
Showing 9 changed files with 3,610 additions and 1,017 deletions.
10 changes: 7 additions & 3 deletions .github/workflows/javascript.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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: |
Expand All @@ -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
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -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
4,464 changes: 3,477 additions & 987 deletions src/dispatch/static/dispatch/package-lock.json

Large diffs are not rendered by default.

16 changes: 12 additions & 4 deletions src/dispatch/static/dispatch/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
14 changes: 2 additions & 12 deletions src/dispatch/static/dispatch/src/case/ParticipantsTab.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
13 changes: 13 additions & 0 deletions src/dispatch/static/dispatch/src/filters.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)
12 changes: 1 addition & 11 deletions src/dispatch/static/dispatch/src/incident/ParticipantsTab.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
86 changes: 86 additions & 0 deletions src/dispatch/static/dispatch/tests/participants-tab.spec.js
Original file line number Diff line number Diff line change
@@ -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)
}
})
})
})
10 changes: 10 additions & 0 deletions src/dispatch/static/dispatch/vitest.config.js
Original file line number Diff line number Diff line change
@@ -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,
},
})

0 comments on commit 470e36c

Please sign in to comment.