Add test for shadow DOM support

Author: bendera

src/includes/test-helpers.ts

@@ -158,25 +158,28 @@ export function $$<K extends AllTagNames>(
   selector: K
 ): NodeListOf<TagNameToElement<K>>;
 export function $$<K extends AllTagNames>(
-  root: Element,
+  root: Element | ShadowRoot,
   selector: K
 ): NodeListOf<TagNameToElement<K>>;
 export function $$<T extends Element = Element>(
   selector: string
 ): NodeListOf<T>;
 export function $$<T extends Element = Element>(
-  root: Element,
+  root: Element | ShadowRoot,
   selector: string
 ): NodeListOf<T>;
 export function $$<T extends Element = Element>(
-  arg1: string | Element,
+  arg1: string | Element | ShadowRoot,
   arg2?: string
 ): NodeListOf<T> {
   let result: NodeListOf<Element>;
 
   if (typeof arg1 === 'string') {
     result = document.querySelectorAll(arg1);
-  } else if (arg1 instanceof Element && typeof arg2 === 'string') {
+  } else if (
+    (arg1 instanceof Element || arg1 instanceof ShadowRoot) &&
+    typeof arg2 === 'string'
+  ) {
     result = arg1.querySelectorAll(arg2);
   } else {
     throw new Error('Invalid arguments passed to $$()');

src/vscode-radio-group/vscode-radio-group.test.ts

@@ -1,9 +1,43 @@
 import {expect, fixture, html} from '@open-wc/testing';
-import {$} from '../includes/test-helpers.js';
+import {$, $$, clickOnElement} from '../includes/test-helpers.js';
 import '../vscode-radio/index.js';
 import {VscodeRadio} from '../vscode-radio/index.js';
 import {VscodeRadioGroup} from './index.js';
 
+class DemoElement extends HTMLElement {
+  static template = (() => {
+    const t = document.createElement('template');
+    t.innerHTML = `
+      <vscode-radio-group>
+        <vscode-radio value="1">Option 1</vscode-radio>
+        <vscode-radio value="2">Option 2</vscode-radio>
+        <vscode-radio value="3" default-checked>Option 3</vscode-radio>
+      </vscode-radio-group>
+    `;
+
+    return t;
+  })();
+
+  constructor() {
+    super();
+
+    const shadow = this.attachShadow({mode: 'open'});
+    shadow.appendChild(DemoElement.template.content.cloneNode(true));
+
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(`
+      :host {
+        display: block;
+        padding: 16px;
+      }
+    `);
+
+    shadow.adoptedStyleSheets = [sheet];
+  }
+}
+
+customElements.define('demo-element', DemoElement);
+
 describe('vscode-radio-group', () => {
   it('is defined', () => {
     const el = document.createElement('vscode-radio-group');
@@ -48,4 +82,17 @@ describe('vscode-radio-group', () => {
     expect(icon2.classList.contains('checked')).to.be.false;
     expect(icon3.classList.contains('checked')).to.be.true;
   });
+
+  it('works in shadow DOM', async () => {
+    const el = await fixture<DemoElement>(html`<demo-element></demo-element>`);
+
+    const radios = $$(el.shadowRoot!, 'vscode-radio');
+    const lastRadioDefaultChecked = radios[2].checked;
+
+    await clickOnElement(radios[0]);
+
+    expect(lastRadioDefaultChecked).to.be.true;
+    expect(radios[0].checked).to.be.true;
+    expect(radios[2].checked).to.be.false;
+  });
 });