import React from 'react';
import { render, cleanup, waitFor } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import { defaultStats } from '../../../constants/statistics-counter.js';
import { generateLabel, getObjectValue } from '../../../helpers/info-grid';

import getPagepageData from '../../../../tests/factories/pages/default.factory';
import StatisticsCounter from '.';

let pageData;
let statistics;
let statsCounter;

beforeEach(() => {
  pageData = getPagepageData();
  statistics = defaultStats[pageData.template];
  statsCounter = pageData?.sections?.header?.modules?.find(
    (modules) => modules?.name === 'statistics_counter'
  );
  statsCounter = {
    ...statsCounter,
    siteSchema: pageData?.siteSchema,
  };
});
describe('Show Stats Counter Component', () => {
  test('render with props', () => {
    const { container } = render(<StatisticsCounter page={pageData} module={statsCounter} />);
    expect(container).toBeTruthy();
    expect(container.querySelectorAll('.gridItem').length).toBe(5);
  });
  test('render correct labels', () => {
    const { container } = render(<StatisticsCounter page={pageData} module={statsCounter} />);
    expect(container).toBeTruthy();
    expect(container.querySelector('.gridItem p')).toHaveTextContent(statistics[0].fieldLabel);
    expect(container.querySelectorAll('.gridItem')[2].querySelector('p')).toHaveTextContent(
      statistics[2].fieldLabel
    );
  });
  test('render correct values', async () => {
    const { container } = render(<StatisticsCounter page={pageData} module={statsCounter} />);

    const item1 = statistics[0];
    const value1 = generateLabel(
      item1.fieldLabelTranslationKey,
      getObjectValue(pageData, item1.fieldValue),
      item1.fieldValueFn
    );

    await waitFor(() => {
      expect(container).toBeTruthy();
      expect(container.querySelectorAll('.gridItem p')[1]).toHaveTextContent(value1);
    });
  });
});
afterEach(() => {
  cleanup();
});
