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

import { shallowMount } from '@vue/test-utils';
import dropdownQuestion from './dropdown-question';

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

// TODO: Remove the following from dropdown-question.vue -> :class="(errors && errors.length) || hasError ? 'has-error' : ''"
// It is not being used.
describe('dropdownQuestion.vue', () => {
    it('Should render a select input', async () => {
        // Arrange
        const wrapper = shallowMount(dropdownQuestion, {
            propsData: {
                options: {}
            },
            mixins: [mockMixin]
        });

        wrapper.getCmsContent = jest.fn();

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

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

    it("Should render the 'questionText' data value as the label text.", async () => {
    // Arrange
        const wrapper = shallowMount(dropdownQuestion, {
            propsData: {
                options: {}
            },
            mixins: [mockMixin]
        });

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

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

    it("Should render the 'questionText' data value with '⁠' after the first character of each word in the label text when disableAutoFill is true.", async () => {
    // Arrange
        const wrapper = shallowMount(dropdownQuestion, {
            propsData: {
                options: {},
                disableAutoFill: true
            },
            mixins: [mockMixin]
        });

        // Mock CMS content ...
        // Trust me, the below instance of the string "Q⁠uestion Text"
        // actually has the & NoBreak; in it.You just can't see it
        // Don't believe me? Copy and paste it into Google.
        // Then inspect the search field element in Dev Tools,
        // you will see "Q⁠uestion T⁠ext"
        const expectedQuestionText = 'Q⁠uestion T⁠ext';

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

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

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

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

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

    it("Should render the 'questionText' data value as the aria-label attribute.", async () => {
    // Arrange
        const wrapper = shallowMount(dropdownQuestion, {
            propsData: {
                options: {}
            },
            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(dropdownQuestion, {
            propsData: {
                options: {},
                isDisabled: true
            },
            mixins: [mockMixin]
        });

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

        // Assert
        expect(select.attributes('aria-disabled')).toEqual('true');
    });

    it('Should emit new value when modelValue is changed', async () => {
    // Arrange
        const wrapper = shallowMount(dropdownQuestion, {
            propsData: {
                options: {},
                modelValue: 'val'
            },
            mixins: [mockMixin]
        });

        // Act
        await wrapper.find('select').setValue('val2');

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

    it('Should call this.handleChange with new value when selectedOption is changed', async () => {
    // Arrange
        const wrapper = shallowMount(dropdownQuestion, {
            propsData: {
                options: {},
                modelValue: '0'
            },
            mixins: [mockMixin]
        });

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

        // Act
        wrapper.vm.$options.watch.selectedOption.call(wrapper.vm, 1);

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