proxy for api

tallarium · Mar 1, 2023 · f53fc2b · f53fc2b
1 parent 22eff72
commit f53fc2b
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 43 deletions.
diff --git a/addon/components/expander/index.js b/addon/components/expander/index.js
@@ -9,41 +9,25 @@ import { action } from '@ember/object';
 import { task } from 'ember-concurrency';
 import { guidFor } from '@ember/object/internals';
 import { waitForAnimation } from '@zestia/animation-utils';
-const { seal, assign } = Object;
+const { assign } = Object;
 
 class ExpanderComponent extends Component {
-  @tracked maxHeight = null;
   @tracked isExpanded = !!this.args.expanded;
-  @tracked renderContent = !!this.args.expanded;
   @tracked isTransitioning = false;
+  @tracked maxHeight = null;
+  @tracked renderContent = !!this.args.expanded;
 
-  id = guidFor(this);
-
-  _api = {};
-  Content = null;
-  Button = null;
-  ExpanderContent = ExpanderContent;
+  Button;
+  Content;
+  contentElement = null;
   ExpanderButton = ExpanderButton;
+  ExpanderContent = ExpanderContent;
+  id = guidFor(this);
 
   registerComponents = (components) => {
     assign(this, components);
   };
 
-  get api() {
-    return seal(
-      assign(this._api, {
-        Content: this.renderContent ? this.Content : null,
-        Button: this.Button,
-        contentElement: this.contentElement,
-        toggle: this.toggle,
-        expand: this.expand,
-        collapse: this.collapse,
-        isExpanded: this.isExpanded,
-        isTransitioning: this.isTransitioning
-      })
-    );
-  }
-
   get style() {
     let style = '';
 
@@ -162,6 +146,30 @@ class ExpanderComponent extends Component {
       transitionProperty: 'max-height'
     });
   }
+
+  api = new Proxy(this, {
+    get(target, key) {
+      if (
+        ![
+          'Button',
+          'Content',
+          'contentElement',
+          'toggle',
+          'expand',
+          'collapse',
+          'isExpanded',
+          'isTransitioning'
+        ].includes(key) ||
+        (key === 'Content' && !target.renderContent)
+      ) {
+        return;
+      }
+
+      return target[key];
+    },
+
+    set() {}
+  });
 }
 
 export default ExpanderComponent;
diff --git a/tests/integration/components/expander-test.js b/tests/integration/components/expander-test.js
@@ -10,7 +10,6 @@ import {
   waitUntil,
   find
 } from '@ember/test-helpers';
-const { keys, isSealed } = Object;
 
 module('expander', function (hooks) {
   setupRenderingTest(hooks);
@@ -205,7 +204,7 @@ module('expander', function (hooks) {
   });
 
   test('api', async function (assert) {
-    assert.expect(9);
+    assert.expect(14);
 
     this.handleReady = (expander) => (this.api = expander);
 
@@ -217,32 +216,25 @@ module('expander', function (hooks) {
       </Expander>
     `);
 
-    assert.deepEqual(
-      keys(this.api),
-      [
-        'Content',
-        'Button',
-        'contentElement',
-        'toggle',
-        'expand',
-        'collapse',
-        'isExpanded',
-        'isTransitioning'
-      ],
-      'exposes the api when ready'
-    );
-
-    assert.true(isSealed(this.api));
+    assert.strictEqual(this.api.Content, undefined);
+    assert.strictEqual(typeof this.api.Button, 'object');
+    assert.deepEqual(this.api.contentElement, null);
+    assert.strictEqual(typeof this.api.toggle, 'function');
+    assert.strictEqual(typeof this.api.expand, 'function');
+    assert.strictEqual(typeof this.api.collapse, 'function');
     assert.false(this.api.isExpanded);
-    assert.strictEqual(this.api.contentElement, undefined);
+    assert.false(this.api.isTransitioning);
+
     assert.dom('.expander').doesNotIncludeText('Hello World');
 
     this.api.expand();
 
+    await waitUntil(() => this.api.isTransitioning);
     await settled();
 
     assert.true(this.api.isExpanded);
     assert.false(this.api.isTransitioning);
+    assert.strictEqual(typeof this.api.Content, 'object');
     assert.deepEqual(this.api.contentElement, find('.expander__content'));
     assert.dom('.expander').hasText('Hello World');
   });