[optimize] upgrade Test cases

[fix] some detail bugs

Author: TechQuery

.npmignore

@@ -9,4 +9,5 @@ docs/
 .husky/
 .github/
 .vscode/
+.gitpod.yml
 .vercel/

jest.config.ts

@@ -3,10 +3,8 @@ import { Config } from '@jest/types';
 const options: Config.InitialOptions = {
     testEnvironment: 'jsdom',
     preset: 'ts-jest',
-    globals: {
-        'ts-jest': {
-            tsconfig: 'test/tsconfig.json'
-        }
+    transform: {
+        '.+\\.spec\\.tsx?$': ['ts-jest', { tsconfig: 'test/tsconfig.json' }]
     }
 };
 export default options;

package.json

@@ -1,6 +1,6 @@
 {
     "name": "web-cell",
-    "version": "3.0.0-rc.17",
+    "version": "3.0.0-rc.18",
     "description": "Web Components engine based on VDOM, JSX, MobX & TypeScript",
     "keywords": [
         "web",
@@ -51,7 +51,7 @@
         "element-internals-polyfill": "^1.3.11",
         "eslint": "^8.57.0",
         "eslint-config-prettier": "^9.1.0",
-        "husky": "^9.1.2",
+        "husky": "^9.1.3",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
         "jsdom": "^24.1.1",
@@ -70,7 +70,7 @@
     },
     "scripts": {
         "prepare": "husky",
-        "test": "lint-staged",
+        "test": "lint-staged && jest",
         "clean": "rimraf .parcel-cache/ dist/ docs/",
         "preview": "npm run clean  &&  cd preview/  &&  parcel --dist-dir=../docs/preview/ --open",
         "pack-preview": "rimraf .parcel-cache/ docs/preview/  &&  cd preview/  &&  parcel build --public-url=. --dist-dir=../docs/preview/",

pnpm-lock.yaml

@@ -56,19 +56,21 @@ export function component(meta: ComponentMeta) {
         {
             declare props: WebCellProps;
 
-            internals = this.attachInternals();
+            internals = this.tagName.includes('-')
+                ? this.attachInternals()
+                : undefined;
             renderer = new DOMRenderer();
 
             get root(): ParentNode {
-                return this.internals.shadowRoot || this;
+                return (this.internals || this).shadowRoot || this;
             }
             mounted = false;
             declare mountedCallback?: () => any;
 
             constructor() {
                 super();
 
-                if (meta.mode && !this.internals.shadowRoot)
+                if (meta.mode && !this.internals?.shadowRoot)
                     this.attachShadow(meta as ShadowRootInit);
             }
 

source/WebCell.tsx

@@ -1,28 +1,33 @@
 import 'element-internals-polyfill';
 import { sleep } from 'web-utility';
+import { configure } from 'mobx';
 
-import { WebCellProps } from '../source/utility/vDOM';
-import { createCell, render } from '../source/renderer';
+import { WebCellProps } from '../source/WebCell';
+import { DOMRenderer } from 'dom-renderer';
+import { FC } from '../source/decorator';
 import { lazy } from '../source/Async';
 
+configure({ enforceActions: 'never' });
+
 describe('Async Box component', () => {
+    const renderer = new DOMRenderer();
+
     it('should render an Async Component', async () => {
-        const Async = lazy(async () => ({
-            default: ({
-                defaultSlot,
-                ...props
-            }: WebCellProps<HTMLAnchorElement>) => (
-                <a {...props}>{defaultSlot}</a>
-            )
-        }));
-        render(<Async href="test">Test</Async>);
-
-        expect(document.body.innerHTML).toBe('<async-box></async-box>');
+        const Sync: FC<WebCellProps<HTMLAnchorElement>> = ({
+            children,
+            ...props
+        }) => <a {...props}>{children}</a>;
+
+        const Async = lazy(async () => ({ default: Sync }));
+
+        renderer.render(<Async href="test">Test</Async>);
+
+        expect(document.body.innerHTML).toBe('<async-cell></async-cell>');
 
         await sleep();
 
-        // expect(document.body.innerHTML).toBe(
-        //     '<async-box><a href="test">Test</a></async-box>'
-        // );
+        expect(document.body.innerHTML).toBe(
+            '<async-cell><a href="test">Test</a></async-cell>'
+        );
     });
 });

test/Async.spec.tsx

@@ -1,23 +1,27 @@
 import 'element-internals-polyfill';
+
 import { sleep } from 'web-utility';
-import { observable } from 'mobx';
+import { configure, observable } from 'mobx';
+
+import { observer, reaction } from '../source/decorator';
+import { component } from '../source/WebCell';
+import { DOMRenderer } from 'dom-renderer';
 
-import { component, observer, reaction } from '../source/decorator';
-import { WebCell } from '../source/WebCell';
-import { createCell, render } from '../source/renderer';
+configure({ enforceActions: 'never' });
 
 class Test {
     @observable
-    count = 0;
+    accessor count = 0;
 }
 
 describe('Observer decorator', () => {
-    const model = new Test();
+    const model = new Test(),
+        renderer = new DOMRenderer();
 
     it('should re-render Function Component', () => {
         const InlineTag = observer(() => <i>{model.count}</i>);
 
-        render(<InlineTag />);
+        renderer.render(<InlineTag />);
 
         expect(document.body.textContent.trim()).toBe('0');
 
@@ -27,22 +31,18 @@ describe('Observer decorator', () => {
     });
 
     it('should re-render Class Component', () => {
-        @component({
-            tagName: 'test-tag'
-        })
+        @component({ tagName: 'test-tag' })
         @observer
-        class TestTag extends WebCell() {
+        class TestTag extends HTMLElement {
             render() {
                 return <i>{model.count}</i>;
             }
         }
-
-        render(<TestTag />);
+        renderer.render(<TestTag />);
 
         expect(document.querySelector('test-tag i').textContent.trim()).toBe(
             '1'
         );
-
         model.count++;
 
         expect(document.querySelector('test-tag i').textContent.trim()).toBe(
@@ -53,31 +53,29 @@ describe('Observer decorator', () => {
     it('should register a Reaction with MobX', async () => {
         const handler = jest.fn();
 
-        @component({
-            tagName: 'reaction-cell'
-        })
+        @component({ tagName: 'reaction-cell' })
         @observer
-        class ReactionCell extends WebCell() {
+        class ReactionCell extends HTMLElement {
             @observable
-            test = '';
+            accessor test = '';
 
-            @reaction((element: ReactionCell) => element.test)
+            @reaction(({ test }) => test)
             handleReaction(value: string) {
                 handler(value);
             }
         }
-        render(<ReactionCell />);
+        renderer.render(<ReactionCell />);
+
+        await sleep();
 
         const tag = document.querySelector<ReactionCell>('reaction-cell');
         tag.test = 'a';
 
         await sleep();
 
-        expect(handler).toBeCalledTimes(1);
-        expect(handler).toBeCalledWith('a');
+        expect(handler).toHaveBeenCalledTimes(1);
+        expect(handler).toHaveBeenCalledWith('a');
 
         document.body.innerHTML = '';
-
-        expect(tag.disposers).toHaveLength(0);
     });
 });