@mantou/gem 2.2.15 → 2.3.0

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

@@ -106,12 +106,14 @@ class LifecycleGemElement extends GemElement {
   }
   renderCount = 0;
   mountedCount = 0;
+  unmountedCount = 0;
 
   @mounted()
   #init = () => {
     this.mountedCount++;
     return () => {
       this.renderCount = 0;
+      this.unmountedCount++;
     };
   };
 
@@ -155,10 +157,12 @@ describe('gem element 生命周期', () => {
     expect(el2.renderCount).to.equal(1);
     el2.remove();
     expect(el2.mountedCount).to.equal(1);
+    expect(el2.unmountedCount).to.equal(1);
     expect(el2.renderCount).to.equal(0);
     container.append(el2);
     await Promise.resolve();
     expect(el2.mountedCount).to.equal(2);
+    expect(el2.unmountedCount).to.equal(1, '重新挂载时不再执行已经执行过的清理函数');
     expect(el2.renderCount).to.equal(1);
     el2.update();
     el2.update();
@@ -169,8 +173,13 @@ describe('gem element 生命周期', () => {
     expect(el3.appTitle).to.equal('test1');
     expect(el3.appTitle2).to.equal('test2');
     expect(el3.renderCount).to.equal(0);
+    // 挂载前更新不会造成挂载后多余的渲染
+    el3.update();
+    el3.appTitle = 'test3';
     container.append(el3);
     expect(el3.renderCount).to.equal(1);
+    await Promise.resolve();
+    expect(el3.renderCount).to.equal(1);
   });
 });
 
@@ -343,6 +352,16 @@ describe('gem element 继承', () => {
     await Promise.resolve();
     expect(window.name).to.equal(`${name}21`);
   });
+  it('setAttribute 设置基类观察的 attribute', async () => {
+    const el: InheritGem1 = await fixture(html`<inherit-gem1></inherit-gem1>`);
+    el.setAttribute('app-title', 'c');
+    expect(el.appTitle).to.equal('c');
+    const el1: InheritGem = await fixture(html`<inherit-gem></inherit-gem>`);
+    el1.setAttribute('app-title2', 'd');
+    el1.setAttribute('app-title', 'e');
+    expect(el1.appTitle2).to.equal('d');
+    expect(el1.appTitle).to.equal('e');
+  });
 });
 @customElement('render-empty')
 @shadow()

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

@@ -114,6 +114,19 @@ describe('基本 gem element 测试', () => {
     expect(el.hasAttribute('attr')).to.equal(false);
   });
 
+  it('setAttribute/removeAttribute/toggleAttribute 设置观察的 attribute', async () => {
+    const el: GemDemo = await fixture(html`<gem-demo></gem-demo>`);
+    el.setAttribute('attr', 'a');
+    el.toggleAttribute('disabled');
+    expect(el.attr).to.equal('a');
+    expect(el.disabled).to.equal(true);
+    el.removeAttribute('attr');
+    expect(el.attr).to.equal('');
+    expect(el.hasAttribute('attr')).to.equal(false);
+    await Promise.resolve();
+    expect(el.shadowRoot?.textContent).to.equal('attr: , disabled: true, count: 0, prop: , state: ');
+  });
+
   it('读取 prop', async () => {
     const el: GemDemo = await fixture(html`<gem-demo .prop=${{ value: 'prop' }}></gem-demo>`);
     expect(el.prop).to.deep.equal({ value: 'prop' });

package/src/test/history.test.ts

@@ -58,6 +58,14 @@ describe('history 测试', () => {
     await aTimeout(10);
     expect(history.getParams().title).to.equal('321');
   });
+  it('keep title when only hash changed', async () => {
+    history.replace({ title: 'Page' });
+    // 模拟应用格式化 document.title
+    document.title = 'Page | Site';
+    location.hash = '#x';
+    await aTimeout(10);
+    expect(history.getParams().title).to.equal('Page');
+  });
   it('Native pushState/replaceState', async () => {
     const historyLength = window.history.length;
     window.history.pushState({}, 'title', '/a');
@@ -73,6 +81,17 @@ describe('history 测试', () => {
     expect(new URLSearchParams(location.search).get('tab')).to.equal('a');
     expect(window.history.length - historyLength).to.equal(1);
   });
+  it('Native pushState with hash', async () => {
+    let hashChangeCount = 0;
+    const onHashChange = () => hashChangeCount++;
+    addEventListener('hashchange', onHashChange);
+    window.history.pushState({}, '', '/c#a%20b');
+    removeEventListener('hashchange', onHashChange);
+    expect(window.location.pathname).to.equal('/c');
+    expect(window.location.hash).to.equal('#a%20b');
+    expect(history.getParams().hash).to.equal('#a b');
+    expect(hashChangeCount).to.equal(1);
+  });
   it('pushIgnoreCloseHandle', async () => {
     const { href } = window.location;
     let state = { open: true };

package/src/test/theme.test.ts

@@ -1,4 +1,4 @@
-import { createTheme } from '../helper/theme';
+import { createDecoratorTheme, createScopedTheme, createTheme } from '../helper/theme';
 import { aTimeout, expect } from './utils';
 
 describe('theme 测试', () => {
@@ -14,4 +14,11 @@ describe('theme 测试', () => {
     expect(getComputedStyle(el).width).to.equal('1px');
     el.remove();
   });
+
+  it('key 作为变量名后缀', () => {
+    expect(createTheme({ textColor: 'red' }, 'k1').textColor).to.equal('var(--text-color-k1)');
+    expect(createScopedTheme({ size: '1px' }, 'k2').size).to.equal('var(--size-k2)');
+    expect(createDecoratorTheme({ size: '1px' }, 'k3').size).to.equal('var(--size-k3)');
+    expect(createTheme({ size: '1px' }).size).to.not.equal(createTheme({ size: '1px' }).size, '没有 key 时随机');
+  });
 });

package/src/test/utils.test.ts

@@ -116,6 +116,12 @@ describe('utils 测试', () => {
     expect(bodyStyleSheet.cssRules.item(0).cssText.startsWith('@scope (body)')).to.true;
     expect(bodyStyleSheet).to.equal(bodyStyleSheet);
     expect(bodyStyleSheet).not.to.equal(cssSheet[SheetToken].getStyle(document.documentElement));
+    // 更新内容时保留 light DOM 的作用域
+    cssSheet[SheetToken].setContent('div { color: blue; }');
+    cssSheet[SheetToken].updateStyle();
+    expect(bodyStyleSheet.cssRules.item(0).cssText.startsWith('@scope (body)')).to.true;
+    expect(bodyStyleSheet.cssRules.item(0).cssText).to.include('blue');
+    expect(cssSheet[SheetToken].getStyle().cssRules.item(0).style.color).to.equal('blue');
   });
   it('raw/css', () => {
     const title: any = undefined;

package/src/test/utils.ts

@@ -13,6 +13,62 @@ export function aTimeout(ms = 0) {
   return new Promise((resolve) => setTimeout(() => resolve(null), ms));
 }
 
+export function createFakeTimers() {
+  type Task = { at: number; every?: number; fn: () => void };
+  const tasks = new Map<number, Task>();
+  const originals = {
+    setTimeout: window.setTimeout,
+    setInterval: window.setInterval,
+    clearTimeout: window.clearTimeout,
+    clearInterval: window.clearInterval,
+  };
+  const realClearTimeout = window.clearTimeout.bind(window);
+  let now = 0;
+  let nextId = -1;
+
+  const schedule = (fn: () => void, delay = 0, every?: number) => {
+    const id = nextId--;
+    tasks.set(id, { at: now + Math.max(delay, 0), every, fn });
+    return id;
+  };
+
+  return {
+    install: () => {
+      window.setTimeout = ((fn: () => void, delay?: number) =>
+        schedule(fn, delay)) as unknown as typeof window.setTimeout;
+      window.setInterval = ((fn: () => void, delay?: number) =>
+        schedule(fn, delay, Math.max(delay ?? 1, 1))) as unknown as typeof window.setInterval;
+      const clear = ((id: number) => {
+        if (!tasks.delete(id)) realClearTimeout(id);
+      }) as unknown as typeof window.clearTimeout;
+      window.clearTimeout = clear;
+      window.clearInterval = clear;
+    },
+    uninstall: () => {
+      window.setTimeout = originals.setTimeout;
+      window.setInterval = originals.setInterval;
+      window.clearTimeout = originals.clearTimeout;
+      window.clearInterval = originals.clearInterval;
+      tasks.clear();
+    },
+    tick: (ms: number) => {
+      const end = now + ms;
+      for (;;) {
+        let next: { id: number; task: Task } | undefined;
+        for (const [id, task] of tasks) {
+          if (task.at <= end && (!next || task.at < next.task.at)) next = { id, task };
+        }
+        if (!next) break;
+        now = next.task.at;
+        if (next.task.every === undefined) tasks.delete(next.id);
+        else next.task.at += next.task.every;
+        next.task.fn();
+      }
+      now = end;
+    },
+  };
+}
+
 export async function fixture(template: TemplateResult) {
   const wrapper = document.createElement('div');
   document.body.appendChild(wrapper);