/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable no-undef */
import React from 'react';
import { render, cleanup } from '@testing-library/react';

import Drawer from '../components/Drawer';

describe('Drawer component', () => {
  afterEach(cleanup);

  test('drawer content', () => {
    const { getByText } = render(<Drawer>content</Drawer>);
    expect(getByText('content').textContent).toBe('content');
  });

  test('close drawer', () => {
    const { getByTestId } = render(<Drawer>content</Drawer>);
    const ele = getByTestId('drawer');
    const style = window.getComputedStyle(ele as HTMLElement) as {
      [key: string]: any;
    };

    expect(style.transform).toBe('translate(0,267px)');
  });

  test('open drawer', () => {
    const { getByTestId } = render(<Drawer open>content</Drawer>);
    const ele = getByTestId('drawer');
    const style = window.getComputedStyle(ele as HTMLElement) as {
      [key: string]: any;
    };

    expect(style.transform).toBe('translate(0,0)');
  });
});
