1 files changed, 31 insertions, 21 deletions
diff --git a/spec/frontend/design_management/components/list/item_spec.js b/spec/frontend/design_management/components/list/item_spec.js
index 55c6ecbc26b..caf0f8bb5bc 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 { createLocalVue, shallowMount } from '@vue/test-utils';
 import VueRouter from 'vue-router';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import Item from '~/design_management/components/list/item.vue';
 
 const localVue = createLocalVue();
@@ -17,8 +18,11 @@ const DESIGN_VERSION_EVENT = {
 
 describe('Design management list item component', () => {
   let wrapper;
+  const imgId = 1;
+  const imgFilename = 'test';
 
-  const findDesignEvent = () => wrapper.find('[data-testid="designEvent"]');
+  const findDesignEvent = () => wrapper.findByTestId('design-event');
+  const findImgFilename = (id = imgId) => wrapper.findByTestId(`design-img-filename-${id}`);
   const findEventIcon = () => findDesignEvent().find(GlIcon);
   const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
 
@@ -28,25 +32,27 @@ describe('Design management list item component', () => {
     isUploading = false,
     imageLoading = false,
   } = {}) {
-    wrapper = shallowMount(Item, {
-      localVue,
-      router,
-      propsData: {
-        id: 1,
-        filename: 'test',
-        image: 'http://via.placeholder.com/300',
-        isUploading,
-        event,
-        notesCount,
-        updatedAt: '01-01-2019',
-      },
-      data() {
-        return {
-          imageLoading,
-        };
-      },
-      stubs: ['router-link'],
-    });
+    wrapper = extendedWrapper(
+      shallowMount(Item, {
+        localVue,
+        router,
+        propsData: {
+          id: imgId,
+          filename: imgFilename,
+          image: 'http://via.placeholder.com/300',
+          isUploading,
+          event,
+          notesCount,
+          updatedAt: '01-01-2019',
+        },
+        data() {
+          return {
+            imageLoading,
+          };
+        },
+        stubs: ['router-link'],
+      }),
+    );
   }
 
   afterEach(() => {
@@ -75,6 +81,10 @@ describe('Design management list item component', () => {
       return wrapper.vm.$nextTick();
     });
 
+    it('renders a tooltip', () => {
+      expect(findImgFilename().attributes('title')).toEqual(imgFilename);
+    });
+
     describe('before image is loaded', () => {
       it('renders loading spinner', () => {
         expect(wrapper.find(GlLoadingIcon)).toExist();