/* eslint-env jest */
import { render } from '@testing-library/vue';
import userEvent from '@testing-library/user-event';
import issPageValues from '@/router/router-constants/issPage-values';
import queryStrings from '@/constants/query-strings';
import { GaActions } from '@/constants/analytics';
import tpaRecalToggle from '@/layouts/provider-preference/tpa-recal-modal/tpa-recal-toggle/tpa-recal-toggle.vue';

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

const mountOptions = {
    global: {
        propsData: {
            cmsWidgetName: 'MockWidgetName'
        },
        mixins: [
            {
                methods: {
                    getCmsContent: jest.fn((cmsWidgetName, fieldName) => {
                        if (cmsWidgetName === 'MockWidgetName') {
                            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.skip('more details section', () => {
    test('should NOT be displayed on the screen as a default.', () => {
        const { container } = render(tpaRecalToggle, mountOptions);

        const moreDetailsSection = container.querySelector('#tpa-recal-detail-wrapper');

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

    test('should toggle when arrow clicked', async () => {
        const user = userEvent.setup();
        const { container } = render(tpaRecalToggle, mountOptions);
        const toggleLink = container.querySelector('#moreDetails');

        await user.click(toggleLink);
        let moreDetailsSection = container.querySelector('#tpa-recal-detail-wrapper');
        expect(moreDetailsSection).toBeVisible();

        await user.click(toggleLink);
        moreDetailsSection = container.querySelector('#tpa-recal-detail-wrapper');
        expect(moreDetailsSection).not.toBeVisible();
    });
});
