diff --git a/src/components/views/dialogs/InviteDialog.tsx b/src/components/views/dialogs/InviteDialog.tsx index ddc37f3f64..6a50955073 100644 --- a/src/components/views/dialogs/InviteDialog.tsx +++ b/src/components/views/dialogs/InviteDialog.tsx @@ -1278,7 +1278,7 @@ export default class InviteDialog extends React.PureComponent Promise) | null = null; let consultConnectSection; let extraSection; let footer; diff --git a/src/components/views/voip/DialPad.tsx b/src/components/views/voip/DialPad.tsx index 634b88d144..4224fda4b6 100644 --- a/src/components/views/voip/DialPad.tsx +++ b/src/components/views/voip/DialPad.tsx @@ -20,24 +20,36 @@ import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton"; import { _t } from "../../../languageHandler"; import { XOR } from "../../../@types/common"; -const BUTTONS = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "*", "0", "#"]; -const BUTTON_LETTERS = ["", "ABC", "DEF", "GHI", "JKL", "MNO", "PQRS", "TUV", "WXYZ", "", "+", ""]; +export const BUTTONS = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "*", "0", "#"]; +export const BUTTON_LETTERS = ["", "ABC", "DEF", "GHI", "JKL", "MNO", "PQRS", "TUV", "WXYZ", "", "+", ""]; enum DialPadButtonKind { Digit, Dial, } -interface IButtonProps { - kind: DialPadButtonKind; - digit?: string; - digitSubtext?: string; - onButtonPress: (digit: string | undefined, ev: ButtonEvent) => void; -} +type DigitButtonProps = { + kind: DialPadButtonKind.Digit; + digit: string; + digitSubtext: string; + onButtonPress: (digit: string, ev: ButtonEvent) => void; +}; -class DialPadButton extends React.PureComponent { +type DialButtonProps = { + kind: DialPadButtonKind.Dial; + onButtonPress: () => void; +}; + +class DialPadButton extends React.PureComponent { public onClick = (ev: ButtonEvent): void => { - this.props.onButtonPress(this.props.digit, ev); + switch (this.props.kind) { + case DialPadButtonKind.Digit: + this.props.onButtonPress(this.props.digit, ev); + break; + case DialPadButtonKind.Dial: + this.props.onButtonPress(); + break; + } }; public render(): React.ReactNode { @@ -76,7 +88,7 @@ interface IDialProps extends IBaseProps { onDialPress: () => void; } -export default class Dialpad extends React.PureComponent> { +export default class DialPad extends React.PureComponent> { public render(): React.ReactNode { const buttonNodes: JSX.Element[] = []; diff --git a/test/components/views/voip/DialPad-test.tsx b/test/components/views/voip/DialPad-test.tsx new file mode 100644 index 0000000000..e8d1be8bbc --- /dev/null +++ b/test/components/views/voip/DialPad-test.tsx @@ -0,0 +1,64 @@ +/* +Copyright 2023 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import React from "react"; +import { render, screen } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; + +import DialPad, { BUTTONS, BUTTON_LETTERS } from "../../../../src/components/views/voip/DialPad"; + +it("when hasDial is true, displays all expected numbers and letters", () => { + render(); + + // check that we have the expected number of buttons + 1 for the dial button + expect(screen.getAllByRole("button")).toHaveLength(BUTTONS.length + 1); + + // BUTTONS represents the numbers and symbols + BUTTONS.forEach((button) => { + expect(screen.getByText(button)).toBeInTheDocument(); + }); + + // BUTTON_LETTERS represents the `ABC` type strings you see on the keypad, but also contains + // some empty strings, so we filter them out prior to tests + BUTTON_LETTERS.filter(Boolean).forEach((letterSet) => { + expect(screen.getByText(letterSet)).toBeInTheDocument(); + }); + + // check for the dial button + expect(screen.getByRole("button", { name: "Dial" })).toBeInTheDocument(); +}); + +it("clicking a digit button calls the correct function", async () => { + const mockOnDigitPress = jest.fn(); + render(); + + // click the `1` button + const buttonText = "1"; + await userEvent.click(screen.getByText(buttonText, { exact: false })); + expect(mockOnDigitPress).toHaveBeenCalledTimes(1); + expect(mockOnDigitPress.mock.calls[0][0]).toBe(buttonText); +}); + +it("clicking the dial button calls the correct function", async () => { + const mockOnDial = jest.fn(); + render(); + + // click the `1` button + const buttonText = "Dial"; + await userEvent.click(screen.getByRole("button", { name: buttonText })); + expect(mockOnDial).toHaveBeenCalledTimes(1); + expect(mockOnDial).toHaveBeenCalledWith(); // represents no arguments in the call +});