import { GlLoadingIcon } from '@gitlab/ui'; import { mount, createLocalVue } from '@vue/test-utils'; import Vuex from 'vuex'; 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 = mount(ErrorMessage, { propsData: { message: { text: 'some text', actionText: 'test action', actionPayload: 'testActionPayload', ...messageProps, }, }, store: fakeStore, localVue, }); }; beforeEach(() => { setErrorMessageMock.mockReset(); }); afterEach(() => { wrapper.destroy(); wrapper = null; }); const findDismissButton = () => wrapper.find('button[aria-label=Dismiss]'); const findActionButton = () => wrapper.find('button.gl-alert-action'); it('renders error message', () => { const text = 'error message'; createComponent({ text }); expect(wrapper.text()).toContain(text); }); it('clears error message on dismiss click', () => { createComponent(); findDismissButton().trigger('click'); expect(setErrorMessageMock).toHaveBeenCalledWith(expect.any(Object), null); }); 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 = findActionButton(); expect(button.exists()).toBe(true); expect(button.text()).toContain(message.actionText); }); it('does not show dismiss button', () => { expect(findDismissButton().exists()).toBe(false); }); it('dispatches action', () => { findActionButton().trigger('click'); expect(actionMock).toHaveBeenCalledWith(message.actionPayload); }); it('does not dispatch action when already loading', () => { findActionButton().trigger('click'); actionMock.mockReset(); return wrapper.vm.$nextTick(() => { findActionButton().trigger('click'); return wrapper.vm.$nextTick().then(() => { expect(actionMock).not.toHaveBeenCalled(); }); }); }); it('shows loading icon when loading', () => { let resolveAction; actionMock.mockImplementation( () => new Promise((resolve) => { resolveAction = resolve; }), ); findActionButton().trigger('click'); return wrapper.vm.$nextTick(() => { expect(wrapper.find(GlLoadingIcon).isVisible()).toBe(true); resolveAction(); }); }); it('hides loading icon when operation finishes', () => { findActionButton().trigger('click'); return actionMock() .then(() => wrapper.vm.$nextTick()) .then(() => { expect(wrapper.find(GlLoadingIcon).isVisible()).toBe(false); }); }); }); });