import { shallowMount } from '@vue/test-utils'; import { getMountOptions } from '@/helpers/unit-test-helper.js'; import { nextTick } from 'vue'; import modalButtonMain from './modal-button-main'; describe('modal-button-main.vue', () => { it('Should return btn-primary class', () => { // Arrange/Act const wrapper = shallowMount(modalButtonMain, setupMocks({ propsData: { isPrimary: true } })); const button = wrapper.find('button'); // Assert expect(button.attributes('class')).toContain('btn-primary'); }); it('Should return aria-disabled state', () => { // Arrange/Act const wrapper = shallowMount(modalButtonMain, setupMocks({ propsData: { isDisabled: true } })); const button = wrapper.find('button'); // Assert expect(button.attributes()['aria-disabled']).toEqual('true'); }); it('Should return loader color', async () => { // Arrange const wrapper = shallowMount(modalButtonMain, setupMocks({ propsData: { loaderColor: 'blue', loaderEnabled: true } })); // Act wrapper.vm.clicked(); await nextTick(); // Assert const loader = wrapper.find('loader-stub'); expect(loader.attributes('class')).toContain('blue'); }); it('Should return loader position', async () => { // Arrange const wrapper = shallowMount(modalButtonMain, setupMocks({ propsData: { loaderPosition: 'right', loaderEnabled: true } })); // Act wrapper.vm.clicked(); await nextTick(); // Assert const loader = wrapper.find('loader-stub'); expect(loader.attributes('class')).toContain('right'); }); it("Should set 'isLoaderDisplayed' to false when calling 'removeLoader'", async () => { // Arrange const wrapper = shallowMount(modalButtonMain, setupMocks({ propsData: { loaderPosition: 'right', loaderEnabled: true } })); wrapper.setData({ isLoaderDisplayed: true }); // Act wrapper.vm.removeLoader(); await nextTick(); // Assert const loader = wrapper.find('loader-stub'); expect(wrapper.vm.isLoaderDisplayed).toBe(false); }); it("Should set 'isLoaderDisplayed' to false when calling 'resetButtonStyle'", async () => { // Arrange const wrapper = shallowMount(modalButtonMain, setupMocks({ propsData: { loaderPosition: 'right', loaderEnabled: true } })); wrapper.setData({ isLoaderDisplayed: true }); // Act wrapper.vm.resetButtonStyle(); await nextTick(); // Assert expect(wrapper.vm.isLoaderDisplayed).toBe(false); }); it("Should emit 'click-event' event when clicking if the button is enabled", async () => { // Arrange const wrapper = shallowMount(modalButtonMain, setupMocks({ propsData: { loaderPosition: 'right', loaderEnabled: true, isDisabled: false } })); const buttonElement = wrapper.find('button'); // Act buttonElement.trigger('click'); await nextTick(); // Assert expect(wrapper.emitted('click-event')).toBeTruthy(); }); it("Should not emit 'click-event' event when clicking if the button is disabled", async () => { // Arrange const wrapper = shallowMount(modalButtonMain, setupMocks({ propsData: { loaderPosition: 'right', loaderEnabled: true, isDisabled: true } })); const buttonElement = wrapper.find('button'); // Act buttonElement.trigger('click'); await nextTick(); // Assert expect(wrapper.emitted('click-event')).toBeFalsy(); }); }); /** * * @param mountOptionsMockData */ function setupMocks(mountOptionsMockData = {}) { const defaultMountOptions = { route: { query: { issPage: 'page-name' } } }; const baseMountOptions = getMountOptions(Object.assign(defaultMountOptions, mountOptionsMockData)); const allMountOptions = Object.assign(defaultMountOptions, baseMountOptions); return allMountOptions; }