import { mount, enableAutoUnmount, flushPromises } from '@vue/test-utils';
import vehicleBanner from './vehicleBanner';
import { nextTick } from 'vue';
import { getMountOptions } from "@/helpers/unit-test-helper.js"

describe('vehicleBanner', () => {
    // Arrange
    const mountOptions = getMountOptions({
        actionList: [
            {
                actionName: "getMockPageData",
                data: {
                    imgData: ""
                }
            }
        ]
    });
    enableAutoUnmount(afterEach)

    // Act
    const wrapper = mount(vehicleBanner, {
        ...mountOptions
    });

    // Assert
    it('renders the blurrycar image when no vehicleImageSrc is found', () => {
        expect(wrapper.find('img').attributes('class')).toContain('blurrycar');
    });

    it('renders the blurrycar image when isBlurred is true', async () => {
        await wrapper.setData("test string");
        await wrapper.setProps({ isBlurred: true });

        // timeout needed for image call to have time to return with a vehicleSrcImage
        setTimeout(() => {
            expect(wrapper.find('img').attributes('class')).toContain('blurrycar');
        }, 500);
    });

    it('renders an actual car image when vehicleImageSrc is found and isBlurred is false', async () => {
        await wrapper.setData("test string");
        await wrapper.setProps({ isBlurred: false});
        await flushPromises(); // including this doesn't appear to matter
        await nextTick(); // including this doesn't appear to matter

        // timeout needed for image call to have time to return with a vehicleSrcImage
        setTimeout(() => {
            expect(wrapper.find('img').attributes('class')).not.toContain('blurrycar');
        }, 500);

    });
});