From 76038ac464d4cf6808ca9768ae1a7d1c448f36bb Mon Sep 17 00:00:00 2001
From: tristen <tristen.brown@gmail.com>
Date: Tue, 23 Jan 2024 13:26:13 -0500
Subject: [PATCH] Tests

---
 .../select/__snapshots__/select.test.tsx.snap | 405 ++++++++++++++++++
 .../examples/select-example-options.tsx       |  16 +-
 src/components/select/select.test.tsx         |  98 +++++
 src/components/select/select.tsx              |  10 +-
 4 files changed, 520 insertions(+), 9 deletions(-)
 create mode 100644 src/components/select/__snapshots__/select.test.tsx.snap
 create mode 100644 src/components/select/select.test.tsx
diff --git a/src/components/select/__snapshots__/select.test.tsx.snap b/src/components/select/__snapshots__/select.test.tsx.snap
new file mode 100644
index 0000000..746e563
--- /dev/null
+++ b/src/components/select/__snapshots__/select.test.tsx.snap
@@ -0,0 +1,405 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Select all options renders 1`] = `
+<body
+  style="pointer-events: none;"
+>
+  <span
+    aria-hidden="true"
+    data-aria-hidden="true"
+    data-radix-focus-guard=""
+    style="outline: none; opacity: 0; position: fixed; pointer-events: none;"
+    tabindex="0"
+  />
+  <div
+    aria-hidden="true"
+    data-aria-hidden="true"
+  >
+    <span
+      style="display: contents;"
+    >
+      <button
+        aria-autocomplete="none"
+        aria-controls="radix-22"
+        aria-expanded="true"
+        data-placeholder=""
+        data-state="open"
+        data-testid="trigger"
+        dir="ltr"
+        role="combobox"
+        type="button"
+      >
+        trigger
+      </button>
+    </span>
+  </div>
+  <div
+    data-radix-popper-content-wrapper=""
+    dir="ltr"
+    style="position: fixed; left: 0px; top: 0px; transform: translate(-6px, 0px); min-width: max-content; --radix-popper-available-width: -16px; --radix-popper-available-height: -40px; --radix-popper-anchor-width: 0px; --radix-popper-anchor-height: 0px; --radix-popper-transform-origin: 0px 50%;"
+  >
+    <div
+      class="bg-white border--white color-text border shadow-darken25 round border border-1 border--border--white"
+      data-align="center"
+      data-side="left"
+      data-state="open"
+      data-testid="foo"
+      dir="ltr"
+      id="radix-22"
+      role="listbox"
+      style="box-sizing: border-box; display: flex; flex-direction: column; outline: none; --radix-select-content-transform-origin: var(--radix-popper-transform-origin); --radix-select-content-available-width: var(--radix-popper-available-width); --radix-select-content-available-height: var(--radix-popper-available-height); --radix-select-trigger-width: var(--radix-popper-anchor-width); --radix-select-trigger-height: var(--radix-popper-anchor-height); pointer-events: auto; opacity: 0;"
+      tabindex="-1"
+    >
+      <style>
+        [data-radix-select-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-select-viewport]::-webkit-scrollbar{display:none}
+      </style>
+      <div
+        data-radix-select-viewport=""
+        role="presentation"
+        style="position: relative; flex: 1; overflow: auto;"
+      >
+        <div
+          class=""
+        >
+          <div
+            class=""
+          >
+            <div
+              aria-labelledby="radix-27"
+              aria-selected="false"
+              class="select-item transition color-gray-dark w-full block bg-gray-light-on-active block py6 txt-break-word-soft bg-darken5-on-hover color-blue-on-hover cursor-pointer round px6"
+              data-highlighted=""
+              data-radix-collection-item=""
+              data-state="unchecked"
+              role="option"
+              tabindex="-1"
+            >
+              Humpback whale
+            </div>
+            <div
+              aria-labelledby="radix-28"
+              aria-selected="false"
+              class="select-item transition color-gray-dark w-full block bg-gray-light-on-active block py6 txt-break-word-soft bg-darken5-on-hover color-blue-on-hover cursor-pointer round px6"
+              data-radix-collection-item=""
+              data-state="unchecked"
+              role="option"
+              tabindex="-1"
+            >
+              Rufous Hummingbird
+            </div>
+            <div
+              aria-labelledby="radix-29"
+              aria-selected="false"
+              class="select-item transition color-gray-dark w-full block bg-gray-light-on-active block py6 txt-break-word-soft bg-darken5-on-hover color-blue-on-hover cursor-pointer round px6"
+              data-radix-collection-item=""
+              data-state="unchecked"
+              role="option"
+              tabindex="-1"
+            >
+              Sea Otter
+            </div>
+            <div
+              aria-labelledby="radix-30"
+              aria-selected="false"
+              class="select-item transition color-gray-dark w-full block bg-gray-light-on-active block py6 txt-break-word-soft bg-darken5-on-hover color-blue-on-hover cursor-pointer round px6"
+              data-radix-collection-item=""
+              data-state="unchecked"
+              role="option"
+              tabindex="-1"
+            >
+              Snowshoe Hare
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    aria-hidden="true"
+    data-aria-hidden="true"
+    data-radix-focus-guard=""
+    style="outline: none; opacity: 0; position: fixed; pointer-events: none;"
+    tabindex="0"
+  />
+</body>
+`;
+
+exports[`Select basic renders 1`] = `
+<body
+  style="pointer-events: none;"
+>
+  <span
+    aria-hidden="true"
+    data-aria-hidden="true"
+    data-radix-focus-guard=""
+    style="outline: none; opacity: 0; position: fixed; pointer-events: none;"
+    tabindex="0"
+  />
+  <div
+    aria-hidden="true"
+    data-aria-hidden="true"
+  >
+    <span
+      style="display: contents;"
+    >
+      <button
+        aria-autocomplete="none"
+        aria-controls="radix-0"
+        aria-expanded="true"
+        data-placeholder=""
+        data-state="open"
+        data-testid="trigger"
+        dir="ltr"
+        role="combobox"
+        type="button"
+      >
+        trigger
+      </button>
+    </span>
+  </div>
+  <div
+    data-radix-popper-content-wrapper=""
+    dir="ltr"
+    style="position: fixed; left: 0px; top: 0px; transform: translate(6px, 0px); min-width: max-content; --radix-popper-available-width: -16px; --radix-popper-available-height: -20px; --radix-popper-anchor-width: 0px; --radix-popper-anchor-height: 0px; --radix-popper-transform-origin: 0px 0px;"
+  >
+    <div
+      class="bg-white border--white color-text border shadow-darken25 round px12 py12 border border-1 border--border--white"
+      data-align="center"
+      data-side="right"
+      data-state="open"
+      dir="ltr"
+      id="radix-0"
+      role="listbox"
+      style="box-sizing: border-box; display: flex; flex-direction: column; outline: none; --radix-select-content-transform-origin: var(--radix-popper-transform-origin); --radix-select-content-available-width: var(--radix-popper-available-width); --radix-select-content-available-height: var(--radix-popper-available-height); --radix-select-trigger-width: var(--radix-popper-anchor-width); --radix-select-trigger-height: var(--radix-popper-anchor-height); pointer-events: auto;"
+      tabindex="-1"
+    >
+      <style>
+        [data-radix-select-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-select-viewport]::-webkit-scrollbar{display:none}
+      </style>
+      <div
+        data-radix-select-viewport=""
+        role="presentation"
+        style="position: relative; flex: 1; overflow: auto;"
+      >
+        <div
+          class=""
+        >
+          <div
+            class=""
+          >
+            <div
+              aria-labelledby="radix-5"
+              aria-selected="false"
+              class="select-item transition color-gray-dark w-full block bg-gray-light-on-active block py6 txt-break-word-soft bg-darken5-on-hover color-blue-on-hover cursor-pointer round px6"
+              data-highlighted=""
+              data-radix-collection-item=""
+              data-state="unchecked"
+              role="option"
+              tabindex="-1"
+            >
+              Humpback whale
+            </div>
+            <div
+              aria-labelledby="radix-6"
+              aria-selected="false"
+              class="select-item transition color-gray-dark w-full block bg-gray-light-on-active block py6 txt-break-word-soft bg-darken5-on-hover color-blue-on-hover cursor-pointer round px6"
+              data-radix-collection-item=""
+              data-state="unchecked"
+              role="option"
+              tabindex="-1"
+            >
+              Rufous Hummingbird
+            </div>
+            <div
+              aria-labelledby="radix-7"
+              aria-selected="false"
+              class="select-item transition color-gray-dark w-full block bg-gray-light-on-active block py6 txt-break-word-soft bg-darken5-on-hover color-blue-on-hover cursor-pointer round px6"
+              data-radix-collection-item=""
+              data-state="unchecked"
+              role="option"
+              tabindex="-1"
+            >
+              Sea Otter
+            </div>
+            <div
+              aria-labelledby="radix-8"
+              aria-selected="false"
+              class="select-item transition color-gray-dark w-full block bg-gray-light-on-active block py6 txt-break-word-soft bg-darken5-on-hover color-blue-on-hover cursor-pointer round px6"
+              data-radix-collection-item=""
+              data-state="unchecked"
+              role="option"
+              tabindex="-1"
+            >
+              Snowshoe Hare
+            </div>
+          </div>
+        </div>
+      </div>
+      <span
+        style="position: absolute; left: 0px; transform-origin: 0 0; transform: translateY(50%) rotate(90deg) translateX(-50%); top: 0px;"
+      >
+        <svg
+          fill="#fff"
+          height="6"
+          offset="6"
+          preserveAspectRatio="none"
+          style="display: block;"
+          viewBox="0 0 30 10"
+          width="12"
+        >
+          <polygon
+            points="0,0 30,0 15,10"
+          />
+        </svg>
+      </span>
+    </div>
+  </div>
+  <span
+    aria-hidden="true"
+    data-aria-hidden="true"
+    data-radix-focus-guard=""
+    style="outline: none; opacity: 0; position: fixed; pointer-events: none;"
+    tabindex="0"
+  />
+</body>
+`;
+
+exports[`Select dark renders 1`] = `
+<body
+  style="pointer-events: none;"
+>
+  <span
+    aria-hidden="true"
+    data-aria-hidden="true"
+    data-radix-focus-guard=""
+    style="outline: none; opacity: 0; position: fixed; pointer-events: none;"
+    tabindex="0"
+  />
+  <div
+    aria-hidden="true"
+    data-aria-hidden="true"
+  >
+    <span
+      style="display: contents;"
+    >
+      <button
+        aria-autocomplete="none"
+        aria-controls="radix-13"
+        aria-expanded="true"
+        data-placeholder=""
+        data-state="open"
+        data-testid="trigger"
+        dir="ltr"
+        role="combobox"
+        type="button"
+      >
+        trigger
+      </button>
+    </span>
+  </div>
+  <div
+    data-radix-popper-content-wrapper=""
+    dir="ltr"
+    style="position: fixed; left: 0px; top: 0px; transform: translate(6px, 0px); min-width: max-content; --radix-popper-available-width: -16px; --radix-popper-available-height: -20px; --radix-popper-anchor-width: 0px; --radix-popper-anchor-height: 0px; --radix-popper-transform-origin: 0px 0px;"
+  >
+    <div
+      class="bg-gray-dark border--gray-dark color-white border shadow-darken25 round px12 py12 border border-1 border--border--gray-dark"
+      data-align="center"
+      data-side="right"
+      data-state="open"
+      dir="ltr"
+      id="radix-13"
+      role="listbox"
+      style="box-sizing: border-box; display: flex; flex-direction: column; outline: none; --radix-select-content-transform-origin: var(--radix-popper-transform-origin); --radix-select-content-available-width: var(--radix-popper-available-width); --radix-select-content-available-height: var(--radix-popper-available-height); --radix-select-trigger-width: var(--radix-popper-anchor-width); --radix-select-trigger-height: var(--radix-popper-anchor-height); pointer-events: auto;"
+      tabindex="-1"
+    >
+      <style>
+        [data-radix-select-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-select-viewport]::-webkit-scrollbar{display:none}
+      </style>
+      <div
+        data-radix-select-viewport=""
+        role="presentation"
+        style="position: relative; flex: 1; overflow: auto;"
+      >
+        <div
+          class=""
+        >
+          <div
+            class=""
+          >
+            <div
+              aria-labelledby="radix-18"
+              aria-selected="false"
+              class="select-item transition color-gray-dark w-full block bg-gray-light-on-active block py6 txt-break-word-soft bg-darken5-on-hover color-blue-on-hover cursor-pointer round px6"
+              data-highlighted=""
+              data-radix-collection-item=""
+              data-state="unchecked"
+              role="option"
+              tabindex="-1"
+            >
+              Humpback whale
+            </div>
+            <div
+              aria-labelledby="radix-19"
+              aria-selected="false"
+              class="select-item transition color-gray-dark w-full block bg-gray-light-on-active block py6 txt-break-word-soft bg-darken5-on-hover color-blue-on-hover cursor-pointer round px6"
+              data-radix-collection-item=""
+              data-state="unchecked"
+              role="option"
+              tabindex="-1"
+            >
+              Rufous Hummingbird
+            </div>
+            <div
+              aria-labelledby="radix-20"
+              aria-selected="false"
+              class="select-item transition color-gray-dark w-full block bg-gray-light-on-active block py6 txt-break-word-soft bg-darken5-on-hover color-blue-on-hover cursor-pointer round px6"
+              data-radix-collection-item=""
+              data-state="unchecked"
+              role="option"
+              tabindex="-1"
+            >
+              Sea Otter
+            </div>
+            <div
+              aria-labelledby="radix-21"
+              aria-selected="false"
+              class="select-item transition color-gray-dark w-full block bg-gray-light-on-active block py6 txt-break-word-soft bg-darken5-on-hover color-blue-on-hover cursor-pointer round px6"
+              data-radix-collection-item=""
+              data-state="unchecked"
+              role="option"
+              tabindex="-1"
+            >
+              Snowshoe Hare
+            </div>
+          </div>
+        </div>
+      </div>
+      <span
+        style="position: absolute; left: 0px; transform-origin: 0 0; transform: translateY(50%) rotate(90deg) translateX(-50%); top: 0px;"
+      >
+        <svg
+          fill="#0E2127"
+          height="6"
+          offset="6"
+          preserveAspectRatio="none"
+          style="display: block;"
+          viewBox="0 0 30 10"
+          width="12"
+        >
+          <polygon
+            points="0,0 30,0 15,10"
+          />
+        </svg>
+      </span>
+    </div>
+  </div>
+  <span
+    aria-hidden="true"
+    data-aria-hidden="true"
+    data-radix-focus-guard=""
+    style="outline: none; opacity: 0; position: fixed; pointer-events: none;"
+    tabindex="0"
+  />
+</body>
+`;
diff --git a/src/components/select/examples/select-example-options.tsx b/src/components/select/examples/select-example-options.tsx
index 7178514..dc15ee4 100644
--- a/src/components/select/examples/select-example-options.tsx
+++ b/src/components/select/examples/select-example-options.tsx
@@ -20,20 +20,23 @@ export default function Example() {
 
   const options = Object.keys(animals)
     .filter(option => filterBy ? option.includes(filterBy.value) : true)
-    .map(option => ({
-      label: animals[option],
+    .map((option, index) => ({
+      label: (
+        <div className="flex flex--space-between txt-s">
+          <div className="flex-child">{animals[option]}</div>
+          <div className="flex-child flex-child-grow color-gray align-r">{`Item ${index + 1}`}</div>
+        </div>
+      ),
       value: option,
       active: value === option
     }));
 
   const renderHeader = (
     <div className="px6 pt6">
-      <label className="txt-bold txt-s mb6 pt12">This is a header</label>
       <input
         className="input"
         type="text"
-        placeholder="Filter"
-        autoFocus={true}
+        placeholder="Filter by"
         value={filterBy.input}
         onChange={e => {
           setFilterBy({
@@ -46,7 +49,7 @@ export default function Example() {
   );
 
   const renderFooter = (
-    <div className="bg-gray-lighter px12 py6 txt-s round-b color-gray">This is a footer</div>
+    <div className="bg-gray-faint border-t border--gray-lighter px12 py12 txt-s round-b">Here is an area called the footer which could be used for a description to help with making a selection.</div>
   );
 
   return (
@@ -55,6 +58,7 @@ export default function Example() {
       options={options}
       header={renderHeader}
       footer={renderFooter}
+      themeSelectWrapper="w240"
       themeSelectItemWrapper="px6 py12"
       padding="none"
     >
diff --git a/src/components/select/select.test.tsx b/src/components/select/select.test.tsx
new file mode 100644
index 0000000..7fa50ab
--- /dev/null
+++ b/src/components/select/select.test.tsx
@@ -0,0 +1,98 @@
+import React from 'react';
+import Select from './select';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+window.HTMLElement.prototype.hasPointerCapture = jest.fn();
+window.HTMLElement.prototype.scrollIntoView = jest.fn();
+
+const SelectTest = (props) => {
+  return (
+    <Select {...props}>
+      <button data-testid="trigger">trigger</button>
+    </Select>
+  )
+}
+
+describe('Select', () => {
+  const defaultProps = {
+    options: [
+      {
+        value: 'humpback-whale',
+        label: 'Humpback whale',
+      }, {
+        value: 'rufous-hummingbird',
+        label: 'Rufous Hummingbird'
+      }, {
+        value: 'sea-otter',
+        label: 'Sea Otter'
+      }, {
+        value: 'snowshoe-hare',
+        label: 'Snowshoe Hare'
+      }
+    ],
+    onChange: jest.fn()
+  };
+
+  describe('basic', () => {
+    test('renders', async () => {
+      const user = userEvent.setup();
+      const { baseElement } = render(<SelectTest {...defaultProps} />);
+      await user.click(screen.getByTestId("trigger"));
+      await waitFor(() => {
+        expect(screen.getByRole('listbox')).toBeInTheDocument();
+      });
+      expect(baseElement).toMatchSnapshot();
+
+      await user.click(screen.getByText("Sea Otter"));
+      await waitFor(() => {
+        expect(defaultProps.onChange).toHaveBeenCalledWith('sea-otter');
+      });
+    });
+  });
+
+  describe('dark', () => {
+    const props = {
+      ...defaultProps,
+      coloring: 'dark'
+    };
+
+    test('renders', async () => {
+      const user = userEvent.setup();
+      const { baseElement } = render(<SelectTest {...props} />);
+      await user.click(screen.getByTestId("trigger"));
+      await waitFor(() => {
+        expect(screen.getByRole('listbox')).toBeInTheDocument();
+      });
+
+      expect(baseElement).toMatchSnapshot();
+    });
+  });
+
+  describe('all options', () => {
+    const props = {
+      ...defaultProps,
+      placement: 'left',
+      padding: 'none',
+      hasPointer: false,
+      avoidCollisions: false,
+      hideWhenAnchorIsOffscreen: true,
+      allowPlacementAxisChange: false,
+      escapeCloses: false,
+      onExit: () => {},
+      passthroughProps: {
+        'data-testid': 'foo'
+      }
+    };
+
+    test('renders', async () => {
+      const user = userEvent.setup();
+      const { baseElement } = render(<SelectTest {...props} />);
+      await user.click(screen.getByTestId("trigger"));
+      await waitFor(() => {
+        expect(screen.getByRole('listbox')).toBeInTheDocument();
+      });
+      expect(baseElement).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/components/select/select.tsx b/src/components/select/select.tsx
index cf5c929..67bf2e7 100644
--- a/src/components/select/select.tsx
+++ b/src/components/select/select.tsx
@@ -30,6 +30,7 @@ interface Props {
   hasPointer?: boolean;
   hideWhenAnchorIsOffscreen?: boolean;
   allowPlacementAxisChange?: boolean;
+  themeSelectWrapper?: string;
   themeSelectItemWrapper?: string;
   themeSelectItem?: string;
   passthroughProps?: {
@@ -54,6 +55,7 @@ export default function Select({
   alignment = 'center',
   padding = 'medium',
   offsetFromAnchor = 6,
+  themeSelectWrapper = '',
   themeSelectItemWrapper = '',
   themeSelectItem = 'transition color-gray-dark w-full block bg-gray-light-on-active block py6 txt-break-word-soft bg-darken5-on-hover color-blue-on-hover cursor-pointer round px6',
   passthroughProps
@@ -136,13 +138,13 @@ export default function Select({
           {...passthroughProps}
         >
           <SelectPrimitive.Viewport>
-            <>
+            <div className={themeSelectWrapper}>
               {header && header}
               <div className={themeSelectItemWrapper}>
                 {options.map(renderOptions)}
               </div>
               {footer && footer}
-            </>
+            </div>
           </SelectPrimitive.Viewport>
           {hasPointer && <SelectPrimitive.Arrow width={12} height={6} offset={6} fill={fill} />}
         </SelectPrimitive.Content>
@@ -208,7 +210,9 @@ Select.propTypes = {
   alignment: PropTypes.oneOf(['center', 'start', 'end']),
   /** Called during changes to the input element. */
   onChange: PropTypes.func.isRequired,
-  /** Assembly classes to apply to the wrapper containing the select elements */
+  /** Assembly classes to apply to the select wrapper */
+  themeSelectWrapper: PropTypes.string,
+  /** Assembly classes to apply to the wrapper containing the select items */
   themeSelectItemWrapper: PropTypes.string,
   /** Assembly classes to apply to the select element */
   themeSelectItem: PropTypes.string,
