import * as React from "react";
import { screen } from "@testing-library/react";
import { PaginationItemRangeIndicator as ItemRangeIndicator } from "./PaginationItemRangeIndicator";
import { renderWithContext } from "./paginationTestsHelpers";

const props = {
  css: {},
  page: 1,
  endlessPagination: false,
  showTotal: true,
  items: 100,
  totalPages: 10,
  showItems: true,
};

describe("PaginationItemRangeIndicator", () => {
  test("renders visibly into the document", () => {
    renderWithContext(
      <ItemRangeIndicator items={props.items} showTotal={props.showTotal} />,
      { ...props }
    );

    expect(screen.getByText("Showing 1 - 10 of 100 items")).toBeVisible();
  });

  test("showTotal is false", () => {
    renderWithContext(
      <ItemRangeIndicator items={props.items} showTotal={false} />,
      { ...props }
    );

    expect(screen.getByText("Showing 1 - 10 items")).toBeVisible();
  });

  test("endlessPagination is true", () => {
    renderWithContext(
      <ItemRangeIndicator items={props.items} showTotal={props.showTotal} />,
      { ...props, endlessPagination: true }
    );

    expect(
      screen.queryByText("Showing 1 - 10 of 100 items")
    ).not.toBeInTheDocument();
  });

  test("showItems is false", () => {
    renderWithContext(
      <ItemRangeIndicator items={props.items} showTotal={props.showTotal} />,
      { ...props, showItems: false }
    );

    expect(
      screen.queryByText("Showing 1 - 10 of 100 items")
    ).not.toBeInTheDocument();
  });

  test("fewer than 10 items", () => {
    renderWithContext(
      <ItemRangeIndicator items={9} showTotal={props.showTotal} />,
      { ...props }
    );

    expect(screen.getByText("Showing 1 - 9 of 9 items")).toBeVisible();
  });

  test("page equals totalPages", () => {
    renderWithContext(
      <ItemRangeIndicator items={props.items} showTotal={props.showTotal} />,
      { ...props, page: 10 }
    );

    expect(screen.getByText("Showing 91 - 100 of 100 items")).toBeVisible();
  });
});