/* eslint-env jest */
import { getDamageString } from '@/helpers/damage-helper';
import vehicleLookupAlertTypes from '@/constants/vehicle-lookup-alert-types';
import { RouterLinkStub } from '@vue/test-utils';
import { render } from '@testing-library/vue';
import '@testing-library/jest-dom';
import VinLookupAlertsComponent from '@/layouts/vin-lookup/vin-lookup-alerts/vin-lookup-alerts.vue';

jest.mock('@/helpers/damage-helper');

const mountOptions = {
    global: {
        stubs: {
            RouterLink: RouterLinkStub
        },
        mixins: [
            {
                methods: {
                    getCmsContent: jest.fn(() => ''),
                    getFooterInfoBoxHeight: jest.fn(() => 80),
                    cssClassNameForCmsWidget: jest.fn(() => 'widget-name-mock-class')
                }
            }
        ]
    }
};

describe('vin-lookup-alerts.vue', () => {
    test('VehicleNotFoundAlert is displayed on the screen', () => {
        mountOptions.props = {
            activeAlertType: vehicleLookupAlertTypes.NOT_FOUND
        };
        const { queryByRole } = render(VinLookupAlertsComponent, mountOptions);
        const vehicleNotFoundAlert = queryByRole('alert', { name: 'vehicle-not-found-alert' });
        const vehicleNotMatchedAlert = queryByRole('alert', { name: 'vehicle-not-matched-alert' });

        expect(vehicleNotFoundAlert).toBeVisible();
        expect(vehicleNotMatchedAlert).toEqual(null);
    });

    test('VehicleNotMatchedAlert is displayed on the screen', () => {
        getDamageString.mockImplementation(() => 'Mock Damage String');
        mountOptions.props = {
            activeAlertType: vehicleLookupAlertTypes.NOT_MATCHED
        };
        mountOptions.global.provide = {
            vehicleFromLookup: {}
        };

        const { queryByRole } = render(VinLookupAlertsComponent, mountOptions);
        const vehicleNotFoundAlert = queryByRole('alert', { name: 'vehicle-not-found-alert' });
        const vehicleNotMatchedAlert = queryByRole('alert', { name: 'vehicle-not-matched-alert' });

        expect(vehicleNotFoundAlert).toEqual(null);
        expect(vehicleNotMatchedAlert).toBeVisible();
    });
    test('TwoIdenticalYMMVehicleAlert is displayed on the screen', () => {
        getDamageString.mockImplementation(() => 'Mock Damage String');
        mountOptions.props = {
            activeAlertType: vehicleLookupAlertTypes.TWO_IDENTICAL_YMM_MATCHED
        };
        mountOptions.global.provide = {
            vehicleFromLookup: {}
        };

        const { queryByRole } = render(VinLookupAlertsComponent, mountOptions);
        const twoIdenticalYMMVehicleAlert = queryByRole('alert', { name: 'two-identical-ymm-vehicle-alert' });

        expect(twoIdenticalYMMVehicleAlert).toBeVisible();
    });
    test('NoServiceAlert is displayed on the screen', () => {
        mountOptions.props = {
            activeAlertType: vehicleLookupAlertTypes.NO_SERVICE
        };
        mountOptions.global.provide = {
            vehicleFromLookup: {}
        };

        const { queryByRole } = render(VinLookupAlertsComponent, mountOptions);
        const noServiceAlert = queryByRole('alert', { name: 'no-service-alert' });

        expect(noServiceAlert).toBeVisible();
    });
});
