From 8ba1b154beade375b7e2e595c31c8ef87162fd78 Mon Sep 17 00:00:00 2001
From: jordyvandomselaar <jordy.van.domselaar@outlook.com>
Date: Wed, 29 Jan 2020 00:22:22 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=EF=B8=8F=20select=20options?=
 =?UTF-8?q?=20even=20if=20they=20are=20nested=20in=20optgroups=20(#196)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* chore: 🤖️ Add .idea/ to .gitignore

* fix: 🐛️ select options even if they are nested in optgroups
---
 .gitignore                       |  1 +
 __tests__/react/selectoptions.js | 30 ++++++++++++++++++++++++++++++
 __tests__/vue/selectoptions.js   | 25 +++++++++++++++++++++++++
 src/index.js                     |  4 ++--
 4 files changed, 58 insertions(+), 2 deletions(-)

diff --git a/.gitignore b/.gitignore
index 82e2584c..2b60d167 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 node_modules
 coverage/
 dist/
+.idea/
diff --git a/__tests__/react/selectoptions.js b/__tests__/react/selectoptions.js
index e2eb15c9..77122e5e 100644
--- a/__tests__/react/selectoptions.js
+++ b/__tests__/react/selectoptions.js
@@ -249,4 +249,34 @@ describe("userEvent.selectOptions", () => {
     expect(getByTestId("val2").selected).toBe(true);
     expect(getByTestId("val3").selected).toBe(false);
   });
+
+  it("sets the selected prop on the selected OPTION using OPTGROUPS", () => {
+    const { getByTestId } = render(
+        <form>
+          <select multiple data-testid="element">
+            <optgroup label="test optgroup 1">
+              <option data-testid="val1" value="1">
+                1
+              </option>
+            </optgroup>
+            <optgroup label="test optgroup 2">
+            <option data-testid="val2" value="2">
+              2
+            </option>
+            </optgroup>
+            <optgroup label="test optgroup 1">
+            <option data-testid="val3" value="3">
+              3
+            </option>
+            </optgroup>
+          </select>
+        </form>
+    );
+
+    userEvent.selectOptions(getByTestId("element"), ["1", "3"]);
+
+    expect(getByTestId("val1").selected).toBe(true);
+    expect(getByTestId("val2").selected).toBe(false);
+    expect(getByTestId("val3").selected).toBe(true);
+  });
 });
diff --git a/__tests__/vue/selectoptions.js b/__tests__/vue/selectoptions.js
index 0d178ef8..e6feb767 100644
--- a/__tests__/vue/selectoptions.js
+++ b/__tests__/vue/selectoptions.js
@@ -226,4 +226,29 @@ describe("userEvent.selectOptions", () => {
     expect(getByTestId("val2").selected).toBe(true);
     expect(getByTestId("val3").selected).toBe(false);
   });
+
+  it("sets the selected prop on the selected OPTION using OPTGROUPS", () => {
+    const { getByTestId } = render({
+      template: `
+        <form>
+          <select data-testid="element" multiple>
+            <optgroup label="test optgroup 1">
+               <option value="1" data-testid="val1">1</option>
+            </optgroup>
+            <optgroup label="test optgroup 2">
+                <option value="2" data-testid="val2">2</option>
+            </optgroup>
+            <optgroup label="test optgroup 3">
+                <option value="3" data-testid="val3">3</option>
+            </optgroup>
+          </select>
+        </form>`
+    });
+
+    userEvent.selectOptions(getByTestId("element"), ["1", "3"]);
+
+    expect(getByTestId("val1").selected).toBe(true);
+    expect(getByTestId("val2").selected).toBe(false);
+    expect(getByTestId("val3").selected).toBe(true);
+  });
 });
diff --git a/src/index.js b/src/index.js
index 332d0d53..ae9c6f0f 100644
--- a/src/index.js
+++ b/src/index.js
@@ -169,8 +169,8 @@ const userEvent = {
     clickElement(element);
 
     const valArray = Array.isArray(values) ? values : [values];
-    const selectedOptions = Array.from(element.children).filter(
-      opt => opt.tagName === "OPTION" && valArray.includes(opt.value)
+    const selectedOptions = Array.from(element.querySelectorAll('option')).filter(
+      opt => valArray.includes(opt.value)
     );
 
     if (selectedOptions.length > 0) {