/**
 * @jest-environment jsdom
 */

import * as React from 'react';
import 'jest-canvas-mock';

import { ErrorBoundary } from '../../src/ts';
import { prettyDOM, render } from '@testing-library/react';

// @ts-ignore
structuredClone = jest.fn(val => {
    return JSON.parse(JSON.stringify(val));
});

const errorMessage = 'There is something wrong with this component!';
const SampleComponent = () => {
    return <div>Happy Component</div>;
};
const BrokenComponent = () => {
    throw new Error(errorMessage);
    return <div>Happy Component</div>;
};

test('Error Boundary: No error', () => {
    const { getByText } = render(
        <ErrorBoundary message="Will this show?">
            <SampleComponent />
        </ErrorBoundary>
    );
    const sampleComponent = getByText('Happy Component');
    // const brokenComponent = getByText(errorMessage)

    expect(sampleComponent).toBeTruthy();
});

test('Error Boundary: With error', () => {
    const { getByText } = render(
        <ErrorBoundary>
            <BrokenComponent />
        </ErrorBoundary>
    );

    const errorBoundaryComponent = getByText('Something broke.');
    expect(errorBoundaryComponent).toBeTruthy();
});

test('Error Boundary: With error - custom message', () => {

    const customErrorMessage = 'This is a custom error message';
    const { getByText } = render(
        <ErrorBoundary message={customErrorMessage}>
            <BrokenComponent />
        </ErrorBoundary>
    );

    const errorBoundaryComponent = getByText(customErrorMessage);
    expect(errorBoundaryComponent).toBeTruthy();
});