import React from 'react';
import '@testing-library/jest-dom';
import cloneDeep from 'lodash/cloneDeep';
import {
    fireEvent,
    render,
    screen,
} from '../../../utils/test-utils';
import CmsTemplatesComponent from '../index';
import { cmsTemplatesMockData, currentOrgDetailsMockData } from './mockData';

const renderComponent = (props) => render(
  <CmsTemplatesComponent {...props} />
);

describe("Test CmsTemplatesComponent", () => {
  const props = {
    cmsTemplates: cmsTemplatesMockData,
    currentOrgDetails: currentOrgDetailsMockData,
    cmsTemplatesLoader: false,
    handleEdmDefaultTemplateSelection: jest.fn(),
  };
  const { getByText, getAllByText } = screen;

  it("Should show only Start from scratch template", () => {
    renderComponent(props);
    expect(
        getByText(/Start from scratch/i)
        ).toBeInTheDocument();
    expect(
            getByText(/Select/i)
        ).toBeInTheDocument();
    fireEvent.click(getByText(/Select/i));
    expect(props.handleEdmDefaultTemplateSelection).toBeCalledWith(cmsTemplatesMockData[1]._id);
  });

  it("Should show all templates", () => {
    const updatedProps = cloneDeep(props);
    updatedProps.currentOrgDetails.accessibleFeatures.pop();
    renderComponent(updatedProps);
    expect(
        getByText(/1-column_base_template/i)
        ).toBeInTheDocument();

    const selectButtons = getAllByText(/Select/i);
    expect(selectButtons[0]).toBeInTheDocument();
    expect(
        getByText(/Start from scratch/i)
        ).toBeInTheDocument();
    expect(selectButtons[1]).toBeInTheDocument();
    fireEvent.click(selectButtons[0]);
    expect(props.handleEdmDefaultTemplateSelection).toBeCalledWith(cmsTemplatesMockData[0]._id);
  });
});
