Add files external open fallback

2026-06-27 12:55:43 +08:00
parent 92ac1f730b
commit 5f48c003db
4 changed files with 312 additions and 5 deletions
@@ -213,6 +213,8 @@ if command -v node &>/dev/null; then
  report "platform-test frontend components mount" $?
  node "$ROOT/scripts/smoke-notes-plugin.js"
  report "notes frontend behavior" $?
+  node "$ROOT/scripts/smoke-files-plugin.js"
+  report "files frontend behavior" $?
 else
  echo "  ⚠️  node not available — skipping frontend smoke"
 fi
@@ -0,0 +1,260 @@
+#!/usr/bin/env node
+const fs = require('fs');
+const path = require('path');
+const vm = require('vm');
+
+const root = path.resolve(__dirname, '..');
+const sourcePath = path.join(root, 'plugins', 'files', 'frontend', 'src', 'index.js');
+const source = fs.readFileSync(sourcePath, 'utf8');
+
+class FakeNode {
+  constructor(tagName) {
+    this.tagName = String(tagName || '').toUpperCase();
+    this.children = [];
+    this.attributes = {};
+    this.listeners = {};
+    this.style = {};
+    this.className = '';
+    this.id = '';
+    this.value = '';
+    this.parentNode = null;
+    this._innerHTML = '';
+    this._textContent = '';
+    this.classList = {
+      add: (cls) => {
+        if (!this.className.split(/\s+/).includes(cls)) this.className = (this.className + ' ' + cls).trim();
+      },
+      remove: (cls) => {
+        this.className = this.className.split(/\s+/).filter((name) => name && name !== cls).join(' ');
+      },
+      contains: (cls) => this.className.split(/\s+/).includes(cls),
+    };
+  }
+
+  appendChild(node) {
+    if (!(node instanceof FakeNode)) throw new TypeError('appendChild expects FakeNode');
+    this.children.push(node);
+    node.parentNode = this;
+    return node;
+  }
+
+  removeChild(node) {
+    this.children = this.children.filter((child) => child !== node);
+    node.parentNode = null;
+    return node;
+  }
+
+  setAttribute(name, value) {
+    this.attributes[name] = String(value);
+    if (name === 'id') this.id = String(value);
+  }
+
+  getAttribute(name) {
+    return this.attributes[name];
+  }
+
+  addEventListener(type, handler) {
+    this.listeners[type] = this.listeners[type] || [];
+    this.listeners[type].push(handler);
+  }
+
+  removeEventListener(type, handler) {
+    this.listeners[type] = (this.listeners[type] || []).filter((candidate) => candidate !== handler);
+  }
+
+  dispatchEvent(type, event = {}) {
+    const handlers = this.listeners[type] || [];
+    handlers.forEach((handler) => handler({
+      preventDefault() {},
+      stopPropagation() {},
+      target: this,
+      clientX: 10,
+      clientY: 10,
+      ...event,
+    }));
+  }
+
+  click() {
+    this.dispatchEvent('click');
+  }
+
+  contains(node) {
+    if (node === this) return true;
+    return this.children.some((child) => child.contains(node));
+  }
+
+  closest(selector) {
+    if (selector.startsWith('.') && this.classList.contains(selector.slice(1))) return this;
+    return this.parentNode ? this.parentNode.closest(selector) : null;
+  }
+
+  querySelector(selector) {
+    return walk(this, (node) => {
+      if (selector.startsWith('.')) return node.classList && node.classList.contains(selector.slice(1));
+      return false;
+    });
+  }
+
+  focus() {}
+  select() {}
+
+  set innerHTML(value) {
+    this._innerHTML = String(value || '');
+    this.children = [];
+  }
+
+  get innerHTML() {
+    return this._innerHTML;
+  }
+
+  set textContent(value) {
+    this._textContent = String(value || '');
+    this.children = [];
+  }
+
+  get textContent() {
+    if (this.tagName === '#TEXT') return this._textContent;
+    return this._textContent + this.children.map((child) => child.textContent).join('');
+  }
+
+  get offsetWidth() { return 200; }
+  get offsetHeight() { return 120; }
+}
+
+function walk(node, fn) {
+  if (fn(node)) return node;
+  for (const child of node.children) {
+    const found = walk(child, fn);
+    if (found) return found;
+  }
+  return null;
+}
+
+function makeDocument() {
+  const body = new FakeNode('body');
+  return {
+    body,
+    head: new FakeNode('head'),
+    listeners: {},
+    createElement(tagName) {
+      return new FakeNode(tagName);
+    },
+    createTextNode(text) {
+      const node = new FakeNode('#text');
+      node.textContent = text;
+      return node;
+    },
+    getElementById() {
+      return null;
+    },
+    addEventListener(type, handler) {
+      this.listeners[type] = this.listeners[type] || [];
+      this.listeners[type].push(handler);
+    },
+    removeEventListener(type, handler) {
+      this.listeners[type] = (this.listeners[type] || []).filter((candidate) => candidate !== handler);
+    },
+  };
+}
+
+function loadFilesComponent(document) {
+  const registry = {};
+  const sandbox = {
+    console,
+    document,
+    window: {
+      innerWidth: 1024,
+      innerHeight: 768,
+      listeners: {},
+      addEventListener(type, handler) {
+        this.listeners[type] = this.listeners[type] || [];
+        this.listeners[type].push(handler);
+      },
+      removeEventListener(type, handler) {
+        this.listeners[type] = (this.listeners[type] || []).filter((candidate) => candidate !== handler);
+      },
+      VerstakPluginRegister(pluginId, bundle) {
+        registry[pluginId] = bundle.components || {};
+      },
+    },
+    navigator: {
+      clipboard: {
+        written: [],
+        writeText: async (text) => {
+          sandbox.navigator.clipboard.written.push(String(text));
+        },
+      },
+    },
+  };
+  sandbox.window.window = sandbox.window;
+  sandbox.window.document = document;
+  sandbox.window.navigator = sandbox.navigator;
+  vm.runInNewContext(source, sandbox, { filename: sourcePath });
+  const component = registry['verstak.files'] && registry['verstak.files'].FilesView;
+  if (!component) throw new Error('FilesView was not registered');
+  return { component, clipboard: sandbox.navigator.clipboard };
+}
+
+function makeApi() {
+  return {
+    files: {
+      list: async () => [
+        {
+          name: 'readme.md',
+          relativePath: 'Docs/readme.md',
+          type: 'file',
+          extension: 'md',
+          size: 12,
+          modifiedAt: '2026-06-27T00:00:00Z',
+        },
+      ],
+      metadata: async () => { throw new Error('not-found'); },
+      readText: async () => '# Readme\n',
+      writeText: async () => undefined,
+      createFolder: async () => undefined,
+      move: async () => undefined,
+      trash: async () => undefined,
+    },
+    workbench: {
+      openResource: async () => ({ status: 'opened' }),
+    },
+  };
+}
+
+async function flush() {
+  for (let i = 0; i < 8; i += 1) await Promise.resolve();
+}
+
+(async () => {
+  const document = makeDocument();
+  const { component, clipboard } = loadFilesComponent(document);
+  const container = new FakeNode('div');
+  component.mount(container, {}, makeApi());
+  await flush();
+
+  const row = walk(container, (node) => node.getAttribute && node.getAttribute('data-file-path') === 'Docs/readme.md');
+  if (!row) throw new Error('file row not rendered');
+
+  const list = walk(container, (node) => node.getAttribute && node.getAttribute('data-files-list') !== undefined);
+  if (!list) throw new Error('files list not rendered');
+  list.dispatchEvent('contextmenu', { target: row, clientX: 20, clientY: 20 });
+
+  const openExternal = walk(document.body, (node) => node.getAttribute && node.getAttribute('data-files-menu-action') === 'open-external');
+  if (!openExternal) throw new Error('Open External menu item not found');
+  const showInExplorer = walk(document.body, (node) => node.getAttribute && node.getAttribute('data-files-menu-action') === 'show-in-explorer');
+  if (!showInExplorer) throw new Error('Show in Explorer menu item not found');
+
+  openExternal.click();
+  const copyButton = walk(document.body, (node) => node.tagName === 'BUTTON' && node.textContent === 'Copy Path');
+  if (!copyButton) throw new Error('external fallback did not show Copy Path action');
+  copyButton.click();
+  await flush();
+  if (clipboard.written[0] !== 'Docs/readme.md') {
+    throw new Error(`expected copied path Docs/readme.md, got ${clipboard.written[0] || '<none>'}`);
+  }
+
+  console.log('files frontend smoke passed');
+})().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});