import React, { useState, useEffect, useContext } from 'react';
import { render, act, screen, waitFor, fireEvent } from '@testing-library/react';

import { SettingsContext, SettingsContextProvider } from 'context/SettingsContext';

function ViewportView() {
  const [renderCount, setRenderCount] = useState(0);
  const settings = useContext(SettingsContext);

  useEffect(() => {
    setRenderCount(renderCount + 1);
  }, [settings.state]);

  return (
    <div>
      <span data-testid="count">{renderCount}</span>
      <span data-testid="display">{settings.state.display}</span>
      <span data-testid="width">{settings.state.width}</span>
      <span data-testid="height">{settings.state.height}</span>
    </div>
  );
}

function ViewportTestApp() {
  return (
    <SettingsContextProvider>
      <ViewportView />
    </SettingsContextProvider>
  );
}

test('display size', async () => {
  render(<ViewportTestApp />);

  await waitFor(async () => {
    expect(screen.getByTestId('display').textContent).toBe('large');
    expect(screen.getByTestId('width').textContent).toBe('1024');
    expect(screen.getByTestId('height').textContent).toBe('768');
  });
});