1 files changed, 167 insertions, 0 deletions
diff --git a/server/sonar-web/design-system/src/helpers/__tests__/positioning-test.ts b/server/sonar-web/design-system/src/helpers/__tests__/positioning-test.ts
new file mode 100644
index 00000000000..7953d3531c9
--- /dev/null
+++ b/server/sonar-web/design-system/src/helpers/__tests__/positioning-test.ts
@@ -0,0 +1,167 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2023 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import { PopupPlacement, popupPositioning } from '../positioning';
+
+const toggleRect = {
+  getBoundingClientRect: jest.fn().mockReturnValue({
+    left: 400,
+    top: 200,
+    width: 50,
+    height: 20,
+  }),
+} as any;
+
+const popupRect = {
+  getBoundingClientRect: jest.fn().mockReturnValue({
+    width: 200,
+    height: 100,
+  }),
+} as any;
+
+beforeAll(() => {
+  Object.defineProperties(document.documentElement, {
+    clientWidth: {
+      configurable: true,
+      value: 1000,
+    },
+    clientHeight: {
+      configurable: true,
+      value: 1000,
+    },
+  });
+});
+
+it('should calculate positioning based on placement', () => {
+  const fixes = { leftFix: 0, topFix: 0 };
+  expect(popupPositioning(toggleRect, popupRect, PopupPlacement.Bottom)).toMatchObject({
+    left: 325,
+    top: 220,
+    ...fixes,
+  });
+  expect(popupPositioning(toggleRect, popupRect, PopupPlacement.BottomLeft)).toMatchObject({
+    left: 400,
+    top: 220,
+    ...fixes,
+  });
+  expect(popupPositioning(toggleRect, popupRect, PopupPlacement.BottomRight)).toMatchObject({
+    left: 250,
+    top: 220,
+    ...fixes,
+  });
+  expect(popupPositioning(toggleRect, popupRect, PopupPlacement.Top)).toMatchObject({
+    left: 325,
+    top: 100,
+    ...fixes,
+  });
+  expect(popupPositioning(toggleRect, popupRect, PopupPlacement.TopLeft)).toMatchObject({
+    left: 400,
+    top: 100,
+    ...fixes,
+  });
+  expect(popupPositioning(toggleRect, popupRect, PopupPlacement.TopRight)).toMatchObject({
+    left: 250,
+    top: 100,
+    ...fixes,
+  });
+  expect(popupPositioning(toggleRect, popupRect, PopupPlacement.Left)).toMatchObject({
+    left: 200,
+    top: 160,
+    ...fixes,
+  });
+  expect(popupPositioning(toggleRect, popupRect, PopupPlacement.LeftBottom)).toMatchObject({
+    left: 200,
+    top: 120,
+    ...fixes,
+  });
+  expect(popupPositioning(toggleRect, popupRect, PopupPlacement.LeftTop)).toMatchObject({
+    left: 200,
+    top: 200,
+    ...fixes,
+  });
+  expect(popupPositioning(toggleRect, popupRect, PopupPlacement.Right)).toMatchObject({
+    left: 450,
+    top: 160,
+    ...fixes,
+  });
+  expect(popupPositioning(toggleRect, popupRect, PopupPlacement.RightBottom)).toMatchObject({
+    left: 450,
+    top: 120,
+    ...fixes,
+  });
+  expect(popupPositioning(toggleRect, popupRect, PopupPlacement.RightTop)).toMatchObject({
+    left: 450,
+    top: 200,
+    ...fixes,
+  });
+});
+
+it('should position the element in the boundaries of the screen', () => {
+  toggleRect.getBoundingClientRect.mockReturnValueOnce({
+    left: 0,
+    top: 850,
+    width: 50,
+    height: 50,
+  });
+  expect(popupPositioning(toggleRect, popupRect, PopupPlacement.Bottom)).toMatchObject({
+    left: 4,
+    leftFix: 79,
+    top: 896,
+    topFix: -4,
+  });
+  toggleRect.getBoundingClientRect.mockReturnValueOnce({
+    left: 900,
+    top: 0,
+    width: 50,
+    height: 50,
+  });
+  expect(popupPositioning(toggleRect, popupRect, PopupPlacement.Top)).toMatchObject({
+    left: 796,
+    leftFix: -29,
+    top: 4,
+    topFix: 104,
+  });
+});
+
+it('should position the element outside the boundaries of the screen when the toggle is outside', () => {
+  toggleRect.getBoundingClientRect.mockReturnValueOnce({
+    left: -100,
+    top: 1100,
+    width: 50,
+    height: 50,
+  });
+  expect(popupPositioning(toggleRect, popupRect, PopupPlacement.Bottom)).toMatchObject({
+    left: -75,
+    leftFix: 100,
+    top: 1025,
+    topFix: -125,
+  });
+  toggleRect.getBoundingClientRect.mockReturnValueOnce({
+    left: 1500,
+    top: -200,
+    width: 50,
+    height: 50,
+  });
+  expect(popupPositioning(toggleRect, popupRect, PopupPlacement.Top)).toMatchObject({
+    left: 1325,
+    leftFix: -100,
+    top: -175,
+    topFix: 125,
+  });
+});