# A simple test with RTL and jest dom

[doc](https://github.com/testing-library/jest-dom)

### jest dom syntax
針對DOM做一些assertion

expect(colorButton).toHaveStyle({ background: "blue" });`

### a simple app test

元件說明:
一個簡單的按鈕, 預設背景顏色為紅色, 文字為"change to blue", 點擊之後會切換成藍色, 文字換成"change to red"

另外還有一個checkbox, 勾選之後button會被disabled, 顏色變灰色, 取消勾選之後button恢復原本顏色, 且enabled

import { useState } from "react";
import "./App.css";

function App() {
  const [buttonColor, setButtonColor] = useState("red");
  const [disabled, setDisabled] = useState(false);
  const newButtonColor = buttonColor === "red" ? "blue" : "red";
  return (
    <div>
      <button
        disabled={disabled}
        style={{ background: disabled ? "gray" : buttonColor }}
        onClick={() => setButtonColor(newButtonColor)}
      >
        Change to {newButtonColor}
      </button>
      <input
        type="checkbox"
        id="disable-button-checkbox"
        defaultChecked={disabled}
        aria-checked={disabled}
        onChange={(e) => setDisabled(e.target.checked)}
      ></input>
      <label htmlFor="disable-button-checkbox">Disable button</label>
    </div>
  );
}

export default App;

test.js

// import global objects from testing library
import { render, screen, fireEvent } from "@testing-library/react";
import App from "./App";

/**
 * App overview
 * a simple button, user can click it and change its color (color choices: red, blue)
 * a checkbox, when checked, button is disabled, when not checked, button is not diabled
 */

/**
 * What to test?
 * 1. button has correct initial color
 * 2. button has correct initial text (click it to change to blue)
 * 3. do not test state, test what component's ui
 */

test("button has correct initial color", () => {
  render(<App></App>);
  // find an element with a role of button and text of 'Change to blue'
  const colorButton = screen.getByRole("button", { name: "Change to blue" });

  // expect the background color to be red
  expect(colorButton).toHaveStyle({ backgroundColor: "red" });

  // click button
  fireEvent.click(colorButton);
  // expect the background color to be blue
  expect(colorButton).toHaveStyle({ background: "blue" });
  // expect the button text to be 'Change to red'
  expect(colorButton.textContent).toBe("Change to red");
});

test("initial conditions", () => {
  render(<App></App>);
  // check that the button starts out enabled
  const colorButton = screen.getByRole("button", { name: "Change to blue" });
  expect(colorButton).toBeEnabled();
  // check that the checkbox starts out unchecked

  const checkbox = screen.getByRole("checkbox");
  expect(checkbox).not.toBeChecked();
});

test("checkbox disables button on first click and enables on second click", () => {
  render(<App></App>);
  // the name will be responding label content
  const colorButton = screen.getByRole("button", { name: "Change to blue" });
  const checkbox = screen.getByRole("checkbox", { name: "Disable button" });
  // when check box is clicked, colorButton should be disabled
  fireEvent.click(checkbox);
  expect(colorButton).toBeDisabled();
  // when check box is clicked again, colorButton should be enabled
  fireEvent.click(checkbox);
  expect(colorButton).toBeEnabled();
});

test("Disabled button has gray background and reverts to red", () => {
  render(<App></App>);
  const colorButton = screen.getByRole("button", { name: "Change to blue" });
  const checkbox = screen.getByRole("checkbox", { name: "Disable button" });

  // check to disable button, button turns gray
  fireEvent.click(checkbox);
  expect(colorButton).toHaveStyle({ backgroundColor: "gray" });

  // uncheck to enable button, button reverts to red
  fireEvent.click(checkbox);
  expect(colorButton).toHaveStyle({ background: "red" });
});

test("Clicked disabled button has gray background and reverts to blue", () => {
  render(<App></App>);
  const colorButton = screen.getByRole("button", { name: "Change to blue" });
  const checkbox = screen.getByRole("checkbox", { name: "Disable button" });

  fireEvent.click(colorButton);
  fireEvent.click(checkbox);
  expect(colorButton).toHaveStyle({ backgroundColor: "gray" });

  fireEvent.click(checkbox);
  expect(colorButton).toHaveStyle({ background: "blue" });
});

###### tags: `react` `testing-library`