feat(plasma-*): add target as ref test for Popover

salute-developers · Dec 23, 2024 · b7f21bc · b7f21bc
1 parent 6ebf13d
commit b7f21bc
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 2 deletions.
diff --git a/packages/plasma-b2c/src/components/Popover/Popover.component-test.tsx b/packages/plasma-b2c/src/components/Popover/Popover.component-test.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { RefObject, useRef } from 'react';
 import { mount, CypressTestDecorator, getComponent } from '@salutejs/plasma-cy-utils';
 
 import type { PopoverTrigger } from '.';
@@ -107,4 +107,43 @@ describe('plasma-b2c: Popover', () => {
         cy.get('body').type('{esc}');
         cy.get('p').contains(text).should('not.be.visible');
     });
+
+    const TargetAsRef = () => {
+        const [isOpen, setIsOpen] = React.useState(false);
+        const targetRef = useRef<HTMLButtonElement>(null);
+
+        return (
+            <>
+                <Button ref={targetRef}>Target</Button>
+                <Popover
+                    opened={isOpen}
+                    onToggle={(is) => setIsOpen(is)}
+                    role="presentation"
+                    id="popover"
+                    target={targetRef}
+                    trigger="click"
+                    closeOnEsc
+                >
+                    <div>
+                        <P1>{text}</P1>
+                        <Button onClick={() => setIsOpen(!isOpen)}>close</Button>
+                    </div>
+                </Popover>
+            </>
+        );
+    };
+
+    it('target as ref', () => {
+        mount(
+            <CypressTestDecorator>
+                <TargetAsRef />
+            </CypressTestDecorator>,
+        );
+
+        cy.get('button').first().click();
+        cy.get('p').contains(text).should('be.visible');
+
+        cy.get('body').type('{esc}');
+        cy.get('p').contains(text).should('not.be.visible');
+    });
 });
diff --git a/packages/plasma-web/src/components/Popover/Popover.component-test.tsx b/packages/plasma-web/src/components/Popover/Popover.component-test.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { mount, CypressTestDecorator, getComponent } from '@salutejs/plasma-cy-utils';
 
 import type { PopoverTrigger } from '.';
@@ -107,4 +107,43 @@ describe('plasma-web: Popover', () => {
         cy.get('body').type('{esc}');
         cy.get('p').contains(text).should('not.be.visible');
     });
+
+    const TargetAsRef = () => {
+        const [isOpen, setIsOpen] = React.useState(false);
+        const targetRef = useRef<HTMLButtonElement>(null);
+
+        return (
+            <>
+                <Button ref={targetRef}>Target</Button>
+                <Popover
+                    opened={isOpen}
+                    onToggle={(is) => setIsOpen(is)}
+                    role="presentation"
+                    id="popover"
+                    target={targetRef}
+                    trigger="click"
+                    closeOnEsc
+                >
+                    <div>
+                        <P1>{text}</P1>
+                        <Button onClick={() => setIsOpen(!isOpen)}>close</Button>
+                    </div>
+                </Popover>
+            </>
+        );
+    };
+
+    it('target as ref', () => {
+        mount(
+            <CypressTestDecorator>
+                <TargetAsRef />
+            </CypressTestDecorator>,
+        );
+
+        cy.get('button').first().click();
+        cy.get('p').contains(text).should('be.visible');
+
+        cy.get('body').type('{esc}');
+        cy.get('p').contains(text).should('not.be.visible');
+    });
 });