@mantou/gem 2.2.14 → 2.3.0

package/src/test/elements/route.test.ts

@@ -0,0 +1,102 @@
+import type { GemRouteElement } from '../../elements/route';
+import { html } from '../../lib/element';
+import { history } from '../../lib/history';
+import { expect, fixture, nextFrame, waitForPopState } from '../utils';
+
+import '../../elements/route';
+
+const routes = [{ pattern: '*', content: html`<div style="height: 1000px"></div>` }];
+
+// 滚动位置在路由渲染后更新，恢复位置可能晚一个微任务，等待 `routechange` 后已经更新
+const rendered = (route: GemRouteElement) =>
+  new Promise((resolve) => route.addEventListener('routechange', resolve, { once: true }));
+
+let container: HTMLElement;
+
+async function createRoute() {
+  container = await fixture(
+    html`<div style="height: 100px; overflow: auto"><gem-route .routes=${routes}></gem-route></div>`,
+  );
+  return container.querySelector<GemRouteElement>('gem-route')!;
+}
+
+async function navigate(route: GemRouteElement, action: () => void) {
+  const promise = rendered(route);
+  action();
+  await promise;
+}
+
+describe('<gem-route> scrollContainer', () => {
+  // 所有路由共享滚动位置，避免之前的路由记录位置
+  afterEach(() => container.remove());
+
+  it('导航时滚动到顶部，后退时恢复位置，同一条历史记录重新渲染时保持位置', async () => {
+    const route = await createRoute();
+    route.scrollContainer = container;
+    await nextFrame();
+    await navigate(route, () => history.push({ path: '/scroll-a' }));
+    container.scrollTop = 300;
+    await navigate(route, () => history.push({ path: '/scroll-b' }));
+    expect(container.scrollTop).to.equal(0);
+    container.scrollTop = 100;
+    await navigate(route, () => (route.key = 1));
+    expect(container.scrollTop).to.equal(100);
+    await navigate(route, () => waitForPopState(() => history.back()));
+    expect(container.scrollTop).to.equal(300);
+  });
+
+  it('前进后退时位置未知则滚动到顶部', async () => {
+    const route = await createRoute();
+    await navigate(route, () => history.push({ path: '/scroll-c' }));
+    await navigate(route, () => history.push({ path: '/scroll-d' }));
+    route.scrollContainer = container;
+    await nextFrame();
+    container.scrollTop = 50;
+    await navigate(route, () => waitForPopState(() => history.back()));
+    expect(container.scrollTop).to.equal(0);
+  });
+
+  it('前进后退时位置未知则保持文档的滚动位置', async () => {
+    // 避免浏览器恢复滚动位置
+    window.history.scrollRestoration = 'manual';
+    document.body.style.minHeight = '3000px';
+    const route = await createRoute();
+    await navigate(route, () => history.push({ path: '/scroll-f' }));
+    await navigate(route, () => history.push({ path: '/scroll-g' }));
+    route.scrollContainer = document.scrollingElement!;
+    await nextFrame();
+    scrollTo(0, 50);
+    await navigate(route, () => waitForPopState(() => history.back()));
+    expect(scrollY).to.equal(50);
+    scrollTo(0, 0);
+    document.body.style.minHeight = '';
+    window.history.scrollRestoration = 'auto';
+  });
+
+  it('恢复位置前等待 scrollWait', async () => {
+    const route = await createRoute();
+    route.scrollContainer = container;
+    let resolve = () => {};
+    const ready = new Promise<void>((r) => (resolve = r));
+    route.scrollWait = () => ready;
+    await nextFrame();
+    await navigate(route, () => history.push({ path: '/scroll-h' }));
+    container.scrollTop = 300;
+    await navigate(route, () => history.push({ path: '/scroll-i' }));
+    expect(container.scrollTop).to.equal(0);
+    await navigate(route, () => waitForPopState(() => history.back()));
+    expect(container.scrollTop).to.equal(0);
+    resolve();
+    await ready;
+    expect(container.scrollTop).to.equal(300);
+  });
+
+  it('滚动容器为空时不滚动', async () => {
+    const route = await createRoute();
+    route.scrollContainer = () => null;
+    await nextFrame();
+    container.scrollTop = 80;
+    await navigate(route, () => history.push({ path: '/scroll-e' }));
+    expect(container.scrollTop).to.equal(80);
+  });
+});

package/src/test/elements/title.test.ts

@@ -21,5 +21,12 @@ describe('GemTitleElement', () => {
     await nextFrame();
     expect(document.title).to.equal('prefix-Page');
     expect(ele.shadowRoot!.textContent).to.equal('Page');
+
+    // 只改变 hash 时保持标题，不重复添加前缀
+    location.hash = '#a';
+    await nextFrame();
+    await nextFrame();
+    expect(document.title).to.equal('prefix-Page');
+    expect(ele.shadowRoot!.textContent).to.equal('Page');
   });
 });

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' });
@@ -161,3 +174,23 @@ describe('基本 gem element 测试', () => {
     expect(el.renderCount).to.equal(2);
   });
 });
+
+@customElement('gem-name-state')
+class GemNameStateElement extends GemElement {
+  state = createState({ name: 'guest' });
+
+  render() {
+    return html`${this.state.name}`;
+  }
+}
+
+describe('state `name` 字段', () => {
+  it('create and update state', async () => {
+    const el: GemNameStateElement = await fixture(html`<gem-name-state></gem-name-state>`);
+    expect(el.textContent).to.equal('guest');
+    el.state({ name: 'admin' });
+    await Promise.resolve();
+    expect({ ...el.state }).to.deep.equal({ name: 'admin' });
+    expect(el.textContent).to.equal('admin');
+  });
+});

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/store.test.ts

@@ -25,3 +25,15 @@ describe('store 测试', () => {
     expect(flag).to.equal(true);
   });
 });
+
+describe('store `name` `length` 字段', () => {
+  it('create and update store', () => {
+    const store = createStore({ name: 'guest', length: 1 });
+    expect({ ...store }).to.deep.equal({ name: 'guest', length: 1 });
+    store({ name: 'admin', length: 2 });
+    expect({ ...store }).to.deep.equal({ name: 'admin', length: 2 });
+    const store2 = createStore<{ name?: string }>({});
+    store2({ name: 'guest' });
+    expect(store2.name).to.equal('guest');
+  });
+});

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);