Coachmark (v8): convert tests to use testing-library (#22242)

microsoft · Mar 30, 2022 · 50b0659 · 50b0659
1 parent 6fb23fe
commit 50b0659
Show file tree

Hide file tree

Showing 2 changed files with 474 additions and 610 deletions.
diff --git a/packages/react/src/components/Coachmark/Coachmark.test.tsx b/packages/react/src/components/Coachmark/Coachmark.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { Coachmark } from './Coachmark';
-import { safeCreate, safeMount } from '@fluentui/test-utilities';
+import { Coachmark, ICoachmarkProps } from './index';
+import { render, within } from '@testing-library/react';
 import { resetIds } from '@fluentui/utilities';
 import { isConformant } from '../../common/isConformant';
 import * as path from 'path';
@@ -30,66 +30,65 @@ describe('Coachmark', () => {
   it('renders Coachmark (correctly)', () => {
     ReactDOM.createPortal = jest.fn(element => element);
 
-    safeCreate(
+    const { container } = render(
       <Coachmark className={'test-className'} target="test-target">
         This is a test
       </Coachmark>,
-      component => {
-        const tree = component!.toJSON();
-        expect(tree).toMatchSnapshot();
-      },
     );
+    expect(container).toMatchSnapshot();
   });
 
   it('renders Coachmark (isCollapsed)', () => {
     ReactDOM.createPortal = jest.fn(element => element);
 
-    safeCreate(
+    const { container } = render(
       <Coachmark isCollapsed={false} className={'test-className'} target="test-target">
         This is a test
       </Coachmark>,
-      component => {
-        const tree = component!.toJSON();
-        expect(tree).toMatchSnapshot();
-      },
     );
+    expect(container).toMatchSnapshot();
   });
 
   it('renders Coachmark (color properties)', () => {
     ReactDOM.createPortal = jest.fn(element => element);
 
-    safeCreate(<Coachmark beaconColorOne="green" beaconColorTwo="blue" color="red" target="test" />, component => {
-      const tree = component!.toJSON();
-      expect(tree).toMatchSnapshot();
-    });
+    const { container } = render(<Coachmark beaconColorOne="green" beaconColorTwo="blue" color="red" target="test" />);
+    expect(container).toMatchSnapshot();
   });
 
   // Accessibility Tests:
   it('correctly applies (ariaAlertText)', () => {
-    safeMount(<Coachmark ariaAlertText="aria alert " target="test-target" />, component => {
-      expect(component.find('[role="alert"]').getDOMNode()).toBeDefined();
-    });
+    const { getByRole } = render(<Coachmark ariaAlertText="aria alert " target="test-target" />);
+    expect(getByRole('alert')).toBeTruthy();
   });
 
   it('correctly applies (ariaLabelBy)', () => {
-    safeMount(
-      <Coachmark ariaLabelledBy="aria label" ariaLabelledByText="aria text" target="test-target" />,
-      component => {
-        expect(component.find('[role="dialog"]').getDOMNode().getAttribute('aria-labelledby')).toBe('aria label');
-        expect(component.find('[id="aria label"]').text()).toBe('aria text');
-      },
+    const { getByRole } = render(
+      <Coachmark
+        ariaLabelledBy="aria label"
+        ariaLabelledByText="aria text"
+        target={document as ICoachmarkProps['target']}
+      />,
     );
+
+    //coachmark is hidden since it has a parent wrapper with role=presentation when not in a collapsed state.
+    const coachmark = getByRole('dialog', { hidden: true });
+    expect(coachmark.getAttribute('aria-labelledby')).toBe('aria label');
+    expect(within(coachmark).queryByText('aria text')).toBeTruthy();
   });
 
   it('correctly applies (ariaDescribedBy)', () => {
-    safeMount(
-      <Coachmark ariaDescribedBy="aria description" ariaDescribedByText="aria description text" target="test-target" />,
-      component => {
-        expect(component.find('[role="dialog"]').getDOMNode().getAttribute('aria-describedby')).toBe(
-          'aria description',
-        );
-        expect(component.find('[id="aria description"]').text()).toBe('aria description text');
-      },
+    const { getByRole } = render(
+      <Coachmark
+        ariaDescribedBy="aria description"
+        ariaDescribedByText="aria description text"
+        target={document as ICoachmarkProps['target']}
+      />,
     );
+
+    //coachmark is hidden since it has a parent wrapper with role=presentation when not in a collapsed state.
+    const coachmark = getByRole('dialog', { hidden: true });
+    expect(coachmark.getAttribute('aria-describedby')).toBe('aria description');
+    expect(within(coachmark).queryByText('aria description text')).toBeTruthy();
   });
 });