From c15e95ee637d43d28e863e3aa5b79750cb76dd82 Mon Sep 17 00:00:00 2001
From: Tobias Barsnes <tobias.barsnes@digdir.no>
Date: Thu, 11 Apr 2024 12:54:23 +0200
Subject: [PATCH] chore(Modal): Update tests to use `Trigger`, and open (#1799)

---
 .../react/src/components/Modal/Modal.test.tsx | 90 ++++++++++++++-----
 test/vitest.setup.ts                          | 18 ++++
 2 files changed, 84 insertions(+), 24 deletions(-)

diff --git a/packages/react/src/components/Modal/Modal.test.tsx b/packages/react/src/components/Modal/Modal.test.tsx
index d2d6d779b2..653a4bad89 100644
--- a/packages/react/src/components/Modal/Modal.test.tsx
+++ b/packages/react/src/components/Modal/Modal.test.tsx
@@ -1,38 +1,24 @@
-import { useRef } from 'react';
 import { act, render as renderRtl, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import { Button } from '../Button';
-
-import type { ModalRootProps } from './ModalRoot';
-
+import type { ModalDialogProps } from './';
 import { Modal } from './';
 
 const HEADER_TITLE = 'Modal header title';
+const OPEN_MODAL = 'Open Modal';
 
-const Comp = (args: Partial<ModalRootProps>) => {
-  const modalRef = useRef<HTMLDialogElement>(null);
-
-  const openModal = () => {
-    console.log(modalRef.current);
-    modalRef.current?.showModal();
-  };
-
+const Comp = (args: Partial<ModalDialogProps>) => {
   return (
     <>
-      <Button onClick={openModal}>Open Modal</Button>
-      <Modal
-        {...args}
-        open
-        ref={modalRef}
-      >
-        {args.children}
-      </Modal>
+      <Modal.Root>
+        <Modal.Trigger>{OPEN_MODAL}</Modal.Trigger>
+        <Modal.Dialog {...args} />
+      </Modal.Root>
     </>
   );
 };
 
-const render = async (props: Partial<ModalRootProps> = {}) => {
+const render = async (props: Partial<ModalDialogProps> = {}) => {
   /* Flush microtasks */
   await act(async () => {});
   const user = userEvent.setup();
@@ -44,8 +30,60 @@ const render = async (props: Partial<ModalRootProps> = {}) => {
 };
 
 describe('Modal', () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('should open the modal', async () => {
+    await render({
+      children: (
+        <>
+          <Modal.Header>{HEADER_TITLE}</Modal.Header>
+        </>
+      ),
+    });
+    const spy = vi.spyOn(HTMLDialogElement.prototype, 'showModal');
+
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+
+    const button = screen.getByRole('button', { name: OPEN_MODAL });
+    await userEvent.click(button);
+
+    expect(spy).toHaveBeenCalledTimes(1);
+
+    expect(screen.queryByRole('dialog')).toBeInTheDocument();
+  });
+
+  it('should open and close the modal', async () => {
+    await render({
+      children: (
+        <>
+          <Modal.Header>{HEADER_TITLE}</Modal.Header>
+        </>
+      ),
+    });
+    const showSpy = vi.spyOn(HTMLDialogElement.prototype, 'showModal');
+    const closeSpy = vi.spyOn(HTMLDialogElement.prototype, 'close');
+
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+
+    const button = screen.getByRole('button', { name: OPEN_MODAL });
+    await userEvent.click(button);
+
+    expect(showSpy).toHaveBeenCalledTimes(1);
+
+    expect(screen.queryByRole('dialog')).toBeInTheDocument();
+
+    const closeButton = screen.getByRole('button', { name: /close/i });
+    await userEvent.click(closeButton);
+
+    expect(closeSpy).toHaveBeenCalledTimes(1);
+
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+  });
+
   it('should render the modal', async () => {
-    await render();
+    await render({ open: true });
     expect(screen.getByRole('dialog')).toBeInTheDocument();
   });
 
@@ -56,12 +94,14 @@ describe('Modal', () => {
           <Modal.Header>{HEADER_TITLE}</Modal.Header>
         </>
       ),
+      open: true,
     });
     expect(screen.getByRole('button', { name: /close/i })).toBeInTheDocument();
   });
 
   it('should not render the close button when closeButton is false', async () => {
     await render({
+      open: true,
       children: (
         <>
           <Modal.Header closeButton={false}>{HEADER_TITLE}</Modal.Header>
@@ -75,6 +115,7 @@ describe('Modal', () => {
 
   it('should render the header title', async () => {
     await render({
+      open: true,
       children: (
         <>
           <Modal.Header>{HEADER_TITLE}</Modal.Header>
@@ -87,6 +128,7 @@ describe('Modal', () => {
   it('should render the header subtitle', async () => {
     const headerSubtitle = 'Modal header subtitle';
     await render({
+      open: true,
       children: (
         <>
           <Modal.Header subtitle={headerSubtitle}>{HEADER_TITLE}</Modal.Header>
@@ -98,7 +140,7 @@ describe('Modal', () => {
 
   it('should render the children', async () => {
     const children = 'Modal children';
-    await render({ children });
+    await render({ children, open: true });
     expect(screen.getByText(children)).toBeInTheDocument();
   });
 });
diff --git a/test/vitest.setup.ts b/test/vitest.setup.ts
index f8571ba711..25daff34d3 100644
--- a/test/vitest.setup.ts
+++ b/test/vitest.setup.ts
@@ -15,5 +15,23 @@ class ResizeObserver {
 }
 window.ResizeObserver = ResizeObserver;
 
+HTMLDialogElement.prototype.show = vi.fn(function mock(
+  this: HTMLDialogElement,
+) {
+  this.open = true;
+});
+
+HTMLDialogElement.prototype.showModal = vi.fn(function mock(
+  this: HTMLDialogElement,
+) {
+  this.open = true;
+});
+
+HTMLDialogElement.prototype.close = vi.fn(function mock(
+  this: HTMLDialogElement,
+) {
+  this.open = false;
+});
+
 const { setScreenWidth } = mockMediaQuery(800);
 setScreenWidth(800);