Apply strictNullChecks to src/components/views/voip/* (#10692)
* change interface to discriminated union * fix ts errors * use definite assertion operator * use | undefined, instead of assertion operator * correct the button press arguments for dial button * update props to have `Props` suffix * add comment * remove unnecessary default * remove unnecessary comment * make classname match filename * setup test file * export consts for testing * add initial test * add another DialPad test * fix imports
This commit is contained in:
parent
b724cb5fd2
commit
01364ebf45
3 changed files with 88 additions and 12 deletions
src/components/views
test/components/views/voip
|
@ -1278,7 +1278,7 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
|
|||
let title;
|
||||
let helpText;
|
||||
let buttonText;
|
||||
let goButtonFn;
|
||||
let goButtonFn: (() => Promise<void>) | null = null;
|
||||
let consultConnectSection;
|
||||
let extraSection;
|
||||
let footer;
|
||||
|
|
|
@ -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<IButtonProps> {
|
||||
type DialButtonProps = {
|
||||
kind: DialPadButtonKind.Dial;
|
||||
onButtonPress: () => void;
|
||||
};
|
||||
|
||||
class DialPadButton extends React.PureComponent<DigitButtonProps | DialButtonProps> {
|
||||
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<XOR<IProps, IDialProps>> {
|
||||
export default class DialPad extends React.PureComponent<XOR<IProps, IDialProps>> {
|
||||
public render(): React.ReactNode {
|
||||
const buttonNodes: JSX.Element[] = [];
|
||||
|
||||
|
|
64
test/components/views/voip/DialPad-test.tsx
Normal file
64
test/components/views/voip/DialPad-test.tsx
Normal file
|
@ -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(<DialPad onDigitPress={jest.fn()} hasDial={true} onDialPress={jest.fn()} />);
|
||||
|
||||
// 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(<DialPad onDigitPress={mockOnDigitPress} hasDial={true} onDialPress={jest.fn()} />);
|
||||
|
||||
// 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(<DialPad onDigitPress={jest.fn()} hasDial={true} onDialPress={mockOnDial} />);
|
||||
|
||||
// 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
|
||||
});
|
Loading…
Reference in a new issue