test(react/runtime): add tests for main thread element

packages/react/worklet-runtime/__test__/api/element.test.js

@@ -0,0 +1,145 @@
+// Copyright 2024 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { Element } from '../../src/api/element';
+import { initWorklet } from '../../src/workletRuntime';
+
+beforeEach(() => {
+  globalThis.SystemInfo = {
+    lynxSdkVersion: '2.16',
+  };
+  initWorklet();
+  vi.useFakeTimers();
+
+  globalThis.__SetAttribute = vi.fn();
+  globalThis.__AddInlineStyle = vi.fn();
+  globalThis.__GetAttributeByName = vi.fn();
+  globalThis.__GetAttributeNames = vi.fn();
+  globalThis.__QuerySelector = vi.fn();
+  globalThis.__QuerySelectorAll = vi.fn();
+  globalThis.__InvokeUIMethod = vi.fn();
+  globalThis.__FlushElementTree = vi.fn();
+});
+
+afterEach(() => {
+  delete globalThis.lynxWorkletImpl;
+  vi.useRealTimers();
+  vi.clearAllMocks();
+});
+
+describe('Element', () => {
+  it('should set attribute and flush', async () => {
+    const element = new Element('element-instance');
+    element.setAttribute('foo', 'bar');
+    expect(globalThis.__SetAttribute).toHaveBeenCalledWith('element-instance', 'foo', 'bar');
+    expect(globalThis.__FlushElementTree).not.toHaveBeenCalled();
+    await vi.runAllTimersAsync();
+    expect(globalThis.__FlushElementTree).toHaveBeenCalledTimes(1);
+  });
+
+  it('should set style property and flush', async () => {
+    const element = new Element('element-instance');
+    element.setStyleProperty('color', 'red');
+    expect(globalThis.__AddInlineStyle).toHaveBeenCalledWith('element-instance', 'color', 'red');
+    expect(globalThis.__FlushElementTree).not.toHaveBeenCalled();
+    await vi.runAllTimersAsync();
+    expect(globalThis.__FlushElementTree).toHaveBeenCalledTimes(1);
+  });
+
+  it('should set style properties and flush', async () => {
+    const element = new Element('element-instance');
+    const styles = { color: 'red', fontSize: '16px' };
+    element.setStyleProperties(styles);
+    expect(globalThis.__AddInlineStyle).toHaveBeenCalledWith('element-instance', 'color', 'red');
+    expect(globalThis.__AddInlineStyle).toHaveBeenCalledWith('element-instance', 'fontSize', '16px');
+    expect(globalThis.__FlushElementTree).not.toHaveBeenCalled();
+    await vi.runAllTimersAsync();
+    expect(globalThis.__FlushElementTree).toHaveBeenCalledTimes(1);
+  });
+
+  it('should get attribute', () => {
+    globalThis.__GetAttributeByName.mockReturnValue('bar');
+    const element = new Element('element-instance');
+    const value = element.getAttribute('foo');
+    expect(globalThis.__GetAttributeByName).toHaveBeenCalledWith('element-instance', 'foo');
+    expect(value).toBe('bar');
+  });
+
+  it('should get attribute names', () => {
+    globalThis.__GetAttributeNames.mockReturnValue(['foo', 'class']);
+    const element = new Element('element-instance');
+    const names = element.getAttributeNames();
+    expect(globalThis.__GetAttributeNames).toHaveBeenCalledWith('element-instance');
+    expect(names).toEqual(['foo', 'class']);
+  });
+
+  it('should query selector', () => {
+    globalThis.__QuerySelector.mockReturnValue('child-element');
+    const element = new Element('element-instance');
+    const child = element.querySelector('.child');
+    expect(globalThis.__QuerySelector).toHaveBeenCalledWith('element-instance', '.child', {});
+    expect(child).toBeInstanceOf(Element);
+    expect(child.element).toBe('child-element');
+  });
+
+  it('should return null when query selector finds nothing', () => {
+    globalThis.__QuerySelector.mockReturnValue(null);
+    const element = new Element('element-instance');
+    const child = element.querySelector('.child');
+    expect(globalThis.__QuerySelector).toHaveBeenCalledWith('element-instance', '.child', {});
+    expect(child).toBeNull();
+  });
+
+  it('should query selector all', () => {
+    globalThis.__QuerySelectorAll.mockReturnValue(['child1', 'child2']);
+    const element = new Element('element-instance');
+    const children = element.querySelectorAll('.child');
+    expect(globalThis.__QuerySelectorAll).toHaveBeenCalledWith('element-instance', '.child', {});
+    expect(children).toHaveLength(2);
+    expect(children[0]).toBeInstanceOf(Element);
+    expect(children[1]).toBeInstanceOf(Element);
+    expect(children[0].element).toBe('child1');
+    expect(children[1].element).toBe('child2');
+  });
+
+  it('should invoke method and resolve', async () => {
+    globalThis.__InvokeUIMethod.mockImplementation((_element, _method, _params, callback) => {
+      callback({ code: 0, data: 'success' });
+    });
+    const element = new Element('element-instance');
+    const promise = element.invoke('play', { speed: 2 });
+    expect(globalThis.__FlushElementTree).not.toHaveBeenCalled();
+    expect(globalThis.__InvokeUIMethod).toHaveBeenCalledWith(
+      'element-instance',
+      'play',
+      { speed: 2 },
+      expect.any(Function),
+    );
+    await expect(promise).resolves.toBe('success');
+    expect(globalThis.__FlushElementTree).toHaveBeenCalledTimes(1);
+  });
+
+  it('should invoke method and reject', async () => {
+    const errorResponse = { code: 1, message: 'error' };
+    globalThis.__InvokeUIMethod.mockImplementation((_element, _method, _params, callback) => {
+      callback(errorResponse);
+    });
+    const element = new Element('element-instance');
+    const promise = element.invoke('play');
+    expect(globalThis.__FlushElementTree).not.toHaveBeenCalled();
+    await expect(promise).rejects.toThrow('UI method invoke: ' + JSON.stringify(errorResponse));
+    expect(globalThis.__FlushElementTree).toHaveBeenCalledTimes(1);
+  });
+
+  it('should flush only once for multiple sync operations', async () => {
+    const element = new Element('element-instance');
+    element.setAttribute('a', '1');
+    element.setStyleProperty('color', 'blue');
+    element.setStyleProperties({ margin: '10px' });
+    expect(globalThis.__FlushElementTree).not.toHaveBeenCalled();
+    await vi.runAllTimersAsync();
+    expect(globalThis.__FlushElementTree).toHaveBeenCalledTimes(1);
+  });
+});

packages/react/worklet-runtime/vitest.config.ts

@@ -12,7 +12,8 @@ const config: ViteUserConfig = defineConfig({
         'dist/**',
         'lib/**',
         'rslib.config.ts',
-        'src/api/**',
+        'src/api/lepusQuerySelector.ts',
+        'src/api/lynxApi.ts',
         'src/bindings/**',
         'src/index.ts',
         'src/listeners.ts',