fix: mode arg and add closed test

knownasilya · Oct 4, 2020 · 3a25ed8 · 3a25ed8
1 parent 6277383
commit 3a25ed8
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 4 deletions.
diff --git a/addon/components/shadow-dom/component.js b/addon/components/shadow-dom/component.js
@@ -5,11 +5,11 @@ import { action } from '@ember/object';
 export default class ShadowDom extends Component {
   @tracked shadow = null;
 
-  mode = 'open';
+  defaultMode = 'open';
 
   @action
   setupRoot(element) {
-    let mode = this.mode;
+    let mode = this.args.mode || this.defaultMode;
     let shadow = element.attachShadow({ mode });
 
 		this.shadow = shadow;

diff --git a/app/templates/components/shadow-dom.hbs b/app/templates/components/shadow-dom.hbs
@@ -1,4 +1,8 @@
-<div {{did-insert this.setupRoot}} ...attributes></div>
+<div
+  {{did-insert this.setupRoot}}
+  ...attributes
+></div>
+
 {{#if this.shadow}}
   {{#-in-element this.shadow}}
     {{yield}}

diff --git a/tests/integration/components/shadow-dom/component-test.js b/tests/integration/components/shadow-dom/component-test.js
@@ -8,11 +8,21 @@ module('Integration | Component | shadow-dom', function(hooks) {
 
   test('it renders', async function(assert) {
     await render(hbs`
-      <ShadowDom id='internal'>
+      <ShadowDom id='internal' @mode='open'>
         <div class='block'>template block text</div>
       </ShadowDom>
     `);
 
     assert.dom('.block', find('#internal').shadowRoot).hasText('template block text');
   });
+
+  test('it can be closed', async function(assert) {
+    await render(hbs`
+      <ShadowDom id='internal' @mode='closed'>
+        <div class='block'>template block text</div>
+      </ShadowDom>
+    `);
+
+    assert.dom('.block', find('#internal').shadowRoot).doesNotExist();
+  });
 });