import '@testing-library/jest-dom';
import { render } from '@testing-library/react';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore because Jest mistakenly complains that "'shadow-dom-testing-library' cannot be imported using this construct".
import { screen } from 'shadow-dom-testing-library';

import { MockComponent, registerComponent } from '../__mocks__';

describe('[web-components] register', () => {
    const componentName = 'mock-legacy-root-app';

    beforeAll(() => {
        registerComponent(MockComponent, componentName, { legacyRoot: true });
    });

    const subject = () => {
        jest.spyOn(console, 'error').mockImplementation(jest.fn()); // suppress "ReactDOM.render deprecated" error
        const Component: any = componentName;
        return render(<Component />);
    };

    describe('when the web component data attribute is changed', () => {
        jest.retryTimes(3, { logErrorsBeforeRetry: true });

        const setup = () => {
            subject();

            const webComponent = document.getElementsByTagName(componentName);
            webComponent[0]?.setAttribute('data-mfe-data', JSON.stringify({ string: 'baz' }));
        };

        test('useMFEDataContext provides updated data', async () => {
            setup();

            expect(await screen.findByShadowText(`Data: string, Value: "baz"`)).toBeInTheDocument();
        });
    });
});