fix: 🐛️ select options even if they are nested in optgroups (#196)

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

* fix: 🐛️ select options even if they are nested in optgroups

Author: jordyvandomselaar

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 coverage/
 dist/
+.idea/

__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);
+  });
 });

__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);
+  });
 });

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) {