Merge branch 'fe-fix-flaky-issue-card-spec' into 'master'

Fix flaky issue card spec

Closes #11932

See merge request gitlab-org/gitlab!15458

ee/spec/frontend/boards/issue_card_spec.js

+import { mount } from '@vue/test-utils';
+import ListLabel from '~/boards/models/label';
+import IssueCardInner from '~/boards/components/issue_card_inner.vue';
+import IssueCardWeight from 'ee/boards/components/issue_card_weight.vue';
+import ListIssueEE from 'ee/boards/models/issue';
+
+describe('Issue card component', () => {
+  let wrapper;
+  let issue;
+  let list;
+
+  const createComponent = (props = {}) => {
+    wrapper = mount(IssueCardInner, {
+      propsData: {
+        list,
+        issue,
+        groupId: null,
+        rootPath: '/',
+        issueLinkBase: '/test',
+        ...props,
+      },
+      sync: false,
+    });
+  };
+
+  beforeEach(() => {
+    list = {
+      id: 300,
+      position: 0,
+      title: 'Test',
+      list_type: 'label',
+      label: {
+        id: 5000,
+        title: 'Testing',
+        color: 'red',
+        description: 'testing;',
+        textColor: 'white',
+      },
+    };
+
+    issue = new ListIssueEE({
+      title: 'Testing',
+      id: 1,
+      iid: 1,
+      confidential: false,
+      labels: [list.label],
+      assignees: [],
+      reference_path: '#1',
+      real_path: '/test/1',
+      weight: 1,
+    });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('labels', () => {
+    beforeEach(() => {
+      const label1 = new ListLabel({
+        id: 3,
+        title: 'testing 123',
+        color: 'blue',
+        text_color: 'white',
+        description: 'test',
+      });
+
+      issue.addLabel(label1);
+    });
+
+    it.each`
+      type              | title              | desc
+      ${'GroupLabel'}   | ${'Group label'}   | ${'shows group labels on group boards'}
+      ${'ProjectLabel'} | ${'Project label'} | ${'shows project labels on group boards'}
+    `('$desc', ({ type, title }) => {
+      issue.addLabel(
+        new ListLabel({
+          id: 9001,
+          type,
+          title,
+        }),
+      );
+
+      createComponent({ groupId: 1 });
+
+      expect(wrapper.findAll('.badge').length).toBe(3);
+      expect(wrapper.text()).toContain(title);
+    });
+  });
+
+  describe('weight', () => {
+    it('shows weight component', () => {
+      createComponent();
+
+      expect(wrapper.find(IssueCardWeight).exists()).toBe(true);
+    });
+  });
+});

ee/spec/javascripts/boards/issue_card_spec.js

-/* global ListLabel */
-
-import Vue from 'vue';
-import _ from 'underscore';
-
-import '~/boards/models/label';
-import '~/boards/models/assignee';
-import '~/boards/models/list';
-import IssueCardInner from '~/boards/components/issue_card_inner.vue';
-import { listObj } from 'spec/boards/mock_data';
-import ListIssueEE from 'ee/boards/models/issue';
-
-describe('Issue card component', () => {
-  const label1 = new ListLabel({
-    id: 3,
-    title: 'testing 123',
-    color: 'blue',
-    text_color: 'white',
-    description: 'test',
-  });
-  let component;
-  let issue;
-  let list;
-
-  beforeEach(() => {
-    setFixtures('<div class="test-container"></div>');
-
-    list = listObj;
-    issue = new ListIssueEE({
-      title: 'Testing',
-      id: 1,
-      iid: 1,
-      confidential: false,
-      labels: [list.label],
-      assignees: [],
-      reference_path: '#1',
-      real_path: '/test/1',
-      weight: 1,
-    });
-
-    component = new Vue({
-      el: document.querySelector('.test-container'),
-      components: {
-        'issue-card': IssueCardInner,
-      },
-      data() {
-        return {
-          list,
-          issue,
-          issueLinkBase: '/test',
-          rootPath: '/',
-          groupId: null,
-        };
-      },
-      template: `
-        <issue-card
-          :issue="issue"
-          :list="list"
-          :group-id="groupId"
-          :issue-link-base="issueLinkBase"
-          :root-path="rootPath"></issue-card>
-      `,
-    });
-  });
-
-  describe('labels', () => {
-    beforeEach(done => {
-      component.issue.addLabel(label1);
-
-      Vue.nextTick(() => done());
-    });
-
-    it('shows group labels on group boards', done => {
-      component.issue.addLabel(
-        new ListLabel({
-          id: _.random(10000),
-          title: 'Group label',
-          type: 'GroupLabel',
-        }),
-      );
-      component.groupId = 1;
-
-      Vue.nextTick()
-        .then(() => {
-          expect(component.$el.querySelectorAll('.badge').length).toBe(3);
-
-          expect(component.$el.textContent).toContain('Group label');
-
-          done();
-        })
-        .catch(done.fail);
-    });
-
-    it('shows project labels on group boards', done => {
-      component.issue.addLabel(
-        new ListLabel({
-          id: 123,
-          title: 'Project label',
-          type: 'ProjectLabel',
-        }),
-      );
-      component.groupId = 1;
-
-      Vue.nextTick()
-        .then(() => {
-          expect(component.$el.querySelectorAll('.badge').length).toBe(3);
-
-          expect(component.$el.textContent).toContain('Project label');
-
-          done();
-        })
-        .catch(done.fail);
-    });
-  });
-
-  describe('weights', () => {
-    it('shows weight component', () => {
-      expect(component.$el.querySelector('.board-card-weight')).not.toBeNull();
-    });
-  });
-});

jest.config.js

@@ -31,6 +31,9 @@ module.exports = {
   moduleNameMapper: {
     '^~(/.*)$': '<rootDir>/app/assets/javascripts$1',
     '^ee(/.*)$': '<rootDir>/ee/app/assets/javascripts$1',
+    '^ee_component(/.*)$': IS_EE
+      ? '<rootDir>/ee/app/assets/javascripts$1'
+      : '<rootDir>/app/assets/javascripts/vue_shared/components/empty_component.js',
     '^ee_else_ce(/.*)$': IS_EE
       ? '<rootDir>/ee/app/assets/javascripts$1'
       : '<rootDir>/app/assets/javascripts$1',