update test assertions

Author: karthikjeeyar

packages/module/src/AttachmentEdit/AttachmentEdit.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, within } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import AttachmentEdit, { AttachmentEditProps } from './AttachmentEdit';
 
@@ -67,8 +67,8 @@ describe('AttachmentEdit', () => {
       />
     );
 
-    screen.getByText('Save');
-    screen.getByText('Close');
+    expect(screen.getByText('Save')).toBeInTheDocument();
+    expect(screen.getByText('Close')).toBeInTheDocument();
   });
 
   it('should render AttachmentEdit with custom classNames', async () => {
@@ -88,11 +88,12 @@ describe('AttachmentEdit', () => {
       ></AttachmentEdit>
     );
 
-    const modalHeader = document.querySelector('header.custom-header-class');
-    expect(modalHeader).toBeInTheDocument();
-    const modalBody = document.querySelector('.custom-body-class');
-    expect(modalBody).toBeInTheDocument();
-    const modalfooter = document.querySelector('.custom-footer-class');
-    expect(modalfooter).toBeInTheDocument();
+    const modal = screen.getByRole('dialog');
+    const modalHeader = within(modal).getByRole('banner');
+    expect(modalHeader).toHaveClass('custom-header-class');
+    const modalBody = modal.querySelector('#code-modal-body');
+    expect(modalBody).toHaveClass('custom-body-class');
+    const modalfooter = within(modal).getByRole('contentinfo');
+    expect(modalfooter).toHaveClass('custom-footer-class');
   });
 });

packages/module/src/CodeModal/CodeModal.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, within } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import CodeModal from './CodeModal';
 
@@ -40,11 +40,12 @@ describe('ChatbotModal', () => {
       ></CodeModal>
     );
 
-    const modalHeader = document.querySelector('header.custom-header-class');
-    expect(modalHeader).toBeInTheDocument();
-    const modalBody = document.querySelector('.custom-body-class');
-    expect(modalBody).toBeInTheDocument();
-    const modalfooter = document.querySelector('.custom-footer-class');
-    expect(modalfooter).toBeInTheDocument();
+    const modal = screen.getByRole('dialog');
+    const modalHeader = within(modal).getByRole('banner');
+    expect(modalHeader).toHaveClass('custom-header-class');
+    const modalBody = modal.querySelector('#code-modal-body');
+    expect(modalBody).toHaveClass('custom-body-class');
+    const modalfooter = within(modal).getByRole('contentinfo');
+    expect(modalfooter).toHaveClass('custom-footer-class');
   });
 });

packages/module/src/PreviewAttachment/PreviewAttachment.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, within } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { PreviewAttachment } from './PreviewAttachment';
 
@@ -82,11 +82,12 @@ describe('PreviewAttachment', () => {
       ></PreviewAttachment>
     );
 
-    const modalHeader = document.querySelector('header.custom-header-class');
-    expect(modalHeader).toBeInTheDocument();
-    const modalBody = document.querySelector('.custom-body-class');
-    expect(modalBody).toBeInTheDocument();
-    const modalfooter = document.querySelector('.custom-footer-class');
-    expect(modalfooter).toBeInTheDocument();
+    const modal = screen.getByRole('dialog');
+    const modalHeader = within(modal).getByRole('banner');
+    expect(modalHeader).toHaveClass('custom-header-class');
+    const modalBody = modal.querySelector('#code-modal-body');
+    expect(modalBody).toHaveClass('custom-body-class');
+    const modalfooter = within(modal).getByRole('contentinfo');
+    expect(modalfooter).toHaveClass('custom-footer-class');
   });
 });