svg-layout-designer-react/src/Components/Sidebar/Sidebar.test.tsx

import * as React from 'react';
import { describe, it, expect, vi } from 'vitest';
import { fireEvent, render, screen } from '../../utils/test-utils';
import { Sidebar } from './Sidebar';

describe.concurrent('Sidebar', () => {
  it('Start default', () => {
    render(
      <Sidebar
        componentOptions={[]}
        isOpen={true}
        buttonOnClick={() => {}}
      />
    );
    const stuff = screen.queryByText(/stuff/i);

    expect(screen.getByText(/Components/i).classList.contains('left-0')).toBeDefined();
    expect(stuff).toBeNull();
  });

  it('Start close', () => {
    render(<Sidebar
      componentOptions={[]}
      isOpen={false}
      buttonOnClick={() => {}}
    />);

    const stuff = screen.queryByText(/stuff/i);
    expect(screen.getByText(/Components/i).classList.contains('-left-64')).toBeDefined();
    expect(stuff).toBeNull();
  });

  it('With stuff', () => {
    const Type = 'stuff';
    const handleButtonClick = vi.fn();
    render(<Sidebar
      componentOptions={[
        {
          Type,
          Width: 30,
          Height: 30,
          Style: {}
        }
      ]}
      isOpen={true}
      buttonOnClick={handleButtonClick}
    />);
    const stuff = screen.getByText(/stuff/i);

    expect(stuff).toBeDefined();
    fireEvent.click(stuff);
    expect(handleButtonClick).toHaveBeenCalledTimes(1);
  });
});