test(single select): add failing test for blurring when choosing an o…

…ption #BDD
dhis2 · Nov 1, 2023 · de02caf · de02caf
1 parent 0a8db7b
commit de02caf
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 6 deletions.
diff --git a/components/select/src/single-select/features/accepts_blur_cb.feature b/components/select/src/single-select/features/accepts_blur_cb.feature
@@ -6,3 +6,11 @@ Feature: Calls onBlur cb when blurred
         And the SingleSelect has focus
         When the user clicks the backdrop layer
         Then the onBlur handler is called
+
+    Scenario: Blurring a SingleSelect by interacting selecting an option and interacting with other input
+        Given a SingleSelect with onBlur handler is rendered
+        And the SingleSelect input is clicked
+        And the SingleSelect has focus
+        When the user selects the first option
+        And the user focuses the text input
+        Then the onBlur handler is called
diff --git a/components/select/src/single-select/features/accepts_blur_cb/index.js b/components/select/src/single-select/features/accepts_blur_cb/index.js
@@ -1,10 +1,18 @@
 import '../common/index.js'
-import { Given, Then } from 'cypress-cucumber-preprocessor/steps'
+import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps'
 
 Given('a SingleSelect with onBlur handler is rendered', () => {
     cy.visitStory('SingleSelect', 'With onBlur')
 })
 
+When('the user selects the first option', () => {
+    cy.get('[data-test="first-option"]').click()
+})
+
+When('the user focuses the text input', () => {
+    cy.get('.input').focus()
+})
+
 Then('the onBlur handler is called', () => {
     cy.window().should((win) => {
         expect(win.onBlur).to.be.calledOnce

diff --git a/components/select/src/single-select/single-select.stories.e2e.js b/components/select/src/single-select/single-select.stories.e2e.js
@@ -49,11 +49,22 @@ storiesOf('SingleSelect', module)
         </SingleSelect>
     ))
     .add('With onBlur', () => (
-        <SingleSelect className="select" onBlur={window.onBlur}>
-            <SingleSelectOption value="1" label="option one" />
-            <SingleSelectOption value="2" label="option two" />
-            <SingleSelectOption value="3" label="option three" />
-        </SingleSelect>
+        <>
+            <SingleSelect
+                className="select"
+                onChange={window.onChange}
+                onBlur={window.onBlur}
+            >
+                <SingleSelectOption
+                    dataTest="first-option"
+                    value="1"
+                    label="option one"
+                />
+                <SingleSelectOption value="2" label="option two" />
+                <SingleSelectOption value="3" label="option three" />
+            </SingleSelect>
+            <input type="input" className="input" />
+        </>
     ))
     .add('With custom options and onChange', () => (
         <SingleSelect className="select" onChange={window.onChange}>