1 files changed, 26 insertions, 25 deletions

diff --git a/spec/frontend/design_management/components/list/item_spec.js b/spec/frontend/design_management/components/list/item_spec.js
index 705b532454f..d1c90bd57b0 100644
--- a/spec/frontend/design_management/components/list/item_spec.js
+++ b/spec/frontend/design_management/components/list/item_spec.js
@@ -1,6 +1,7 @@
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import { GlIcon, GlLoadingIcon, GlIntersectionObserver } from '@gitlab/ui';
 import VueRouter from 'vue-router';
+import Icon from '~/vue_shared/components/icon.vue';
 import Item from '~/design_management/components/list/item.vue';
 
 const localVue = createLocalVue();
@@ -18,6 +19,10 @@ const DESIGN_VERSION_EVENT = {
 describe('Design management list item component', () => {
   let wrapper;
 
+  const findDesignEvent = () => wrapper.find('[data-testid="designEvent"]');
+  const findEventIcon = () => findDesignEvent().find(Icon);
+  const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
+
   function createComponent({
     notesCount = 0,
     event = DESIGN_VERSION_EVENT.NO_CHANGE,
@@ -134,35 +139,31 @@ describe('Design management list item component', () => {
     });
   });
 
-  describe('with no notes', () => {
-    it('renders item with no status icon for none event', () => {
-      createComponent();
-
-      expect(wrapper.element).toMatchSnapshot();
-    });
-
-    it('renders item with correct status icon for modification event', () => {
-      createComponent({ event: DESIGN_VERSION_EVENT.MODIFICATION });
-
-      expect(wrapper.element).toMatchSnapshot();
-    });
-
-    it('renders item with correct status icon for deletion event', () => {
-      createComponent({ event: DESIGN_VERSION_EVENT.DELETION });
+  it('renders loading spinner when isUploading is true', () => {
+    createComponent({ isUploading: true });
 
-      expect(wrapper.element).toMatchSnapshot();
-    });
+    expect(findLoadingIcon().exists()).toBe(true);
+  });
 
-    it('renders item with correct status icon for creation event', () => {
-      createComponent({ event: DESIGN_VERSION_EVENT.CREATION });
+  it('renders item with no status icon for none event', () => {
+    createComponent();
 
-      expect(wrapper.element).toMatchSnapshot();
-    });
-
-    it('renders loading spinner when isUploading is true', () => {
-      createComponent({ isUploading: true });
+    expect(findDesignEvent().exists()).toBe(false);
+  });
 
-      expect(wrapper.element).toMatchSnapshot();
+  describe('with associated event', () => {
+    it.each`
+      event                                | icon                     | className
+      ${DESIGN_VERSION_EVENT.MODIFICATION} | ${'file-modified-solid'} | ${'text-primary-500'}
+      ${DESIGN_VERSION_EVENT.DELETION}     | ${'file-deletion-solid'} | ${'text-danger-500'}
+      ${DESIGN_VERSION_EVENT.CREATION}     | ${'file-addition-solid'} | ${'text-success-500'}
+    `('renders item with correct status icon for $event event', ({ event, icon, className }) => {
+      createComponent({ event });
+      const eventIcon = findEventIcon();
+
+      expect(eventIcon.exists()).toBe(true);
+      expect(eventIcon.props('name')).toBe(icon);
+      expect(eventIcon.classes()).toContain(className);
     });
   });
 });