app-add-numbers.component.spec.ts

describe("Renders correctly", () => {
  beforeEach(() => {
    // Update the UI
    fixture.detectChanges();
  });

  // Check state of the UI?

  describe("Type 2 and 3 in the input boxes", () => {
    beforeEach(() => {
      // Set the input boxes to 2 and 3
      const inputs: Array<HTMLInputElement> = fixture.debugElement
        .queryAll(By.css("input"))
        .map((e) => e.nativeElement);

      inputs[0].value = "2";
      inputs[0].dispatchEvent(new Event("input"));

      inputs[1].value = "3";
      inputs[1].dispatchEvent(new Event("input"));
    });

    // Check something?

    describe("Click the add button", () => {
      beforeEach(() => {
        // Click the button
        const button: HTMLButtonElement = fixture.debugElement.query(
          By.css("button")
        ).nativeElement;
        button.click();

        fixture.detectChanges(); // Update the UI
      });

      it("the label shows sum 5", () => {
        // Check the value of the label
        const label: HTMLLabelElement = fixture.debugElement.query(
          By.css("label")
        ).nativeElement;

        expect(label.textContent).toBe("5");
      });
    });
  });
});