DigitalConsumer.ISS/src/digital-components/textbox-question/textbox-question.spec.js

import { shallowMount } from '@vue/test-utils';
import textboxQuestion from '@/digital-components/textbox-question/textbox-question.vue';

// Mock CMS content
const questionText = 'Question Text';
const mockMixin = {
    methods: {
        getCmsContent: jest.fn().mockImplementation(() => questionText)
    }
};
const maska = jest.fn();

describe('textboxQuestion.vue', () => {
    it('Should render a text input', async () => {
    // Arrange
        const wrapper = shallowMount(textboxQuestion, {
            global: {
                directives: {
                    maska
                }
            },
            mixins: [mockMixin]
        });

        wrapper.getCmsContent = jest.fn();

        // Act
        const input = wrapper.find('input');

        // Assert
        expect(input.exists()).toBe(true);
    });

    it("Should render the 'questionText' data value as the label text when disableAutoFill is false.", async () => {
    // Arrange
        const wrapper = shallowMount(textboxQuestion, {
            global: {
                directives: {
                    maska
                }
            },
            mixins: [mockMixin]
        });

        // Act
        const label = wrapper.find('label');

        // Assert
        expect(label.text()).toContain(questionText);
    });

    it('Should return input id as the id of the input field', async () => {
    // Arrange
        const wrapper = shallowMount(textboxQuestion, {
            global: {
                directives: {
                    maska
                }
            },
            propsData: {
                inputId: 'input ID'
            },
            mixins: [mockMixin]
        });

        // Act
        const input = wrapper.find('input');

        // Assert
        expect(input.attributes().id).toEqual('input ID');
    });

    it("Should render the 'questionText' data value as the aria-label attribute.", async () => {
        // Arrange
        const wrapper = shallowMount(textboxQuestion, {
            global: {
                directives: {
                    maska
                }
            },
            mixins: [mockMixin]
        });

        // Act
        const label = wrapper.find('label');

        // Assert
        expect(label.attributes('aria-label')).toContain(questionText);
    });

    it('Should return aria-disabled state as disabled', async () => {
    // Arrange
        const wrapper = shallowMount(textboxQuestion, {
            global: {
                directives: {
                    maska
                }
            },
            propsData: {
                isDisabled: true
            },
            mixins: [mockMixin]
        });

        // Assert
        const input = wrapper.find('input');

        // Expect
        expect(input.attributes('aria-disabled')).toEqual('true');
    });

    it('Should emit new value when modelValue is changed', async () => {
    // Act
        const wrapper = shallowMount(textboxQuestion, {
            global: {
                directives: {
                    maska
                }
            },
            propsData: {
                modelValue: 'val'
            },
            mixins: [mockMixin]
        });

        await wrapper.find('input').setValue('val2');

        // Assert
        expect(wrapper.emitted()).toHaveProperty('change');
    });

    // TODO Correct test so it actually calls toHaveBeenCalled -> () <-
    it.skip('Should call this.handleChange with new value when the value is changed and the new value is valid', async () => {
    // Arrange
        const wrapper = shallowMount(textboxQuestion, {
            global: {
                directives: {
                    maska
                }
            },
            propsData: {
                options: {},
                modelValue: 'foo'
            },
            mixins: [mockMixin]
        });

        wrapper.vm.handleChange = jest.fn().mockImplementation(() => {});
        wrapper.vm.validate = jest.fn().mockImplementation(() => true);

        // Act
        wrapper.vm.$options.watch.value.call(wrapper.vm, 'bar');

        // Assert
        expect(wrapper.vm.handleChange).toHaveBeenCalled;
    });
});