Merge pull request #4 from nitin-ebi/set-up-test

EVA-3141 Set up test

jest.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  testEnvironment: 'jsdom',
+  setupFilesAfterEnv: ['./jest.setup.js'],
+}

jest.setup.js

@@ -0,0 +1,19 @@
+// Polyfill "window.fetch" used in the React component.
+import 'whatwg-fetch'
+
+// Extend Jest "expect" functionality with Testing Library assertions.
+import '@testing-library/jest-dom'
+
+import { server } from './src/mocks/server'
+
+beforeAll(() => {
+  server.listen()
+})
+
+afterEach(() => {
+  server.resetHandlers()
+})
+
+afterAll(() => {
+  server.close()
+})

package.json

@@ -5,7 +5,8 @@
   "main": "index.js",
   "scripts": {
     "start": "webpack-dev-server --mode development --hot",
-    "build": "webpack --mode development"
+    "build": "webpack --mode development",
+    "test": "jest"
   },
   "repository": {
     "type": "git",
@@ -17,12 +18,19 @@
     "@babel/core": "^7.20.12",
     "@babel/preset-env": "^7.1.0",
     "@babel/preset-react": "^7.0.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/user-event": "^14.4.3",
     "babel-loader": "^8.0.2",
     "css-loader": "^6.7.3",
+    "jest": "^29.4.1",
+    "jest-environment-jsdom": "^29.4.1",
+    "msw": "^1.0.0",
     "style-loader": "^0.23.0",
     "webpack": "^5.75.0",
     "webpack-cli": "^5.0.1",
-    "webpack-dev-server": "^4.11.1"
+    "webpack-dev-server": "^4.11.1",
+    "whatwg-fetch": "^3.6.2"
   },
   "dependencies": {
     "lodash": "^4.17.21",

src/mocks/handlers.js

@@ -0,0 +1,29 @@
+import {rest} from 'msw'
+import { genotypes_view_test_consequences_data,  genotypes_view_test_species_data,  genotypes_view_test_studies_data,
+  genotypes_view_test_variants_data } from "../test/test_data/GenotypesTableData"
+
+export const handlers = [
+    rest.get('https://rest.ensembl.org/info/variation/consequence_types', (req, res, ctx) => {
+        return res(
+            ctx.json(genotypes_view_test_consequences_data),
+        )
+    }),
+
+    rest.get('https://www.ebi.ac.uk/eva/webservices/rest/v1/meta/species/list', (req, res, ctx) => {
+        return res(
+            ctx.json(genotypes_view_test_species_data),
+        )
+    }),
+
+    rest.get('https://www.ebi.ac.uk/eva/webservices/rest/v1/meta/studies/list', (req, res, ctx) => {
+        return res(
+            ctx.json(genotypes_view_test_studies_data),
+        )
+    }),
+
+    rest.get('https://www.ebi.ac.uk/eva/webservices/rest/v1/segments/1:3000000-3100000/variants', (req, res, ctx) => {
+        return res(
+            ctx.json(genotypes_view_test_variants_data),
+        )
+    })
+]

src/mocks/server.js

@@ -0,0 +1,5 @@
+import { setupServer } from 'msw/node'
+import { handlers } from './handlers'
+
+// Setup requests interception using the given handlers.
+export const server = setupServer(...handlers)

src/test/DemoApp.test.js

@@ -0,0 +1,5 @@
+describe('Demo Test Suite', () => {
+    it('Demo Test Case', () => {
+        expect(true).toEqual(true);
+    });
+});

src/test/GenotypesFilter.test.js

@@ -0,0 +1,55 @@
+import React from 'react'
+import {render, screen} from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import GenotypesFilter from "../components/GenotypesFilter"
+import {genotypes_filter_test_data} from "./test_data/GenotypesFilterData"
+
+
+test('check genotype filter view component is loading everything correctly', () => {
+
+    render(<GenotypesFilter
+        speciesList={genotypes_filter_test_data.speciesList}
+        speciesAssemblyMap={genotypes_filter_test_data.speciesAssemblyMap}
+        assemblyList={genotypes_filter_test_data.assemblyList}
+        selectedSpecies={genotypes_filter_test_data.selectedSpecies}
+        selectedAssembly={genotypes_filter_test_data.selectedAssembly}
+        location={genotypes_filter_test_data.location}
+        studies={genotypes_filter_test_data.studies}
+        selectedStudies = {genotypes_filter_test_data.selectedStudies}
+        resultsPerPage={genotypes_filter_test_data.resultsPerPage}
+        />)
+
+    // assert species drop down (Equus caballus) is the one selected
+    expect(screen.getByRole('option', { name: 'Equus caballus' }).selected).toBe(true)
+    // assert species drop down (Gallus gallus) is there in the options but not selected
+    expect(screen.getByRole('option', { name: 'Gallus gallus' }).selected).toBe(false)
+
+    // assert assembly drop down (EquCab2.0) is the one selected
+    expect(screen.getByRole('option', { name: 'EquCab2.0' }).selected).toBe(true)
+    // assert assembly drop down (EquCab3.0) is there in the options but not selected
+    expect(screen.getByRole('option', { name: 'EquCab3.0' }).selected).toBe(false)
+
+    // assert location textbox
+    expect(screen.getByRole('textbox').value).toBe('1:3000000-3100000')
+
+    // assert results per page drop down - 50 is selected
+    expect(screen.getByRole('option', { name: '50' }).selected).toBe(true)
+    // assert results per page drop down - 10 and 100 are present in options but not selected
+    expect(screen.getByRole('option', { name: '10' }).selected).toBe(false)
+    expect(screen.getByRole('option', { name: '100' }).selected).toBe(false)
+
+    // assert studies checkboxes are present and checked
+    expect(screen.getByRole('checkbox', {name: 'BROAD_EQUCAB2.0:2008.08.08'})).toBeChecked()
+    expect(screen.getByRole('checkbox', {name: 'PRJEB22866'})).toBeChecked()
+    expect(screen.getByRole('checkbox', {name: 'PRJEB23301'})).toBeChecked()
+    expect(screen.getByRole('checkbox', {name: 'PRJEB23441'})).toBeChecked()
+    expect(screen.getByRole('checkbox', {name: 'PRJEB24624'})).toBeChecked()
+    expect(screen.getByRole('checkbox', {name: 'PRJEB24630'})).toBeChecked()
+    expect(screen.getByRole('checkbox', {name: 'PRJEB25439'})).toBeChecked()
+    expect(screen.getByRole('checkbox', {name: 'PRJEB26741'})).toBeChecked()
+    expect(screen.getByRole('checkbox', {name: 'PRJEB27771'})).toBeChecked()
+    expect(screen.getByRole('checkbox', {name: 'PRJEB30116'})).toBeChecked()
+    expect(screen.getByRole('checkbox', {name: 'PRJEB32686'})).toBeChecked()
+    expect(screen.getByRole('checkbox', {name: 'PRJEB38010'})).toBeChecked()
+    expect(screen.getByRole('checkbox', {name: 'PRJEB9799'})).toBeChecked()
+})

src/test/GenotypesTable.test.js

@@ -0,0 +1,66 @@
+import React from 'react'
+import {render, screen} from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+
+import {genotypes_table_test_data} from "./test_data/GenotypesTableData"
+import GenotypesTable from "../components/GenotypesTable"
+
+test('check genotype table view component is loading everything correctly', () => {
+
+    render(<GenotypesTable
+        studies={genotypes_table_test_data.studies}
+        variants={genotypes_table_test_data.variants}
+        isLoaded={genotypes_table_test_data.isLoaded}
+        currentPage={genotypes_table_test_data.currentPage}
+        numPages={genotypes_table_test_data.numPages}
+    />)
+
+    // assert no of rows
+    const rows = screen.getAllByRole('row')
+    expect(rows).toHaveLength(51)
+    // assert no of columns
+    const cells = rows[0].cells;
+    expect(cells).toHaveLength(17)
+
+    // assert table header row
+    expect(rows[0].cells[0].textContent).toBe('Chr')
+    expect(rows[0].cells[1].textContent).toBe('Pos')
+    expect(rows[0].cells[2].textContent).toBe('Ref')
+    expect(rows[0].cells[3].textContent).toBe('Alt')
+    for (let index = 4; index < cells.length; index++) {
+        expect(rows[0].cells[index].textContent).toBe(genotypes_table_test_data.studies[index - 4])
+    }
+
+    //assert variants data
+    for (let row_id = 1; row_id < rows.length; row_id++) {
+        let json_variant = genotypes_table_test_data.variants[row_id - 1]
+        expect(rows[row_id].cells[0].textContent).toBe(json_variant.chromosome)
+        expect(rows[row_id].cells[1].textContent).toBe("" + json_variant.start)
+        expect(rows[row_id].cells[2].textContent).toBe(json_variant.reference)
+        expect(rows[row_id].cells[3].textContent).toBe(json_variant.alternate)
+
+        expect(rows[row_id].cells[3].id).toBe(json_variant.chromosome + "_" + json_variant.start + "_" + json_variant.reference + "_" + json_variant.alternate)
+        expect(rows[row_id].cells[3].title).toBe(json_variant.consequenceName)
+        expect(rgbToHex(rows[row_id].cells[3].style.backgroundColor)).toBe(genotypes_table_test_data.variants[row_id-1].color)
+
+        for (let cell_id = 4; cell_id < cells.length; cell_id++) {
+            let study_id = rows[0].cells[cell_id].textContent
+            let json_value = json_variant.alleleFreqs[study_id]
+            expect(rows[row_id].cells[cell_id].textContent).toBe(json_value == undefined ? "" : "" + json_value)
+        }
+    }
+
+})
+
+
+function rgbToHex(rgb) {
+    let rgb_val = rgb.substring(rgb.indexOf('(')+1,rgb.lastIndexOf(')')).split(",")
+    let r = rgb_val[0]
+    let g = rgb_val[1]
+    let b = rgb_val[2]
+    /*
+        see stackoverflow(https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb/5624139#5624139)
+        Author : Tim Down (https://stackoverflow.com/users/96100/tim-down)
+     */
+    return "#" + (1 << 24 | r << 16 | g << 8 | b).toString(16).slice(1)
+}

src/test/GenotypesView.test.js

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import {render, screen} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import GenotypeView from "../GenotypeView"
+
+test('check genotype view component is loading everything correctly', () => {
+    render(<GenotypeView>{}</GenotypeView>)
+
+    const combo_boxes = screen.getAllByRole('combobox')
+    expect(combo_boxes[0].name).toBe("species")
+    expect(combo_boxes[1].name).toBe("assembly")
+    expect(combo_boxes[2].name).toBe("resultsPerPage")
+
+    expect(screen.getByRole('textbox').value).toBe('1:3000000-3100000')
+
+    expect(screen.getByRole('option', {name: '50'}).selected).toBe(true)
+    expect(screen.getByRole('option', {name: '10'}).selected).toBe(false)
+    expect(screen.getByRole('option', {name: '100'}).selected).toBe(false)
+
+})

src/test/Pagination.test.js

@@ -0,0 +1,19 @@
+import {render, screen} from "@testing-library/react";
+import Pagination from "../components/Pagination";
+import React from "react";
+test('check genotypes table component is loading everything correctly', () => {
+    render(<Pagination
+        currentPage={1}
+        numPages={10}
+    />)
+
+    // assert link generated for paging
+    expect(screen.getByRole("link", {name: 'Previous'}).textContent).toBe("Previous")
+    expect(screen.getByRole("link", {name: '2'}).textContent).toBe("2")
+    expect(screen.getByRole("link", {name: '3'}).textContent).toBe("3")
+    expect(screen.getByRole("link", {name: '8'}).textContent).toBe("8")
+    expect(screen.getByRole("link", {name: '9'}).textContent).toBe("9")
+    expect(screen.getByRole("link", {name: '10'}).textContent).toBe("10")
+    expect(screen.getByRole("link", {name: 'Next'}).textContent).toBe("Next")
+    expect(screen.getByText('1').textContent).toBe(""+1)
+})