Repository: marigold-ui/marigold
Pull request #2637 (2022-11-11 12:58:54)

chore: added overlay,popover, underlay tests
closes: #2634 

changeset-bot[bot]: ###  ⚠️  No Changeset found

Latest commit: 632468101173f74d054aa673d7a92ff470a96965

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. **If these changes should result in a version bump, you need to add a changeset.**

<details><summary>This PR includes no changesets</summary>

  When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

</details>

[Click here to learn what changesets are, and how to add one](https://github.com/changesets/changesets/blob/master/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add a changeset to this PR](https://github.com/marigold-ui/marigold/new/overlay-tests?filename=.changeset/tall-glasses-care.md&value=---%0A%22%40marigold%2Fcomponents%22%3A%20patch%0A---%0A%0Achore%3A%20added%20overlay%2Cpopover%2C%20underlay%20tests%0A)



Patch:
diff --git a/packages/components/src/Columns/Columns.tsx b/packages/components/src/Columns/Columns.tsx
index 95d20905d..94576a0f0 100755
--- a/packages/components/src/Columns/Columns.tsx
+++ b/packages/components/src/Columns/Columns.tsx
@@ -59,7 +59,7 @@ export const Columns = ({
             flexGrow: columns[idx],
           }}
         >
-          {isValidElement(child) ? cloneElement(child) : null}
+          {isValidElement(child) ? cloneElement(child) : child}
         </Box>
       ))}
     </Box>


Test patch:
diff --git a/packages/components/src/Columns/Columns.test.tsx b/packages/components/src/Columns/Columns.test.tsx
index 2496611b4..1e33816aa 100644
--- a/packages/components/src/Columns/Columns.test.tsx
+++ b/packages/components/src/Columns/Columns.test.tsx
@@ -132,3 +132,13 @@ test('supports stretching to full height', () => {
   const container = screen.getByTestId(/columns/);
   expect(container).toHaveStyle(`height: 100%`);
 });
+
+test('does work with non react elements', () => {
+  render(
+    <Columns columns={[1]} data-testid="columns">
+      hello
+    </Columns>
+  );
+  const container = screen.getByTestId(/columns/);
+  expect(container).toHaveTextContent('hello');
+});
diff --git a/packages/components/src/Overlay/overlay.test.tsx b/packages/components/src/Overlay/overlay.test.tsx
new file mode 100644
index 000000000..ee7bb0002
--- /dev/null
+++ b/packages/components/src/Overlay/overlay.test.tsx
@@ -0,0 +1,191 @@
+/* eslint-disable testing-library/no-node-access */
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { OverlayProvider } from '@react-aria/overlays';
+import { ThemeProvider } from '@marigold/system';
+import { Overlay } from './Overlay';
+import { Popover } from './Popover';
+import { Underlay } from './Underlay';
+
+const theme = {
+  colors: {
+    black: '#212529',
+    white: '#f8f9fa',
+    pink: '#fcc2d7',
+  },
+  space: {
+    none: 0,
+    small: 4,
+    large: 10,
+  },
+  components: {
+    Underlay: {
+      variant: {
+        one: {
+          bg: 'pink',
+        },
+      },
+      size: {
+        small: {
+          p: 'small',
+        },
+      },
+    },
+  },
+};
+
+// Overlay tests
+// ---------------
+test('renders open overlay', () => {
+  render(
+    <OverlayProvider>
+      <Overlay data-testid="overlay" open>
+        <div>something</div>
+      </Overlay>
+    </OverlayProvider>
+  );
+
+  const overlay = screen.getByTestId('overlay');
+  expect(overlay).toBeInTheDocument();
+});
+
+test('overlay is per default closed', () => {
+  render(
+    <OverlayProvider data-testid="overlay">
+      <Overlay>
+        <div>something</div>
+      </Overlay>
+    </OverlayProvider>
+  );
+
+  const overlay = screen.getByTestId('overlay').firstChild;
+  expect(overlay).not.toBeInTheDocument();
+});
+
+test('overlay has children', () => {
+  render(
+    <OverlayProvider>
+      <Overlay data-testid="overlay" open>
+        <div>something</div>
+      </Overlay>
+    </OverlayProvider>
+  );
+
+  const overlay = screen.getByTestId('overlay');
+  expect(overlay).toBeInTheDocument();
+  expect(overlay.firstChild).toHaveTextContent('something');
+});
+
+test('overlay has container', () => {
+  render(
+    <OverlayProvider>
+      <Overlay data-testid="overlay" open>
+        <div>something</div>
+      </Overlay>
+    </OverlayProvider>
+  );
+
+  const overlay = screen.getByTestId('overlay');
+  expect(overlay).toBeInTheDocument();
+  expect(overlay).toBeInstanceOf(HTMLDivElement);
+});
+
+// Popover tests
+// ---------------
+test('renders open popover', () => {
+  render(
+    <OverlayProvider>
+      <Popover data-testid="popover" open>
+        <div>something</div>
+      </Popover>
+    </OverlayProvider>
+  );
+
+  const popover = screen.getByTestId('popover');
+  expect(popover).toBeInTheDocument();
+});
+
+test('popover is per default closed', () => {
+  render(
+    <OverlayProvider data-testid="popover">
+      <Popover>
+        <div>something</div>
+      </Popover>
+    </OverlayProvider>
+  );
+
+  const popover = screen.getByTestId('popover').firstChild;
+  expect(popover).not.toBeInTheDocument();
+});
+
+test('forwards ref', () => {
+  const ref = React.createRef<HTMLInputElement>();
+  render(
+    <OverlayProvider>
+      <Popover data-testid="popover" open ref={ref}>
+        <div>something</div>
+      </Popover>
+    </OverlayProvider>
+  );
+
+  expect(ref.current).toBeInstanceOf(HTMLDivElement);
+});
+
+test('popover has children', () => {
+  render(
+    <OverlayProvider>
+      <Overlay data-testid="overlay" open>
+        <div>something</div>
+      </Overlay>
+    </OverlayProvider>
+  );
+
+  const popover = screen.getByTestId('overlay');
+  expect(popover).toBeInTheDocument();
+  expect(popover.firstChild).toBeInTheDocument();
+});
+
+// Underlay tests
+// ---------------
+test('renders underlay', () => {
+  render(
+    <OverlayProvider>
+      <Underlay data-testid="underlay">
+        <div>something</div>
+      </Underlay>
+    </OverlayProvider>
+  );
+
+  const underlay = screen.getByTestId('underlay');
+  expect(underlay).toBeInTheDocument();
+});
+
+test('underlay supports variant', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <OverlayProvider>
+        <Underlay data-testid="underlay" variant="one">
+          <div>something</div>
+        </Underlay>
+      </OverlayProvider>
+    </ThemeProvider>
+  );
+
+  const underlay = screen.getByTestId('underlay');
+  expect(underlay).toHaveStyle(`background-color: ${theme.colors.pink}`);
+});
+
+test('underlay supports size', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <OverlayProvider>
+        <Underlay data-testid="underlay" size="small">
+          <div>something</div>
+        </Underlay>
+      </OverlayProvider>
+    </ThemeProvider>
+  );
+
+  const underlay = screen.getByTestId('underlay');
+  expect(underlay).toHaveStyle(`padding: ${theme.space.small}px`);
+});