/* eslint-env jest */
import { render } from '@testing-library/vue';
import userEvent from '@testing-library/user-event';
import '@testing-library/jest-dom';
import issPageValues from '@/router/router-constants/issPage-values';
import queryStrings from '@/constants/query-strings';
import { GaActions } from '@/constants/analytics';
import VinLocationInformationComponent from '@/layouts/vin-lookup/vin-location-information/vin-location-information.vue';

const mockText = Object.freeze({
    HEADER: 'Mock Header',
    BODY: 'Mock Body'
});
const mockRoute = {
    query: {
        issPage: issPageValues.VIN_LOOKUP
    }
};
const mockRouter = {
    navigate: jest.fn()
};

const mountOptions = {
    global: {
        mixins: [
            {
                methods: {
                    getCmsContent: jest.fn((cmsWidgetName, fieldName) => {
                        if (cmsWidgetName === 'WhereCanIFindMyVINToggle') {
                            if (fieldName === 'HeaderText') {
                                return mockText.HEADER;
                            }

                            if (fieldName === 'BodyText') {
                                return mockText.BODY;
                            }
                        }

                        return '';
                    }),
                    pushEventToGA: jest.fn()
                },
                computed: {
                    GaActions() {
                        return GaActions;
                    },
                    queryStrings() {
                        return queryStrings;
                    }
                }
            }
        ],
        mocks: {
            $route: mockRoute,
            $router: mockRouter
        }
    }
};

describe('vin-location-information.vue', () => {
    test('VIN Location Detail is NOT displayed on the screen as a default.', () => {
        const { container } = render(VinLocationInformationComponent, mountOptions);

        const vinLocationDetailSection = container.querySelector('#vin-location-detail-wrapper');

        expect(vinLocationDetailSection).not.toBeVisible();
    });

    test('Toggling VIN Location Detail', async () => {
        const user = userEvent.setup();
        const { container, getByText } = render(VinLocationInformationComponent, mountOptions);
        const toggleLink = getByText(mockText.HEADER);

        await user.click(toggleLink);
        let vinLocationDetailSection = container.querySelector('#vin-location-detail-wrapper');
        expect(vinLocationDetailSection).toBeVisible();

        await user.click(toggleLink);
        vinLocationDetailSection = container.querySelector('#vin-location-detail-wrapper');
        expect(vinLocationDetailSection).not.toBeVisible();
    });
});
