test(react-teaching-popover): add cypress e2e tests (#36028)

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: layershifter

change/@fluentui-react-teaching-popover-4a2df486-11d9-4385-ae39-ad67db9065d0.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Add cypress e2e tests for TeachingPopover",
+  "packageName": "@fluentui/react-teaching-popover",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "none"
+}

packages/react-components/react-teaching-popover/library/cypress.config.ts

@@ -0,0 +1,3 @@
+import { baseConfig } from '@fluentui/scripts-cypress';
+
+export default baseConfig;

packages/react-components/react-teaching-popover/library/package.json

@@ -52,5 +52,8 @@
       "major",
       "prerelease"
     ]
+  },
+  "devDependencies": {
+    "@fluentui/scripts-cypress": "*"
   }
 }

packages/react-components/react-teaching-popover/library/src/components/TeachingPopover/TeachingPopover.cy.tsx

@@ -0,0 +1,152 @@
+import * as React from 'react';
+import { mount as mountBase } from '@fluentui/scripts-cypress';
+
+import { FluentProvider } from '@fluentui/react-provider';
+import { teamsLightTheme } from '@fluentui/react-theme';
+
+import {
+  TeachingPopover,
+  TeachingPopoverTrigger,
+  TeachingPopoverSurface,
+  TeachingPopoverBody,
+  TeachingPopoverTitle,
+} from '@fluentui/react-teaching-popover';
+import type { TeachingPopoverProps } from '@fluentui/react-teaching-popover';
+import type { JSXElement } from '@fluentui/react-utilities';
+
+const mount = (element: JSXElement) => {
+  mountBase(<FluentProvider theme={teamsLightTheme}>{element}</FluentProvider>);
+};
+
+const triggerSelector = '[aria-expanded]';
+// TeachingPopover defaults to `trapFocus: true`, so the surface is rendered with role="dialog".
+const surfaceSelector = '[role="dialog"]';
+
+describe('TeachingPopover', () => {
+  (['uncontrolled', 'controlled'] as const).forEach(scenario => {
+    const UncontrolledExample = () => (
+      <TeachingPopover>
+        <TeachingPopoverTrigger disableButtonEnhancement>
+          <button>Trigger</button>
+        </TeachingPopoverTrigger>
+        <TeachingPopoverSurface>
+          <TeachingPopoverBody>
+            <TeachingPopoverTitle>Title</TeachingPopoverTitle>
+            <div>This is a teaching popover</div>
+          </TeachingPopoverBody>
+        </TeachingPopoverSurface>
+      </TeachingPopover>
+    );
+
+    const ControlledExample = () => {
+      const [open, setOpen] = React.useState(false);
+
+      return (
+        <TeachingPopover open={open} onOpenChange={(e, data) => setOpen(data.open)}>
+          <TeachingPopoverTrigger disableButtonEnhancement>
+            <button>Trigger</button>
+          </TeachingPopoverTrigger>
+          <TeachingPopoverSurface>
+            <TeachingPopoverBody>
+              <TeachingPopoverTitle>Title</TeachingPopoverTitle>
+              <div>This is a teaching popover</div>
+            </TeachingPopoverBody>
+          </TeachingPopoverSurface>
+        </TeachingPopover>
+      );
+    };
+
+    describe(scenario, () => {
+      const Example = scenario === 'controlled' ? ControlledExample : UncontrolledExample;
+
+      beforeEach(() => {
+        mount(<Example />);
+        cy.get('body').click('bottomRight');
+      });
+
+      it('should open when clicked', () => {
+        cy.get(triggerSelector).click().get(surfaceSelector).should('be.visible');
+      });
+
+      (['{enter}', 'Space'] as const).forEach(key => {
+        it(`should open with ${key}`, () => {
+          cy.get(triggerSelector).focus().realPress(key);
+          cy.get(surfaceSelector).should('be.visible');
+        });
+      });
+
+      it('should dismiss on click outside', () => {
+        cy.get(triggerSelector).click().get('body').click('bottomRight').get(surfaceSelector).should('not.exist');
+      });
+
+      it('should dismiss on Escape keydown', () => {
+        cy.get(triggerSelector).click().realPress('Escape');
+        cy.get(surfaceSelector).should('not.exist');
+      });
+    });
+  });
+
+  describe('focus trap default', () => {
+    it('should trap focus by default', () => {
+      mount(
+        <TeachingPopover>
+          <TeachingPopoverTrigger disableButtonEnhancement>
+            <button>Trigger</button>
+          </TeachingPopoverTrigger>
+          <TeachingPopoverSurface>
+            <button>One</button>
+            <button>Two</button>
+          </TeachingPopoverSurface>
+        </TeachingPopover>,
+      );
+
+      cy.get(triggerSelector).focus().realPress('Enter');
+
+      cy.contains('One').should('have.focus').realPress('Tab');
+      cy.contains('Two').should('have.focus').realPress('Tab');
+      cy.contains('One').should('have.focus');
+    });
+  });
+
+  describe('updating content', () => {
+    const Example = () => {
+      const [visible, setVisible] = React.useState(false);
+      const changeContent = () => setVisible(true);
+      const onOpenChange: TeachingPopoverProps['onOpenChange'] = (e, data) => {
+        if (data.open === false) {
+          setVisible(false);
+        }
+      };
+
+      return (
+        <TeachingPopover onOpenChange={onOpenChange}>
+          <TeachingPopoverTrigger disableButtonEnhancement>
+            <button>Trigger</button>
+          </TeachingPopoverTrigger>
+          <TeachingPopoverSurface>
+            {visible ? (
+              <div>The second panel</div>
+            ) : (
+              <div>
+                <button onClick={changeContent}>Action</button>
+              </div>
+            )}
+          </TeachingPopoverSurface>
+        </TeachingPopover>
+      );
+    };
+
+    it('should not close when inner content changes', () => {
+      mount(<Example />);
+      cy.get(triggerSelector)
+        .click()
+        .get(surfaceSelector)
+        .within(() => {
+          cy.contains('Action').click();
+        })
+        .get(surfaceSelector)
+        .should('exist')
+        .contains('The second panel');
+    });
+  });
+});

packages/react-components/react-teaching-popover/library/tsconfig.cy.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "isolatedModules": false,
+    "types": ["node", "cypress", "cypress-real-events"],
+    "typeRoots": ["../../../../node_modules", "../../../../node_modules/@types"],
+    "lib": ["ES2019", "dom"]
+  },
+  "include": ["**/*.cy.ts", "**/*.cy.tsx"]
+}

packages/react-components/react-teaching-popover/library/tsconfig.json

@@ -17,6 +17,9 @@
     },
     {
       "path": "./tsconfig.spec.json"
+    },
+    {
+      "path": "./tsconfig.cy.json"
     }
   ]
 }

packages/react-components/react-teaching-popover/library/tsconfig.lib.json

@@ -16,7 +16,9 @@
     "**/*.test.ts",
     "**/*.test.tsx",
     "**/*.stories.ts",
-    "**/*.stories.tsx"
+    "**/*.stories.tsx",
+    "**/*.cy.ts",
+    "**/*.cy.tsx"
   ],
   "include": ["./src/**/*.ts", "./src/**/*.tsx"]
 }