import React from 'react';
import { render, cleanup } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';

import { getListCardItem } from '~tests/factories/modules/card.factory';
import Cards from '.';

const cardModule = getListCardItem(3);

describe('cards component', () => {
  test('render cards', () => {
    const { container, getByText } = render(<Cards module={cardModule} />);
    expect(container).toBeTruthy();

    // Default cards
    expect(getByText('Card 3')).toBeTruthy();

    // Grid styles
    const innerDiv = container.querySelector('div');
    expect(innerDiv.getAttribute('style')).toEqual(
      '--cards-mob-column: 2; --cards-tablet-column: 3; --cards-desktop-column: 4;'
    );
  });
});
afterEach(() => {
  cleanup();
});
