Merge pull request #252 from universal-ember/add-shadow-tests

Add tests for <Shadowed>

ember-primitives/src/components/shadowed.gts

@@ -4,14 +4,26 @@ import { cell } from 'ember-resources';
 import type { TOC } from '@ember/component/template-only';
 
 const Shadow = () => {
-  let shadow = cell<ShadowRoot>();
+  let shadow = cell<Element>();
 
   return {
     get root() {
       return shadow.current;
     },
     attach: modifier((element: Element) => {
-      shadow.set(element.attachShadow({ mode: 'open' }));
+      let shadowRoot = element.attachShadow({ mode: 'open' });
+      let div = document.createElement('div');
+
+      // ember-source 5.6 broke the ability to in-element
+      // natively into a shadowroot.
+      //
+      // See these ember-source bugs:
+      // - https://github.com/emberjs/ember.js/issues/20643
+      // - https://github.com/emberjs/ember.js/issues/20642
+      // - https://github.com/emberjs/ember.js/issues/20641
+      shadowRoot.appendChild(div);
+
+      shadow.set(div);
     }),
   };
 };
@@ -22,13 +34,11 @@ const Shadow = () => {
 const getStyles = () => [...document.head.querySelectorAll('link')].map((link) => link.href);
 
 const Styles = <template>
-  {{#let (getStyles) as |styles|}}
-    {{#each styles as |styleHref|}}
+  {{#each (getStyles) as |styleHref|}}
 
-      <link rel="stylesheet" href={{styleHref}} />
+    <link rel="stylesheet" href={{styleHref}} />
 
-    {{/each}}
-  {{/let}}
+  {{/each}}
 </template>;
 
 /**

test-app/tests/shadowed/rendering-test.gts

@@ -0,0 +1,27 @@
+import { find, render } from '@ember/test-helpers';
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+
+import { Shadowed } from 'ember-primitives';
+
+module('Rendering | <Shadowed>', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it works', async function (assert) {
+    await render(
+      <template>
+        out of shadow
+
+        <Shadowed data-shadow>
+          in shadow
+        </Shadowed>
+      </template>
+    );
+
+    assert.dom().hasText('out of shadow');
+    assert.dom().doesNotContainText('in shadow');
+    // assort.dom forgot that ShadowDom is a thing
+    // assert.dom(find('[data-shadow]')?.shadowRoot).hasText('in shadow');
+    assert.ok(find('[data-shadow]')?.shadowRoot?.textContent?.includes('in shadow'));
+  });
+});