refactoring studio modal to use designsystem modal (#11792)

* refactoring studio modal to use designsystem modal * fixing feedback from PR
Altinn · Dec 6, 2023 · ea84087 · ea84087
1 parent a607766
commit ea84087
Show file tree

Hide file tree

Showing 27 changed files with 935 additions and 947 deletions.
diff --git a/frontend/app-development/layout/SettingsModalButton/SettingsModal/SettingsModal.module.css b/frontend/app-development/layout/SettingsModalButton/SettingsModal/SettingsModal.module.css
@@ -12,14 +12,14 @@
 
 .leftNavigationBar {
   min-height: 200px;
-  border-bottom-left-radius: 20px;
 }
 
 .headingWrapper {
   display: flex;
   align-items: center;
   padding-block: 10px;
   padding-inline: 20px;
+  border-bottom: 1px solid var(--fds-semantic-border-divider-default);
 }
 
 .headingWrapper > :first-child {

diff --git a/frontend/app-development/layout/SettingsModalButton/SettingsModal/SettingsModal.test.tsx b/frontend/app-development/layout/SettingsModalButton/SettingsModal/SettingsModal.test.tsx
@@ -1,10 +1,5 @@
-import React from 'react';
-import {
-  render as rtlRender,
-  screen,
-  act,
-  waitForElementToBeRemoved,
-} from '@testing-library/react';
+import React, { useRef } from 'react';
+import { render as rtlRender, screen, act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { SettingsModal, SettingsModalProps } from './SettingsModal';
 import { textMock } from '../../../../testing/mocks/i18nMock';
@@ -16,6 +11,8 @@ import { AppConfig } from 'app-shared/types/AppConfig';
 import { useAppConfigMutation } from 'app-development/hooks/mutations';
 import { MemoryRouter } from 'react-router-dom';
 
+const mockButtonText: string = 'Mock Button';
+
 const mockApp: string = 'app';
 const mockOrg: string = 'org';
 
@@ -39,8 +36,15 @@ mockUpdateAppConfigMutation.mockReturnValue({
   mutate: updateAppConfigMutation,
 } as unknown as UseMutationResult<void, Error, AppConfig, unknown>);
 
+const mockOnClose = jest.fn();
+
+const defaultProps: SettingsModalProps = {
+  onClose: mockOnClose,
+  org: mockOrg,
+  app: mockApp,
+};
+
 describe('SettingsModal', () => {
-  const user = userEvent.setup();
   beforeEach(() => {
     global.console = {
       ...console,
@@ -52,26 +56,8 @@ describe('SettingsModal', () => {
     jest.clearAllMocks();
   });
 
-  const mockOnClose = jest.fn();
-
-  const defaultProps: SettingsModalProps = {
-    isOpen: true,
-    onClose: mockOnClose,
-    org: mockOrg,
-    app: mockApp,
-  };
-
-  it('closes the modal when the close button is clicked', async () => {
-    render(defaultProps);
-
-    const closeButton = screen.getByRole('button', { name: textMock('modal.close_icon') });
-    await act(() => user.click(closeButton));
-
-    expect(mockOnClose).toHaveBeenCalledTimes(1);
-  });
-
   it('displays left navigation bar when promises resolves', async () => {
-    await resolveAndWaitForSpinnerToDisappear();
+    await renderAndOpenModal();
 
     expect(
       screen.getByRole('tab', { name: textMock('settings_modal.left_nav_tab_about') }),
@@ -91,7 +77,7 @@ describe('SettingsModal', () => {
   });
 
   it('displays the about tab, and not the other tabs, when promises resolves first time', async () => {
-    await resolveAndWaitForSpinnerToDisappear();
+    await renderAndOpenModal();
 
     expect(screen.getByText(textMock('settings_modal.about_tab_heading'))).toBeInTheDocument();
     expect(
@@ -109,7 +95,8 @@ describe('SettingsModal', () => {
   });
 
   it('changes the tab from "about" to "policy" when policy tab is clicked', async () => {
-    await resolveAndWaitForSpinnerToDisappear();
+    const user = userEvent.setup();
+    await renderAndOpenModal();
 
     expect(
       screen.queryByRole('heading', {
@@ -136,7 +123,8 @@ describe('SettingsModal', () => {
   });
 
   it('changes the tab from "policy" to "about" when about tab is clicked', async () => {
-    await resolveAndWaitForSpinnerToDisappear();
+    const user = userEvent.setup();
+    await renderAndOpenModal();
 
     const policyTab = screen.getByRole('tab', {
       name: textMock('settings_modal.left_nav_tab_policy'),
@@ -157,8 +145,9 @@ describe('SettingsModal', () => {
     expect(screen.getByText(textMock('settings_modal.about_tab_heading'))).toBeInTheDocument();
   });
 
-  it.only('changes the tab from "about" to "localChanges" when local changes tab is clicked', async () => {
-    await resolveAndWaitForSpinnerToDisappear();
+  it('changes the tab from "about" to "localChanges" when local changes tab is clicked', async () => {
+    const user = userEvent.setup();
+    await renderAndOpenModal();
 
     expect(
       screen.queryByRole('heading', {
@@ -184,7 +173,8 @@ describe('SettingsModal', () => {
   });
 
   it('changes the tab from "about" to "accessControl" when access control tab is clicked', async () => {
-    await resolveAndWaitForSpinnerToDisappear();
+    const user = userEvent.setup();
+    await renderAndOpenModal();
 
     expect(
       screen.queryByRole('heading', {
@@ -211,7 +201,8 @@ describe('SettingsModal', () => {
   });
 
   it('changes the tab from "about" to "setup" when setup control tab is clicked', async () => {
-    await resolveAndWaitForSpinnerToDisappear();
+    const user = userEvent.setup();
+    await renderAndOpenModal();
 
     expect(
       screen.queryByRole('heading', {
@@ -236,22 +227,10 @@ describe('SettingsModal', () => {
       screen.queryByText(textMock('settings_modal.about_tab_heading')),
     ).not.toBeInTheDocument();
   });
-
-  /**
-   * Resolves the mocks, renders the component and waits for the spinner
-   * to be removed from the screen
-   */
-  const resolveAndWaitForSpinnerToDisappear = async () => {
-    render(defaultProps);
-
-    await waitForElementToBeRemoved(() =>
-      screen.queryByTitle(textMock('settings_modal.loading_content')),
-    );
-  };
 });
 
 const render = (
-  props: SettingsModalProps,
+  props: Partial<SettingsModalProps> = {},
   queries: Partial<ServicesContextProps> = {},
   queryClient: QueryClient = createQueryClientMock(),
 ) => {
@@ -262,8 +241,27 @@ const render = (
   return rtlRender(
     <MemoryRouter>
       <ServicesContextProvider {...allQueries} client={queryClient}>
-        <SettingsModal {...props} />
+        <TestComponentWithButton {...defaultProps} {...props} />
       </ServicesContextProvider>
     </MemoryRouter>,
   );
 };
+
+const renderAndOpenModal = async (props: Partial<SettingsModalProps> = {}) => {
+  const user = userEvent.setup();
+  render(props);
+
+  const openModalButton = screen.getByRole('button', { name: mockButtonText });
+  await act(() => user.click(openModalButton));
+};
+
+const TestComponentWithButton = (props: Partial<SettingsModalProps> = {}) => {
+  const modalRef = useRef<HTMLDialogElement>(null);
+
+  return (
+    <>
+      <button onClick={() => modalRef.current?.showModal()}>{mockButtonText}</button>
+      <SettingsModal ref={modalRef} {...defaultProps} {...props} />
+    </>
+  );
+};