|
| 1 | +import { createLocalVue, mount } from '@vue/test-utils' |
| 2 | +import { pnpStoreModule } from '@/store/pnp.js' |
| 3 | +import snackBarModule from '@/store/status-snackbar' |
| 4 | +import { myDevicesStoreModule } from '@/store/mydevices' |
| 5 | +import { cloneDeep } from 'lodash' |
| 6 | +import EventCard from '@/components/EventCard.vue' |
| 7 | +import Vuetify from 'vuetify' |
| 8 | +import Vuex from 'vuex' |
| 9 | +import Vue from 'vue' |
| 10 | +import VueRouter from 'vue-router' |
| 11 | +import flushPromises from 'flush-promises' |
| 12 | + |
| 13 | +jest.mock('peerjs') |
| 14 | + |
| 15 | +// global import instead of via localVue due to Vuetify 2 Typescript issue: |
| 16 | +// ref: https://vuetifyjs.com/en/getting-started/unit-testing/#bootstrapping-vuetify |
| 17 | +Vue.use(Vuetify) |
| 18 | + |
| 19 | +const localVue = createLocalVue() |
| 20 | + |
| 21 | +localVue.use(Vuex) |
| 22 | +// not recommended to use Vuetify with localVue. See note above. |
| 23 | +// localVue.use(Vuetify) |
| 24 | +localVue.use(VueRouter) |
| 25 | + |
| 26 | +describe('Event Card Component', () => { |
| 27 | + let wrapper |
| 28 | + let store |
| 29 | + let vuetify |
| 30 | + let router |
| 31 | + |
| 32 | + beforeEach(() => { |
| 33 | + vuetify = new Vuetify() |
| 34 | + |
| 35 | + router = new VueRouter() |
| 36 | + |
| 37 | + myDevicesStoreModule.actions.syncState = jest.fn() |
| 38 | + |
| 39 | + store = new Vuex.Store({ |
| 40 | + modules: { |
| 41 | + pnp: cloneDeep(pnpStoreModule), |
| 42 | + snackBar: cloneDeep(snackBarModule), |
| 43 | + myDevices: cloneDeep(myDevicesStoreModule) |
| 44 | + } |
| 45 | + }) |
| 46 | + |
| 47 | + store.state.pnp.edgeAPI = jest.fn() |
| 48 | + store.state.pnp.edgeAPI.getLocalImageURL = jest.fn() |
| 49 | + }) |
| 50 | + |
| 51 | + afterEach(() => { |
| 52 | + // wrapper.destroy() |
| 53 | + }) |
| 54 | + |
| 55 | + test('Event card should display inference labels', async () => { |
| 56 | + // event data |
| 57 | + const args = { |
| 58 | + datetime: '2020-05-10T19:05:45.577145', |
| 59 | + id: 'dde10cb4c3d74e828c473aa183cc8d80', |
| 60 | + image_file_name: '20200510-190545.577145-image.jpg', |
| 61 | + inference_meta: { |
| 62 | + display: 'Object Detection' |
| 63 | + }, |
| 64 | + inference_result: [ |
| 65 | + { |
| 66 | + box: { |
| 67 | + xmax: 0.7228575944900513, |
| 68 | + xmin: 0.3868940770626068, |
| 69 | + ymax: 1, |
| 70 | + ymin: 0.12535724414170846 |
| 71 | + }, |
| 72 | + confidence: 0.9921875, |
| 73 | + label: 'person' |
| 74 | + } |
| 75 | + ], |
| 76 | + json_file_name: '20200510-190545.577145-inference.json', |
| 77 | + rel_dir: 'detections/20200510-190544.936209', |
| 78 | + thumbnail_file_name: '20200510-190545.577145-thumbnail.jpg' |
| 79 | + } |
| 80 | + |
| 81 | + // create a parent dom for infinite-loader |
| 82 | + const div = document.createElement('div') |
| 83 | + document.body.appendChild(div) |
| 84 | + |
| 85 | + wrapper = mount(EventCard, { |
| 86 | + router, |
| 87 | + store, |
| 88 | + vuetify, |
| 89 | + localVue, |
| 90 | + attachTo: div, |
| 91 | + propsData: { |
| 92 | + data: { |
| 93 | + priority: 'INFO', |
| 94 | + message: 'Detection Event', |
| 95 | + args |
| 96 | + } |
| 97 | + } |
| 98 | + }) |
| 99 | + |
| 100 | + // wait for the view to load async data and finish rendering |
| 101 | + await Vue.nextTick() |
| 102 | + await flushPromises() |
| 103 | + |
| 104 | + // const html = wrapper.html() |
| 105 | + // console.debug('Event.vue HTML:', { html }) |
| 106 | + |
| 107 | + const eventTitle = wrapper.findComponent({ ref: 'event-title' }) |
| 108 | + expect(eventTitle.exists()).toBeTrue() |
| 109 | + expect(eventTitle.text()).toContain('Detection Event') |
| 110 | + const eventName = wrapper.findComponent({ ref: 'event-display-name' }) |
| 111 | + expect(eventName.exists()).toBeTrue() |
| 112 | + expect(eventName.text()).toContain('Object Detection') |
| 113 | + const infItems = wrapper.findAllComponents({ ref: 'inf-item' }) |
| 114 | + expect(infItems).toHaveLength(1) |
| 115 | + const infItem = infItems.at(0) |
| 116 | + expect(infItem.exists()).toBeTrue() |
| 117 | + const infLabel = infItem.find('[data-testid="inf-label"]') |
| 118 | + // console.debug('infLabel HTML[' + infLabel.html() + ']') |
| 119 | + // console.debug({ infLabel }) |
| 120 | + expect(infLabel.exists()).toBeTrue() |
| 121 | + expect(infLabel.text()).toBe('person') |
| 122 | + const infScore = infItem.find('[data-testid="inf-score"]') |
| 123 | + expect(infScore.exists()).toBeTrue() |
| 124 | + expect(infScore.text()).toContain('99% confidence') |
| 125 | + }) |
| 126 | + |
| 127 | + test('Event card shows idle snapshot events', async () => { |
| 128 | + // idle snapshot event data without inference |
| 129 | + const args = { |
| 130 | + datetime: '2020-05-10T19:05:45.577145', |
| 131 | + id: 'dde10cb4c3d74e828c473aa183cc8d80', |
| 132 | + image_file_name: '20200510-190545.577145-image.jpg', |
| 133 | + inference_meta: { |
| 134 | + display: 'Object Detection' |
| 135 | + }, |
| 136 | + inference_result: [], |
| 137 | + json_file_name: '20200510-190545.577145-inference.json', |
| 138 | + rel_dir: 'detections/20200510-190544.936209', |
| 139 | + thumbnail_file_name: '20200510-190545.577145-thumbnail.jpg' |
| 140 | + } |
| 141 | + |
| 142 | + // create a parent dom for infinite-loader |
| 143 | + const div = document.createElement('div') |
| 144 | + document.body.appendChild(div) |
| 145 | + |
| 146 | + wrapper = mount(EventCard, { |
| 147 | + router, |
| 148 | + store, |
| 149 | + vuetify, |
| 150 | + localVue, |
| 151 | + attachTo: div, |
| 152 | + propsData: { |
| 153 | + data: { |
| 154 | + priority: 'INFO', |
| 155 | + message: 'Detection Event', |
| 156 | + args |
| 157 | + } |
| 158 | + } |
| 159 | + }) |
| 160 | + |
| 161 | + // wait for the view to load async data and finish rendering |
| 162 | + await Vue.nextTick() |
| 163 | + await flushPromises() |
| 164 | + |
| 165 | + // const html = wrapper.html() |
| 166 | + // console.debug('Event.vue HTML:', { html }) |
| 167 | + |
| 168 | + const eventTitle = wrapper.findComponent({ ref: 'event-title' }) |
| 169 | + expect(eventTitle.exists()).toBeTrue() |
| 170 | + expect(eventTitle.text()).toContain('Idle Snapshot') |
| 171 | + const eventName = wrapper.findComponent({ ref: 'event-display-name' }) |
| 172 | + expect(eventName.exists()).toBeTrue() |
| 173 | + expect(eventName.text()).toContain('No Object Detection') |
| 174 | + const infItems = wrapper.findAllComponents({ ref: 'inf-item' }) |
| 175 | + expect(infItems).toHaveLength(0) |
| 176 | + }) |
| 177 | +}) |
0 commit comments