2022-05-27 07:13:50 +00:00
|
|
|
/*
|
2024-09-09 13:57:16 +00:00
|
|
|
Copyright 2024 New Vector Ltd.
|
2022-05-27 07:13:50 +00:00
|
|
|
Copyright 2022 The Matrix.org Foundation C.I.C.
|
|
|
|
|
2024-09-09 13:57:16 +00:00
|
|
|
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
|
|
|
|
Please see LICENSE files in the repository root for full details.
|
2022-05-27 07:13:50 +00:00
|
|
|
*/
|
|
|
|
|
2024-10-14 16:11:58 +00:00
|
|
|
import { fireEvent, getByText, render } from "jest-matrix-react";
|
2022-12-12 11:24:14 +00:00
|
|
|
import React from "react";
|
2022-05-27 07:13:50 +00:00
|
|
|
|
2024-10-15 13:57:26 +00:00
|
|
|
import AccessibleButton from "../../../../../src/components/views/elements/AccessibleButton";
|
|
|
|
import { Key } from "../../../../../src/Keyboard";
|
|
|
|
import { mockPlatformPeg, unmockPlatformPeg } from "../../../../test-utils";
|
2022-05-27 07:13:50 +00:00
|
|
|
|
2022-12-12 11:24:14 +00:00
|
|
|
describe("<AccessibleButton />", () => {
|
2022-05-27 07:13:50 +00:00
|
|
|
const defaultProps = {
|
|
|
|
onClick: jest.fn(),
|
2022-12-12 11:24:14 +00:00
|
|
|
children: "i am a button",
|
2022-05-27 07:13:50 +00:00
|
|
|
};
|
2022-12-28 10:40:34 +00:00
|
|
|
const getComponent = (props = {}) => render(<AccessibleButton {...defaultProps} {...props} />);
|
2022-05-27 07:13:50 +00:00
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
mockPlatformPeg();
|
|
|
|
});
|
|
|
|
|
|
|
|
afterAll(() => {
|
|
|
|
unmockPlatformPeg();
|
|
|
|
});
|
|
|
|
|
2022-12-12 11:24:14 +00:00
|
|
|
it("renders div with role button by default", () => {
|
2022-12-28 10:40:34 +00:00
|
|
|
const { asFragment } = getComponent();
|
|
|
|
expect(asFragment()).toMatchSnapshot();
|
2022-05-27 07:13:50 +00:00
|
|
|
});
|
|
|
|
|
2022-12-12 11:24:14 +00:00
|
|
|
it("renders a button element", () => {
|
2022-12-28 10:40:34 +00:00
|
|
|
const { asFragment } = getComponent({ element: "button" });
|
|
|
|
expect(asFragment()).toMatchSnapshot();
|
2022-05-27 07:13:50 +00:00
|
|
|
});
|
|
|
|
|
2022-12-12 11:24:14 +00:00
|
|
|
it("renders with correct classes when button has kind", () => {
|
2022-12-28 10:40:34 +00:00
|
|
|
const { asFragment } = getComponent({
|
2022-12-12 11:24:14 +00:00
|
|
|
kind: "primary",
|
2022-05-27 07:13:50 +00:00
|
|
|
});
|
2022-12-28 10:40:34 +00:00
|
|
|
expect(asFragment()).toMatchSnapshot();
|
2022-05-27 07:13:50 +00:00
|
|
|
});
|
|
|
|
|
2022-12-12 11:24:14 +00:00
|
|
|
it("disables button correctly", () => {
|
2022-05-27 07:13:50 +00:00
|
|
|
const onClick = jest.fn();
|
2022-12-28 10:40:34 +00:00
|
|
|
const { container } = getComponent({
|
2022-05-27 07:13:50 +00:00
|
|
|
onClick,
|
|
|
|
disabled: true,
|
|
|
|
});
|
|
|
|
|
2022-12-28 10:40:34 +00:00
|
|
|
const btn = getByText(container, "i am a button");
|
|
|
|
|
|
|
|
expect(btn.hasAttribute("disabled")).toBeTruthy();
|
|
|
|
expect(btn.hasAttribute("aria-disabled")).toBeTruthy();
|
|
|
|
|
|
|
|
fireEvent.click(btn);
|
2022-05-27 07:13:50 +00:00
|
|
|
|
|
|
|
expect(onClick).not.toHaveBeenCalled();
|
|
|
|
|
2022-12-28 10:40:34 +00:00
|
|
|
fireEvent.keyPress(btn, { key: Key.ENTER, code: Key.ENTER });
|
2022-05-27 07:13:50 +00:00
|
|
|
|
|
|
|
expect(onClick).not.toHaveBeenCalled();
|
|
|
|
});
|
|
|
|
|
2022-12-12 11:24:14 +00:00
|
|
|
it("calls onClick handler on button click", () => {
|
2022-05-27 07:13:50 +00:00
|
|
|
const onClick = jest.fn();
|
2022-12-28 10:40:34 +00:00
|
|
|
const { container } = getComponent({
|
2022-05-27 07:13:50 +00:00
|
|
|
onClick,
|
|
|
|
});
|
|
|
|
|
2022-12-28 10:40:34 +00:00
|
|
|
const btn = getByText(container, "i am a button");
|
|
|
|
fireEvent.click(btn);
|
2022-05-27 07:13:50 +00:00
|
|
|
|
|
|
|
expect(onClick).toHaveBeenCalled();
|
|
|
|
});
|
|
|
|
|
2022-12-12 11:24:14 +00:00
|
|
|
it("calls onClick handler on button mousedown when triggerOnMousedown is passed", () => {
|
2022-05-27 07:13:50 +00:00
|
|
|
const onClick = jest.fn();
|
2022-12-28 10:40:34 +00:00
|
|
|
const { container } = getComponent({
|
2022-05-27 07:13:50 +00:00
|
|
|
onClick,
|
|
|
|
triggerOnMouseDown: true,
|
|
|
|
});
|
|
|
|
|
2022-12-28 10:40:34 +00:00
|
|
|
const btn = getByText(container, "i am a button");
|
|
|
|
fireEvent.mouseDown(btn);
|
2022-05-27 07:13:50 +00:00
|
|
|
|
|
|
|
expect(onClick).toHaveBeenCalled();
|
|
|
|
});
|
|
|
|
|
2022-12-12 11:24:14 +00:00
|
|
|
describe("handling keyboard events", () => {
|
|
|
|
it("calls onClick handler on enter keydown", () => {
|
2022-05-27 07:13:50 +00:00
|
|
|
const onClick = jest.fn();
|
2022-12-28 10:40:34 +00:00
|
|
|
const { container } = getComponent({
|
2022-05-27 07:13:50 +00:00
|
|
|
onClick,
|
|
|
|
});
|
|
|
|
|
2022-12-28 10:40:34 +00:00
|
|
|
const btn = getByText(container, "i am a button");
|
|
|
|
|
|
|
|
fireEvent.keyDown(btn, { key: Key.ENTER, code: Key.ENTER });
|
2022-05-27 07:13:50 +00:00
|
|
|
|
|
|
|
expect(onClick).toHaveBeenCalled();
|
|
|
|
|
2022-12-28 10:40:34 +00:00
|
|
|
fireEvent.keyUp(btn, { key: Key.ENTER, code: Key.ENTER });
|
2022-05-27 07:13:50 +00:00
|
|
|
|
|
|
|
// handler only called once on keydown
|
|
|
|
expect(onClick).toHaveBeenCalledTimes(1);
|
|
|
|
});
|
|
|
|
|
2022-12-12 11:24:14 +00:00
|
|
|
it("calls onClick handler on space keyup", () => {
|
2022-05-27 07:13:50 +00:00
|
|
|
const onClick = jest.fn();
|
2022-12-28 10:40:34 +00:00
|
|
|
const { container } = getComponent({
|
2022-05-27 07:13:50 +00:00
|
|
|
onClick,
|
|
|
|
});
|
2022-12-28 10:40:34 +00:00
|
|
|
const btn = getByText(container, "i am a button");
|
2022-05-27 07:13:50 +00:00
|
|
|
|
2022-12-28 10:40:34 +00:00
|
|
|
fireEvent.keyDown(btn, { key: Key.SPACE, code: Key.SPACE });
|
2022-05-27 07:13:50 +00:00
|
|
|
|
|
|
|
expect(onClick).not.toHaveBeenCalled();
|
|
|
|
|
2022-12-28 10:40:34 +00:00
|
|
|
fireEvent.keyUp(btn, { key: Key.SPACE, code: Key.SPACE });
|
2022-05-27 07:13:50 +00:00
|
|
|
|
|
|
|
// handler only called once on keyup
|
|
|
|
expect(onClick).toHaveBeenCalledTimes(1);
|
|
|
|
});
|
|
|
|
|
2022-12-12 11:24:14 +00:00
|
|
|
it("calls onKeydown/onKeyUp handlers for keys other than space and enter", () => {
|
2022-05-27 07:13:50 +00:00
|
|
|
const onClick = jest.fn();
|
|
|
|
const onKeyDown = jest.fn();
|
|
|
|
const onKeyUp = jest.fn();
|
2022-12-28 10:40:34 +00:00
|
|
|
const { container } = getComponent({
|
2022-05-27 07:13:50 +00:00
|
|
|
onClick,
|
|
|
|
onKeyDown,
|
|
|
|
onKeyUp,
|
|
|
|
});
|
|
|
|
|
2022-12-28 10:40:34 +00:00
|
|
|
const btn = getByText(container, "i am a button");
|
|
|
|
|
|
|
|
fireEvent.keyDown(btn, { key: Key.K, code: Key.K });
|
|
|
|
fireEvent.keyUp(btn, { key: Key.K, code: Key.K });
|
2022-05-27 07:13:50 +00:00
|
|
|
|
|
|
|
expect(onClick).not.toHaveBeenCalled();
|
|
|
|
expect(onKeyDown).toHaveBeenCalled();
|
|
|
|
expect(onKeyUp).toHaveBeenCalled();
|
|
|
|
});
|
|
|
|
|
2022-12-12 11:24:14 +00:00
|
|
|
it("does nothing on non space/enter key presses when no onKeydown/onKeyUp handlers provided", () => {
|
2022-05-27 07:13:50 +00:00
|
|
|
const onClick = jest.fn();
|
2022-12-28 10:40:34 +00:00
|
|
|
const { container } = getComponent({
|
2022-05-27 07:13:50 +00:00
|
|
|
onClick,
|
|
|
|
});
|
|
|
|
|
2022-12-28 10:40:34 +00:00
|
|
|
const btn = getByText(container, "i am a button");
|
|
|
|
|
|
|
|
fireEvent.keyDown(btn, { key: Key.K, code: Key.K });
|
|
|
|
fireEvent.keyUp(btn, { key: Key.K, code: Key.K });
|
2022-05-27 07:13:50 +00:00
|
|
|
|
|
|
|
expect(onClick).not.toHaveBeenCalled();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|