1 files changed, 63 insertions, 31 deletions

diff --git a/spec/frontend/ci/runner/components/cells/runner_summary_cell_spec.js b/spec/frontend/ci/runner/components/cells/runner_summary_cell_spec.js
index cda3876f9b2..ad20d7682ed 100644
--- a/spec/frontend/ci/runner/components/cells/runner_summary_cell_spec.js
+++ b/spec/frontend/ci/runner/components/cells/runner_summary_cell_spec.js
@@ -1,5 +1,6 @@
+import { GlSprintf } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
-import { mountExtended } from 'helpers/vue_test_utils_helper';
+import { mountExtended, shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import RunnerSummaryCell from '~/ci/runner/components/cells/runner_summary_cell.vue';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
@@ -31,8 +32,8 @@ describe('RunnerTypeCell', () => {
     wrapper.findAllComponents(RunnerSummaryField).filter((w) => w.props('icon') === icon)
       .wrappers[0];
 
-  const createComponent = (runner, options) => {
-    wrapper = mountExtended(RunnerSummaryCell, {
+  const createComponent = ({ runner, mountFn = shallowMountExtended, ...options } = {}) => {
+    wrapper = mountFn(RunnerSummaryCell, {
       propsData: {
         runner: {
           ...mockRunner,
@@ -40,7 +41,7 @@ describe('RunnerTypeCell', () => {
         },
       },
       stubs: {
-        RunnerSummaryField,
+        GlSprintf,
       },
       ...options,
     });
@@ -51,6 +52,8 @@ describe('RunnerTypeCell', () => {
   });
 
   it('Displays the runner name as id and short token', () => {
+    createComponent({ mountFn: mountExtended });
+
     expect(wrapper.text()).toContain(
       `#${getIdFromGraphQLId(mockRunner.id)} (${mockRunner.shortSha})`,
     );
@@ -58,13 +61,16 @@ describe('RunnerTypeCell', () => {
 
   it('Displays no runner manager count', () => {
     createComponent({
-      managers: { count: 0 },
+      runner: { managers: { nodes: { count: 0 } } },
+      mountFn: mountExtended,
     });
 
     expect(findRunnerManagersBadge().html()).toBe('');
   });
 
   it('Displays runner manager count', () => {
+    createComponent({ mountFn: mountExtended });
+
     expect(findRunnerManagersBadge().text()).toBe('2');
   });
 
@@ -74,8 +80,8 @@ describe('RunnerTypeCell', () => {
 
   it('Displays the locked icon for locked runners', () => {
     createComponent({
-      runnerType: PROJECT_TYPE,
-      locked: true,
+      runner: { runnerType: PROJECT_TYPE, locked: true },
+      mountFn: mountExtended,
     });
 
     expect(findLockIcon().exists()).toBe(true);
@@ -83,8 +89,8 @@ describe('RunnerTypeCell', () => {
 
   it('Displays the runner type', () => {
     createComponent({
-      runnerType: INSTANCE_TYPE,
-      locked: true,
+      runner: { runnerType: INSTANCE_TYPE, locked: true },
+      mountFn: mountExtended,
     });
 
     expect(wrapper.text()).toContain(I18N_INSTANCE_TYPE);
@@ -101,7 +107,7 @@ describe('RunnerTypeCell', () => {
 
   it('Displays "No description" for missing runner description', () => {
     createComponent({
-      description: null,
+      runner: { description: null },
     });
 
     expect(wrapper.findByText(I18N_NO_DESCRIPTION).classes()).toContain('gl-text-secondary');
@@ -109,7 +115,7 @@ describe('RunnerTypeCell', () => {
 
   it('Displays last contact', () => {
     createComponent({
-      contactedAt: '2022-01-02',
+      runner: { contactedAt: '2022-01-02' },
     });
 
     expect(findRunnerSummaryField('clock').findComponent(TimeAgo).props('time')).toBe('2022-01-02');
@@ -124,20 +130,46 @@ describe('RunnerTypeCell', () => {
     expect(findRunnerSummaryField('clock').text()).toContain(__('Never'));
   });
 
-  it('Displays ip address', () => {
-    createComponent({
-      ipAddress: '127.0.0.1',
+  describe('IP address', () => {
+    it('with no managers', () => {
+      createComponent({
+        runner: {
+          managers: { count: 0, nodes: [] },
+        },
+      });
+
+      expect(findRunnerSummaryField('disk')).toBeUndefined();
     });
 
-    expect(findRunnerSummaryField('disk').text()).toContain('127.0.0.1');
-  });
+    it('with no ip', () => {
+      createComponent({
+        runner: {
+          managers: { count: 1, nodes: [{ ipAddress: null }] },
+        },
+      });
 
-  it('Displays no ip address', () => {
-    createComponent({
-      ipAddress: null,
+      expect(findRunnerSummaryField('disk')).toBeUndefined();
     });
 
-    expect(findRunnerSummaryField('disk')).toBeUndefined();
+    it.each`
+      count   | ipAddress      | expected
+      ${1}    | ${'127.0.0.1'} | ${'127.0.0.1'}
+      ${2}    | ${'127.0.0.2'} | ${'127.0.0.2 (+1)'}
+      ${11}   | ${'127.0.0.3'} | ${'127.0.0.3 (+10)'}
+      ${1001} | ${'127.0.0.4'} | ${'127.0.0.4 (+1,000)'}
+    `(
+      'with $count managers, ip $ipAddress displays $expected',
+      ({ count, ipAddress, expected }) => {
+        createComponent({
+          runner: {
+            // `first: 1` is requested, `count` varies when there are more managers
+            managers: { count, nodes: [{ ipAddress }] },
+          },
+        });
+
+        expect(findRunnerSummaryField('disk').text()).toMatchInterpolatedText(expected);
+      },
+    );
   });
 
   it('Displays job count', () => {
@@ -146,7 +178,7 @@ describe('RunnerTypeCell', () => {
 
   it('Formats large job counts', () => {
     createComponent({
-      jobCount: 1000,
+      runner: { jobCount: 1000 },
     });
 
     expect(findRunnerSummaryField('pipeline').text()).toContain('1,000');
@@ -154,7 +186,7 @@ describe('RunnerTypeCell', () => {
 
   it('Formats large job counts with a plus symbol', () => {
     createComponent({
-      jobCount: 1001,
+      runner: { jobCount: 1001 },
     });
 
     expect(findRunnerSummaryField('pipeline').text()).toContain('1,000+');
@@ -165,7 +197,7 @@ describe('RunnerTypeCell', () => {
 
     it('Displays created at ...', () => {
       createComponent({
-        createdBy: null,
+        runner: { createdBy: null },
       });
 
       expect(findRunnerSummaryField('calendar').text()).toMatchInterpolatedText(
@@ -177,12 +209,15 @@ describe('RunnerTypeCell', () => {
     });
 
     it('Displays created at ... by ...', () => {
+      createComponent({ mountFn: mountExtended });
+
       expect(findRunnerSummaryField('calendar').text()).toMatchInterpolatedText(
         sprintf(I18N_CREATED_AT_BY_LABEL, {
           timeAgo: findCreatedTime().text(),
           avatar: mockRunner.createdBy.username,
         }),
       );
+
       expect(findCreatedTime().props('time')).toBe(mockRunner.createdAt);
     });
 
@@ -200,7 +235,7 @@ describe('RunnerTypeCell', () => {
 
   it('Displays tag list', () => {
     createComponent({
-      tagList: ['shell', 'linux'],
+      runner: { tagList: ['shell', 'linux'] },
     });
 
     expect(findRunnerTags().props('tagList')).toEqual(['shell', 'linux']);
@@ -209,14 +244,11 @@ describe('RunnerTypeCell', () => {
   it('Displays a custom runner-name slot', () => {
     const slotContent = 'My custom runner name';
 
-    createComponent(
-      {},
-      {
-        slots: {
-          'runner-name': slotContent,
-        },
+    createComponent({
+      slots: {
+        'runner-name': slotContent,
       },
-    );
+    });
 
     expect(wrapper.text()).toContain(slotContent);
   });