Merge branch '347856-runner-assigned-item-refactor' into 'master'

Refactor to separate "assigned item" component

See merge request gitlab-org/gitlab!80175

app/assets/javascripts/runner/components/runner_assigned_item.vue

+<script>
+import { GlAvatar, GlLink } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlAvatar,
+    GlLink,
+  },
+  props: {
+    href: {
+      type: String,
+      required: true,
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+    fullName: {
+      type: String,
+      required: true,
+    },
+    avatarUrl: {
+      type: String,
+      required: false,
+      default: null,
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="gl-display-flex gl-align-items-center gl-py-5">
+    <gl-link :href="href" data-testid="item-avatar" class="gl-text-decoration-none! gl-mr-3">
+      <gl-avatar shape="rect" :entity-name="name" :alt="name" :src="avatarUrl" :size="48" />
+    </gl-link>
+
+    <gl-link :href="href" class="gl-font-lg gl-font-weight-bold gl-text-gray-900!">{{
+      fullName
+    }}</gl-link>
+  </div>
+</template>

app/assets/javascripts/runner/components/runner_detail_groups.vue

 <script>
-import { GlAvatar, GlLink } from '@gitlab/ui';
+import RunnerAssignedItem from './runner_assigned_item.vue';
 
 export default {
   components: {
-    GlAvatar,
-    GlLink,
+    RunnerAssignedItem,
   },
   props: {
     runner: {
@@ -22,27 +21,16 @@ export default {
 
 <template>
   <div class="gl-border-t-gray-100 gl-border-t-1 gl-border-t-solid">
-    <h3 class="gl-font-lg gl-my-5">{{ s__('Runners|Assigned Group') }}</h3>
+    <h3 class="gl-font-lg gl-mt-5 gl-mb-0">{{ s__('Runners|Assigned Group') }}</h3>
     <template v-if="groups.length">
-      <div v-for="group in groups" :key="group.id" class="gl-display-flex gl-align-items-center">
-        <gl-link
-          :href="group.webUrl"
-          data-testid="group-avatar"
-          class="gl-text-decoration-none! gl-mr-3"
-        >
-          <gl-avatar
-            shape="rect"
-            :entity-name="group.name"
-            :src="group.avatarUrl"
-            :alt="group.name"
-            :size="48"
-          />
-        </gl-link>
-
-        <gl-link :href="group.webUrl" class="gl-font-lg gl-font-weight-bold gl-text-gray-900!">{{
-          group.fullName
-        }}</gl-link>
-      </div>
+      <runner-assigned-item
+        v-for="group in groups"
+        :key="group.id"
+        :href="group.webUrl"
+        :name="group.name"
+        :full-name="group.fullName"
+        :avatar-url="group.avatarUrl"
+      />
     </template>
     <span v-else class="gl-text-gray-500">{{ __('None') }}</span>
   </div>

spec/frontend/runner/components/runner_assigned_item_spec.js

+import { GlAvatar } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import RunnerAssignedItem from '~/runner/components/runner_assigned_item.vue';
+
+const mockHref = '/group/project';
+const mockName = 'Project';
+const mockFullName = 'Group / Project';
+const mockAvatarUrl = '/avatar.png';
+
+describe('RunnerAssignedItem', () => {
+  let wrapper;
+
+  const findAvatar = () => wrapper.findByTestId('item-avatar');
+
+  const createComponent = ({ props = {} } = {}) => {
+    wrapper = shallowMountExtended(RunnerAssignedItem, {
+      propsData: {
+        href: mockHref,
+        name: mockName,
+        fullName: mockFullName,
+        avatarUrl: mockAvatarUrl,
+        ...props,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('Shows an avatar', () => {
+    const avatar = findAvatar();
+
+    expect(avatar.attributes('href')).toBe(mockHref);
+    expect(avatar.findComponent(GlAvatar).props()).toMatchObject({
+      alt: mockName,
+      entityName: mockName,
+      src: mockAvatarUrl,
+      shape: 'rect',
+      size: 48,
+    });
+  });
+
+  it('Shows an item link', () => {
+    const groupFullName = wrapper.findByText(mockFullName);
+
+    expect(groupFullName.attributes('href')).toBe(mockHref);
+  });
+});

spec/frontend/runner/components/runner_detail_groups_spec.js

-import { GlAvatar } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 
 import RunnerDetailGroups from '~/runner/components/runner_detail_groups.vue';
+import RunnerAssignedItem from '~/runner/components/runner_assigned_item.vue';
 
 import { runnerData, runnerWithGroupData } from '../mock_data';
 
@@ -13,7 +13,7 @@ describe('RunnerDetailGroups', () => {
   let wrapper;
 
   const findHeading = () => wrapper.find('h3');
-  const findGroupAvatar = () => wrapper.findByTestId('group-avatar');
+  const findRunnerAssignedItems = () => wrapper.findAllComponents(RunnerAssignedItem);
 
   const createComponent = ({ runner = mockGroupRunner, mountFn = shallowMountExtended } = {}) => {
     wrapper = mountFn(RunnerDetailGroups, {
@@ -33,28 +33,23 @@ describe('RunnerDetailGroups', () => {
     expect(findHeading().text()).toBe('Assigned Group');
   });
 
-  describe('When there is group runner', () => {
+  describe('When there is a group runner', () => {
     beforeEach(() => {
       createComponent();
     });
 
-    it('Shows a group avatar', () => {
-      const avatar = findGroupAvatar();
-
-      expect(avatar.attributes('href')).toBe(mockGroup.webUrl);
-      expect(avatar.findComponent(GlAvatar).props()).toMatchObject({
-        alt: mockGroup.name,
-        entityName: mockGroup.name,
-        src: mockGroup.avatarUrl,
-        shape: 'rect',
-        size: 48,
-      });
-    });
+    it('Shows a project', () => {
+      createComponent();
 
-    it('Shows a group link', () => {
-      const groupFullName = wrapper.findByText(mockGroup.fullName);
+      const item = findRunnerAssignedItems().at(0);
+      const { webUrl, name, fullName, avatarUrl } = mockGroup;
 
-      expect(groupFullName.attributes('href')).toBe(mockGroup.webUrl);
+      expect(item.props()).toMatchObject({
+        href: webUrl,
+        name,
+        fullName,
+        avatarUrl,
+      });
     });
   });