test(gui): also covered phased deployment rendering

+ aligned snapshots accordingly Signed-off-by: Manuel Zedel <[email protected]>
mendersoftware · Feb 14, 2025 · 9734553 · 9734553
1 parent e2ee1cb
commit 9734553
Show file tree

Hide file tree

Showing 13 changed files with 2,899 additions and 79 deletions.
diff --git a/frontend/src/js/components/__snapshots__/App.test.tsx.snap b/frontend/src/js/components/__snapshots__/App.test.tsx.snap
diff --git a/frontend/src/js/components/dashboard/__snapshots__/Deployments.test.tsx.snap b/frontend/src/js/components/dashboard/__snapshots__/Deployments.test.tsx.snap
@@ -206,14 +206,12 @@ exports[`Deployments Component renders correctly 1`] = `
       class="clickable emotion-0"
     >
       <div>
-        <div>
-          r1
-        </div>
+        <div />
         <div
           class=""
-          title="test deployment"
+          title="Test"
         >
-          test deployment
+          Test
         </div>
       </div>
       <div
@@ -227,12 +225,76 @@ exports[`Deployments Component renders correctly 1`] = `
           >
             <div
               class="progress-step"
-              style="left: 0%; width: 100%;"
+              style="left: 0%; width: 2%;"
             >
               <div
-                class="progress-bar"
-                style="width: 100%; background-color: rgb(170, 170, 170);"
-              />
+                style="display: contents;"
+              >
+                <div
+                  class="progress-bar green"
+                  style="width: 0%;"
+                />
+                <div
+                  class="progress-bar warning"
+                  style="left: 0%; width: 0%;"
+                />
+              </div>
+            </div>
+            <div
+              class="progress-step"
+              style="left: 2%; width: 3%;"
+            >
+              <div
+                style="display: contents;"
+              >
+                <div
+                  class="progress-bar green"
+                  style="width: 0%;"
+                />
+                <div
+                  class="progress-bar warning"
+                  style="left: 0%; width: 0%;"
+                />
+              </div>
+            </div>
+            <div
+              class="progress-step"
+              style="left: 5%; width: 5%;"
+            >
+              <div
+                style="display: contents;"
+              >
+                <div
+                  class="progress-bar green"
+                  style="width: 0%;"
+                />
+                <div
+                  class="progress-bar warning"
+                  style="left: 0%; width: 0%;"
+                />
+              </div>
+            </div>
+            <div
+              class="progress-step"
+              style="left: 10%; width: 5%;"
+            >
+              <div
+                style="display: contents;"
+              >
+                <div
+                  class="progress-bar green"
+                  style="width: 0%;"
+                />
+                <div
+                  class="progress-bar warning"
+                  style="left: 0%; width: 0%;"
+                />
+              </div>
+            </div>
+            <div
+              class="progress-step"
+              style="left: 15%; width: 85%;"
+            >
               <div
                 style="display: contents;"
               >

diff --git a/frontend/src/js/components/deployments/ProgressChart.test.tsx b/frontend/src/js/components/deployments/ProgressChart.test.tsx
@@ -24,4 +24,10 @@ describe('ProgressChart Component', () => {
     expect(view).toMatchSnapshot();
     expect(view).toEqual(expect.not.stringMatching(undefineds));
   });
+  it('renders correctly for phases', async () => {
+    const { baseElement } = render(<ProgressChart deployment={defaultState.deployments.byId.d3} status="inprogress" />);
+    const view = baseElement.firstChild;
+    expect(view).toMatchSnapshot();
+    expect(view).toEqual(expect.not.stringMatching(undefineds));
+  });
 });
diff --git a/frontend/src/js/components/deployments/Report.test.tsx b/frontend/src/js/components/deployments/Report.test.tsx
@@ -19,23 +19,45 @@ import { defaultState } from '../../../../tests/mockData';
 import { render } from '../../../../tests/setupTests';
 import DeploymentReport from './Report';
 
-const preloadedState = {
-  ...defaultState,
-  deployments: {
-    ...defaultState.deployments,
-    selectedDeviceIds: [defaultState.deployments.byId.d1.devices.a1.id],
-    selectionState: {
-      selectedId: defaultState.deployments.byId.d1.id
-    }
-  }
-};
-
 describe('DeploymentReport Component', () => {
   afterEach(cleanup);
 
   it('renders correctly', async () => {
-    const ui = <DeploymentReport open type="finished" getDeploymentDevices={jest.fn} getDeviceById={jest.fn} getDeviceAuth={jest.fn} />;
-    const { asFragment, rerender } = render(ui, { preloadedState });
+    const ui = <DeploymentReport type="finished" />;
+    const { asFragment, rerender } = render(ui, {
+      preloadedState: {
+        ...defaultState,
+        deployments: {
+          ...defaultState.deployments,
+          selectedDeviceIds: [defaultState.deployments.byId.d1.devices.a1.id],
+          selectionState: {
+            selectedId: defaultState.deployments.byId.d1.id
+          }
+        }
+      }
+    });
+    act(() => jest.advanceTimersByTime(5000));
+    await waitFor(() => rerender(ui));
+    const view = prettyDOM(asFragment().childNodes[1], 100000, { highlight: false })
+      .replace(/id="mui-[0-9]*"/g, '')
+      .replace(/aria-labelledby="(mui-[0-9]* *)*"/g, '')
+      .replace(/\\/g, '');
+    expect(view).toMatchSnapshot();
+  });
+  it('renders correctly for phased inprogress', async () => {
+    const ui = <DeploymentReport type="inprogress" />;
+    const { asFragment, rerender } = render(ui, {
+      preloadedState: {
+        ...defaultState,
+        deployments: {
+          ...defaultState.deployments,
+          selectedDeviceIds: [defaultState.deployments.byId.d1.devices.a1.id],
+          selectionState: {
+            selectedId: defaultState.deployments.byId.d3.id
+          }
+        }
+      }
+    });
     act(() => jest.advanceTimersByTime(5000));
     await waitFor(() => rerender(ui));
     const view = prettyDOM(asFragment().childNodes[1], 100000, { highlight: false })