fix(app): disable arrow buttons while loading next/previous specs (#230)

ExpediaGroup · Jun 28, 2023 · 3fa3eb7 · 3fa3eb7
1 parent d8729d9
commit 3fa3eb7
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 6 deletions.
diff --git a/app/frontend/components/main-page.tsx b/app/frontend/components/main-page.tsx
@@ -86,24 +86,27 @@ export const MainPage = () => {
     return <div className="mt-8">{imageView}</div>;
   };
 
+  const backButtonDisabled = page <= 1 || isFetching;
+  const forwardButtonDisabled = !nextPageExists || isFetching;
+
   return (
     <>
       <div className="mt-10 flex flex-col items-center justify-center">
         <div className="flex w-4/5 items-center justify-between">
           <button
-            disabled={page <= 1}
+            disabled={backButtonDisabled}
             onClick={onClickBackArrow}
             aria-label="back-arrow"
           >
-            <ArrowBackIcon disabled={page <= 1} />
+            <ArrowBackIcon disabled={backButtonDisabled} />
           </button>
           <h1 className="text-center text-4xl font-medium">{data.title}</h1>
           <button
-            disabled={!nextPageExists}
+            disabled={forwardButtonDisabled}
             onClick={onClickForwardArrow}
             aria-label="forward-arrow"
           >
-            <ArrowForwardIcon disabled={!nextPageExists} />
+            <ArrowForwardIcon disabled={forwardButtonDisabled} />
           </button>
         </div>
         {!isFetching && (

diff --git a/app/frontend/cypress/component/App.cy.tsx b/app/frontend/cypress/component/App.cy.tsx
@@ -78,6 +78,18 @@ describe('App', () => {
       cy.findByRole('button', { name: /side-by-side/i }).should('be.disabled');
     });
 
+    it('should disable arrow buttons while loading next spec', () => {
+      cy.intercept('/trpc/fetchCurrentPage*', req => {
+        const page = getPageFromRequest(req);
+        const body = page === 2 ? secondPage : firstPage;
+        const delay = page === 2 ? 5000 : 0;
+        req.reply({ body, delay });
+      });
+      cy.findByRole('button', { name: /forward-arrow/ }).click();
+      cy.findByRole('button', { name: /back-arrow/ }).should('be.disabled');
+      cy.findByRole('button', { name: /forward-arrow/ }).should('be.disabled');
+    });
+
     it('should switch to side-by-side view and back', () => {
       cy.findByRole('button', { name: /forward-arrow/ }).click();
       cy.findByRole('button', { name: /side-by-side/i }).should('be.enabled');
@@ -91,16 +103,22 @@ describe('App', () => {
       cy.findByRole('button', { name: /side-by-side/i }).should('be.enabled');
     });
 
-    it('should display loader and update base images', () => {
+    it('should display loader while updating base images', () => {
       cy.intercept('/trpc/updateBaseImages*', {
         body: mutationResponse,
-        delay: 2000,
+        delay: 5000,
       }).as('base-images');
       cy.findByRole('button', { name: /Update all base images/i }).click();
       cy.findByText(/Are you sure/i);
       cy.findByRole('button', { name: /update/i }).click();
       cy.findByText('Updating base images...').should('be.visible');
       cy.findByLabelText('loader').should('be.visible');
+    });
+
+    it('should update base images', () => {
+      cy.findByRole('button', { name: /Update all base images/i }).click();
+      cy.findByText(/Are you sure/i);
+      cy.findByRole('button', { name: /update/i }).click();
       cy.wait(['@base-images', '@commit-status']);
       cy.findByRole('button', { name: /all images updated/i });
     });