From 95e9fc83cd9895c51849dec44eb543f57514ba12 Mon Sep 17 00:00:00 2001
From: TitanKuzmich <yzn-yfv@mail.ru>
Date: Mon, 16 Dec 2024 18:11:21 +0300
Subject: [PATCH] feat(plasma-*): add target as ref test for Popover

---
 .../Popover/Popover.component-test.tsx        | 41 ++++++++++++++++++-
 .../Popover/Popover.component-test.tsx        | 41 ++++++++++++++++++-
 2 files changed, 80 insertions(+), 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
index b48ca35565..d975a1ca79 100644
--- 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
index 25f3a02813..f5f57c9d2a 100644
--- 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');
+    });
 });