test(Popover): add e2e tests

e2e/components/Popover/Popover-test.e2e.js

@@ -0,0 +1,45 @@
+/**
+ * Copyright IBM Corp. 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+const { expect, test } = require('@playwright/test');
+const { themes } = require('../../test-utils/env');
+const { snapshotStory, visitStory } = require('../../test-utils/storybook');
+
+test.describe('Popover', () => {
+  themes.forEach((theme) => {
+    test.describe(theme, () => {
+      test('Popover - auto align @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'Popover',
+          id: 'components-popover--auto-align',
+          theme,
+        });
+      });
+
+      test('Popover - isTabTip @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'Popover',
+          id: 'components-popover--tab-tip',
+          theme,
+        });
+      });
+    });
+  });
+
+  test('accessibility-checker @avt', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Popover',
+      id: 'components-popover--auto-align',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('Popover');
+  });
+});

packages/react/src/components/Popover/Popover.stories.js

@@ -78,7 +78,7 @@ const PlaygroundStory = (props) => {
 };
 
 export const TabTip = () => {
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState(true);
   const [openTwo, setOpenTwo] = useState(false);
   return (
     <div

packages/react/src/components/Popover/__tests__/Popover-test.js

@@ -9,6 +9,8 @@ import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { Popover, PopoverContent } from '../../Popover';
 
+const prefix = 'cds';
+
 describe('Popover', () => {
   it('should support a ref on the outermost element', () => {
     const ref = jest.fn();
@@ -75,5 +77,31 @@ describe('Popover', () => {
       );
       expect(container.firstChild).toHaveAttribute('id', 'test');
     });
+
+    // Tab Tip tests
+    it('should respect isTabTip prop', () => {
+      const { container } = render(
+        <Popover open isTabTip>
+          <button type="button">Settings</button>
+          <PopoverContent>test</PopoverContent>
+        </Popover>
+      );
+      expect(container.firstChild).toHaveClass(`${prefix}--popover--tab-tip`);
+    });
+
+    it('should not allow other alignments than bottom-left or bottom-right when isTabTip is present', () => {
+      const { container } = render(
+        <Popover open isTabTip align="top-left">
+          <button type="button">Settings</button>
+          <PopoverContent data-testid="test">test</PopoverContent>
+        </Popover>
+      );
+      expect(container.firstChild).not.toHaveClass(
+        `${prefix}--popover--top-left`
+      );
+      expect(container.firstChild).toHaveClass(
+        `${prefix}--popover--bottom-left`
+      );
+    });
   });
 });

packages/react/src/components/Popover/index.tsx

@@ -44,7 +44,7 @@ interface PopoverBaseProps {
   align?: PopoverAlignment;
 
   /**
-   * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to futurue changes.
+   * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
    */
   autoAlign?: boolean;