1 files changed, 76 insertions, 19 deletions

diff --git a/spec/frontend/badges/components/badge_list_spec.js b/spec/frontend/badges/components/badge_list_spec.js
index 374b7b50af4..612e9bdc41f 100644
--- a/spec/frontend/badges/components/badge_list_spec.js
+++ b/spec/frontend/badges/components/badge_list_spec.js
@@ -1,14 +1,13 @@
+import { GlTable, GlButton } from '@gitlab/ui';
 import Vue from 'vue';
+// eslint-disable-next-line no-restricted-imports
 import Vuex from 'vuex';
-import { mount } from '@vue/test-utils';
-
-import BadgeList from '~/badges/components/badge_list.vue';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
 import { GROUP_BADGE, PROJECT_BADGE } from '~/badges/constants';
-
 import createState from '~/badges/store/state';
 import mutations from '~/badges/store/mutations';
 import actions from '~/badges/store/actions';
-
+import BadgeList from '~/badges/components/badge_list.vue';
 import { createDummyBadge } from '../dummy_badge';
 
 Vue.use(Vuex);
@@ -21,9 +20,16 @@ const badges = Array.from({ length: numberOfDummyBadges }).map((_, idx) => ({
 
 describe('BadgeList component', () => {
   let wrapper;
+  let mockedActions;
+
+  const findTable = () => wrapper.findComponent(GlTable);
+  const findTableRow = (pos) => findTable().find('tbody').findAll('tr').at(pos);
+  const findButtons = () => wrapper.findByTestId('badge-actions').findAllComponents(GlButton);
+  const findEditButton = () => wrapper.findByTestId('edit-badge-button');
+  const findDeleteButton = () => wrapper.findByTestId('delete-badge');
 
   const createComponent = (customState) => {
-    const mockedActions = Object.fromEntries(Object.keys(actions).map((name) => [name, jest.fn()]));
+    mockedActions = Object.fromEntries(Object.keys(actions).map((name) => [name, jest.fn()]));
 
     const store = new Vuex.Store({
       state: {
@@ -35,28 +41,23 @@ describe('BadgeList component', () => {
       actions: mockedActions,
     });
 
-    wrapper = mount(BadgeList, { store });
+    wrapper = mountExtended(BadgeList, {
+      store,
+      stubs: {
+        GlTable,
+        GlButton,
+      },
+    });
   };
 
   describe('for project badges', () => {
-    it('renders a header with the badge count', () => {
-      createComponent({
-        kind: PROJECT_BADGE,
-        badges,
-      });
-
-      const header = wrapper.find('.card-header');
-
-      expect(header.text()).toMatchInterpolatedText('Your badges 3');
-    });
-
     it('renders a row for each badge', () => {
       createComponent({
         kind: PROJECT_BADGE,
         badges,
       });
 
-      const rows = wrapper.findAll('.gl-responsive-table-row');
+      const rows = findTable().find('tbody').findAll('tr');
 
       expect(rows).toHaveLength(numberOfDummyBadges);
     });
@@ -89,4 +90,60 @@ describe('BadgeList component', () => {
       expect(wrapper.text()).toMatch('This group has no badges');
     });
   });
+
+  describe('BadgeList item', () => {
+    beforeEach(() => {
+      createComponent({
+        kind: PROJECT_BADGE,
+        badges,
+      });
+    });
+
+    it('renders the badge', () => {
+      const badgeImage = wrapper.find('.project-badge');
+
+      expect(badgeImage.exists()).toBe(true);
+      expect(badgeImage.attributes('src')).toBe(badges[0].renderedImageUrl);
+    });
+
+    it('renders the badge name', () => {
+      const badgeCell = findTableRow(0).findAll('td').at(0);
+
+      expect(badgeCell.text()).toMatch(badges[0].name);
+    });
+
+    it('renders the badge link', () => {
+      expect(wrapper.text()).toMatch(badges[0].linkUrl);
+    });
+
+    it('renders the badge kind', () => {
+      expect(wrapper.text()).toMatch('Project Badge');
+    });
+
+    it('shows edit and delete buttons', () => {
+      expect(findButtons()).toHaveLength(2);
+
+      const editButton = findEditButton();
+
+      expect(editButton.isVisible()).toBe(true);
+      expect(editButton.element).toHaveSpriteIcon('pencil');
+
+      const deleteButton = findDeleteButton();
+
+      expect(deleteButton.isVisible()).toBe(true);
+      expect(deleteButton.element).toHaveSpriteIcon('remove');
+    });
+
+    it('calls editBadge when clicking then edit button', () => {
+      findEditButton().trigger('click');
+
+      expect(mockedActions.editBadge).toHaveBeenCalled();
+    });
+
+    it('calls updateBadgeInModal and shows modal when clicking then delete button', () => {
+      findDeleteButton().trigger('click');
+
+      expect(mockedActions.updateBadgeInModal).toHaveBeenCalled();
+    });
+  });
 });