@mantou/gem 1.7.5 → 1.7.7

package/src/test/gem-element/advance.test.ts

@@ -1,3 +1,11 @@
+/**
+ * 测试 HTMLElement 没有的特性或者不常用的特性
+ * - 异步渲染
+ * - Light DOM 自定义元素
+ * - 生命周期以及 Effect/Memo
+ * - 派生元素（类扩展）
+ * - 无渲染内容 Gem 元素
+ */
 import { fixture, expect, nextFrame } from '@open-wc/testing';
 
 import { GemElement, html } from '../../lib/element';
@@ -120,7 +128,10 @@ describe('gem element 生命周期', () => {
     const el = container.firstElementChild as LifecycleGemElement;
     expect(el.appTitle).to.equal('title');
     expect(el.renderCount).to.equal(1);
-    expect((el.cloneNode() as LifecycleGemElement).appTitle).to.equal('title');
+    const clone = el.cloneNode() as LifecycleGemElement;
+    // BUG
+    clone.connectedCallback();
+    expect(clone.appTitle).to.equal('title');
 
     const el2 = new LifecycleGemElement('', '2');
     expect(el2.appTitle).to.equal('');

package/src/test/gem-element/decorators.test.ts

@@ -51,20 +51,24 @@ class DecoratorGemElement extends GemElement {
   }
 }
 
-@connectStore(store)
-@adoptedStyle(styles)
-@customElement('decorator-gem-demo2')
-class DecoratorGemElement2 extends GemElement {
-  static observedStores = [];
-  static adoptedStyleSheets = [];
-  renderCount = 0;
-  render() {
-    this.renderCount++;
-    return html``;
-  }
-}
-
 describe('装饰器', () => {
+  it('使用装饰器定义的未插入文档元素', async () => {
+    const el = new DecoratorGemElement();
+    expect(el.propData).to.eql({ value: '' });
+    expect(el.getAttribute('rank-attr')).to.equal(null);
+    // BUG
+    expect(el.rankAttr).to.equal(undefined);
+    el.connectedCallback();
+    expect(el.getAttribute('rank-attr')).to.equal(null);
+    expect(el.rankAttr).to.equal('');
+
+    el.rankAttr = 'attr';
+    el.propData = { value: '1' };
+    const el2 = el.cloneNode() as DecoratorGemElement;
+    expect(el2.getAttribute('rank-attr')).to.equal('attr');
+    expect(el2.rankAttr).to.equal('attr');
+    expect(el2.propData).to.eql({ value: '' });
+  });
   it('装饰器定义的自定义元素', async () => {
     let a = 1;
     const el: DecoratorGemElement = await fixture(html`
@@ -104,12 +108,4 @@ describe('装饰器', () => {
     expect(el.renderCount).to.equal(3);
     expect(a).to.equal(2);
   });
-
-  it('装饰器和静态属性共存', async () => {
-    const el: DecoratorGemElement2 = await fixture(html`<decorator-gem-demo2></decorator-gem-demo2>`);
-    updateStore(store, { a: 3 });
-    await Promise.resolve();
-    expect(el.renderCount).to.equal(2);
-    expect(el.shadowRoot?.adoptedStyleSheets.length).to.equal(1);
-  });
 });

package/src/test/gem-element/multi.test.ts

@@ -1,12 +1,13 @@
 import { expect, fixture } from '@open-wc/testing';
 
-import { customElement, property, RefObject, refobject } from '../../lib/decorators';
+import { attribute, customElement, property, RefObject, refobject } from '../../lib/decorators';
 import { GemElement, html } from '../../lib/element';
 
 @customElement('app-children')
 export class Children extends GemElement {
   @refobject inputRef: RefObject<HTMLInputElement>;
   @property value?: { value: number };
+  @attribute attr: string;
 
   render() {
     return html`<input ref=${this.inputRef.ref} />`;
@@ -19,13 +20,13 @@ export class App extends GemElement {
   @refobject childrenRef2: RefObject<Children>;
   render() {
     return html`
-      <app-children ref=${this.childrenRef1.ref} .value=${{ value: 1 }}></app-children>
-      <app-children ref=${this.childrenRef2.ref} .value=${{ value: 2 }}></app-children>
+      <app-children ref=${this.childrenRef1.ref} .value=${{ value: 1 }} attr="1"></app-children>
+      <app-children ref=${this.childrenRef2.ref} .value=${{ value: 2 }} attr="2"></app-children>
     `;
   }
 }
-describe('多个 gem element', () => {
-  it('ref & prop', async () => {
+describe('多个 gem element 一起工作', () => {
+  it('ref & prop & attr', async () => {
     const el: App = await fixture(html`<app-root></app-root>`);
     const children1 = el.childrenRef1.element!;
     const children2 = el.childrenRef2.element!;
@@ -34,5 +35,7 @@ describe('多个 gem element', () => {
     expect(input1 !== input2).to.equal(true);
     expect(children1.value).to.eql({ value: 1 });
     expect(children2.value).to.eql({ value: 2 });
+    expect(children1.attr).to.eql('1');
+    expect(children2.attr).to.eql('2');
   });
 });

package/src/test/store.test.ts

@@ -1,6 +1,6 @@
 import { expect, aTimeout } from '@open-wc/testing';
 
-import { StoreListenerMap, createStore, createStoreSet, updateStore, connect, disconnect } from '../lib/store';
+import { StoreListenerMap, createStore, updateStore, connect, disconnect } from '../lib/store';
 
 describe('store 测试', () => {
   it('create store', () => {
@@ -8,8 +8,6 @@ describe('store 测试', () => {
     const store = createStore(origin);
     expect(store).to.equal(origin);
     expect(!!StoreListenerMap.get(store)).to.equal(true);
-    const stores = createStoreSet({ a: {} });
-    expect(!!StoreListenerMap.get(stores.a)).to.equal(true);
   });
   it('update store', async () => {
     const store = createStore({ a: 1 });

package/src/test/utils.test.ts

@@ -110,4 +110,28 @@ describe('utils 测试', () => {
     expect(exportPartsMap({ foo: 'bar', content: 'content', false: false })).to.equal(`,foo:bar,content,`);
     expect(exportPartsMap({ foo: 'bar', content: true })).to.equal(`,foo:bar,content,`);
   });
+  // it('createCSSAnimation', () => {
+  //   expect(createCSSAnimation([{ opacity: 0 }])).to.equal('100%{;opacity:0;}');
+  //   expect(createCSSAnimation([{ opacity: 1 }, { opacity: 0 }])).to.equal('0%{;opacity:1;}100%{;opacity:0;}');
+  //   expect(createCSSAnimation([{ opacity: 1 }, { opacity: 0.1, offset: 0.7 }, { opacity: 0 }])).to.equal(
+  //     '0%{;opacity:1;}70%{;opacity:0.1;}100%{;opacity:0;}',
+  //   );
+  //   expect(createCSSAnimation({ opacity: [0] })).to.equal('100%{;opacity:0;}');
+  //   expect(createCSSAnimation({ opacity: [1, 0] })).to.equal('0%{;opacity:1;}100%{;opacity:0;}');
+  //   expect(createCSSAnimation({ opacity: [1, 0], offset: [0, 0.7] })).to.equal(
+  //     '0%{;opacity:1;}70%{;opacity:0;}100%{;}',
+  //   );
+  //   expect(createCSSAnimation({ opacity: [1, 0], backgroundColor: ['red', 'yellow', 'green'] })).to.equal(
+  //     '0%{;opacity:1;background-color:red;}100%{;opacity:0;background-color:green;}50%{;background-color:yellow;}',
+  //   );
+  //   expect(
+  //     createCSSAnimation({
+  //       opacity: [1, 0],
+  //       backgroundColor: ['red', 'yellow', 'green'],
+  //       offset: [0, 0.7],
+  //     }),
+  //   ).to.equal(
+  //     '0%{;opacity:1;background-color:red;}70%{;opacity:0;background-color:yellow;}100%{;background-color:green;}',
+  //   );
+  // });
 });