From 6ad2082444e31b7751197fbd9c4adeb59761b6b8 Mon Sep 17 00:00:00 2001 From: Hoikan <408255371@qq.com> Date: Mon, 5 Feb 2024 06:59:50 +0000 Subject: [PATCH] !133 test(novdom): switch to vitest * test(novdom): switch to vitest * test(novdom): setup vitest --- packages/inula-novdom/package.json | 7 +- .../{jest.config.js => src/type.ts} | 23 +-- .../tests/dom-manipulation.test.ts | 64 +++++++ packages/inula-novdom/tests/no-vdom.test.ts | 179 ++++++++++-------- packages/inula-novdom/tests/utils.ts | 28 +++ .../jest/jestSetting.js => vitest.config.ts} | 17 +- 6 files changed, 212 insertions(+), 106 deletions(-) rename packages/inula-novdom/{jest.config.js => src/type.ts} (53%) create mode 100644 packages/inula-novdom/tests/dom-manipulation.test.ts create mode 100644 packages/inula-novdom/tests/utils.ts rename packages/inula-novdom/{tests/jest/jestSetting.js => vitest.config.ts} (60%) diff --git a/packages/inula-novdom/package.json b/packages/inula-novdom/package.json index e475a2a5..e8b9a31d 100644 --- a/packages/inula-novdom/package.json +++ b/packages/inula-novdom/package.json @@ -4,9 +4,12 @@ "description": "no vdom runtime", "main": "index.js", "scripts": { - "test": "jest --config=jest.config.js" + "test": "vitest --ui" }, "dependencies": { - "inula-reactive": "workspace:^0.0.1" + "inula-reactive": "workspace:^0.0.1", + "jsdom": "^24.0.0", + "@vitest/ui": "^0.34.5", + "vitest": "^0.34.5" } } diff --git a/packages/inula-novdom/jest.config.js b/packages/inula-novdom/src/type.ts similarity index 53% rename from packages/inula-novdom/jest.config.js rename to packages/inula-novdom/src/type.ts index 08f2f5e0..9894859f 100644 --- a/packages/inula-novdom/jest.config.js +++ b/packages/inula-novdom/src/type.ts @@ -1,5 +1,5 @@ /* - * Copyright (c) 2023 Huawei Technologies Co.,Ltd. + * Copyright (c) 2024 Huawei Technologies Co.,Ltd. * * openInula is licensed under Mulan PSL v2. * You can use this software according to the terms and conditions of the Mulan PSL v2. @@ -13,21 +13,6 @@ * See the Mulan PSL v2 for more details. */ -module.exports = { - coverageDirectory: 'coverage', - resetModules: true, - - rootDir: process.cwd(), - - setupFilesAfterEnv: [require.resolve('./tests/jest/jestSetting.js')], - - testEnvironment: 'jest-environment-jsdom-sixteen', - - testMatch: [ - '/tests/**/*.test.js', - '/tests/**/*.test.ts', - '/tests/**/*.test.tsx', - ], - - timers: 'fake', -}; +// TODO: JSX type +export type FunctionComponent = (props: Props) => unknown; +export type AppDisposer = () => void; diff --git a/packages/inula-novdom/tests/dom-manipulation.test.ts b/packages/inula-novdom/tests/dom-manipulation.test.ts new file mode 100644 index 00000000..9e0142fe --- /dev/null +++ b/packages/inula-novdom/tests/dom-manipulation.test.ts @@ -0,0 +1,64 @@ +import { template, insert, setAttribute, className } from '../src/dom'; +import { describe, it, expect } from 'vitest'; + +describe('DOM manipulation functions', () => { + describe('template function', () => { + it('should create a node from HTML string', () => { + const node = template('
Test
')(); + expect(node.outerHTML).toBe('
Test
'); + }); + + it('should return a clone of the node on subsequent calls', () => { + const createNode = template('
Test
'); + const node1 = createNode(); + const node2 = createNode(); + expect(node1.isEqualNode(node2)).toBe(true); + expect(node1).not.toBe(node2); + }); + }); + + describe('insert function', () => { + it('should insert a text node into a parent node', () => { + const parent = document.createElement('div'); + insert(parent, 'Test'); + expect(parent.textContent).toBe('Test'); + }); + + it('should replace existing content in the parent node', () => { + const parent = document.createElement('div'); + parent.textContent = 'Old content'; + insert(parent, 'New content'); + expect(parent.textContent).toBe('New content'); + }); + }); + + describe('setAttribute function', () => { + it('should set an attribute on a node', () => { + const node = document.createElement('div'); + setAttribute(node, 'test', 'value'); + expect(node.getAttribute('test')).toBe('value'); + }); + + it('should remove an attribute from a node if value is null', () => { + const node = document.createElement('div'); + node.setAttribute('test', 'value'); + setAttribute(node, 'test', null); + expect(node.hasAttribute('test')).toBe(false); + }); + }); + + describe('className function', () => { + it('should set the class of a node', () => { + const node = document.createElement('div'); + className(node, 'test'); + expect(node.className).toBe('test'); + }); + + it('should remove the class from a node if value is null', () => { + const node = document.createElement('div'); + node.className = 'test'; + className(node, null); + expect(node.className).toBe(''); + }); + }); +}); diff --git a/packages/inula-novdom/tests/no-vdom.test.ts b/packages/inula-novdom/tests/no-vdom.test.ts index 54de71ff..bbe6d43e 100644 --- a/packages/inula-novdom/tests/no-vdom.test.ts +++ b/packages/inula-novdom/tests/no-vdom.test.ts @@ -17,65 +17,49 @@ import { computed, reactive, watch } from 'inula-reactive'; import { template as _$template, insert as _$insert, setAttribute as _$setAttribute } from '../src/dom'; import { createComponent as _$createComponent, render } from '../src/core'; import { delegateEvents as _$delegateEvents, addEventListener as _$addEventListener } from '../src/event'; - +import { describe, expect } from 'vitest'; +import { domTest as it } from './utils'; import { Show } from '../src/components/Show'; import { For } from '../src/components/For'; -describe('test no-vdom', () => { - it('简单的使用signal', () => { +describe('insertion', () => { + it('should support placeholder', ({ container }) => { /** * 源码： + * const count = reactive(0); * const CountingComponent = () => { - * const [count, setCount] = useSignal(0); - * * return
Count value is {count()}.
; * }; * * render(() => , container); */ - - let g_count; + const count = reactive(0); // 编译后： const _tmpl$ = /*#__PURE__*/ _$template(`
Count value is .`); const CountingComponent = () => { - const count = reactive(0); - g_count = count; - let View - - watch: if (count > 0) { - View.$viewValue = createView(() => {}) - } - - View = createView((() => { - const _el$ = tmp.cloneNode(true), + return (() => { + const _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$4 = _el$2.nextSibling, _el$3 = _el$4.nextSibling; - _$insert(_el$, count, _el$4); - return _el$; - })()); - - return View + _$insert(_el$, count, _el$4); + return _el$; + })(); }; - function createView(el) { - Object.defineProperty(el, '$viewValue', { - set: value => { - el.replaceWith(value); - } - }) - } render(() => _$createComponent(CountingComponent, {}), container); expect(container.querySelector('#count').innerHTML).toEqual('Count value is 0.'); - g_count.set(c => c + 1); + count.set(c => c + 1); expect(container.querySelector('#count').innerHTML).toEqual('Count value is 1.'); }); +}); - it('return数组，click事件', () => { +describe('test no-vdom', () => { + it('return数组，click事件', ({ container }) => { /** * 源码： * const CountingComponent = () => { @@ -124,7 +108,7 @@ describe('test no-vdom', () => { expect(container.querySelector('#count').innerHTML).toEqual('Count value is 1.'); }); - it('return 自定义组件', () => { + it('return 自定义组件', ({ container }) => { /** * 源码： * const CountValue = (props) => { @@ -187,7 +171,7 @@ describe('test no-vdom', () => { expect(container.querySelector('#count').innerHTML).toEqual('Count value is 1.'); }); - it('使用Show组件', () => { + it('使用Show组件', ({ container }) => { /** * 源码： * const CountValue = (props) => { @@ -266,7 +250,7 @@ describe('test no-vdom', () => { expect(container.querySelector('#count').innerHTML).toEqual('Count value is 1.'); }); - it('使用For组件', () => { + it('使用For组件', ({ container }) => { /** * 源码： * const Todo = (props) => { @@ -314,8 +298,10 @@ describe('test no-vdom', () => { */ // 编译后： - const _tmpl$ = /*#__PURE__*/_$template(`
Count value is .`), - _tmpl$2 = /*#__PURE__*/_$template(`