// import { expect, test } from '@jest/globals';
import { fireEvent, render, screen } from '@testing-library/react';
import { composeStories } from '@storybook/react';
import '@testing-library/jest-dom';

import * as DemoStories from './demo.stories';



const { Base{{COMPONENT_CLASS_NAME}} } = composeStories(DemoStories);

test('renders {{COMPONENT_CLASS_NAME}}', async () => {
  render(<Base{{COMPONENT_CLASS_NAME}} />);
  expect(await screen.findByText('Details Region template')).toBeVisible();
  expect(await screen.findByText('Work Status')).toBeVisible();
  expect(await screen.findByText('Case ID')).toBeVisible();
  expect(await screen.findByText('Create date/time')).toBeVisible();
  expect(await screen.findByText('Create Operator')).toBeVisible();

  // expect(await screen.findByText('New')).toBeVisible();

  expect(await screen.findByText('M-1002')).toBeVisible();
  expect(await screen.findByText('December 11, 2022 at 8:06:27 PM')).toBeVisible();

  // 2 columns of same
  const SLADeadline = await screen.findAllByText('SLA Deadline');
  expect(SLADeadline).toHaveLength(2);

  const SLAGoal = await screen.findAllByText('SLA Goal');
  expect(SLAGoal).toHaveLength(2);

  const SLAStartTime = await screen.findAllByText('SLA Start Time');
  expect(SLAStartTime).toHaveLength(2);

  const Deadline = await screen.findAllByText('Deadline');
  expect(Deadline).toHaveLength(2);

  const Goal = await screen.findAllByText('Goal');
  expect(Goal).toHaveLength(2);

  const StartTime = await screen.findAllByText('Start Time');
  expect(StartTime).toHaveLength(2);

  const frenchBefore = screen.queryByText('french DigV2');
  expect(frenchBefore).not.toBeInTheDocument();

  // admin button
  const adminButton = screen.getByRole('button');
  fireEvent.click(adminButton);

  const frenchArr = await screen.findAllByText('french DigV2');
  expect(frenchArr[0]).toBeVisible();
  expect(frenchArr[1]).toBeVisible();




});