initial commit, working functionality and updated tests and css to ha…

…ndle mobile devices
transcom · Feb 21, 2024 · ca98e0a · ca98e0a
1 parent 59388ec
commit ca98e0a
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 17 deletions.
diff --git a/src/pages/MyMove/Multi-Moves/MultiMovesMoveContainer/MultiMovesMoveContainer.jsx b/src/pages/MyMove/Multi-Moves/MultiMovesMoveContainer/MultiMovesMoveContainer.jsx
@@ -77,7 +77,15 @@ const MultiMovesMoveContainer = ({ moves }) => {
       <div className={styles.moveContainer}>
         <div className={styles.heading} key={index}>
           <h3>#{m.moveCode}</h3>
-          {m.status !== 'APPROVED' ? (
+          <div className={styles.moveContainerButtons} data-testid="headerBtns">
+            <ButtonDropdownMenu
+              data-testid="downloadBtn"
+              title="Download"
+              items={dropdownMenuItems}
+              divClassName={styles.dropdownBtn}
+              onItemClick={handleDropdownItemClick}
+              outline
+            />
             <Button
               data-testid="goToMoveBtn"
               className={styles.goToMoveBtn}
@@ -89,15 +97,7 @@ const MultiMovesMoveContainer = ({ moves }) => {
             >
               Go to Move
             </Button>
-          ) : (
-            <ButtonDropdownMenu
-              title="Download"
-              items={dropdownMenuItems}
-              divClassName={styles.dropdownBtn}
-              onItemClick={handleDropdownItemClick}
-              outline
-            />
-          )}
+          </div>
           <FontAwesomeIcon
             className={styles.icon}
             icon={classnames({

diff --git a/src/pages/MyMove/Multi-Moves/MultiMovesMoveContainer/MultiMovesMoveContainer.module.scss b/src/pages/MyMove/Multi-Moves/MultiMovesMoveContainer/MultiMovesMoveContainer.module.scss
@@ -19,7 +19,7 @@
     flex-direction: column;
     justify-content: space-between;
 
-  .heading {
+.heading {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -29,12 +29,9 @@
     @include u-border('base-lighter');
     @include u-padding(2);
 
-    .goToMoveBtn {
-        margin-left: auto;
-    }
-
-    .dropdownBtn {
-        margin-left: auto;
+    .moveContainerButtons {
+      margin-left: auto;
+      display: flex;
     }
 
     h3 {
@@ -47,6 +44,28 @@
     .icon {
        margin-left: 1rem;
     }
+
+  // handling mobile device layout
+  // the buttons are too large to display so we will make them a column
+  @media (max-width: $tablet) {
+    flex-direction: column;
+
+    h3 {
+      margin-bottom: 0.5rem;
+    }
+
+    .moveContainerButtons {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 5px;
+      width: 100%;
+    }
+
+    .icon {
+      margin-top: 0.5rem;
+    }
+  }
 }
 
   .moveInfoList {

diff --git a/src/pages/MyMove/Multi-Moves/MultiMovesMoveContainer/MultiMovesMoveContainer.test.jsx b/src/pages/MyMove/Multi-Moves/MultiMovesMoveContainer/MultiMovesMoveContainer.test.jsx
@@ -56,4 +56,36 @@ describe('MultiMovesMoveContainer', () => {
     // The move details should be hidden again
     expect(screen.queryByText('Shipments')).not.toBeInTheDocument();
   });
+
+  it('renders Go to Move & Download buttons for current move', () => {
+    render(
+      <MockProviders>
+        <MultiMovesMoveContainer moves={mockCurrentMoves} />
+      </MockProviders>,
+    );
+
+    expect(screen.getByTestId('headerBtns')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Download' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Go to Move' })).toBeInTheDocument();
+  });
+
+  it('renders Go to Move & Download buttons for previous moves exceeding one', () => {
+    render(
+      <MockProviders>
+        <MultiMovesMoveContainer moves={mockPreviousMoves} />
+      </MockProviders>,
+    );
+
+    // Check for the container that holds the buttons - there should be 2
+    const headerBtnsElements = screen.getAllByTestId('headerBtns');
+    expect(headerBtnsElements).toHaveLength(2);
+
+    // Check for Download buttons - there should be 2
+    const downloadButtons = screen.getAllByRole('button', { name: 'Download' });
+    expect(downloadButtons).toHaveLength(2);
+
+    // Check for Go to Move buttons - there should be 2
+    const goToMoveButtons = screen.getAllByRole('button', { name: 'Go to Move' });
+    expect(goToMoveButtons).toHaveLength(2);
+  });
 });