Refactor error_message_spec to Jest

spec/frontend/ide/components/error_message_spec.js

+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
+import { GlLoadingIcon } from '@gitlab/ui';
+import ErrorMessage from '~/ide/components/error_message.vue';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('IDE error message component', () => {
+  let wrapper;
+
+  const setErrorMessageMock = jest.fn();
+  const createComponent = messageProps => {
+    const fakeStore = new Vuex.Store({
+      actions: { setErrorMessage: setErrorMessageMock },
+    });
+
+    wrapper = shallowMount(ErrorMessage, {
+      propsData: {
+        message: {
+          text: 'some text',
+          actionText: 'test action',
+          actionPayload: 'testActionPayload',
+          ...messageProps,
+        },
+      },
+      store: fakeStore,
+      localVue,
+      sync: false,
+    });
+  };
+
+  beforeEach(() => {
+    setErrorMessageMock.mockReset();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  it('renders error message', () => {
+    const text = 'error message';
+    createComponent({ text });
+    expect(wrapper.text()).toContain(text);
+  });
+
+  it('clears error message on click', () => {
+    createComponent();
+    wrapper.trigger('click');
+
+    expect(setErrorMessageMock).toHaveBeenCalledWith(expect.any(Object), null, undefined);
+  });
+
+  describe('with action', () => {
+    let actionMock;
+
+    const message = {
+      actionText: 'test action',
+      actionPayload: 'testActionPayload',
+    };
+
+    beforeEach(() => {
+      actionMock = jest.fn().mockResolvedValue();
+      createComponent({
+        ...message,
+        action: actionMock,
+      });
+    });
+
+    it('renders action button', () => {
+      const button = wrapper.find('button');
+
+      expect(button.exists()).toBe(true);
+      expect(button.text()).toContain(message.actionText);
+    });
+
+    it('does not clear error message on click', () => {
+      wrapper.trigger('click');
+
+      expect(setErrorMessageMock).not.toHaveBeenCalled();
+    });
+
+    it('dispatches action', () => {
+      wrapper.find('button').trigger('click');
+
+      expect(actionMock).toHaveBeenCalledWith(message.actionPayload);
+    });
+
+    it('does not dispatch action when already loading', () => {
+      wrapper.find('button').trigger('click');
+      actionMock.mockReset();
+      wrapper.find('button').trigger('click');
+      expect(actionMock).not.toHaveBeenCalled();
+    });
+
+    it('shows loading icon when loading', () => {
+      let resolve;
+      actionMock.mockImplementation(
+        () =>
+          new Promise(ok => {
+            resolve = ok;
+          }),
+      );
+      wrapper.find('button').trigger('click');
+
+      return wrapper.vm.$nextTick(() => {
+        expect(wrapper.find(GlLoadingIcon).isVisible()).toBe(true);
+        resolve();
+      });
+    });
+
+    it('hides loading icon when operation finishes', () => {
+      wrapper.find('button').trigger('click');
+      return actionMock()
+        .then(() => wrapper.vm.$nextTick())
+        .then(() => {
+          expect(wrapper.find(GlLoadingIcon).isVisible()).toBe(false);
+        });
+    });
+  });
+});

spec/javascripts/ide/components/error_message_spec.js

-import Vue from 'vue';
-import store from '~/ide/stores';
-import ErrorMessage from '~/ide/components/error_message.vue';
-import { createComponentWithStore } from '../../helpers/vue_mount_component_helper';
-import { resetStore } from '../helpers';
-
-describe('IDE error message component', () => {
-  const Component = Vue.extend(ErrorMessage);
-  let vm;
-
-  beforeEach(() => {
-    vm = createComponentWithStore(Component, store, {
-      message: {
-        text: 'error message',
-        action: null,
-        actionText: null,
-      },
-    }).$mount();
-  });
-
-  afterEach(() => {
-    vm.$destroy();
-    resetStore(vm.$store);
-  });
-
-  it('renders error message', () => {
-    expect(vm.$el.textContent).toContain('error message');
-  });
-
-  it('clears error message on click', () => {
-    spyOn(vm, 'setErrorMessage');
-
-    vm.$el.click();
-
-    expect(vm.setErrorMessage).toHaveBeenCalledWith(null);
-  });
-
-  describe('with action', () => {
-    let actionSpy;
-
-    beforeEach(done => {
-      actionSpy = jasmine.createSpy('action').and.returnValue(Promise.resolve());
-
-      vm.message.action = actionSpy;
-      vm.message.actionText = 'test action';
-      vm.message.actionPayload = 'testActionPayload';
-
-      vm.$nextTick(done);
-    });
-
-    it('renders action button', () => {
-      expect(vm.$el.querySelector('.flash-action')).not.toBe(null);
-      expect(vm.$el.textContent).toContain('test action');
-    });
-
-    it('does not clear error message on click', () => {
-      spyOn(vm, 'setErrorMessage');
-
-      vm.$el.click();
-
-      expect(vm.setErrorMessage).not.toHaveBeenCalled();
-    });
-
-    it('dispatches action', done => {
-      vm.$el.querySelector('.flash-action').click();
-
-      vm.$nextTick(() => {
-        expect(actionSpy).toHaveBeenCalledWith('testActionPayload');
-
-        done();
-      });
-    });
-
-    it('does not dispatch action when already loading', () => {
-      vm.isLoading = true;
-
-      vm.$el.querySelector('.flash-action').click();
-
-      expect(actionSpy).not.toHaveBeenCalledWith();
-    });
-
-    it('resets isLoading after click', done => {
-      vm.$el.querySelector('.flash-action').click();
-
-      expect(vm.isLoading).toBe(true);
-
-      setTimeout(() => {
-        expect(vm.isLoading).toBe(false);
-
-        done();
-      });
-    });
-
-    it('shows loading icon when isLoading is true', done => {
-      expect(vm.$el.querySelector('.loading-container').style.display).not.toBe('');
-
-      vm.isLoading = true;
-
-      vm.$nextTick(() => {
-        expect(vm.$el.querySelector('.loading-container').style.display).toBe('');
-
-        done();
-      });
-    });
-  });
-});