diff --git a/assets/icons/index.js b/assets/icons/index.js index 2cae6fe3..ee55b3b4 100644 --- a/assets/icons/index.js +++ b/assets/icons/index.js @@ -204,6 +204,7 @@ import { cilCloudDownload, cilCode, cilGlobeAlt, + cilInfo, cilMedicalCross, cilMenu, cilPencil, @@ -225,6 +226,7 @@ export const iconsSet = { cilPencil, cilPlus, cilShieldAlt, + cilInfo, cifAd, cifAe, cifAf, diff --git a/assets/img/imperial_logo.svg b/assets/img/imperial_logo.svg new file mode 100644 index 00000000..b51996fd --- /dev/null +++ b/assets/img/imperial_logo.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + diff --git a/assets/img/jameel-community-logo.svg b/assets/img/jameel-community-logo.svg new file mode 100644 index 00000000..b677a9de --- /dev/null +++ b/assets/img/jameel-community-logo.svg @@ -0,0 +1,121 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/img/jameel-logo1.png b/assets/img/jameel-logo1.png new file mode 100644 index 00000000..8df0ffa7 Binary files /dev/null and b/assets/img/jameel-logo1.png differ diff --git a/assets/img/prepare-logo.png b/assets/img/prepare-logo.png new file mode 100644 index 00000000..e8820675 Binary files /dev/null and b/assets/img/prepare-logo.png differ diff --git a/components/SideBar.vue b/components/SideBar.vue index 50bc00d4..bcabd45d 100644 --- a/components/SideBar.vue +++ b/components/SideBar.vue @@ -8,10 +8,19 @@ > - + New scenario + + + About + + @@ -73,5 +82,4 @@ onBeforeUnmount(() => { }); - + diff --git a/pages/about.vue b/pages/about.vue new file mode 100644 index 00000000..0e28549d --- /dev/null +++ b/pages/about.vue @@ -0,0 +1,152 @@ + + + diff --git a/tests/unit/components/SideBar.spec.ts b/tests/unit/components/SideBar.spec.ts index 7684c940..d16327f6 100644 --- a/tests/unit/components/SideBar.spec.ts +++ b/tests/unit/components/SideBar.spec.ts @@ -75,9 +75,12 @@ describe("sidebar", () => { const coreuiSidebar = component.findComponent({ name: "CSidebar" }); await mockCSidebarPageloadBehavior(coreuiSidebar); - expect(component.text()).toContain("New scenario"); - const navLink = component.findComponent({ name: "NuxtLink" }); - expect(navLink.props("to")).toBe("/scenarios/new"); + const text = component.text(); + expect(text).toContain("New scenario"); + expect(text).toContain("About"); + const navLinks = component.findAllComponents({ name: "NuxtLink" }); + expect(navLinks[0].props("to")).toBe("/scenarios/new"); + expect(navLinks[1].props("to")).toBe("/about"); }); }); }); diff --git a/tests/unit/mocks/mockPinia.ts b/tests/unit/mocks/mockPinia.ts index 526d02bf..3979efd4 100644 --- a/tests/unit/mocks/mockPinia.ts +++ b/tests/unit/mocks/mockPinia.ts @@ -74,13 +74,47 @@ export const updatableNumericParameter = { }, }, }; +export const countryAndPathogenParams = [ + { + id: "country", + label: "Country", + parameterType: TypeOfParameter.GlobeSelect, + defaultOption: "THA", + ordered: false, + options: [ + { id: "ARG", label: "Argentina" }, + { id: "BRA", label: "Brazil" }, + { id: "CHN", label: "China" }, + { id: "DEU", label: "Germany" }, + { id: "GBR", label: "United Kingdom" }, + ], + }, + { + id: "pathogen", + label: "Disease", + parameterType: TypeOfParameter.Select, + defaultOption: null, + ordered: false, + options: [ + { id: "sars_cov_1", label: "SARS 2004" }, + { id: "sars_cov_2_pre_alpha", label: "Covid-19 wild-type" }, + { id: "sars_cov_2_omicron", label: "Covid-19 Omicron" }, + { id: "sars_cov_2_delta", label: "Covid-19 Delta" }, + { id: "influenza_2009", label: "Influenza 2009 (Swine flu)" }, + { id: "influenza_1957", label: "Influenza 1957" }, + { id: "influenza_1918", label: "Influenza 1918 (Spanish flu)" }, + ], + description: + "Select a disease to set model parameters for transmissibility, incubation period and severity based on known characteristics of that historical epidemic or epidemic wave", + }, +]; const resultsMetadata = sampleMetadataResponse.data.results as ResultsMetadata; export const mockedMetadata = { modelVersion: "0.0.0", parameters: [...selectParameters, globeParameter, updatableNumericParameter], results: resultsMetadata, -} as Metadata; +} as unknown as Metadata; Object.freeze(mockedMetadata); export const mockResultData = { @@ -175,24 +209,9 @@ export const mockResultData = { }, ], time_series: { - infect: [ - 67.886, - 56.4939, - 59.2434, - 70.9342, - ], - hospitalised: [ - 0, - 3.9626, - 6.8824, - 9.4865, - ], - dead: [ - 0, - 0.0244, - 0.0878, - 0.1825, - ], + infect: [67.886, 56.4939, 59.2434, 70.9342], + hospitalised: [0, 3.9626, 6.8824, 9.4865], + dead: [0, 0.0244, 0.0878, 0.1825], }, gdp: 19863038.6, }; diff --git a/tests/unit/pages/About.spec.ts b/tests/unit/pages/About.spec.ts new file mode 100644 index 00000000..c70e244d --- /dev/null +++ b/tests/unit/pages/About.spec.ts @@ -0,0 +1,23 @@ +import About from "@/pages/about.vue"; +import { mountSuspended } from "@nuxt/test-utils/runtime"; +import { describe, expect, it } from "vitest"; +import { countryAndPathogenParams, mockedMetadata, mockPinia } from "../mocks/mockPinia"; + +describe("about page", () => { + it("should render about with correct metadata info", async () => { + const numberOfPandemics = countryAndPathogenParams.find(p => p.id === "pathogen")!.options!.length; + const numberOfCountries = countryAndPathogenParams.find(p => p.id === "country")!.options!.length; + const component = await mountSuspended(About, { global: { plugins: [mockPinia({ + metadata: { ...mockedMetadata, parameters: countryAndPathogenParams as any }, + })] } }); + + const text = component.text(); + + expect(text).toContain("About"); + expect(text).toContain(numberOfPandemics); + expect(text).toContain(numberOfCountries); + for (const estimate of mockedMetadata.results.time_series_groups) { + expect(text).toContain(estimate.label); + } + }); +});