@mantou/gem 2.2.15 → 2.3.1

package/src/test/elements/reflect.test.ts

@@ -1,4 +1,4 @@
-import type { GemReflectElement } from '../../elements/reflect';
+import { type GemReflectElement, getLogicalParent } from '../../elements/reflect';
 import { adoptedStyle, customElement } from '../../lib/decorators';
 import { css, GemElement, html } from '../../lib/element';
 import { expect, fixture, nextFrame } from '../utils';
@@ -34,4 +34,23 @@ describe('GemReflectElement', () => {
     reflect.remove();
     expect(!!document.querySelector('#one')).to.equal(false);
   });
+
+  it('logical parent', async () => {
+    const reflect: GemReflectElement = await fixture(html`
+      <gem-reflect .target=${document.body}><div id="three"><span></span></div></gem-reflect>
+    `);
+    const div = document.body.querySelector('#three')!;
+    expect(getLogicalParent(div)).to.equal(reflect);
+    expect(getLogicalParent(div.firstElementChild!)).to.equal(div);
+    // 移动后插入片段的节点
+    const added = document.createElement('p');
+    div.after(added);
+    expect(getLogicalParent(added)).to.equal(reflect);
+    // 片段外的节点
+    expect(getLogicalParent(reflect.parentElement!)).to.equal(document.body);
+    const host = document.createElement('div');
+    const child = host.attachShadow({ mode: 'open' }).appendChild(document.createElement('p'));
+    expect(getLogicalParent(child)).to.equal(host);
+    reflect.remove();
+  });
 });

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

@@ -0,0 +1,22 @@
+import type { GemUnsafeElement } from '../../elements/unsafe';
+import { css, html } from '../../lib/element';
+import { expect, fixture, nextFrame } from '../utils';
+
+import '../../elements/unsafe';
+
+describe('GemUnsafeElement', () => {
+  it('渲染 HTML 字符串，应用样式', async () => {
+    const ele: GemUnsafeElement = await fixture(
+      html`<gem-unsafe html="<p>a</p>" .styles=${css`p { color: rgb(255, 0, 0); }`}></gem-unsafe>`,
+    );
+    const color = () => getComputedStyle(ele.shadowRoot!.querySelector('p')!).color;
+    expect(ele.shadowRoot!.querySelector('p')!.textContent).to.equal('a');
+    expect(color()).to.equal('rgb(255, 0, 0)');
+    ele.styles = 'p { color: rgb(0, 0, 255); }';
+    await nextFrame();
+    expect(color()).to.equal('rgb(0, 0, 255)');
+    ele.html = '<b>b</b>';
+    await nextFrame();
+    expect(ele.shadowRoot!.innerHTML).to.equal('<b>b</b>');
+  });
+});

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

@@ -13,6 +13,7 @@ import {
   attribute,
   connectStore,
   customElement,
+  effect,
   emitter,
   mounted,
   property,
@@ -85,6 +86,92 @@ describe('没有 Shadow DOM 的 gem 元素', () => {
   });
 });
 
+const scopeStyle = css`
+  p {
+    text-decoration: underline;
+  }
+`;
+
+@customElement('scope-child-demo')
+class _ScopeChildDemo extends GemElement {
+  render() {
+    return html`<p>child</p>`;
+  }
+}
+
+@customElement('scope-gem-demo')
+@adoptedStyle(scopeStyle)
+class ScopeGemDemo extends GemElement {
+  render() {
+    return html`<p>own</p><article><p>nested</p></article><scope-child-demo></scope-child-demo>`;
+  }
+}
+
+@customElement('closed-gem-demo')
+@adoptedStyle(css`
+  div {
+    color: rgb(255, 0, 0);
+  }
+`)
+@shadow({ mode: 'closed' })
+class ClosedGemDemo extends GemElement {
+  render() {
+    return html`<div>closed</div>`;
+  }
+}
+
+describe('元素样式的作用域', () => {
+  it('Light DOM 的样式不影响有模版的子元素', async () => {
+    const el: ScopeGemDemo = await fixture(html`<scope-gem-demo></scope-gem-demo>`);
+    const decoration = (selector: string) => getComputedStyle(el.querySelector(selector)!).textDecorationLine;
+    expect(decoration(':scope > p')).to.equal('underline');
+    expect(decoration('article > p')).to.equal('underline');
+    expect(decoration('scope-child-demo > p')).to.equal('none');
+  });
+  it('closed Shadow DOM', async () => {
+    const el: ClosedGemDemo = await fixture(html`<closed-gem-demo></closed-gem-demo>`);
+    expect(el.shadowRoot).to.equal(null);
+    const div = el.internals.shadowRoot!.querySelector('div')!;
+    expect(getComputedStyle(div).color).to.equal('rgb(255, 0, 0)');
+  });
+});
+
+@customElement('effect-ref-demo')
+class EffectRefDemo extends GemElement {
+  #state = createState({ hidden: false });
+  ref = createRef<HTMLTextAreaElement>();
+  values: (HTMLTextAreaElement | undefined)[] = [];
+
+  @effect((i) => [i.ref.value])
+  #observe = ([ele]: [HTMLTextAreaElement | undefined]) => {
+    this.values.push(ele);
+  };
+
+  toggle = () => this.#state({ hidden: !this.#state.hidden });
+
+  render() {
+    return this.#state.hidden ? null : html`<textarea ${this.ref}></textarea>`;
+  }
+}
+
+describe('effect 依赖 ref', () => {
+  it('元素重新创建时执行', async () => {
+    const el: EffectRefDemo = await fixture(html`<effect-ref-demo></effect-ref-demo>`);
+    const [first] = el.values;
+    expect(first).to.be.instanceOf(HTMLTextAreaElement);
+    // 元素移除时 ref 不会清空，保留最后的元素
+    el.toggle();
+    await nextFrame();
+    expect(el.ref.value).to.equal(first);
+    expect(el.values).to.eql([first]);
+    el.toggle();
+    await nextFrame();
+    expect(el.values.length).to.equal(2);
+    expect(el.values[1]).to.be.instanceOf(HTMLTextAreaElement);
+    expect(el.values[1]).not.to.equal(first);
+  });
+});
+
 class LifecycleGemElement extends GemElement {
   @attribute appTitle = 'default';
   @attribute appTitle2 = 'default2';
@@ -106,12 +193,14 @@ class LifecycleGemElement extends GemElement {
   }
   renderCount = 0;
   mountedCount = 0;
+  unmountedCount = 0;
 
   @mounted()
   #init = () => {
     this.mountedCount++;
     return () => {
       this.renderCount = 0;
+      this.unmountedCount++;
     };
   };
 
@@ -155,10 +244,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 +260,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 +439,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;
@@ -139,6 +145,10 @@ describe('utils 测试', () => {
     expect(rules.item(1).style.background).to.equal('red');
     expect(rules.item(1).cssRules.item(0).selectorText).to.equal('&:hover *');
     expect(rules.item(1).cssRules.item(0).style.background).to.equal('blue');
+    // 有 `-` 的 key 保留原样，可以用来扩展其他样式表的类名
+    const extended = css({ [cssSheet.scroll]: styled`font-weight: bold;` });
+    expect(extended[cssSheet.scroll]).to.equal(cssSheet.scroll);
+    expect(extended[SheetToken].getStyle().cssRules.item(0).selectorText).to.equal(`.${cssSheet.scroll}`);
   });
   it('styleMap/classMap/exportPartsMap', () => {
     expect(styleMap({ '--x': '1px', fontSize: '14px', content: `'*'` })).to.equal(

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