From 868b92c547a92eae508ed85d5b0ae505160fa2a7 Mon Sep 17 00:00:00 2001
From: ismay <ismay@ismaywolff.nl>
Date: Mon, 25 Nov 2019 11:23:21 +0100
Subject: [PATCH] test(select): add select cypress tests

---
 .../SingleSelect/opening_and_closing.feature  | 35 ++++++++++++
 .../opening_and_closing.js                    | 54 +++++++++++++++++++
 stories/SingleSelect.stories.testing.js       | 11 ++++
 3 files changed, 100 insertions(+)
 create mode 100644 cypress/integration/SingleSelect/opening_and_closing.feature
 create mode 100644 cypress/integration/SingleSelect/opening_and_closing/opening_and_closing.js
 create mode 100644 stories/SingleSelect.stories.testing.js

diff --git a/cypress/integration/SingleSelect/opening_and_closing.feature b/cypress/integration/SingleSelect/opening_and_closing.feature
new file mode 100644
index 000000000..b2d1f62b1
--- /dev/null
+++ b/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
diff --git a/cypress/integration/SingleSelect/opening_and_closing/opening_and_closing.js b/cypress/integration/SingleSelect/opening_and_closing/opening_and_closing.js
new file mode 100644
index 000000000..5e816ea92
--- /dev/null
+++ b/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')
+})
diff --git a/stories/SingleSelect.stories.testing.js b/stories/SingleSelect.stories.testing.js
new file mode 100644
index 000000000..0dc5f201c
--- /dev/null
+++ b/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>
+))