WIP e2e tests

Author: IanVS

cypress/integration/menu_spec.js

@@ -0,0 +1,65 @@
+import baseSelectors from '../fixtures/selectors.json';
+
+const selector = {
+  caseDefault: '[data-cy="case-default"]',
+  caseExpandDown: '[data-cy="case-expand-down"]',
+  scrollContainer: '[data-cy="scroll-container"]',
+};
+//
+// const viewport = ['macbook-15', 'iphone-6'];
+
+Cypress.Screenshot.defaults({
+  screenshotOnRunFailure: false,
+});
+
+describe('Menus', () => {
+  before(function() {
+    cy.visit('http://localhost:8000/cypress-menu-tests');
+  });
+
+  it('test page renders successfully', () => {
+    cy.get('h1').should('contain', 'Test Page for React-Select Menus');
+  });
+
+  describe('Inside scroll containers', () => {
+    describe('by default', () => {
+      it('menu should be visible when select is clicked', () => {
+        cy.get(selector.caseDefault)
+          .find('.react-select__control')
+          .click()
+          .get(selector.caseDefault)
+          .find(baseSelectors.menu)
+          .should('be.visible');
+      });
+    });
+
+    describe('At bottom of container', () => {
+      it('menu should be visible when select is clicked', () => {
+        cy.get(selector.caseExpandDown)
+          .find('.react-select__control')
+          .click()
+          .get(selector.caseExpandDown)
+          .find(baseSelectors.menu)
+          .should('be.visible');
+      });
+
+      it('scroll container should expland & scroll to bottom', () => {
+        cy.get(selector.caseExpandDown)
+          .find(selector.scrollContainer)
+          .then(scrollContainer => {
+            console.log(scrollContainer[0].scrollHeight);
+            const originalHeight = scrollContainer[0].scrollHeight;
+            cy.get(selector.caseExpandDown)
+              .find('.react-select__control')
+              .click()
+              .then(() => {
+                cy.get(selector.caseExpandDown)
+                  .find(selector.scrollContainer)
+                  .its('scrollHeight')
+                  .should('be.gt', originalHeight);
+              });
+          });
+      });
+    });
+  });
+});

docs/App/index.js

@@ -19,6 +19,7 @@ import {
 import Section from './Section';
 import PageNav from './PageNav';
 import Tests from '../Tests';
+import TestsMenu from '../TestsMenu';
 
 const sections = [
   { label: 'Home', path: '/home' },
@@ -37,6 +38,7 @@ export default class App extends Component<*> {
       <BrowserRouter>
         <Switch>
           <Route exact path="/cypress-tests" component={Tests} />
+          <Route exact path="/cypress-menu-tests" component={TestsMenu} />
           <Route>
             <div>
               <Header>

docs/TestsMenu.js

@@ -0,0 +1,51 @@
+// @flow
+
+import * as React from 'react';
+import Select from '../src';
+import { stateOptions } from './data';
+import { H1, H2, Note, ScrollContainer } from './styled-components';
+
+const defaultSelectProps = {
+  maxMenuHeight: 250,
+  classNamePrefix: 'react-select',
+  placeholder: 'Choose a state…',
+  options: stateOptions,
+};
+
+export default function TestsMenu() {
+  return (
+    <div
+      style={{
+        margin: 'auto',
+        maxWidth: 440,
+        padding: 20,
+      }}
+    >
+      <H1>Test Page for React-Select Menus</H1>
+      <H2>Inside scroll containers</H2>
+
+      <div data-cy="case-default">
+        <h3>Default, plenty of height</h3>
+        <ScrollContainer height={defaultSelectProps.maxMenuHeight + 100}>
+          <Select {...defaultSelectProps} />
+        </ScrollContainer>
+        <Note>
+          Nothing special going on here, just the base case of opening a menu in
+          a scroll container
+        </Note>
+      </div>
+
+      <div data-cy="case-expand-down">
+        <h3>Expand and Scroll Down</h3>
+        <ScrollContainer height={400}>
+          <div style={{ height: 300 }} />
+          <Select {...defaultSelectProps} />
+        </ScrollContainer>
+        <Note>
+          If the menu doesn’t have enough room to open down, by default the
+          container should expand down
+        </Note>
+      </div>
+    </div>
+  );
+}

docs/styled-components.js

@@ -1,6 +1,6 @@
 // @flow
 
-import React from 'react';
+import * as React from 'react';
 
 import SyntaxHighlighter, {
   registerLanguage,
@@ -49,13 +49,19 @@ export const Note = ({ Tag = 'div', ...props }: { Tag?: string }) => (
 export const H1 = (props: any) => <h1 css={{ marginTop: 0 }} {...props} />;
 export const H2 = (props: any) => <h2 css={{ marginTop: '2em' }} {...props} />;
 
-export const ColorSample = ({ name, color }: { color: string, name: string }) => (
+export const ColorSample = ({
+  name,
+  color,
+}: {
+  color: string,
+  name: string,
+}) => (
   <div
     css={{
       display: 'inline-flex',
       marginBottom: '0.5em',
       alignItems: 'center',
-      minWidth: '10em'
+      minWidth: '10em',
     }}
   >
     <span
@@ -66,13 +72,41 @@ export const ColorSample = ({ name, color }: { color: string, name: string }) =>
         borderRadius: 3,
         width: '1em',
         height: '1em',
-        backgroundColor: color
+        backgroundColor: color,
       }}
     />
     <Code>{name}</Code>
   </div>
 );
 
+type ScrollContainerProps = {
+  children: React.Node,
+  height?: number | string,
+  width?: number | string,
+};
+
+export const ScrollContainer = ({
+  children,
+  height,
+  width,
+}: ScrollContainerProps) => {
+  return (
+    <div
+      data-cy="scroll-container"
+      css={{
+        overflow: 'scroll',
+        height: height || 'auto',
+        width: width || '100%',
+        border: '1px solid hsl(0, 0%, 40%)',
+        position: 'relative',
+        boxSizing: 'border-box',
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
 // ==============================
 // Code
 // ==============================

package.json

@@ -100,6 +100,7 @@
     "test": "npm run test:jest && npm run test:cypress",
     "test:jest": "jest --coverage",
     "e2e": "concurrently --kill-others --success=first --names 'SERVER,E2E' 'yarn start --progress=false --no-info' 'yarn test:cypress'",
+    "e2e-watch": "concurrently --kill-others --success=first --names 'SERVER,E2E' 'yarn start --progress=false --no-info' 'yarn test:cypress-watch'",
     "test:cypress": "cypress run --spec ./cypress/integration/select_spec.js",
     "test:cypress-watch": "node ./node_modules/.bin/cypress open",
     "precommit": "flow check && lint-staged"