Add tests

microsoft · Jun 28, 2023 · dc2d72e · dc2d72e
1 parent 27f157b
commit dc2d72e
Show file tree

Hide file tree

Showing 3 changed files with 196 additions and 2 deletions.
diff --git a/packages/react-components/react-toast/src/components/Toast/Toast.cy.tsx b/packages/react-components/react-toast/src/components/Toast/Toast.cy.tsx
@@ -279,4 +279,199 @@ describe('Toast', () => {
       .eq(3)
       .should('have.text', 'unmounted');
   });
+
+  it('should focus most recent toast with shortcut', () => {
+    const Example = () => {
+      const { dispatchToast } = useToastController();
+      const makeToast = () => {
+        dispatchToast(
+          <Toast>
+            <ToastTitle>This is a toast</ToastTitle>
+          </Toast>,
+          { timeout: 500 },
+        );
+        dispatchToast(
+          <Toast>
+            <ToastTitle>This is a toast</ToastTitle>
+          </Toast>,
+          { timeout: 500, root: { id: 'most-recent' } },
+        );
+      };
+
+      return (
+        <>
+          <button id="make" onClick={makeToast}>
+            Make toast
+          </button>
+          <Toaster shortcuts={{ focus: e => e.ctrlKey && e.key === 'm' }} />
+        </>
+      );
+    };
+
+    mount(<Example />);
+    cy.get('#make')
+      .click()
+      .get('#most-recent')
+      .should('exist')
+      .get('body')
+      .type('{ctrl+m}')
+      .get('#most-recent')
+      .should('be.focused');
+  });
+
+  it('should pause all toasts when one is focused', () => {
+    const Example = () => {
+      const { dispatchToast } = useToastController();
+      const makeToast = () => {
+        dispatchToast(
+          <Toast>
+            <ToastTitle>This is a toast</ToastTitle>
+          </Toast>,
+          { timeout: 200 },
+        );
+        dispatchToast(
+          <Toast>
+            <ToastTitle>This is a toast</ToastTitle>
+          </Toast>,
+          { timeout: 200, root: { id: 'most-recent' } },
+        );
+      };
+
+      return (
+        <>
+          <button id="make" onClick={makeToast}>
+            Make toast
+          </button>
+          <Toaster shortcuts={{ focus: e => e.ctrlKey && e.key === 'm' }} />
+        </>
+      );
+    };
+
+    mount(<Example />);
+    cy.get('#make')
+      .click()
+      .get('#most-recent')
+      .should('exist')
+      .get('body')
+      .type('{ctrl+m}')
+      .get('#most-recent')
+      .should('be.focused')
+      .wait(500)
+      .get(`.${toastClassNames.root}`)
+      .should('have.length', 2);
+  });
+
+  it('should dismiss toast with escape and revert focus', () => {
+    const Example = () => {
+      const { dispatchToast } = useToastController();
+      const makeToast = () => {
+        dispatchToast(
+          <Toast>
+            <ToastTitle>This is a toast</ToastTitle>
+          </Toast>,
+          { timeout: 200 },
+        );
+      };
+
+      return (
+        <>
+          <button id="make" onClick={makeToast}>
+            Make toast
+          </button>
+          <Toaster shortcuts={{ focus: e => e.ctrlKey && e.key === 'm' }} />
+        </>
+      );
+    };
+
+    mount(<Example />);
+    cy.get('#make')
+      .click()
+      .get(`.${toastClassNames.root}`)
+      .should('exist')
+      .get('body')
+      .type('{ctrl+m}')
+      .focused()
+      .type('{esc}')
+      .get(`.${toastClassNames.root}`)
+      .should('not.exist')
+      .get('#make')
+      .should('be.focused');
+  });
+
+  it('should dismiss toast and revert focus with escape', () => {
+    const Example = () => {
+      const { dispatchToast } = useToastController();
+      const makeToast = () => {
+        dispatchToast(
+          <Toast>
+            <ToastTitle>This is a toast</ToastTitle>
+          </Toast>,
+          { timeout: 200 },
+        );
+      };
+
+      return (
+        <>
+          <button id="make" onClick={makeToast}>
+            Make toast
+          </button>
+          <Toaster shortcuts={{ focus: e => e.ctrlKey && e.key === 'm' }} />
+        </>
+      );
+    };
+
+    mount(<Example />);
+    cy.get('#make')
+      .click()
+      .get(`.${toastClassNames.root}`)
+      .should('exist')
+      .get('body')
+      .type('{ctrl+m}')
+      .focused()
+      .type('{esc}')
+      .get(`.${toastClassNames.root}`)
+      .should('not.exist')
+      .get('#make')
+      .should('be.focused');
+  });
+
+  it('should revert focus on tab out', () => {
+    const Example = () => {
+      const { dispatchToast } = useToastController();
+      const makeToast = () => {
+        dispatchToast(
+          <Toast>
+            <ToastTitle>This is a toast</ToastTitle>
+          </Toast>,
+          { timeout: 200, root: { id: 'toast' } },
+        );
+      };
+
+      return (
+        <>
+          <button id="make" onClick={makeToast}>
+            Make toast
+          </button>
+          <button>Foo</button>
+          <button>Foo</button>
+          <button>Foo</button>
+          <button>Foo</button>
+          <Toaster shortcuts={{ focus: e => e.ctrlKey && e.key === 'm' }} />
+        </>
+      );
+    };
+
+    mount(<Example />);
+    cy.get('#make')
+      .click()
+      .get('#toast')
+      .should('exist')
+      .get('body')
+      .type('{ctrl+m}')
+      .get('#toast')
+      .should('be.focused')
+      .realPress(['Shift', 'Tab']);
+
+    cy.get('#make').should('be.focused');
+  });
 });
diff --git a/packages/react-components/react-toast/src/components/ToastContainer/useToastContainer.ts b/packages/react-components/react-toast/src/components/ToastContainer/useToastContainer.ts
@@ -74,7 +74,6 @@ export const useToastContainer_unstable = (
       return;
     }
     const containsActive = !!toastRef.current?.contains(targetDocument?.activeElement ?? null);
-    // TODO test this
     if (timerTimeout < 0) {
       setRunning(true);
       return;

diff --git a/packages/react-components/react-toast/src/components/ToastTrigger/ToastTrigger.tsx b/packages/react-components/react-toast/src/components/ToastTrigger/ToastTrigger.tsx
@@ -4,7 +4,7 @@ import { renderToastTrigger_unstable } from './renderToastTrigger';
 import type { ToastTriggerProps } from './ToastTrigger.types';
 
 /**
- * ToastTrigger component - TODO: add more docs
+ * ToastTrigger component
  */
 export const ToastTrigger: React.FC<ToastTriggerProps> = props => {
   const state = useToastTrigger_unstable(props);