add more screenshot tests (oncokb#341)

add more screenshot tests
bprize15 · Jun 6, 2024 · cfbdbf8 · cfbdbf8
1 parent ec1250c
commit cfbdbf8
Show file tree

Hide file tree

Showing 19 changed files with 346 additions and 3,885 deletions.
diff --git a/README.md b/README.md
@@ -247,7 +247,7 @@ To launch your application's tests, run:
 ./mvnw verify
 ```
 
-### Client tests
+### Unit tests
 
 #### Set up
 
@@ -282,34 +282,46 @@ npx firebase init
 - Enter when prompted for the project name so it defaulted to your project
 - Select Authentication Emulator, Database Emulator when asked which emulators to setup
 
-#### Screenshot test
+#### Run unit tests
 
-1. Start up just the local client
+Unit tests are run by [Jest](https://jestjs.io/docs/getting-started). They're
+located in [src/test/javascript/](src/test/javascript/) and can be run with:
+
+```sh
+yarn test
+```
+
+### End-to-end tests
+
+We use the [WebDriverIO](https://webdriver.io/) framework for our end-to-end testing, allowing us to test interactions like a user and take screenshots. We provide two options for running these tests: locally and in docker.
+
+**IMPORTANT**: Expect the screenshot tests to fail if ran locally due to resolution issues. Local development for screenshot tests is only recommended during development for faster iteration. To update screenshots, wait for the [GitHub action](.github/workflows/webdriver-test.yml) after pushing your changes and retrieve the updated screenshots from the `actual` folder.
+
+#### Run tests locally
+
+1. Follow the [Set up](#set-up) instructions
+
+2. Start up just the local client
 
 ```sh
 yarn start
 ```
 
-2. Start the firebase emulator
+3. Start the firebase emulator
 
 ```sh
 yarn run firebase-emulator
 ```
 
-3. Run web driver IO
+4. Run web driver IO
 
 ```sh
 yarn run wdio
 ```
 
-#### Unit test
+#### Run tests in Docker
 
-Unit tests are run by [Jest](https://jestjs.io/docs/getting-started). They're
-located in [src/test/javascript/](src/test/javascript/) and can be run with:
-
-```sh
-yarn test
-```
+Run `docker compose up` to build and run the tests. Make sure to update the images after making changes to the project.
 
 ## Build production docker image
 

diff --git a/src/main/webapp/app/pages/curation/collapsible/BaseCollapsible.tsx b/src/main/webapp/app/pages/curation/collapsible/BaseCollapsible.tsx
@@ -37,6 +37,13 @@ export interface BaseCollapsibleProps {
   showLoadingSpinner?: boolean;
 }
 
+function getDataTestid(dataTestid: string, identifier: React.ReactNode) {
+  if (typeof identifier === 'string') {
+    return `${identifier}-${dataTestid}`;
+  }
+  return dataTestid;
+}
+
 export default function BaseCollapsible({
   children,
   title,
@@ -64,7 +71,7 @@ export default function BaseCollapsible({
   const infoComponent = useMemo(() => {
     if (!displayOptions?.hideInfo) {
       return (
-        <div className="d-flex" data-testid="collapsible-info">
+        <div className="d-flex" data-testid={getDataTestid('collapsible-info', title)}>
           {info}
         </div>
       );
@@ -77,7 +84,7 @@ export default function BaseCollapsible({
         return (
           <>
             <div className={classNames(styles.divider)} />
-            <div className={'collapsible-action all-children-margin'} data-testid="collapsible-action">
+            <div className={'collapsible-action all-children-margin'} data-testid={getDataTestid('collapsible-action', title)}>
               {action}
             </div>
           </>
@@ -103,21 +110,21 @@ export default function BaseCollapsible({
   };
 
   return (
-    <div className={classNames('card', collapsibleClassName, styles.main)}>
+    <div className={classNames('card', collapsibleClassName, styles.main)} data-testid={getDataTestid('collapsible', title)}>
       <div
         className={classNames(
           'd-flex align-items-center p-1 bg-transparent pe-2',
           styles.header,
           colorOptions?.hideLeftBorder ? styles.hiddenHeaderLeftBorder : undefined,
         )}
         ref={collapsibleRef}
-        data-testid="collapsible-card"
+        data-testid={getDataTestid('collapsible-card', title)}
       >
         <div style={{ flexGrow: 1 }} className="d-flex align-items-center">
           <div
             className={classNames(styles.collapsibleTitleWrapper, displayOptions?.disableCollapsible && styles.disabledCollapsible)}
             onClick={handleToggle}
-            data-testid="collapsible-title-wrapper"
+            data-testid={getDataTestid('collapsible-title-wrapper', title)}
           >
             <button
               disabled={displayOptions?.disableCollapsible || displayOptions?.hideToggle}

diff --git a/src/main/webapp/app/pages/curation/collapsible/Collapsible.spec.tsx b/src/main/webapp/app/pages/curation/collapsible/Collapsible.spec.tsx
@@ -5,17 +5,19 @@ import Collapsible, { CollapsibleProps } from './Collapsible';
 import { DANGER } from 'app/config/colors';
 import { DISABLED_COLLAPSIBLE_COLOR } from 'app/config/constants/constants';
 
+const DEFAULT_TITLE = 'Default Title';
+
 function buildCollapsible(props?: Partial<CollapsibleProps>) {
   return (
-    <Collapsible title={'Default Title'} {...props}>
+    <Collapsible title={DEFAULT_TITLE} {...props}>
       <div>Default content</div>
     </Collapsible>
   );
 }
 
 function assertToggleDisabled() {
   expect(screen.getByRole('button')).toBeDisabled();
-  fireEvent.click(screen.getByTestId('collapsible-title-wrapper'));
+  fireEvent.click(screen.getByTestId(`${DEFAULT_TITLE}-collapsible-title-wrapper`));
   expect(screen.queryByText('Default content')).toBeNull();
 }
 
@@ -24,10 +26,10 @@ describe('Collapsible tests', () => {
     render(buildCollapsible());
 
     expect(screen.queryByText('Default content')).toBeNull();
-    fireEvent.click(screen.getByTestId('collapsible-title-wrapper'));
+    fireEvent.click(screen.getByTestId(`${DEFAULT_TITLE}-collapsible-title-wrapper`));
     expect(screen.getByText('Default content')).toBeInTheDocument();
 
-    fireEvent.click(screen.getByTestId('collapsible-title-wrapper'));
+    fireEvent.click(screen.getByTestId(`${DEFAULT_TITLE}-collapsible-title-wrapper`));
     expect(screen.queryByText('Default content')).toBeNull();
   });
 
@@ -48,7 +50,7 @@ describe('Collapsible tests', () => {
     });
 
     it('should have grey border', () => {
-      expect(screen.getByTestId('collapsible-card')).toHaveStyle(`border-left-color: ${DISABLED_COLLAPSIBLE_COLOR}`);
+      expect(screen.getByTestId(`${DEFAULT_TITLE}-collapsible-card`)).toHaveStyle(`border-left-color: ${DISABLED_COLLAPSIBLE_COLOR}`);
     });
 
     it('toggle button should be disabled', () => {
@@ -67,7 +69,7 @@ describe('Collapsible tests', () => {
     });
 
     it('should have red left border', () => {
-      expect(screen.getByTestId('collapsible-card')).toHaveStyle(`border-left-color: ${DANGER}`);
+      expect(screen.getByTestId(`${DEFAULT_TITLE}-collapsible-card`)).toHaveStyle(`border-left-color: ${DANGER}`);
     });
 
     it('toggle button should be disabled', () => {

diff --git a/src/main/webapp/app/pages/curation/collapsible/RemovableCollapsible.spec.tsx b/src/main/webapp/app/pages/curation/collapsible/RemovableCollapsible.spec.tsx
@@ -4,9 +4,11 @@ import '@testing-library/jest-dom';
 import { RemovableCollapsible } from './RemovableCollapsible';
 import { Review } from 'app/shared/model/firebase/firebase.model';
 
+const DEFAULT_TITLE = 'Default Title';
+
 function buildCollapsible(review: Review) {
   return (
-    <RemovableCollapsible title={'Default Title'} review={review} info={<div>Info section</div>} action={<div>Action section</div>}>
+    <RemovableCollapsible title={DEFAULT_TITLE} review={review} info={<div>Info section</div>} action={<div>Action section</div>}>
       <div>Default content</div>
     </RemovableCollapsible>
   );
@@ -23,11 +25,11 @@ describe('Removable Collapsible', () => {
     });
 
     it('should hide actions when pending deletion', () => {
-      expect(screen.queryByTestId('collapsible-action')).toBeNull();
+      expect(screen.queryByTestId(`${DEFAULT_TITLE}-collapsible-action`)).toBeNull();
     });
 
     it('should have info section', () => {
-      expect(screen.getByTestId('collapsible-info')).toBeInTheDocument();
+      expect(screen.getByTestId(`${DEFAULT_TITLE}-collapsible-info`)).toBeInTheDocument();
     });
   });
 
@@ -41,11 +43,11 @@ describe('Removable Collapsible', () => {
     });
 
     it('should hide actions when pending deletion', () => {
-      expect(screen.queryByTestId('collapsible-action')).toBeNull();
+      expect(screen.queryByTestId(`${DEFAULT_TITLE}-collapsible-action`)).toBeNull();
     });
 
     it('should have info section', () => {
-      expect(screen.getByTestId('collapsible-info')).toBeInTheDocument();
+      expect(screen.getByTestId(`${DEFAULT_TITLE}-collapsible-info`)).toBeInTheDocument();
     });
   });
 
@@ -58,11 +60,11 @@ describe('Removable Collapsible', () => {
     });
 
     it('should have action section', () => {
-      expect(screen.getByTestId('collapsible-action')).toBeInTheDocument();
+      expect(screen.getByTestId(`${DEFAULT_TITLE}-collapsible-action`)).toBeInTheDocument();
     });
 
     it('should have info section', () => {
-      expect(screen.getByTestId('collapsible-info')).toBeInTheDocument();
+      expect(screen.getByTestId(`${DEFAULT_TITLE}-collapsible-info`)).toBeInTheDocument();
     });
   });
 });
diff --git a/src/main/webapp/app/pages/curation/header/GeneHeader.tsx b/src/main/webapp/app/pages/curation/header/GeneHeader.tsx
@@ -59,21 +59,21 @@ const GeneHeader = ({
     if (geneMetaReviewHasUuids(metaReview)) {
       if (isReviewing || isReviewFinished) {
         button = (
-          <Button color="primary" onClick={handleReviewButtonClick}>
+          <Button color="primary" onClick={handleReviewButtonClick} data-testid="review-complete-button">
             Review Complete
           </Button>
         );
       } else {
         button = (
-          <Button outline color="primary" onClick={handleReviewButtonClick}>
+          <Button outline color="primary" onClick={handleReviewButtonClick} data-testid="review-button">
             Review
           </Button>
         );
       }
     } else {
       if (isReviewFinished) {
         button = (
-          <Button color="primary" onClick={handleReviewButtonClick}>
+          <Button color="primary" onClick={handleReviewButtonClick} data-testid="review-complete-button">
             Review Complete
           </Button>
         );

diff --git a/src/main/webapp/app/pages/curation/list/TherapiesList.tsx b/src/main/webapp/app/pages/curation/list/TherapiesList.tsx
@@ -99,6 +99,7 @@ const TherapiesList = ({
         );
       })}
       <Button
+        data-testid="add-therapy"
         className={txObjects.length > 0 ? `mt-2` : null}
         outline
         color="primary"

diff --git a/src/main/webapp/app/pages/curation/review/ReviewPage.tsx b/src/main/webapp/app/pages/curation/review/ReviewPage.tsx
@@ -85,7 +85,7 @@ const ReviewPage = (props: IReviewPageProps) => {
   };
 
   return (
-    <>
+    <div data-testid="review-page">
       <Row className={`${getSectionClassName()} justify-content-between`}>
         <Col>
           {props.reviewFinished ? (
@@ -171,7 +171,7 @@ const ReviewPage = (props: IReviewPageProps) => {
           </Col>
         </Row>
       ) : undefined}
-    </>
+    </div>
   );
 };
 

diff --git a/src/main/webapp/app/shared/modal/SimpleConfirmModal.tsx b/src/main/webapp/app/shared/modal/SimpleConfirmModal.tsx
@@ -26,29 +26,31 @@ export const SimpleConfirmModal: React.FunctionComponent<{
   };
   return (
     <Modal style={props.style} isOpen={props.show} toggle={() => onCancel()}>
-      <ModalHeader toggle={() => onCancel()}>{props.title || 'Please confirm'}</ModalHeader>
-      <ModalBody>{props.body ? props.body : 'Are you sure?'}</ModalBody>
-      <ModalFooter>
-        <Button color={props.cancelColor || 'secondary'} onClick={(event: any) => onCancel(event)}>
-          {props.cancelIcon && (
-            <>
-              <FontAwesomeIcon icon={props.cancelIcon} /> &nbsp;
-            </>
-          )}{' '}
-          {props.cancelText || 'Cancel'}
-        </Button>
-        <AsyncSaveButton
-          disabled={props.confirmDisabled}
-          color={props.confirmColor || 'primary'}
-          onClick={(event: any) => {
-            event.preventDefault();
-            if (props.onConfirm) props.onConfirm();
-          }}
-          icon={props.confirmIcon}
-          confirmText={props.confirmText}
-          isSavePending={props.showConfirmLoader}
-        />
-      </ModalFooter>
+      <div data-testid="simple-confirm-modal-content">
+        <ModalHeader toggle={() => onCancel()}>{props.title || 'Please confirm'}</ModalHeader>
+        <ModalBody>{props.body ? props.body : 'Are you sure?'}</ModalBody>
+        <ModalFooter>
+          <Button color={props.cancelColor || 'secondary'} onClick={(event: any) => onCancel(event)}>
+            {props.cancelIcon && (
+              <>
+                <FontAwesomeIcon icon={props.cancelIcon} /> &nbsp;
+              </>
+            )}{' '}
+            {props.cancelText || 'Cancel'}
+          </Button>
+          <AsyncSaveButton
+            disabled={props.confirmDisabled}
+            color={props.confirmColor || 'primary'}
+            onClick={(event: any) => {
+              event.preventDefault();
+              if (props.onConfirm) props.onConfirm();
+            }}
+            icon={props.confirmIcon}
+            confirmText={props.confirmText}
+            isSavePending={props.showConfirmLoader}
+          />
+        </ModalFooter>
+      </div>
     </Modal>
   );
 };
diff --git a/src/main/webapp/app/shared/table/VusTable.tsx b/src/main/webapp/app/shared/table/VusTable.tsx
@@ -142,7 +142,7 @@ const VusTable = ({
       ),
       id: LAST_EDITED_AT,
       accessor: 'time.value',
-      width: 250,
+      width: 300,
       Cell(cell: { original: VusTableData }) {
         const time = cell.original.time.value;
         const color = getVusTimestampClass(time);
@@ -175,6 +175,7 @@ const VusTable = ({
     {
       id: 'actions',
       Header: 'Actions',
+      width: 150,
       sortable: false,
       Cell(cell: { original: VusTableData }) {
         return (
@@ -213,7 +214,7 @@ const VusTable = ({
   return (
     <>
       {vusData ? (
-        <div className={'justify-content-between align-items-center mt-5'}>
+        <div className={'justify-content-between align-items-center mt-5'} data-testid="vus-table">
           <div className={'d-flex align-items-center mb-2'}>
             <span style={{ fontSize: '1.25rem' }}>Variants of Unknown Significance (Investigated and data not found)</span>
             <AddButton className="ms-2" onClickHandler={() => setShowAddVusModal(true)} />
-Original file line number
+Diff line change
@@ Expand Up / @@ -99,6 +99,7 @@ const TherapiesList = ({ @@
             );
           })}
           <Button
+            data-testid="add-therapy"
             className={txObjects.length > 0 ? `mt-2` : null}
             outline
             color="primary"
@@ Expand Down @@