test(select): add select cypress tests

cypress/integration/SingleSelect/opening_and_closing.feature

@@ -0,0 +1,35 @@
+Feature: Opening and closing the SingleSelect
+
+    Scenario: The user clicks the SingleSelect input to display the options
+        Given a closed SingleSelect with options is rendered
+        When the SingleSelect input is clicked
+        Then the options are displayed
+
+    Scenario: The user presses the down arrowkey to display the options
+        Given a closed SingleSelect with options is rendered
+        And the SingleSelect is focused
+        When the down arrowkey is pressed on the focused element
+        Then the options are displayed
+
+    Scenario: The user presses the up arrowkey to display the options
+        Given a closed SingleSelect with options is rendered
+        And the SingleSelect is focused
+        When the up arrowkey is pressed on the focused element
+        Then the options are displayed
+
+    Scenario: The user presses the spacebar to display the options
+        Given a closed SingleSelect with options is rendered
+        And the SingleSelect is focused
+        When the spacebar is pressed on the focused element
+        Then the options are displayed
+
+    Scenario: The user clicks the backdrop to hide the options
+        Given an open SingleSelect with options is rendered
+        When the user clicks the backdrop
+        Then the options are not displayed
+
+    Scenario: The user presses the escape key to hide the options
+        Given an open SingleSelect with options is rendered
+        And the SingleSelect is focused
+        When the escape key is pressed on the focused element
+        Then the options are not displayed

cypress/integration/SingleSelect/opening_and_closing/opening_and_closing.js

@@ -0,0 +1,54 @@
+import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps'
+
+Given('a closed SingleSelect with options is rendered', () => {
+    cy.visitStory('SingleSelect', 'With options')
+})
+
+Given('an open SingleSelect with options is rendered', () => {
+    cy.visitStory('SingleSelect', 'With options')
+    cy.get('.select [tabIndex="0"]').click()
+
+    cy.contains('option one')
+    cy.contains('option two')
+    cy.contains('option three')
+})
+
+Given('the SingleSelect is focused', () => {
+    cy.get('.select [tabIndex="0"]').focus()
+})
+
+When('the SingleSelect input is clicked', () => {
+    cy.get('.select [tabIndex="0"]').click()
+})
+
+When('the user clicks the backdrop', () => {
+    cy.get('.backdrop').click()
+})
+
+When('the down arrowkey is pressed on the focused element', () => {
+    cy.focused().type('{downarrow}')
+})
+
+When('the spacebar is pressed on the focused element', () => {
+    cy.focused().type(' ')
+})
+
+When('the up arrowkey is pressed on the focused element', () => {
+    cy.focused().type('{uparrow}')
+})
+
+When('the escape key is pressed on the focused element', () => {
+    cy.focused().type('{esc}')
+})
+
+Then('the options are displayed', () => {
+    cy.contains('option one')
+    cy.contains('option two')
+    cy.contains('option three')
+})
+
+Then('the options are not displayed', () => {
+    cy.contains('option one').should('not.exist')
+    cy.contains('option two').should('not.exist')
+    cy.contains('option three').should('not.exist')
+})

stories/SingleSelect.stories.testing.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { SingleSelect, SingleSelectOption } from '../src'
+
+storiesOf('SingleSelect', module).add('With options', () => (
+    <SingleSelect className="select">
+        <SingleSelectOption value="1" label="option one" />
+        <SingleSelectOption value="2" label="option two" />
+        <SingleSelectOption value="3" label="option three" />
+    </SingleSelect>
+))