Merge branch 'main' into 409/org-selection-component

Signed-off-by: Claire Annan <[email protected]>

.env.example.local

@@ -39,3 +39,4 @@ CF_API_TOKEN=
 #   Prefixing a variable with NEXT_PUBLIC_ will make it available to the browser:
 #   https://nextjs.org/docs/app/building-your-application/configuring/environment-variables#bundling-environment-variables-for-the-browser
 NEXT_PUBLIC_USER_INVITE_URL=https://account.dev.us-gov-west-1.aws-us-gov.cloud.gov/invite
+NEXT_PUBLIC_CLOUD_SUPPORT_URL="mailto:[email protected]?body=What+is+your+question%3F%0D%0A%0D%0APlease+provide+your+application+name+or+URL.+Do+not+include+any+sensitive+information+about+your+platform+in+this+email."

__tests__/app/orgs/[orgId]/users/[userId]/org-roles/actions.test.js

@@ -105,9 +105,7 @@ describe('edit org roles actions', () => {
         // act/expect
         expect(async () => {
           await updateOrgRolesForUser(userGuid, orgGuid, roles);
-        }).rejects.toThrow(
-          new Error('Unable to edit org role. Please try again.')
-        );
+        }).rejects.toThrow(new Error('Try submitting your changes again.'));
       });
     });
   });

__tests__/components/OverlayDrawer.test.js

@@ -0,0 +1,75 @@
+/**
+ * @jest-environment jsdom
+ */
+import { jest, describe, expect, it, beforeAll } from '@jest/globals';
+import { OverlayDrawer } from '@/components/OverlayDrawer';
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
+
+describe('<OverlayDrawer />', () => {
+  beforeAll(() => {
+    HTMLDialogElement.prototype.show = jest.fn(function () {
+      this.open = true;
+    });
+
+    HTMLDialogElement.prototype.showModal = jest.fn(function () {
+      this.open = true;
+    });
+
+    HTMLDialogElement.prototype.close = jest.fn(function () {
+      this.open = false;
+    });
+  });
+
+  it('shows dialog content when opened', async () => {
+    // render
+    render(
+      <OverlayDrawer id="overlay-drawer-1" isOpen={true} close={() => {}}>
+        This is the drawer content.
+      </OverlayDrawer>
+    );
+    // assert
+    await waitFor(() => {
+      expect(screen.getByText(/This is the drawer content./i)).toBeVisible();
+    });
+  });
+
+  it('hides dialog content when closed', async () => {
+    // render
+    render(
+      <OverlayDrawer id="overlay-drawer-1" isOpen={false} close={() => {}}>
+        This is the drawer content.
+      </OverlayDrawer>
+    );
+    // assert
+    await waitFor(() => {
+      expect(
+        screen.getByText(/This is the drawer content./i)
+      ).not.toBeVisible();
+    });
+  });
+
+  it('calls the close() prop when using the Escape key to close', async () => {
+    // setup
+    const close = jest.fn();
+    // render
+    render(
+      <OverlayDrawer id="overlay-drawer-1" isOpen={true} close={close}>
+        This is the drawer content.
+      </OverlayDrawer>
+    );
+    // query
+    const content = screen.getByText(/This is the drawer content./);
+    expect(content).toBeInTheDocument();
+    // act = press escape key
+    await waitFor(() => {
+      fireEvent.keyDown(content, {
+        key: 'Escape',
+        code: 'Escape',
+        keyCode: 27,
+        charCode: 27,
+      });
+    });
+    // assert
+    expect(close).toHaveBeenCalledTimes(1);
+  });
+});

__tests__/components/UserAccount/Username.test.js

@@ -7,14 +7,9 @@ import { render, screen } from '@testing-library/react';
 import { Username } from '@/components/UserAccount/Username';
 
 describe('Username', () => {
-  it('when given a user, displays the user name', () => {
-    // setup
-    const mockUser = {
-      guid: 'userguid',
-      username: 'User 1',
-    };
+  it('when given a username, displays it', () => {
     // act
-    render(<Username user={mockUser} />);
+    render(<Username username="User 1" />);
     const content = screen.getByText('User 1');
     // assert
     expect(content).toBeInTheDocument();
@@ -23,16 +18,12 @@ describe('Username', () => {
   it('when given a service account user, displays the service account name', () => {
     // setup
     const guid = 'cafce0be-62dd-4f02-9770-d546c8714430';
-    const mockUser = {
-      guid: 'userguid',
-      username: guid,
-    };
     const mockAccount = {
       guid: guid,
       name: 'Auditor 1',
     };
     // act
-    render(<Username user={mockUser} serviceAccount={mockAccount} />);
+    render(<Username username="foo user" serviceAccount={mockAccount} />);
     const auditor = screen.getByText(/Auditor 1/);
     const svcAcct = screen.getByText(/service/);
     const username = screen.queryByText(guid);
@@ -43,13 +34,8 @@ describe('Username', () => {
   });
 
   it('when given a user without a username, displays default text', () => {
-    // setup
-    const mockUser = {
-      guid: 'userguid',
-      username: '',
-    };
     // act
-    render(<Username user={mockUser} />);
+    render(<Username username="" />);
     const content = screen.getByText('Unnamed user');
     // assert
     expect(content).toBeInTheDocument();

__tests__/components/UsersActions/UsersActionsOrgRoles.test.js

@@ -76,7 +76,7 @@ describe('UsersActionsOrgRoles', () => {
         expect(screen.getByText(/Billing manager/)).toBeInTheDocument()
       );
       // query
-      const submitBtn = screen.getByText('Save');
+      const submitBtn = screen.getByText('Update roles');
       // act
       fireEvent.click(submitBtn);
       // expect a success message

__tests__/components/UsersList/UsersList.test.js

@@ -1,7 +1,7 @@
 /**
  * @jest-environment jsdom
  */
-import { describe, expect, it } from '@jest/globals';
+import { describe, expect, it, beforeAll } from '@jest/globals';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { UsersList } from '@/components/UsersList/UsersList';
@@ -68,6 +68,22 @@ const mockUserLogonTime = {
 };
 
 describe('UsersList', () => {
+  beforeAll(() => {
+    /* global jest */
+    /* eslint no-undef: "off" */
+    HTMLDialogElement.prototype.show = jest.fn(function () {
+      this.open = true;
+    });
+
+    HTMLDialogElement.prototype.showModal = jest.fn(function () {
+      this.open = true;
+    });
+
+    HTMLDialogElement.prototype.close = jest.fn(function () {
+      this.open = false;
+    });
+    /* eslint no-undef: "error" */
+  });
   it('sorts all users by username in alpha order', () => {
     // act
     render(

__tests__/components/uswds/Modal.test.js

@@ -67,4 +67,22 @@ describe('Modal', () => {
     // expect
     expect(closeModal).toHaveBeenCalled();
   });
+
+  it('closes modal when a click happens outside modal', () => {
+    // setup
+    const closeModal = jest.fn();
+    // render
+    render(
+      <Modal modalId="modal-id" headingId="heading-id" close={closeModal}>
+        <p id="heading-id">foo content</p>
+      </Modal>
+    );
+    // expect
+    const modalOverlay = screen.getByTestId(/usa-modal-overlay/);
+    expect(modalOverlay).toBeInTheDocument();
+    // act = press escape key
+    fireEvent.click(modalOverlay);
+    // expect
+    expect(closeModal).toHaveBeenCalled();
+  });
 });