-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #240 from wtsi-npg/select_all_wells_for_run
Allow clickable run names in Well table to jump to wells-by-run
- Loading branch information
Showing
5 changed files
with
137 additions
and
90 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,24 +1,34 @@ | ||
| import { describe, expect, test, vi } from 'vitest' | ||
| import { mount, flushPromises } from '@vue/test-utils' | ||
| import { ref } from 'vue' | ||
| // import {createRouter, createWebHistory} from 'vue-router' | ||
| // or routes arg to render(Component, {routes: []|vue-router obj}) | ||
| import { describe, expect, test, vi } from "vitest"; | ||
| import { mount, flushPromises } from "@vue/test-utils"; | ||
| import { ref } from "vue"; | ||
|
|
||
| import { createTestingPinia } from '@pinia/testing' | ||
| import ElementPlus from 'element-plus' | ||
| import { createRouter, createWebHistory } from 'vue-router' | ||
| import { createTestingPinia } from "@pinia/testing"; | ||
| import ElementPlus from "element-plus"; | ||
| import { createRouter, createWebHistory } from "vue-router"; | ||
| // or routes arg to render(Component, {routes: []|vue-router obj}) | ||
|
|
||
| import WellsByStatus from '@/views/WellsByStatus.vue' | ||
| import WellsByStatus from "@/views/WellsByStatus.vue"; | ||
|
|
||
| // The giga-faking of most of the app: | ||
|
|
||
|
|
||
| const router = createRouter({ | ||
| history: createWebHistory(), | ||
| routes: [{ path: '/', redirect: '/ui/wells' }, { path: '/ui/wells', component: WellsByStatus }] | ||
| }) | ||
| routes: [ | ||
| { path: "/", redirect: "/ui/wells" }, | ||
| { path: "/ui/wells", component: WellsByStatus }, | ||
| { | ||
| path: "/ui/run/:runName+", | ||
| name: "WellsByRun", | ||
| props: true, | ||
| component: { | ||
| props: ["runName"], | ||
| template: "<div>{{props.runName[0]}}</div>", | ||
| }, | ||
| }, | ||
| ], | ||
| }); | ||
|
|
||
| const testWells = [] | ||
| const testWells = []; | ||
| for (let index = 0; index < 10; index++) { | ||
| testWells.push({ | ||
| label: String.fromCharCode(97 + index) + "1", | ||
|
|
@@ -31,29 +41,29 @@ for (let index = 0; index < 10; index++) { | |
| well_status: "Complete", | ||
| qc_state: null, | ||
| instrument_name: 1234, | ||
| instrument_type: 'Revio', | ||
| study_names: ['Some study'], | ||
| }) | ||
| instrument_type: "Revio", | ||
| study_names: ["Some study"], | ||
| }); | ||
| } | ||
|
|
||
| const configResponse = { | ||
| "qc_flow_statuses": [ | ||
| { "label": "Inbox", "param": "inbox" }, | ||
| { "label": "In Progress", "param": "in_progress" }, | ||
| { "label": "On Hold", "param": "on_hold" }, | ||
| { "label": "QC Complete", "param": "qc_complete" }, | ||
| { "label": "Aborted", "param": "aborted" }, | ||
| { "label": "Unknown", "param": "unknown" } | ||
| qc_flow_statuses: [ | ||
| { label: "Inbox", param: "inbox" }, | ||
| { label: "In Progress", param: "in_progress" }, | ||
| { label: "On Hold", param: "on_hold" }, | ||
| { label: "QC Complete", param: "qc_complete" }, | ||
| { label: "Aborted", param: "aborted" }, | ||
| { label: "Unknown", param: "unknown" }, | ||
| ], | ||
| "qc_states": [ | ||
| { "description": "Passed", "only_prelim": false }, | ||
| { "description": "Failed", "only_prelim": false }, | ||
| { "description": "Failed, Instrument", "only_prelim": false }, | ||
| { "description": "Failed, SMRT cell", "only_prelim": false }, | ||
| { "description": "On hold", "only_prelim": true }, | ||
| { "description": "Undecided", "only_prelim": false } | ||
| ] | ||
| } | ||
| qc_states: [ | ||
| { description: "Passed", only_prelim: false }, | ||
| { description: "Failed", only_prelim: false }, | ||
| { description: "Failed, Instrument", only_prelim: false }, | ||
| { description: "Failed, SMRT cell", only_prelim: false }, | ||
| { description: "On hold", only_prelim: true }, | ||
| { description: "Undecided", only_prelim: false }, | ||
| ], | ||
| }; | ||
|
|
||
| fetch.mockResponses( | ||
| [ | ||
|
|
@@ -62,10 +72,10 @@ fetch.mockResponses( | |
| userinfo: { | ||
| sub: "00ucz5ud94VnrDGv0416", | ||
| email: "[email protected]", | ||
| email_verified: true | ||
| } | ||
| email_verified: true, | ||
| }, | ||
| }), | ||
| { status: 200 } | ||
| { status: 200 }, | ||
| ], | ||
| // Get wells data | ||
| [ | ||
|
|
@@ -74,83 +84,99 @@ fetch.mockResponses( | |
| page_number: 1, | ||
| total_number_of_items: 100, | ||
| qc_flow_status: "inbox", | ||
| wells: testWells | ||
| wells: testWells, | ||
| }), | ||
| { status: 200 } | ||
| ], | ||
| ) | ||
| { status: 200 }, | ||
| ] | ||
| ); | ||
|
|
||
| const wrapper = mount(WellsByStatus, { | ||
| global: { | ||
| plugins: [ | ||
| ElementPlus, | ||
| createTestingPinia({ | ||
| createSpy: vi.fn, | ||
| stubActions: false | ||
| stubActions: false, | ||
| }), | ||
| router | ||
| router, | ||
| ], | ||
| provide: { | ||
| appConfig: ref(configResponse) | ||
| } | ||
| } | ||
| }) | ||
|
|
||
|
|
||
| appConfig: ref(configResponse), | ||
| }, | ||
| }, | ||
| }); | ||
|
|
||
| describe('View loads configuration on mount', async () => { | ||
| describe("View loads configuration on mount", async () => { | ||
| // onMount populates a Pinia store. Wait for reactivity to occur | ||
| await flushPromises() | ||
| await flushPromises(); | ||
|
|
||
| test('Tabs in run-table configured and rendered', () => { | ||
| test("Tabs in run-table configured and rendered", () => { | ||
| for (const flowStatus of configResponse.qc_flow_statuses) { | ||
| let tabId = `[id="tab-${flowStatus['param']}"]` | ||
| expect(wrapper.find(tabId).exists()).toBe(true) | ||
| let tabId = `[id="tab-${flowStatus["param"]}"]`; | ||
| expect(wrapper.find(tabId).exists()).toBe(true); | ||
| } | ||
| }) | ||
| }); | ||
|
|
||
| test('Default tab is inbox', () => { | ||
| const inboxButton = wrapper.get('[id="tab-inbox"]') | ||
| expect(inboxButton.classes('is-active')).toBeTruthy() | ||
| }) | ||
| test("Default tab is inbox", () => { | ||
| const inboxButton = wrapper.get('[id="tab-inbox"]'); | ||
| expect(inboxButton.classes("is-active")).toBeTruthy(); | ||
| }); | ||
|
|
||
| test('Runs are rendered in rows', () => { | ||
| const table = wrapper.get('table') | ||
| expect(table.exists()).toBe(true) | ||
| const rows = table.findAll('tr') | ||
| expect(rows.length).toEqual(11) // 10 rows plus header | ||
| }) | ||
| test("Runs are rendered in rows", () => { | ||
| const table = wrapper.get("table"); | ||
| expect(table.exists()).toBe(true); | ||
| const rows = table.findAll("tr"); | ||
| expect(rows.length).toEqual(11); // 10 rows plus header | ||
| }); | ||
|
|
||
| test('Navigating to another tab makes things happen', async () => { | ||
| test("Navigating to another tab makes things happen", async () => { | ||
| // Anticipate the loading of new tab data | ||
| fetch.mockResponseOnce( | ||
| JSON.stringify({ | ||
| page_size: 10, | ||
| page_number: 1, | ||
| total_number_of_items: 1, | ||
| qc_flow_status: "on_hold", | ||
| wells: [{ | ||
| label: 'X1', | ||
| run_name: 'TRACTION-RUN-299', | ||
| run_start_time: "2023-04-24T10:10:10", | ||
| run_complete_time: "2023-05-25T02:10:10", | ||
| well_start_time: "2023-04-24T10:10:10", | ||
| well_complete_time: "2023-05-25T02:10:10", | ||
| run_status: "Complete", | ||
| well_status: "Complete", | ||
| qc_state: null, | ||
| instrument_name: '1234', | ||
| instrument_type: 'Revio', | ||
| study_names: [], | ||
| }] | ||
| wells: [ | ||
| { | ||
| label: "X1", | ||
| run_name: "TRACTION-RUN-299", | ||
| run_start_time: "2023-04-24T10:10:10", | ||
| run_complete_time: "2023-05-25T02:10:10", | ||
| well_start_time: "2023-04-24T10:10:10", | ||
| well_complete_time: "2023-05-25T02:10:10", | ||
| run_status: "Complete", | ||
| well_status: "Complete", | ||
| qc_state: null, | ||
| instrument_name: "1234", | ||
| instrument_type: "Revio", | ||
| study_names: [], | ||
| }, | ||
| ], | ||
| }) | ||
| ) | ||
| ); | ||
|
|
||
| await wrapper.get('[id="tab-on_hold"]').trigger('click') | ||
| await flushPromises() // Awaiting data change, but also router.isReady | ||
| await wrapper.get('[id="tab-on_hold"]').trigger("click"); | ||
| await flushPromises(); // Awaiting data change, but also router.isReady | ||
|
|
||
| expect(fetch.requests().slice(-1)[0].url).toEqual('/api/pacbio/wells?qc_status=on_hold&page_size=10&page_number=1') | ||
| expect(fetch.requests().slice(-1)[0].url).toEqual( | ||
| "/api/pacbio/wells?qc_status=on_hold&page_size=10&page_number=1" | ||
| ); | ||
| // Access the current route by strange fashion | ||
| expect(router.currentRoute.value.query).toEqual({activeTab: 'on_hold', page: '1'}) | ||
| }) | ||
| }) | ||
| expect(router.currentRoute.value.query).toEqual({ | ||
| activeTab: "on_hold", | ||
| page: "1", | ||
| }); | ||
| }); | ||
|
|
||
| test("Route changes when WellTable emits a runSelected event", async () => { | ||
| // console.log(wrapper.html()) | ||
| await wrapper | ||
| .findComponent({ name: "well-table" }) | ||
| .vm.$emit("runSelected", "TRACTION-RUN-299"); | ||
| await flushPromises() | ||
| expect(router.currentRoute.value.path).toEqual( | ||
| "/ui/run/TRACTION-RUN-299" | ||
| ); | ||
| }); | ||
| }); | ||