import { render, screen } from '@testing-library/react';
import { JsonForms } from '@jsonforms/react';
import { materialCells, materialRenderers } from '@jsonforms/material-renderers';
import { vanillaCells, vanillaRenderers } from '@jsonforms/vanilla-renderers';
import { Box, Typography } from '@material-ui/core';

const schema = {
  type: 'object',
  properties: {
    name: {
      type: 'string',
    },
  },
};

const uischemaVanilla = {
  type: 'HorizontalLayout',
  elements: [
    {
      type: 'Control',
      label: 'Vanilla',
      scope: '#/properties/name',
    },
  ],
};

const uischemamaterial = {
  type: 'HorizontalLayout',
  elements: [
    {
      type: 'Control',
      label: 'Material',
      scope: '#/properties/name',
    },
  ],
};

const data = {
  name: 'John Doe',
};

const Component = () => (
  <div className='App'>
    <Box>
      <Typography>Typography</Typography>
    </Box>
    <JsonForms
      schema={schema}
      uischema={uischemaVanilla}
      data={data}
      renderers={vanillaRenderers}
      cells={vanillaCells}
    />
    <JsonForms
      schema={schema}
      uischema={uischemamaterial}
      data={data}
      renderers={materialRenderers}
      cells={materialCells}
    />
  </div>
);

test('render jsonforms', () => {
  render(<Component />).debug();
  expect(screen.getByText(/vanilla/i)).toBeInTheDocument();
  expect(screen.getByText(/material/i)).toBeInTheDocument();
});