DigitalConsumer.ISS/src/ux-components/modal-button-main/modal-button-main.spec.js

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;
}