import * as React from "react";
import { render, screen, fireEvent, cleanup } from "@testing-library/react";

describe("<Typography /> Rendering >", () => {
  test.todo(
    `Should render the font selection group when the showFontsGroup prop is true`
  );

  test.todo(`Should show a list of Google fonts to choose from`);

  test.todo(
    `Should render the colorPicker group when the showColorsGroup prop is true`
  );

  test.todo(
    `Should render the lineHeight group when the showLineHeightGroup prop is true`
  );

  test.skip(`Should render the text formatting group when the showTextFormattingGroup prop is true`, () => {});

  test.todo(
    `Should render a title that has the type prop as one of the words in the title`
  );
});

describe("<Typography /> Events >", () => {
  test.todo(
    `Triggers the onChange() event when the typography settings change in some way`
  );
});

describe("<Typography /> Actions >", () => {
  test.todo(
    `Should change the font family of the component to the font family selected (if no text is selected)`
  );

  test.todo(
    `Should change the font family of the selected text inside the component to the font family selected`
  );

  test.todo(
    `Should change the size of the font in the component to the size selected (if no text is selected)`
  );

  test.todo(
    `Should change the size of the font of the selected text inside the component to the font size selected`
  );
});

describe("<Typography /> Hooks >", () => {
  test.skip(`Triggers the _onTypographyRender_ plugin hook when the Typography component is rendering`, () => {});

  test.skip(`Triggers the _onTypographyChange_ plugin hook when the typography settings change in some way`, () => {});
});