import React from 'react';
import { cleanup } from '@testing-library/react';
import { render } from '../../utils/theme-render-wrapper';
import { ThemeProvider } from '../@styles/theme-provider';
import type { Theme } from '../@styles/theme-provider';
import { StyledEngineProvider } from '@mui/material/styles';
import { TextWithBorder } from './text-with-border';

declare module '@mui/styles/defaultTheme' {
  // eslint-disable-next-line @typescript-eslint/no-empty-interface
  interface DefaultTheme extends Theme {}
}

afterEach(cleanup);

const content = 'content';

const Wrapper = () => (
  <StyledEngineProvider injectFirst>
    <ThemeProvider>
      <TextWithBorder content={content} color="#FFFFFF" />
    </ThemeProvider>
  </StyledEngineProvider>
);

it(`Should render HealthStatus`, () => {
  const { queryByText } = render(<Wrapper />);
  const elm = queryByText(content);
  expect(elm).toBeTruthy();
});