More tests for dialog

src/tchap/components/views/dialogs/ExpiredAccountDialog.tsx

@@ -96,7 +96,7 @@ export default class ExpiredAccountDialog extends React.Component<IProps, IState
             <p>{_t("An email has been sent to you. Click on the link it contains, click below.")}</p>
         );
         let alertMessage = null;
-        let requestNewEmailButton = <button onClick={this.onRequestEmail}>{_t("Request a renewal email")}</button>;
+        let requestNewEmailButton = <button onClick={this.onRequestEmail} data-testid="dialog-send-email-button">{_t("Request a renewal email")}</button>;
         let okButtonText = _t("I renewed the validity of my account");
 
         switch (this.state.ProcessState) {
@@ -107,18 +107,18 @@ export default class ExpiredAccountDialog extends React.Component<IProps, IState
                 //don't know which class should decorate this message, it is not really an error
                 //its goal is to avoid users to click twice or more on the button and spam themselves
                 alertMessage = (
-                    <p className="">
+                    <p className="" data-testid="dialog-email-wait-message">
                         {_t("Wait for at least %(wait)s seconds between two emails", { wait: this.state.emailDelaySecs })}
                     </p>
                 );
                 break;
             case ProcessState.EMAIL_FAILURE:
                 alertMessage = (
-                    <p className="text-error">{_t("The email was not sent sucessfully, please retry in a moment")}</p>
+                    <p className="text-error" data-testid="dialog-email-failure-message">{_t("The email was not sent sucessfully, please retry in a moment")}</p>
                 );
                 break;
             case ProcessState.EMAIL_SUCCESS:
-                alertMessage = <p className="text-success">{_t("A new email has been sent")}</p>;
+                alertMessage = <p className="text-success" data-testid="dialog-email-sent-message">{_t("A new email has been sent")}</p>;
                 break;
             case ProcessState.ACCOUNT_STILL_EXPIRED:
                 alertMessage = (

test/unit-tests/tchap/components/views/dialogs/ExpiredAccountDialog-test.tsx

@@ -1,5 +1,65 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+
+import ExpiredAccountDialog from "~tchap-web/src/tchap/components/views/dialogs/ExpiredAccountDialog";
+import { flushPromises } from "~tchap-web/yarn-linked-dependencies/matrix-react-sdk/test/test-utils";
+
 describe("ExpiredAccountDialog", () => {
-    it("sends email when 'Send email' button is clicked", () => {});
+    describe("'Send email' button", () => {
+        it("sends email when button is clicked", async () => {
+            // true = email sent successfully
+            const onRequestNewEmailMock = jest.fn().mockResolvedValue(true);
+
+            const component = render(
+                <ExpiredAccountDialog onFinished={jest.fn()} onRequestNewEmail={onRequestNewEmailMock} />,
+            );
+            const sendEmailButton = screen.getByTestId("dialog-send-email-button");
+            sendEmailButton.click();
+
+            expect(onRequestNewEmailMock).toHaveBeenCalled();
+            // wait spinner is displayed
+            expect(component.container.querySelector(".mx_InlineSpinner")).toBeTruthy();
+
+            await flushPromises();
+            // confirmation message is displayed
+            screen.getByTestId("dialog-email-sent-message");
+        });
+
+        it("tells user if sending email failed", async () => {
+            // false = email sending failed
+            const onRequestNewEmailMock = jest.fn().mockResolvedValue(false);
+
+            const component = render(
+                <ExpiredAccountDialog onFinished={jest.fn()} onRequestNewEmail={onRequestNewEmailMock} />,
+            );
+            const sendEmailButton = screen.getByTestId("dialog-send-email-button");
+            sendEmailButton.click();
+
+            expect(onRequestNewEmailMock).toHaveBeenCalled();
+            // wait spinner is displayed
+            expect(component.container.querySelector(".mx_InlineSpinner")).toBeTruthy();
+
+            await flushPromises();
+            // confirmation message is displayed
+            screen.getByTestId("dialog-email-failure-message");
+        });
+
+        it("sends only one email when button is clicked twice", async () => {
+            // true = email sent successfully
+            const onRequestNewEmailMock = jest.fn().mockResolvedValue(true);
+
+            render(<ExpiredAccountDialog onFinished={jest.fn()} onRequestNewEmail={onRequestNewEmailMock} />);
+            const sendEmailButton = screen.getByTestId("dialog-send-email-button");
+
+            sendEmailButton.click();
+            await flushPromises();
+            sendEmailButton.click();
+            await flushPromises();
+            expect(onRequestNewEmailMock).toHaveBeenCalledTimes(1); // only 1 email sent
+            screen.getByTestId("dialog-email-wait-message"); // user notified that they must wait
+        });
+    });
+
     it("when 'I renewed' is clicked, and the account is renewed, it displays 'cool' and unblocks user (todo)", () => {});
     it("when 'I renewed' is clicked, and the account is not renewed, it displays 'not cool' and keeps dialog up (todo)", () => {});
 });