fix: add extra options for maxHeight examples and set up tests (#367)

bigcommerce · Apr 9, 2020 · 05f6aca · 05f6aca
1 parent 72f066c
commit 05f6aca
Show file tree

Hide file tree

Showing 6 changed files with 135 additions and 2 deletions.
diff --git a/packages/big-design/src/components/Dropdown/spec.tsx b/packages/big-design/src/components/Dropdown/spec.tsx
@@ -1,4 +1,5 @@
 import { CheckCircleIcon } from '@bigcommerce/big-design-icons';
+import { remCalc } from '@bigcommerce/big-design-theme';
 import { fireEvent, render } from '@test/utils';
 import 'jest-styled-components';
 import React, { Fragment } from 'react';
@@ -119,6 +120,35 @@ test('dropdown menu should have 4 dropdown items', () => {
   expect(options.length).toBe(4);
 });
 
+test('should accept a maxHeight prop', () => {
+  const { getByRole } = render(
+    <Dropdown
+      items={[
+        { content: 'Foo', onItemClick },
+        { content: 'Bar', onItemClick },
+      ]}
+      maxHeight={350}
+      toggle={<Button>Button</Button>}
+    />,
+  );
+
+  const toggle = getByRole('button');
+  fireEvent.click(toggle);
+
+  const list = getByRole('listbox');
+  expect(list).toHaveStyleRule('max-height', remCalc(350));
+});
+
+test('should default max-height to 250', () => {
+  const { getByRole } = render(DropdownMock);
+
+  const toggle = getByRole('button');
+  fireEvent.click(toggle);
+
+  const list = getByRole('listbox');
+  expect(list).toHaveStyleRule('max-height', remCalc(250));
+});
+
 test('dropdown items should immediately rerender when prop changes', () => {
   const { getAllByRole, getByRole, rerender } = render(DropdownMock);
   const toggle = getByRole('button');

diff --git a/packages/big-design/src/components/MultiSelect/spec.tsx b/packages/big-design/src/components/MultiSelect/spec.tsx
@@ -1,4 +1,5 @@
 import { ArrowBackIcon, ArrowForwardIcon, DeleteIcon } from '@bigcommerce/big-design-icons';
+import { remCalc } from '@bigcommerce/big-design-theme';
 import { fireEvent, render } from '@testing-library/react';
 import 'jest-styled-components';
 import React from 'react';
@@ -446,6 +447,40 @@ test('should render a non filterable select', () => {
   expect(input.getAttribute('readonly')).toBe('');
 });
 
+test('should accept a maxHeight prop', () => {
+  const { getAllByLabelText, getByRole } = render(
+    <MultiSelect
+      label="Countries"
+      maxHeight={350}
+      onOptionsChange={onChange}
+      options={[
+        { value: 'us', content: 'United States' },
+        { value: 'mx', content: 'Mexico' },
+        { value: 'ca', content: 'Canada' },
+        { value: 'en', content: 'England' },
+        { value: 'fr', content: 'France', disabled: true },
+      ]}
+      placeholder="Choose country"
+    />,
+  );
+
+  const input = getAllByLabelText('Countries')[0];
+  fireEvent.focus(input);
+
+  const list = getByRole('listbox');
+  expect(list).toHaveStyleRule('max-height', remCalc(350));
+});
+
+test('should default max-height to 250', () => {
+  const { getAllByLabelText, getByRole } = render(MultiSelectMock);
+
+  const input = getAllByLabelText('Countries')[0];
+  fireEvent.focus(input);
+
+  const list = getByRole('listbox');
+  expect(list).toHaveStyleRule('max-height', remCalc(250));
+});
+
 test('should use the passed in ref object if provided', () => {
   const ref = React.createRef<HTMLInputElement>();
   const { getAllByLabelText } = render(

diff --git a/packages/big-design/src/components/Select/spec.tsx b/packages/big-design/src/components/Select/spec.tsx
@@ -1,4 +1,5 @@
 import { ArrowBackIcon, ArrowForwardIcon, DeleteIcon } from '@bigcommerce/big-design-icons';
+import { remCalc } from '@bigcommerce/big-design-theme';
 import { fireEvent, render } from '@testing-library/react';
 import 'jest-styled-components';
 import React from 'react';
@@ -531,6 +532,40 @@ test('should render a non filterable select', () => {
   expect(input.getAttribute('readonly')).toBe('');
 });
 
+test('should accept a maxHeight prop', () => {
+  const { getAllByLabelText, getByRole } = render(
+    <Select
+      label="Countries"
+      maxHeight={350}
+      onOptionChange={onChange}
+      options={[
+        { value: 'us', content: 'United States' },
+        { value: 'mx', content: 'Mexico' },
+        { value: 'ca', content: 'Canada' },
+        { value: 'en', content: 'England' },
+        { value: 'fr', content: 'France', disabled: true },
+      ]}
+      placeholder="Choose country"
+    />,
+  );
+
+  const input = getAllByLabelText('Countries')[0];
+  fireEvent.focus(input);
+
+  const list = getByRole('listbox');
+  expect(list).toHaveStyleRule('max-height', remCalc(350));
+});
+
+test('should default max-height to 250', () => {
+  const { getAllByLabelText, getByRole } = render(SelectMock);
+
+  const input = getAllByLabelText('Countries')[0];
+  fireEvent.focus(input);
+
+  const list = getByRole('listbox');
+  expect(list).toHaveStyleRule('max-height', remCalc(250));
+});
+
 test('should use the passed in ref object if provided', () => {
   const ref = React.createRef<HTMLInputElement>();
   const { getAllByLabelText } = render(

diff --git a/packages/docs/pages/Dropdown/DropdownPage.tsx b/packages/docs/pages/Dropdown/DropdownPage.tsx
@@ -248,7 +248,6 @@ export default () => (
             { content: 'Item', onItemClick: item => item },
             { content: 'Item', onItemClick: item => item },
             { content: 'Item', onItemClick: item => item },
-            { content: 'Item', onItemClick: item => item },
           ]}
           toggle={<Button>Default</Button>}
         />
@@ -262,7 +261,6 @@ export default () => (
             { content: 'Item', onItemClick: item => item },
             { content: 'Item', onItemClick: item => item },
             { content: 'Item', onItemClick: item => item },
-            { content: 'Item', onItemClick: item => item },
           ]}
           maxHeight={150}
           toggle={<Button>Smaller</Button>}
@@ -278,6 +276,9 @@ export default () => (
             { content: 'Item', onItemClick: item => item },
             { content: 'Item', onItemClick: item => item },
             { content: 'Item', onItemClick: item => item },
+            { content: 'Item', onItemClick: item => item },
+            { content: 'Item', onItemClick: item => item },
+            { content: 'Item', onItemClick: item => item },
           ]}
           maxHeight={350}
           toggle={<Button>Longer</Button>}

diff --git a/packages/docs/pages/MultiSelect/MultiSelectPage.tsx b/packages/docs/pages/MultiSelect/MultiSelectPage.tsx
@@ -157,6 +157,10 @@ export default () => (
             { value: 2, content: 'Option' },
             { value: 3, content: 'Option' },
             { value: 4, content: 'Option' },
+            { value: 5, content: 'Option' },
+            { value: 6, content: 'Option' },
+            { value: 7, content: 'Option' },
+            { value: 8, content: 'Option' },
           ]}
           placeholder="Default"
           required
@@ -170,6 +174,10 @@ export default () => (
             { value: 2, content: 'Option' },
             { value: 3, content: 'Option' },
             { value: 4, content: 'Option' },
+            { value: 5, content: 'Option' },
+            { value: 6, content: 'Option' },
+            { value: 7, content: 'Option' },
+            { value: 8, content: 'Option' },
           ]}
           placeholder="Smaller"
           required
@@ -183,6 +191,14 @@ export default () => (
             { value: 2, content: 'Option' },
             { value: 3, content: 'Option' },
             { value: 4, content: 'Option' },
+            { value: 5, content: 'Option' },
+            { value: 6, content: 'Option' },
+            { value: 7, content: 'Option' },
+            { value: 8, content: 'Option' },
+            { value: 9, content: 'Option' },
+            { value: 10, content: 'Option' },
+            { value: 11, content: 'Option' },
+            { value: 12, content: 'Option' },
           ]}
           placeholder="Larger"
           required

diff --git a/packages/docs/pages/Select/SelectPage.tsx b/packages/docs/pages/Select/SelectPage.tsx
@@ -158,6 +158,10 @@ export default () => (
             { value: 2, content: 'Option' },
             { value: 3, content: 'Option' },
             { value: 4, content: 'Option' },
+            { value: 5, content: 'Option' },
+            { value: 6, content: 'Option' },
+            { value: 7, content: 'Option' },
+            { value: 8, content: 'Option' },
           ]}
           placeholder="Default"
           required
@@ -171,6 +175,10 @@ export default () => (
             { value: 2, content: 'Option' },
             { value: 3, content: 'Option' },
             { value: 4, content: 'Option' },
+            { value: 5, content: 'Option' },
+            { value: 6, content: 'Option' },
+            { value: 7, content: 'Option' },
+            { value: 8, content: 'Option' },
           ]}
           placeholder="Smaller"
           required
@@ -184,6 +192,14 @@ export default () => (
             { value: 2, content: 'Option' },
             { value: 3, content: 'Option' },
             { value: 4, content: 'Option' },
+            { value: 5, content: 'Option' },
+            { value: 6, content: 'Option' },
+            { value: 7, content: 'Option' },
+            { value: 8, content: 'Option' },
+            { value: 9, content: 'Option' },
+            { value: 10, content: 'Option' },
+            { value: 11, content: 'Option' },
+            { value: 12, content: 'Option' },
           ]}
           placeholder="Larger"
           required