Add e2e and screenshot tests for refactored add mutation modal (#495)

oncokb · Feb 7, 2025 · bc5c9b6 · bc5c9b6
1 parent 147d115
commit bc5c9b6
Show file tree

Hide file tree

Showing 22 changed files with 607 additions and 40 deletions.
diff --git a/src/main/webapp/app/config/constants/html-id.ts b/src/main/webapp/app/config/constants/html-id.ts
@@ -26,6 +26,12 @@ export const RCT_MODAL_ID = 'relevant-cancer-type-modal';
 
 export const DEFAULT_ADD_MUTATION_MODAL_ID = 'default-add-mutation-modal';
 export const ADD_MUTATION_MODAL_INPUT_ID = 'add-mutation-modal-input';
+export const ADD_MUTATION_MODAL_EXCLUDED_ALTERATION_INPUT_ID = 'add-mutation-modal-excluded-alteration-input';
+export const ADD_MUTATION_MODAL_ADD_EXCLUDED_ALTERATION_BUTTON_ID = 'add-mutation-modal-add-excluded-alteration-button';
+export const ADD_MUTATION_MODAL_ADD_EXON_BUTTON_ID = 'add-mutation-modal-add-exon-button';
+export const ADD_MUTATION_MODAL_FLAG_DROPDOWN_ID = 'add-mutation-modal-flag-input';
+export const ADD_MUTATION_MODAL_FLAG_COMMENT_ID = 'add-mutation-modal-flag-comment';
+export const ADD_MUTATION_MODAL_FLAG_COMMENT_INPUT_ID = 'add-mutation-modal-flag-comment-input';
 
 export const SIMPLE_CONFIRM_MODAL_CONTENT_ID = 'simple-confirm-modal-content';
 

diff --git a/src/main/webapp/app/shared/modal/AddMutationModal.tsx b/src/main/webapp/app/shared/modal/AddMutationModal.tsx
@@ -33,6 +33,7 @@ import classNames from 'classnames';
 import { ReferenceGenome } from '../model/enumerations/reference-genome.model';
 import { notifyError } from 'app/oncokb-commons/components/util/NotificationUtils';
 import DefaultTooltip from '../tooltip/DefaultTooltip';
+import { ADD_MUTATION_MODAL_ADD_EXON_BUTTON_ID, ADD_MUTATION_MODAL_INPUT_ID } from 'app/config/constants/html-id';
 
 function getModalErrorMessage(mutationAlreadyExists: MutationExistsMeta) {
   let modalErrorMessage: string | undefined = undefined;
@@ -261,7 +262,7 @@ function AddMutationModal({
     } else {
       try {
         setIsAddAlterationPending(true);
-        await updateAlterationStateAfterAlterationAdded?.(parseAlterationName(alterationString));
+        await updateAlterationStateAfterAlterationAdded?.(parseAlterationName(alterationString, true));
       } finally {
         setIsAddAlterationPending(false);
       }
@@ -353,7 +354,8 @@ function AddMutationModal({
       <Col className="col-8">
         <InputGroup>
           <Input
-            placeholder="Enter alteration"
+            id={ADD_MUTATION_MODAL_INPUT_ID}
+            placeholder="Enter alteration(s)"
             onKeyDown={handleKeyDown}
             style={{ borderRight: '0' }}
             value={inputValue}
@@ -382,6 +384,7 @@ function AddMutationModal({
         >
           <span>
             <Button
+              id={ADD_MUTATION_MODAL_ADD_EXON_BUTTON_ID}
               color="primary"
               outline
               className="ms-2"

diff --git a/src/main/webapp/app/shared/modal/MutationModal/AddExonForm.tsx b/src/main/webapp/app/shared/modal/MutationModal/AddExonForm.tsx
@@ -16,6 +16,7 @@ import InfoIcon from 'app/shared/icons/InfoIcon';
 import { FaArrowLeft, FaRegLightbulb } from 'react-icons/fa';
 import * as styles from './styles.module.scss';
 import { flow } from 'mobx';
+import { AddMutationModalDataTestIdType, getAddMutationModalDataTestId } from 'app/shared/util/test-id-utils';
 
 export interface IAddExonMutationModalBody extends StoreProps {
   hugoSymbol: string;
@@ -196,7 +197,7 @@ const AddExonForm = ({
   };
 
   return (
-    <>
+    <div data-testid={getAddMutationModalDataTestId(AddMutationModalDataTestIdType.EXON_FORM)}>
       {!defaultExonAlterationName ? (
         <Row className="mb-3">
           <Col>
@@ -270,7 +271,7 @@ const AddExonForm = ({
           </Col>
         </Row>
       )}
-    </>
+    </div>
   );
 };
 

diff --git a/src/main/webapp/app/shared/modal/MutationModal/AlterationBadgeList.tsx b/src/main/webapp/app/shared/modal/MutationModal/AlterationBadgeList.tsx
@@ -13,6 +13,8 @@ import { useOverflowDetector } from 'app/hooks/useOverflowDetector';
 import { BS_BORDER_COLOR } from 'app/config/colors';
 import _ from 'lodash';
 import { FaCircleCheck } from 'react-icons/fa6';
+import { ADD_MUTATION_MODAL_EXCLUDED_ALTERATION_INPUT_ID } from 'app/config/constants/html-id';
+import { AddMutationModalDataTestIdType, getAddMutationModalDataTestId } from 'app/shared/util/test-id-utils';
 
 export interface IAlterationBadgeList extends StoreProps {
   isExclusionList?: boolean;
@@ -90,6 +92,7 @@ const AlterationBadgeList = ({
       {showInput && (
         <div className={styles.alterationBadgeListInputWrapper}>
           <input
+            id={ADD_MUTATION_MODAL_EXCLUDED_ALTERATION_INPUT_ID}
             ref={inputRef}
             className={styles.alterationBadgeListInput}
             onChange={event => onInputChange?.(event.target.value)}
@@ -164,6 +167,7 @@ const AlterationBadge = ({
       className={classNames('badge mx-1 my-1', `badge-outline-${backgroundColor}`, styles.alterationBadge, isSelected && 'active')}
     >
       <div
+        data-testid={getAddMutationModalDataTestId(AddMutationModalDataTestIdType.ALTERATION_BADGE_NAME, alterationName)}
         className={styles.alterationBadgeName}
         onClick={event => {
           event.stopPropagation();
@@ -183,7 +187,10 @@ const AlterationBadge = ({
           {alterationName}
         </div>
       </div>
-      <div className={styles.actionWrapper}>
+      <div
+        className={styles.actionWrapper}
+        data-testid={getAddMutationModalDataTestId(AddMutationModalDataTestIdType.ALTERATION_BADGE_DELETE, alterationName)}
+      >
         <FontAwesomeIcon icon={faXmark} className={styles.deleteButton} onClick={onDelete} />
       </div>
     </div>

diff --git a/src/main/webapp/app/shared/modal/MutationModal/AlterationCategoryInputs.tsx b/src/main/webapp/app/shared/modal/MutationModal/AlterationCategoryInputs.tsx
@@ -8,6 +8,7 @@ import { isFlagEqualToIFlag } from 'app/shared/util/firebase/firebase-utils';
 import { componentInject } from 'app/shared/util/typed-inject';
 import { IRootStore } from 'app/stores';
 import { DropdownOption } from './AddMutationModalDropdown';
+import { ADD_MUTATION_MODAL_FLAG_DROPDOWN_ID } from 'app/config/constants/html-id';
 
 const AlterationCategoryInputs = ({
   getFlagsByType,
@@ -86,7 +87,7 @@ const AlterationCategoryInputs = ({
             </Col>
             <Col className="px-0">
               <CreatableSelect
-                inputId="add-mutation-modal-flag-input"
+                inputId={ADD_MUTATION_MODAL_FLAG_DROPDOWN_ID}
                 isMulti
                 options={flagDropdownOptions}
                 onChange={newFlags => handleAlterationCategoriesField('flags', newFlags)}

diff --git a/src/main/webapp/app/shared/modal/MutationModal/ExcludedAlterationContent.tsx b/src/main/webapp/app/shared/modal/MutationModal/ExcludedAlterationContent.tsx
@@ -7,6 +7,7 @@ import { parseAlterationName } from '../../util/utils';
 import MutationDetails from './MutationDetails';
 import _ from 'lodash';
 import AlterationBadgeList from './AlterationBadgeList';
+import { ADD_MUTATION_MODAL_ADD_EXCLUDED_ALTERATION_BUTTON_ID } from 'app/config/constants/html-id';
 
 export interface IExcludedAlterationContent extends StoreProps {}
 
@@ -41,15 +42,6 @@ const ExcludedAlterationContent = ({
       <div className="d-flex align-items-center mb-3">
         <Col className="col-3 me-3">
           <span className="me-2">Excluding</span>
-          {!isSectionEmpty && (
-            <>
-              {excludingCollapsed ? (
-                <FaChevronDown style={{ cursor: 'pointer' }} onClick={isSectionEmpty ? undefined : () => setExcludingCollapsed(false)} />
-              ) : (
-                <FaChevronUp style={{ cursor: 'pointer' }} onClick={() => setExcludingCollapsed(true)} />
-              )}
-            </>
-          )}
         </Col>
         <Col className="px-0">
           <AlterationBadgeList
@@ -61,7 +53,12 @@ const ExcludedAlterationContent = ({
           />
         </Col>
         <Col className="col-auto ps-2 pe-0">
-          <Button color="primary" disabled={!excludingInputValue} onClick={handleAlterationAddedExcluding}>
+          <Button
+            color="primary"
+            disabled={!excludingInputValue}
+            onClick={handleAlterationAddedExcluding}
+            id={ADD_MUTATION_MODAL_ADD_EXCLUDED_ALTERATION_BUTTON_ID}
+          >
             <FaPlus />
           </Button>
         </Col>

diff --git a/src/main/webapp/app/shared/modal/MutationModal/MutationDetails.tsx b/src/main/webapp/app/shared/modal/MutationModal/MutationDetails.tsx
@@ -10,6 +10,7 @@ import { Alert } from 'reactstrap';
 import { READABLE_ALTERATION } from 'app/config/constants/constants';
 import { getFullAlterationName } from 'app/shared/util/utils';
 import AnnotatedAlterationErrorContent from './AnnotatedAlterationErrorContent';
+import { AddMutationModalDataTestIdType, getAddMutationModalDataTestId } from 'app/shared/util/test-id-utils';
 
 const ALTERATION_TYPE_OPTIONS: DropdownOption[] = [
   AlterationTypeEnum.ProteinChange,
@@ -220,7 +221,7 @@ const MutationDetails = ({
   }
 
   return (
-    <>
+    <div data-testid={getAddMutationModalDataTestId(AddMutationModalDataTestIdType.MUTATION_DETAILS, alterationData.name)}>
       <h5>{excludingIndex !== undefined && excludingIndex > -1 ? 'Excluded Mutation Details' : 'Mutation Details'}</h5>
       {alterationData.warning && (
         <Alert color="warning" className="alteration-message" fade={false}>
@@ -251,7 +252,7 @@ const MutationDetails = ({
         placeholder="Input comment"
         onChange={newValue => handleFieldChange(newValue, 'comment')}
       />
-    </>
+    </div>
   );
 };
 

diff --git a/src/main/webapp/app/shared/modal/MutationModal/MutationListSection.tsx b/src/main/webapp/app/shared/modal/MutationModal/MutationListSection.tsx
@@ -9,6 +9,7 @@ import { faComment as farComment } from '@fortawesome/free-regular-svg-icons';
 import { faComment as fasComment } from '@fortawesome/free-solid-svg-icons';
 import AlterationCategoryInputs from './AlterationCategoryInputs';
 import AlterationBadgeList from './AlterationBadgeList';
+import { ADD_MUTATION_MODAL_FLAG_COMMENT_ID, ADD_MUTATION_MODAL_FLAG_COMMENT_INPUT_ID } from 'app/config/constants/html-id';
 
 const MutationListSection = ({
   alterationStates,
@@ -40,6 +41,7 @@ const MutationListSection = ({
               overlayInnerStyle={{ minWidth: '400px' }}
               overlay={
                 <Input
+                  id={ADD_MUTATION_MODAL_FLAG_COMMENT_INPUT_ID}
                   type="textarea"
                   placeholder={'Input string name comment'}
                   value={alterationCategoryComment}
@@ -48,6 +50,7 @@ const MutationListSection = ({
               }
             >
               <FontAwesomeIcon
+                id={ADD_MUTATION_MODAL_FLAG_COMMENT_ID}
                 icon={alterationCategoryComment === '' ? farComment : fasComment}
                 color={alterationCategoryComment === '' ? 'inherit' : 'green'}
               />

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,14 @@ export enum CollapsibleDataTestIdType {
 export function getCollapsibleDataTestId(dataTestid: CollapsibleDataTestIdType, identifier: string | undefined) {
   return `${identifier}-${dataTestid}`;
 }
+
+export enum AddMutationModalDataTestIdType {
+  ALTERATION_BADGE_NAME = 'alteration-badge-name',
+  ALTERATION_BADGE_DELETE = 'alteration-badge-delete',
+  MUTATION_DETAILS = 'mutation-details',
+  EXON_FORM = 'exon-form',
+}
+
+export function getAddMutationModalDataTestId(dataTestid: AddMutationModalDataTestIdType, identifier?: string) {
+  return `add-mutation-modal-${identifier}-${dataTestid}`;
+}
diff --git a/src/test/javascript/constants.ts b/src/test/javascript/constants.ts
@@ -21,3 +21,8 @@ export const SCREENSHOT_METHOD_OPTIONS: WdioCheckElementMethodOptions = {
 };
 
 export const ALLOWED_MISMATCH_PERCENTAGE = 0;
+
+export const WDIO_DEFAULT_DIMENSIONS = {
+  width: 1920,
+  height: 1080,
+};
diff --git a/src/test/javascript/data/api-annotate-alterations-exon-2-4-deletion.json b/src/test/javascript/data/api-annotate-alterations-exon-2-4-deletion.json
@@ -0,0 +1,68 @@
+[
+  {
+    "entity": {
+      "id": null,
+      "type": "STRUCTURAL_VARIANT",
+      "name": "Exon 2-4 Deletion",
+      "alteration": "Exon 2 Deletion + Exon 3 Deletion + Exon 4 Deletion",
+      "proteinChange": "",
+      "start": 1,
+      "end": 150,
+      "refResidues": null,
+      "variantResidues": null,
+      "flags": [],
+      "genes": [
+        {
+          "id": 30432,
+          "entrezGeneId": 3845,
+          "hugoSymbol": "KRAS",
+          "hgncId": "6407"
+        }
+      ],
+      "transcripts": [],
+      "consequence": {
+        "id": 39,
+        "term": "UNKNOWN",
+        "name": "Unknown",
+        "isGenerallyTruncating": false,
+        "description": "Unknown status"
+      },
+      "associations": []
+    },
+    "message": "",
+    "type": "OK",
+    "queryId": null,
+    "annotation": {
+      "hotspot": {
+        "associatedHotspots": [],
+        "hotspot": false
+      },
+      "exons": [
+        {
+          "range": {
+            "start": 1,
+            "end": 37
+          },
+          "exon": 2
+        },
+        {
+          "range": {
+            "start": 38,
+            "end": 97
+          },
+          "exon": 3
+        },
+        {
+          "range": {
+            "start": 97,
+            "end": 150
+          },
+          "exon": 4
+        }
+      ]
+    },
+    "warning": false,
+    "ok": true,
+    "error": false
+  }
+]
diff --git a/src/test/javascript/data/api-annotate-alterations-oncogenic-mutations.json b/src/test/javascript/data/api-annotate-alterations-oncogenic-mutations.json
@@ -0,0 +1,46 @@
+[
+  {
+    "entity": {
+      "id": null,
+      "type": "ANY",
+      "name": "Oncogenic Mutations",
+      "alteration": "Oncogenic Mutations",
+      "proteinChange": "",
+      "start": null,
+      "end": null,
+      "refResidues": null,
+      "variantResidues": null,
+      "flags": [],
+      "genes": [
+        {
+          "id": 41135,
+          "entrezGeneId": null,
+          "hugoSymbol": null,
+          "hgncId": null
+        }
+      ],
+      "transcripts": [],
+      "consequence": {
+        "id": 3,
+        "term": "ANY",
+        "name": "Any",
+        "isGenerallyTruncating": false,
+        "description": "Any variant"
+      },
+      "associations": []
+    },
+    "message": "",
+    "type": "OK",
+    "queryId": null,
+    "annotation": {
+      "hotspot": {
+        "associatedHotspots": [],
+        "hotspot": false
+      },
+      "exons": []
+    },
+    "warning": false,
+    "ok": true,
+    "error": false
+  }
+]