feat: Introduce individual view preference for user without build mon…

…itor
otto-de · Aug 17, 2024 · 8c30d9d · 8c30d9d
1 parent 7363ea4
commit 8c30d9d
Show file tree

Hide file tree

Showing 12 changed files with 405 additions and 123 deletions.
diff --git a/frontend/__tests__/components/FailureGridCell.test.js b/frontend/__tests__/components/FailureGridCell.test.js
@@ -10,7 +10,10 @@ describe('<FailureGridCell />', () => {
     };
   });
 
-  it('should render grid cell', () => {
+  it.each([
+    [false],
+    [true]
+  ])('should render grid cell when buildMonitorViewEnabled = %s', (buildMonitorViewEnabled) => {
     const createdAt = '2022-08-15T02:20:34Z';
 
     const name = 'test name';
@@ -22,7 +25,8 @@ describe('<FailureGridCell />', () => {
           name,
           url,
           createdAt
-        }
+        },
+        buildMonitorViewEnabled
       }
     });
 
@@ -37,7 +41,8 @@ describe('<FailureGridCell />', () => {
       name,
       showRelativeTime: true,
       status: 'failure',
-      url
+      url,
+      buildMonitorViewEnabled
     });
   });
 });
diff --git a/frontend/__tests__/components/GridCell.test.js b/frontend/__tests__/components/GridCell.test.js
@@ -6,7 +6,8 @@ describe('<GridCell />', () => {
   const defaultProps = {
     name: 'webpack-cli :: webpack-cli :: Lint Commit Messages',
     url: 'https://github.com/webpack/webpack-cli/runs/7858502725',
-    lastExecutedTime: '2022-08-16T03:45:02.000Z'
+    lastExecutedTime: '2022-08-16T03:45:02.000Z',
+    buildMonitorViewEnabled: true
   };
 
   const rootId = `${defaultProps.name.replaceAll(/[\\:\s]/g, '-')}`;
@@ -41,6 +42,20 @@ describe('<GridCell />', () => {
       expect(wrapper.html()).toMatchSnapshot();
     });
 
+  it('should render grid cell when build monitor view is disabled', () => {
+    const wrapper = mount(GridCell, {
+      props: { ...defaultProps, buildMonitorViewEnabled: false }
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it('should render in progress grid cell when build monitor view is disabled', () => {
+    const wrapper = mount(GridCell, {
+      props: { ...defaultProps, inProgress: true, buildMonitorViewEnabled: false }
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
   it.each([
     [true, true, true],
     [false, true, true],
@@ -59,7 +74,7 @@ describe('<GridCell />', () => {
         await requestAnimationFrameAsPromise();
         expect(wrapper.find(`[test-id="${rootId}-toolbar"]`).exists()).toBeTruthy();
       });
-        expect(wrapper.html()).toMatchSnapshot();
+      expect(wrapper.html()).toMatchSnapshot();
     });
 
   it.each([

diff --git a/frontend/__tests__/components/Job.test.js b/frontend/__tests__/components/Job.test.js
@@ -13,47 +13,54 @@ describe('<Job />', () => {
     lastBuildTime: '2022-08-15T02:20:34Z'
   };
 
-  it.each([
-    ['Sleeping', 'Success', false, false, false],
-    ['Sleeping', 'Success', true, false, false],
-    ['Sleeping', 'Failure', false, true, false],
-    ['Sleeping', 'Unknown', false, true, false],
-    ['Sleeping', 'Exception', false, true, false],
-    ['Building', 'Success', false, false, true],
-    ['Building', 'Failure', false, false, true],
-    ['Building', 'Unknown', false, false, true],
-    ['Building', 'Exception', false, false, true],
-    ['CheckingModifications', 'Success', false, false, false],
-    ['CheckingModifications', 'Failure', false, true, false],
-    ['CheckingModifications', 'Unknown', false, true, false],
-    ['CheckingModifications', 'Exception', false, true, false]
-  ])('should render job grid when activity is %s and last build status is %s and hidden is %s',
-    async (activity, lastBuildStatus, hidden, showRelativeTime, inProgress) => {
-      const wrapper = shallowMount(Job, {
-        props: {
-          content: { ...jobDetails, activity, lastBuildStatus },
-          hidden
-        }
-      });
+  describe.each([
+    [true],
+    [false]
+  ])('when build monitor view enabled = %s', (buildMonitorViewEnabled) => {
+    it.each([
+      ['Sleeping', 'Success', false, false, false],
+      ['Sleeping', 'Success', true, false, false],
+      ['Sleeping', 'Failure', false, true, false],
+      ['Sleeping', 'Unknown', false, true, false],
+      ['Sleeping', 'Exception', false, true, false],
+      ['Building', 'Success', false, false, true],
+      ['Building', 'Failure', false, false, true],
+      ['Building', 'Unknown', false, false, true],
+      ['Building', 'Exception', false, false, true],
+      ['CheckingModifications', 'Success', false, false, false],
+      ['CheckingModifications', 'Failure', false, true, false],
+      ['CheckingModifications', 'Unknown', false, true, false],
+      ['CheckingModifications', 'Exception', false, true, false]
+    ])('should render job grid when activity is %s and last build status is %s and hidden is %s',
+      async (activity, lastBuildStatus, hidden, showRelativeTime, inProgress) => {
+        const wrapper = shallowMount(Job, {
+          props: {
+            content: { ...jobDetails, activity, lastBuildStatus },
+            hidden,
+            buildMonitorViewEnabled
+          }
+        });
 
-      const gridCellComponent = wrapper.findComponent(GridCell);
+        const gridCellComponent = wrapper.findComponent(GridCell);
 
-      expect(gridCellComponent.exists()).toBeTruthy();
+        expect(gridCellComponent.exists()).toBeTruthy();
 
-      expect(gridCellComponent.props()).toEqual({
-        lastExecutedTime: jobDetails.lastBuildTime,
-        url: jobDetails.webUrl,
-        name: jobDetails.name,
-        hidden,
-        displayToggleVisibility: true,
-        showRelativeTime,
-        status: lastBuildStatus,
-        inProgress
-      });
+        expect(gridCellComponent.props()).toEqual({
+          lastExecutedTime: jobDetails.lastBuildTime,
+          url: jobDetails.webUrl,
+          name: jobDetails.name,
+          hidden,
+          displayToggleVisibility: true,
+          showRelativeTime,
+          status: lastBuildStatus,
+          inProgress,
+          buildMonitorViewEnabled
+        });
 
-      await gridCellComponent.vm.$emit('toggle-visibility', jobDetails.name);
-      const emitted = wrapper.emitted();
-      expect(emitted).toHaveProperty('toggleVisibility');
-      expect(emitted.toggleVisibility).toEqual([[jobDetails.name]]);
-    });
+        await gridCellComponent.vm.$emit('toggle-visibility', jobDetails.name);
+        const emitted = wrapper.emitted();
+        expect(emitted).toHaveProperty('toggleVisibility');
+        expect(emitted.toggleVisibility).toEqual([[jobDetails.name]]);
+      });
+  });
 });
diff --git a/frontend/__tests__/components/WorkflowDashboard.test.js b/frontend/__tests__/components/WorkflowDashboard.test.js
@@ -58,6 +58,7 @@ describe('<WorkflowDashboard />', () => {
 
   beforeEach(() => {
     getVersion.mockReturnValueOnce('3.3.0');
+    vi.spyOn(preferences, 'enableBuildMonitorView', 'get').mockReturnValueOnce(true);
   });
 
   afterEach(() => {
@@ -106,24 +107,30 @@ describe('<WorkflowDashboard />', () => {
     });
   });
 
-  it('should render dashboard with all job details', async () => {
-    vi.spyOn(preferences, 'showHealthyBuilds', 'get').mockReturnValueOnce(true);
-    vi.spyOn(preferences, 'enableMaxIdleTimeOptimization', 'get').mockReturnValueOnce(true);
-    vi.spyOn(preferences, 'maxIdleTime', 'get').mockReturnValueOnce(10);
-    vi.spyOn(preferences, 'showBuildsDueToTriggeredEvents', 'get').mockReturnValueOnce([]);
-    vi.spyOn(preferences, 'hiddenElements', 'get').mockReturnValueOnce({});
+  it.each([
+    [true],
+    [false]
+  ])('should render dashboard with all job details when build monitor view enabled = %s',
+    async (buildMonitorViewEnabled) => {
+      vi.spyOn(preferences, 'showHealthyBuilds', 'get').mockReturnValueOnce(true);
+      vi.spyOn(preferences, 'enableMaxIdleTimeOptimization', 'get').mockReturnValueOnce(true);
+      vi.spyOn(preferences, 'maxIdleTime', 'get').mockReturnValueOnce(10);
+      vi.spyOn(preferences, 'showBuildsDueToTriggeredEvents', 'get').mockReturnValueOnce([]);
+      vi.spyOn(preferences, 'hiddenElements', 'get').mockReturnValueOnce({});
+      vi.spyOn(preferences, 'enableBuildMonitorView', 'get').mockReturnValueOnce(buildMonitorViewEnabled);
 
-    fetchCctrayJson.mockResolvedValueOnce([jobDetails1, jobDetails2]);
+      fetchCctrayJson.mockResolvedValueOnce([jobDetails1, jobDetails2]);
 
-    const workflowDashboardWrapper = mountWithWrapper(WorkflowDashboard);
+      const workflowDashboardWrapper = mountWithWrapper(WorkflowDashboard);
 
-    await flushPromises();
+      await flushPromises();
 
-    const jobComponents = workflowDashboardWrapper.findAllComponents(Job);
+      const jobComponents = workflowDashboardWrapper.findAllComponents(Job);
 
-    expect(jobComponents).length(2);
-    expect(workflowDashboardWrapper.html()).toMatchSnapshot();
-  });
+      expect(jobComponents).length(2);
+      await workflowDashboardWrapper.vm.$nextTick();
+      expect(workflowDashboardWrapper.html()).toMatchSnapshot();
+    });
 
   it('should hide success job details', async () => {
     vi.spyOn(preferences, 'showHealthyBuilds', 'get').mockReturnValueOnce(false);
@@ -379,9 +386,13 @@ describe('<WorkflowDashboard />', () => {
   });
 
   describe('Timers', () => {
-    beforeEach(vi.useFakeTimers);
+    beforeEach(() => {
+      vi.useFakeTimers();
+    });
 
-    afterEach(vi.useRealTimers);
+    afterEach(() => {
+      vi.useRealTimers();
+    });
 
     it('should fetch data after every certain interval', async () => {
       vi.spyOn(preferences, 'showHealthyBuilds', 'get').mockReturnValueOnce(true);