@eureca/eureca-ui/src/components/Drawer/__tests__/drawer.spec.js

UI component library of Eureca's user and admin apps

import '@testing-library/jest-dom/extend-expect';
import React from 'react';
import { render } from '@testing-library/react';
import 'core-js/features/array/flat-map';

import { DrawerMenu } from '..';
import AdminList from '../preset-types/admin.js';

const topCategories = AdminList.top;
const bottomCategories = AdminList.bottom;
const subCategories = AdminList.top[0].subCategories;
const current = 'opportunities.edit';

const windowSize = { width: 1920, height: 1080 };

function renderDrawerMenu({ current }) {
  return render(
    <DrawerMenu isOpen={true} list={AdminList} current={current} windowSize={windowSize} />
  );
}

describe('Drawer component', () => {
  it('has the correct top categories', async () => {
    const { getByText } = renderDrawerMenu({ current: current });

    topCategories.flatMap(item => {
      const testItem = getByText(item.text);
      expect(testItem).toHaveTextContent(item.text);
    });
  });

  it('has the correct bottom categories', async () => {
    const { getByText } = renderDrawerMenu({ current: current });

    bottomCategories.flatMap(item => {
      const testItem = getByText(item.text);
      expect(testItem).toHaveTextContent(item.text);
    });
  });

  it('expanded item has subcategories', async () => {
    const { getByText } = renderDrawerMenu({ current: current });

    subCategories.flatMap(item => {
      const itemContent = getByText(item.text);
      expect(itemContent).toHaveTextContent(item.text);
    });
  });

  it('highlights only the current item', async () => {
    const { getAllByTestId } = renderDrawerMenu({ current: current });

    const firstItem = getAllByTestId('category-item-icon');

    expect(firstItem[0]).toHaveStyle('color: #2ECAAF');
    expect(firstItem[1]).toHaveStyle('color: #8F9097');
  });
});