add e2e test

bprize15 · Nov 3, 2024 · 883995c · 883995c
1 parent 7df2e6d
commit 883995c
Show file tree

Hide file tree

Showing 8 changed files with 170 additions and 8 deletions.
diff --git a/src/main/webapp/app/components/tabs/tabs.tsx b/src/main/webapp/app/components/tabs/tabs.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { Col, Container, Row } from 'reactstrap';
 import * as styles from './styles.module.scss';
 import classNames from 'classnames';
+import { getTabDataTestId } from 'app/shared/util/test-id-utils';
 
 export type Tab = {
   id?: string;
@@ -15,9 +16,10 @@ export interface ITabsProps {
   isCollapsed?: boolean;
   className?: string;
   contentClassName?: string;
+  dataTestIdPrefix?: string;
 }
 
-const Tabs = ({ tabs, isCollapsed = false, defaultOpenTabIndex = 0, className, contentClassName }: ITabsProps) => {
+const Tabs = ({ tabs, isCollapsed = false, defaultOpenTabIndex = 0, className, contentClassName, dataTestIdPrefix }: ITabsProps) => {
   const [openTabIndex, setOpenTabIndex] = useState(defaultOpenTabIndex);
 
   useEffect(() => {
@@ -37,6 +39,7 @@ const Tabs = ({ tabs, isCollapsed = false, defaultOpenTabIndex = 0, className, c
               key={index}
               style={{ marginRight: index !== tabs.length - 1 ? 16 : 0 }}
               className={`${styles.tab} ${index === openTabIndex ? styles.selected : ''} col-sm-auto`}
+              data-testid={getTabDataTestId(index, dataTestIdPrefix)}
             >
               <h6>{tab.title}</h6>
             </div>

diff --git a/src/main/webapp/app/config/constants/html-id.ts b/src/main/webapp/app/config/constants/html-id.ts
@@ -25,6 +25,7 @@ export const REVIEW_PAGE_ID = 'review-page';
 export const RCT_MODAL_BUTTON_ID = 'relevant-cancer-types-button';
 export const RCT_MODAL_ID = 'relevant-cancer-type-modal';
 
+// add mutation modal
 export const DEFAULT_ADD_MUTATION_MODAL_ID = 'default-add-mutation-modal';
 export const ADD_MUTATION_MODAL_INPUT_ID = 'add-mutation-modal-input';
 

diff --git a/src/main/webapp/app/shared/modal/AddMutationModal.tsx b/src/main/webapp/app/shared/modal/AddMutationModal.tsx
@@ -30,6 +30,7 @@ import Select from 'react-select/dist/declarations/src/Select';
 import InfoIcon from '../icons/InfoIcon';
 import { Linkout } from '../links/Linkout';
 import { SopPageLink } from '../links/SopPageLink';
+import { AddMutationModalFieldTestIdType, getAddMuationModalFieldDataTestId } from '../util/test-id-utils';
 
 type AlterationData = {
   type: AlterationTypeEnum;
@@ -711,13 +712,15 @@ function AddMutationModal({
           isLoading={_.isNil(excludingIndex) ? isFetchingAlteration : isFetchingExcludingAlteration}
           placeholder="Input alteration"
           onChange={newValue => handleAlterationChange(newValue, alterationIndex, excludingIndex)}
+          dataTestId={getAddMuationModalFieldDataTestId(AddMutationModalFieldTestIdType.ALTERATION, alterationIndex, excludingIndex)}
         />
         {content}
         <AddMutationModalField
           label="Comment"
           value={alterationData.comment}
           placeholder="Input comment"
           onChange={newValue => handleFieldChange(newValue, 'comment', alterationIndex, excludingIndex)}
+          dataTestId={getAddMuationModalFieldDataTestId(AddMutationModalFieldTestIdType.COMMENT, alterationIndex, excludingIndex)}
         />
         {excludingSection}
       </>
@@ -732,6 +735,7 @@ function AddMutationModal({
           value={alterationData.name}
           placeholder="Input name"
           onChange={newValue => handleFieldChange(newValue, 'name', alterationIndex, excludingIndex)}
+          dataTestId={getAddMuationModalFieldDataTestId(AddMutationModalFieldTestIdType.NAME, alterationIndex, excludingIndex)}
         />
         <AddMutationModalField
           label="Protein Change"
@@ -782,6 +786,7 @@ function AddMutationModal({
           value={alterationData.name}
           placeholder="Input name"
           onChange={newValue => handleFieldChange(newValue, 'name', alterationIndex, excludingIndex)}
+          dataTestId={getAddMuationModalFieldDataTestId(AddMutationModalFieldTestIdType.NAME, alterationIndex, excludingIndex)}
         />
         <AddMutationModalField
           label="Protein Change"
@@ -801,6 +806,7 @@ function AddMutationModal({
           value={alterationData.name}
           placeholder="Input name"
           onChange={newValue => handleFieldChange(newValue, 'name', alterationIndex, excludingIndex)}
+          dataTestId={getAddMuationModalFieldDataTestId(AddMutationModalFieldTestIdType.NAME, alterationIndex, excludingIndex)}
         />
         <AddMutationModalField
           label="Protein Change"
@@ -820,6 +826,7 @@ function AddMutationModal({
           value={alterationData.name}
           placeholder="Input name"
           onChange={newValue => handleFieldChange(newValue, 'name', alterationIndex, excludingIndex)}
+          dataTestId={getAddMuationModalFieldDataTestId(AddMutationModalFieldTestIdType.NAME, alterationIndex, excludingIndex)}
         />
       </div>
     );
@@ -833,6 +840,7 @@ function AddMutationModal({
           value={alterationData.name}
           placeholder="Input name"
           onChange={newValue => handleFieldChange(newValue, 'name', alterationIndex, excludingIndex)}
+          dataTestId={getAddMuationModalFieldDataTestId(AddMutationModalFieldTestIdType.NAME, alterationIndex, excludingIndex)}
         />
         <AddMutationModalField
           label="Genes"
@@ -853,6 +861,7 @@ function AddMutationModal({
           value={alterationData.name}
           placeholder="Input name"
           onChange={newValue => handleFieldChange(newValue, 'name', alterationIndex, excludingIndex)}
+          dataTestId={getAddMuationModalFieldDataTestId(AddMutationModalFieldTestIdType.NAME, alterationIndex, excludingIndex)}
         />
       </div>
     );
@@ -922,6 +931,7 @@ function AddMutationModal({
                     content: getTabContent(ex, alterationIndex, index),
                   }))}
                   isCollapsed={excludingCollapsed}
+                  dataTestIdPrefix="excluding"
                 />
               </div>
             </Col>
@@ -1117,9 +1127,18 @@ interface IAddMutationModalFieldProps {
   onChange: (newValue: string) => void;
   isLoading?: boolean;
   disabled?: boolean;
+  dataTestId?: string;
 }
 
-function AddMutationModalField({ label, value: value, placeholder, onChange, isLoading, disabled }: IAddMutationModalFieldProps) {
+function AddMutationModalField({
+  label,
+  value: value,
+  placeholder,
+  onChange,
+  isLoading,
+  disabled,
+  dataTestId,
+}: IAddMutationModalFieldProps) {
   return (
     <div className="d-flex align-items-center mb-3">
       <Col className="px-0 col-3 me-3 align-items-center">
@@ -1130,6 +1149,7 @@ function AddMutationModalField({ label, value: value, placeholder, onChange, isL
       </Col>
       <Col className="px-0">
         <Input
+          data-testid={dataTestId}
           disabled={disabled}
           value={value}
           onChange={event => {

diff --git a/src/main/webapp/app/shared/util/test-id-utils.ts b/src/main/webapp/app/shared/util/test-id-utils.ts
@@ -8,3 +8,24 @@ export enum CollapsibleDataTestIdType {
 export function getCollapsibleDataTestId(dataTestid: CollapsibleDataTestIdType, identifier: string | undefined) {
   return `${identifier}-${dataTestid}`;
 }
+
+export enum AddMutationModalFieldTestIdType {
+  ALTERATION = 'alteration',
+  NAME = 'name',
+  COMMENT = 'comment',
+}
+
+export function getAddMuationModalFieldDataTestId(
+  dataTestId: AddMutationModalFieldTestIdType,
+  alterationIndex: number,
+  excludingIndex: number | undefined,
+) {
+  return `${dataTestId}-${alterationIndex}-${excludingIndex};`;
+}
+
+export function getTabDataTestId(index: number, prefix?: string) {
+  if (prefix) {
+    return `${prefix}-tab-${index}`;
+  }
+  return `${prefix}-tab-${index}`;
+}
diff --git a/src/test/javascript/data/api-annotate-alterations-v600g.json b/src/test/javascript/data/api-annotate-alterations-v600g.json
@@ -0,0 +1,44 @@
+[
+  {
+    "entity": {
+      "id": null,
+      "type": "PROTEIN_CHANGE",
+      "name": "V600G",
+      "alteration": "V600G",
+      "proteinChange": "V600G",
+      "start": 600,
+      "end": 600,
+      "refResidues": "V",
+      "variantResidues": "G",
+      "flags": [],
+      "genes": [{ "id": 41135, "entrezGeneId": 673, "hugoSymbol": "BRAF", "hgncId": "1097" }],
+      "transcripts": [],
+      "consequence": {
+        "id": 16,
+        "term": "MISSENSE_VARIANT",
+        "name": "Missense Variant",
+        "isGenerallyTruncating": false,
+        "description": "A sequence variant, that changes one or more bases, resulting in a different amino acid sequence but where the length is preserved"
+      },
+      "associations": []
+    },
+    "message": "",
+    "type": "OK",
+    "queryId": "V600G",
+    "annotation": {
+      "hotspot": {
+        "associatedHotspots": [
+          { "type": "HOTSPOT_V1", "alteration": "V600" },
+          { "type": "THREE_D", "alteration": "V600" },
+          { "type": "HOTSPOT_V1", "alteration": "V600" },
+          { "type": "THREE_D", "alteration": "V600" }
+        ],
+        "hotspot": true
+      },
+      "exons": [{ "range": { "start": 581, "end": 620 }, "exon": 15 }]
+    },
+    "warning": false,
+    "ok": true,
+    "error": false
+  }
+]
diff --git a/src/test/javascript/setup-mocks.ts b/src/test/javascript/setup-mocks.ts
@@ -7,12 +7,15 @@ const DATA_DIR = 'src/test/javascript/data/';
 
 const getAlterationMockResponse = (requestBody: string, readFile = true) => {
   const body = JSON.parse(requestBody);
-  const alterationName = body[0]?.alteration?.alteration?.toLowerCase();
+  const alterationName: string = body[0]?.alteration?.alteration?.toLowerCase();
   let filePath = `${DATA_DIR}api-annotate-alterations-`;
   switch (alterationName) {
     case 'v600e':
       filePath += alterationName;
       break;
+    case 'v600g':
+      filePath += alterationName;
+      break;
     default:
       break;
   }

diff --git a/src/test/javascript/shared/utils.ts b/src/test/javascript/shared/utils.ts
@@ -1,15 +1,17 @@
 import { ADD_MUTATION_MODAL_INPUT_ID, DEFAULT_ADD_MUTATION_MODAL_ID } from '../../../main/webapp/app/config/constants/html-id';
 
-export const createMutationOnCurationPage = async (mutationName: string) => {
+export const addMutationInAddMutationModal = async (mutationName: string) => {
   const mutationNameInput = await $(`input#${ADD_MUTATION_MODAL_INPUT_ID}`);
   await mutationNameInput.setValue(mutationName);
   await browser.keys('Enter');
 
   const addMutationModal = await $(`div[id="${DEFAULT_ADD_MUTATION_MODAL_ID}"]`);
   await addMutationModal.waitForDisplayed();
+};
+
+export const createMutationOnCurationPage = async (mutationName: string) => {
+  await addMutationInAddMutationModal(mutationName);
 
   const modalConfirmBtn = await $('button=Confirm');
   await modalConfirmBtn.click();
-
-  return { mutationNameInput, addMutationModal, modalConfirmBtn };
 };
diff --git a/src/test/javascript/spec/e2e.ts b/src/test/javascript/spec/e2e.ts
@@ -14,8 +14,14 @@ import {
 import { BASE_URL, DATABASE_EMULATOR_URL, MOCK_DATA_JSON_FILE_PATH, PUB_MED_ARTICLE_TITLE, PUB_MED_PMID } from '../constants';
 import * as fs from 'fs';
 import * as admin from 'firebase-admin';
-import { createMutationOnCurationPage } from '../shared/utils';
-import { CollapsibleDataTestIdType, getCollapsibleDataTestId } from '../../../main/webapp/app/shared/util/test-id-utils';
+import { addMutationInAddMutationModal, createMutationOnCurationPage } from '../shared/utils';
+import {
+  AddMutationModalFieldTestIdType,
+  CollapsibleDataTestIdType,
+  getAddMuationModalFieldDataTestId,
+  getCollapsibleDataTestId,
+  getTabDataTestId,
+} from '../../../main/webapp/app/shared/util/test-id-utils';
 
 describe('End to end tests', () => {
   let adminApp: admin.app.App;
@@ -138,4 +144,66 @@ describe('End to end tests', () => {
     const reviewButton = await $(`button[data-testid="${GENE_HEADER_REVIEW_BUTTON_ID}"]`);
     expect(await reviewButton.isExisting()).toBe(false);
   });
+
+  it('should add mutation with name, comment, and excluding', async () => {
+    await browser.url(`${BASE_URL}/curation/EMPTYGENE/somatic`);
+
+    const addMutationButton = await $('button=Add Mutation');
+    await addMutationButton.waitForDisplayed();
+    await addMutationButton.click();
+
+    await addMutationInAddMutationModal('V600E/G [name] {excluding V600E} (comment)');
+
+    let alterationField = await $(
+      `input[data-testid='${getAddMuationModalFieldDataTestId(AddMutationModalFieldTestIdType.ALTERATION, 0, undefined)}']`,
+    );
+    expect(await alterationField.getValue()).toBe('V600E [name] {excluding V600E} (comment)');
+
+    let nameField = await $(
+      `input[data-testid='${getAddMuationModalFieldDataTestId(AddMutationModalFieldTestIdType.NAME, 0, undefined)}']`,
+    );
+    expect(await nameField.getValue()).toBe('name');
+
+    let commentField = await $(
+      `input[data-testid='${getAddMuationModalFieldDataTestId(AddMutationModalFieldTestIdType.COMMENT, 0, undefined)}']`,
+    );
+    expect(await commentField.getValue()).toBe('comment');
+
+    let excludingAlterationField = await $(
+      `input[data-testid='${getAddMuationModalFieldDataTestId(AddMutationModalFieldTestIdType.NAME, 0, 0)}']`,
+    );
+    expect(await excludingAlterationField.getValue()).toBe('V600E');
+
+    const secondTab = await $(`div[data-testid='${getTabDataTestId(1)}']`);
+    await secondTab.click();
+
+    alterationField = await $(
+      `input[data-testid='${getAddMuationModalFieldDataTestId(AddMutationModalFieldTestIdType.ALTERATION, 1, undefined)}']`,
+    );
+    expect(await alterationField.getValue()).toBe('V600G [name] {excluding V600E} (comment)');
+
+    nameField = await $(`input[data-testid='${getAddMuationModalFieldDataTestId(AddMutationModalFieldTestIdType.NAME, 1, undefined)}']`);
+    expect(await nameField.getValue()).toBe('name');
+
+    commentField = await $(
+      `input[data-testid='${getAddMuationModalFieldDataTestId(AddMutationModalFieldTestIdType.COMMENT, 1, undefined)}']`,
+    );
+    expect(await commentField.getValue()).toBe('comment');
+
+    excludingAlterationField = await $(
+      `input[data-testid='${getAddMuationModalFieldDataTestId(AddMutationModalFieldTestIdType.NAME, 1, 0)}']`,
+    );
+    expect(await excludingAlterationField.getValue()).toBe('V600E');
+
+    alterationField.setValue('V600E');
+    await commentField.waitUntil(async () => !(await commentField.getValue()));
+
+    nameField = await $(`input[data-testid='${getAddMuationModalFieldDataTestId(AddMutationModalFieldTestIdType.NAME, 1, undefined)}']`);
+    expect(await nameField.getValue()).toBe('V600E');
+
+    const nonExistantExcludingAlterationField = await $(
+      `input[data-testid='${getAddMuationModalFieldDataTestId(AddMutationModalFieldTestIdType.ALTERATION, 1, 0)}']`,
+    );
+    expect(await nonExistantExcludingAlterationField.isExisting()).toBeFalsy();
+  });
 });