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

src/components/views/dialogs/InviteDialog.tsx

@@ -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;

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;
+};
+
+type DialButtonProps = {
+    kind: DialPadButtonKind.Dial;
+    onButtonPress: () => void;
+};
 
-class DialPadButton extends React.PureComponent<IButtonProps> {
+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[] = [];
 

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(<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
+});