@testing-library/dom#screen JavaScript Examples

test('Login, given credentials, returns enabled submit button', () => {
  const div = document.createElement('div');
  ReactDOM.render(<Login />, div);
  document.body.appendChild(div);
  const username = screen.getByRole('textbox', { name: /username/i });
  const password = screen.getByLabelText(/password/i);
  const rememberMe = screen.getByRole('checkbox');
  const loginBtn = screen.getByRole('button', { name: /login/i });

  const fakeUser = {
    username: 'test user',
    password: '123password',
  };
  fireEvent.change(username, { target: { value: fakeUser.username } });
  fireEvent.change(password, { target: { value: fakeUser.password } });
  fireEvent.click(rememberMe);

  expect(screen.getByTestId('form')).toHaveFormValues({
    username: fakeUser.username,
    password: fakeUser.password,
    rememberMe: true,
  });

  expect(loginBtn).not.toBeDisabled();

  // Test cleanup
  div.remove();
});

test('Profile, given click "hide details" button, shows "display details" button', () => {
  const div = document.createElement('div');
  ReactDOM.render(
    <Profile
      name='John Doe'
      title='Team Lead'
      details='This is my 5th year and I love helping others'
    />,
    div
  );
  document.body.appendChild(div);
  const hideDetailsBtn = screen.getByRole('button', { name: /hide details/i });

  fireEvent.click(hideDetailsBtn);
  const displayDetailsBtn = screen.getByRole('button', {
    name: /display details/i,
  });

  expect(displayDetailsBtn.textContent).toEqual('Display Details');

  const removedHideDetailsBtn = screen.queryByRole('button', {
    name: /hide details/i,
  });
  expect(removedHideDetailsBtn).not.toBeInTheDocument();

  // Test cleanup
  div.remove();
});

it("opens element", (done) => {
  document.body.innerHTML = `<div data-testid="content" style="display: none;">Content!</div>`;
  const { element } = withMockAnimation(screen.getByTestId("content"));

  mockHeightOnce([0, 100]);

  down(element).then((opened) => {
    expect(opened).toBe(true);
    expect(element.animate).toBeCalledTimes(1);
    expect(element.style.display).toEqual("block");

    expect(element.animate).toHaveBeenCalledWith(
      [
        expect.objectContaining({
          height: "0px",
          paddingBottom: "0px",
          paddingTop: "0px",
        }),
        expect.objectContaining({
          height: "100px",
          paddingBottom: "",
          paddingTop: "",
        }),
      ],
      { easing: "ease", duration: 250, fill: "backwards" }
    );

    done();
  });
});

it("closes element", (done) => {
  document.body.innerHTML = `<div data-testid="content" style="height: 100px">Content!</div>`;
  const { element } = withMockAnimation(screen.getByTestId("content"));

  up(element).then((opened) => {
    expect(opened).toBe(false);
    expect(element.animate).toBeCalledTimes(1);
    expect(element.style.display).toEqual("none");
    expect(element.animate).toHaveBeenCalledWith(
      [
        expect.objectContaining({
          height: "100px",
          paddingBottom: "",
          paddingTop: "",
        }),
        expect.objectContaining({
          height: "0px",
          paddingBottom: "0px",
          paddingTop: "0px",
        }),
      ],
      { easing: "ease", duration: 250, fill: "backwards" }
    );

    done();
  });
});

describe("accessibility settings", () => {
  it("disables animation when user prefers reduced motion", (done) => {
    const { element } = withMockAnimation(screen.getByTestId("content"));

    window.matchMedia = () => {
      return {
        matches: true,
      };
    };

    up(element).then(() => {
      expect(element.animate).toHaveBeenCalledWith(expect.anything(), {
        duration: 0,
        easing: "ease",
        fill: "backwards",
      });
      done();
    });
  });
});

describe("overflow handling", () => {
  it("temporarily sets overflow to hidden", (done) => {
    document.body.innerHTML = `<div data-testid="content" style="display: none;">Content!</div>`;
    const { element } = withMockAnimation(screen.getByTestId("content"));

    expect(element.style.overflow).toEqual("");

    element.animate = () => {
      return {
        finished: new Promise((resolve) => {
          expect(element.style.overflow).toEqual("hidden");
          resolve();
        }),
      };
    };

    down(element).then(() => {
      expect(element.style.overflow).toEqual("");
      done();
    });
  });
});

describe("callback timing", () => {
  it("should fire callback after animation is complete", (done) => {
    document.body.innerHTML = `<div data-testid="content">Content!</div>`;
    const { element, getTimeCalled } = withMockAnimation(
      screen.getByTestId("content"),
      250
    );

    up(element).then(() => {
      const difference = new Date().getTime() - getTimeCalled();

      expect(difference).toBeGreaterThanOrEqual(250);
      done();
    });
  });
});

describe("toggle()", () => {
  beforeEach(() => {
    document.body.innerHTML = `<div data-testid="content" style="display: none;">Content!</div>`;
  });

  describe("animation is allowed to complete fully", () => {
    it("toggles element open", (done) => {
      const { element } = withMockAnimation(screen.getByTestId("content"));

      toggle(element).then((opened) => {
        expect(opened).toBe(true);
        expect(element.animate).toBeCalledTimes(1);

        done();
      });
    });

    it("toggles element closed", (done) => {
      const { element } = withMockAnimation(screen.getByTestId("content"));

      // Give it an arbitrary height to mock it being "open."
      mockOffsetHeight(100);

      toggle(element).then((opened) => {
        expect(opened).toBe(false);
        expect(element.animate).toBeCalledTimes(1);

        done();
      });
    });
  });

  describe("animation is rapidly clicked", () => {
    it("opens down() even though the element is partially expanded due to double click on up()", (done) => {
      // Visible and with explicit height.
      document.body.innerHTML = `<div data-testid="content" style="display: block; height="50px;">Content!</div>`;
      const { element } = withMockAnimation(screen.getByTestId("content"));
      const { finish } = addMockAnimation(element, "0");

      // Will toggle down():
      toggle(element).then((opened) => {
        expect(opened).toBe(null);
        expect(finish).toHaveBeenCalledTimes(1);
        expect(element.style.display).toEqual("block");

        done();
      });
    });

    it("closes up() even though the element is partially expanded due to double click on down()", (done) => {
      // Visible and with explicit height.
      document.body.innerHTML = `<div data-testid="content" style="display: block; height="50px;">Content!</div>`;
      const { element } = withMockAnimation(screen.getByTestId("content"));
      const { finish } = addMockAnimation(element, "1");

      // Will toggle down():
      toggle(element).then((opened) => {
        expect(opened).toBe(null);
        expect(finish).toHaveBeenCalledTimes(1);
        expect(element.style.display).toEqual("none");

        done();
      });
    });
  });
});

describe("custom options", () => {
  beforeEach(() => {
    document.body.innerHTML = `<div data-testid="content" style="display: none;">Content!</div>`;
  });

  it("uses default display value", (done) => {
    const { element } = withMockAnimation(screen.getByTestId("content"));
    expect(element.style.display).toEqual("none");

    down(element).then(() => {
      expect(element.style.display).toEqual("block");

      done();
    });
  });

  it("uses custom display property", (done) => {
    const { element } = withMockAnimation(screen.getByTestId("content"));
    expect(element.style.display).toEqual("none");

    down(element, { display: "flex" }).then(() => {
      expect(element.style.display).toEqual("flex");

      done();
    });
  });

  it("uses default overflow property", () => {
    const { element } = withMockAnimation(screen.getByTestId("content"));
    expect(element.style.overflow).toEqual("");

    down(element);
    expect(element.style.overflow).toEqual("hidden");
  });

  it("uses custom overflow property", () => {
    const { element } = withMockAnimation(screen.getByTestId("content"));
    expect(element.style.overflow).toEqual("");

    down(element, { overflow: "visible" });
    expect(element.style.overflow).toEqual("visible");
  });
});

describe('<Chat />', () => {
    describe("when window.connect is defined", () => {
        let wrapper, instance;
        beforeAll(() => {
            window.connect = {
                LogManager: {
                    getLogger: function(obj) {
                        return {
                            debug: jest.fn(),
                            info: jest.fn(),
                            error: jest.fn()
                        }
                    }
                }
            }
            wrapper = shallow(<Chat {...mockProps} />);
            instance = wrapper.instance();
        })

        afterAll(() => {
            delete window.connect;
        })

        test("Logger object should be initialized when component is created", () => {
            expect(instance.logger).not.toBeUndefined();
        })

        test("Info method should be called after componentDidMount method is called.", () => {
            instance.componentDidMount();
            expect(instance.logger.info).toBeCalled();
        })

        test("should reset the header height", () => {
            const mockResetHeightMethod = jest.spyOn(Chat.prototype, "resetChatHeight");
            render(<ThemeProvider>
                      <Chat {...mockProps} />
                    </ThemeProvider>);
            expect(screen.getByTestId('amazon-connect-chat-wrapper')).not.toBe(null);
            expect(mockResetHeightMethod).toBeCalled();
        })
    })

    describe("when window.connect is not defined", () => {
        const wrapper = shallow(<Chat {...mockProps} />);
        const instance = wrapper.instance();
        test("Logger object should not be initialized", () => {
            expect(instance.logger).toBeUndefined();
        })
    })

});