Use vitest for gui test

docker-compose.yml

@@ -9,7 +9,7 @@ services:
       - SERVER_HOST=server
     volumes:
       - ./tests:/app/tests
-      - ./coverage-gui:/app/coverage-gui
+      - ./coverage-gui:/app/coverage
     working_dir: /app
 
   server:

package.json

@@ -21,7 +21,7 @@
     "check-types": "npm run create-entry && tsc ./lib/**.js ./lib/**/*.js --allowJs --checkJs --target esnext --noEmit --skipLibCheck",
     "test:lib": "npm run create-entry && npx vitest run --globals --coverage --coverage.exclude=onnx/onnx_pb.js --maxWorkers=100% --vmMemoryLimit=100MB --dir tests/lib",
     "test:js": "NODE_OPTIONS=--experimental-vm-modules npx jest --config ./tests/jest-js.config.js",
-    "test:gui": "NODE_OPTIONS=--experimental-vm-modules npx jest --testMatch '**/gui/**/?(*.)+(spec|test).[jt]s?(x)' --coveragePathIgnorePatterns '/node_modules/' 'onnx/onnx_pb.js' --reporters default ./tests/retry-test.js ./tests/slow-test.js ./tests/gui-coverage-reporter.js --testTimeout=20000 --maxWorkers=100% --workerIdleMemoryLimit=100MB",
+    "test:gui": "npx vitest run --dir tests/gui --globals --reporter=default --reporter=./tests/gui-coverage-reporter.js --testTimeout=20000 --maxWorkers=100% --vmMemoryLimit=100MB",
     "types": "npm run create-entry && find lib -name \\*.d.ts -delete && tsc ./lib/**.js ./lib/**/*.js --declaration --allowJs --emitDeclarationOnly",
     "document": "npm run types && typedoc --skipErrorChecking ./lib/**.d.ts",
     "bundle": "node ./bundle_index.js",

tests/gui-coverage-reporter.js

@@ -2,19 +2,18 @@ import fs from 'fs'
 import path from 'path'
 import url from 'url'
 
+import { DefaultReporter } from 'vitest/reporters'
 import libCoverage from 'istanbul-lib-coverage'
 import libReport from 'istanbul-lib-report'
 import reports from 'istanbul-reports'
 import v8toIstanbul from 'v8-to-istanbul'
 
 const filepath = path.dirname(url.fileURLToPath(import.meta.url))
-const covdir = path.join(path.dirname(filepath), 'coverage-gui')
-
-export default class GUICoverageReporter {
-	constructor(globalConfig, options) {
-		this._globalConfig = globalConfig
-		this._options = options
+const covdir = path.join(path.dirname(filepath), 'coverage')
 
+export default class GUICoverageReporter extends DefaultReporter {
+	constructor() {
+		super()
 		if (!fs.existsSync(covdir)) {
 			fs.mkdirSync(covdir)
 		}
@@ -24,7 +23,7 @@ export default class GUICoverageReporter {
 		fs.rmSync(path.join(covdir, 'tests'), { recursive: true, force: true })
 	}
 
-	async onRunComplete() {
+	async onTestRunEnd() {
 		const targetFiles = await readdirRecursively(path.join(covdir, 'tests'))
 		const coverages = []
 		await Promise.all(
@@ -48,7 +47,7 @@ export default class GUICoverageReporter {
 			const data = converter.toIstanbul()
 			map.merge(data)
 		}
-		const context = libReport.createContext({ coverageMap: map, dir: 'coverage-gui' })
+		const context = libReport.createContext({ coverageMap: map, dir: 'coverage' })
 		reports.create('lcov').execute(context)
 	}
 }

tests/gui/view/chameleon.test.js

@@ -1,6 +1,3 @@
-import { jest } from '@jest/globals'
-jest.retryTimes(10)
-
 import { getPage } from '../helper/browser'
 
 describe('clustering', () => {
@@ -28,29 +25,34 @@ describe('clustering', () => {
 		await expect((await k.getProperty('value')).jsonValue()).resolves.toBe('10')
 	})
 
-	test('learn', async () => {
-		const clusters = await page.waitForSelector('#data_menu input[name=n]')
-		await clusters.evaluate(el => (el.value = 1))
-		const resetDataButton = await page.waitForSelector('#data_menu input[value=Reset]')
-		await resetDataButton.evaluate(el => el.click())
-		const taskSelectBox = await page.waitForSelector('#ml_selector dl:first-child dd:nth-child(5) select')
-		await taskSelectBox.selectOption('CT')
-		const modelSelectBox = await page.waitForSelector('#ml_selector .model_selection #mlDisp')
-		await modelSelectBox.selectOption('chameleon')
-		const methodMenu = await page.waitForSelector('#ml_selector #method_menu')
-		const buttons = await methodMenu.waitForSelector('.buttons')
-
-		const fitButton = await buttons.waitForSelector('input[value=Fit]')
-		await fitButton.evaluate(el => el.click())
-
-		const svg = await page.waitForSelector('#plot-area svg')
-		await svg.waitForSelector('.datas circle')
-		const circles = await svg.$$('.datas circle')
-		const colors = new Set()
-		for (const circle of circles) {
-			const fill = await circle.evaluate(el => el.getAttribute('fill'))
-			colors.add(fill)
-		}
-		expect(colors.size).toBe(10)
-	}, 60000)
+	test(
+		'learn',
+		{ retry: 10 },
+		async () => {
+			const clusters = await page.waitForSelector('#data_menu input[name=n]')
+			await clusters.evaluate(el => (el.value = 1))
+			const resetDataButton = await page.waitForSelector('#data_menu input[value=Reset]')
+			await resetDataButton.evaluate(el => el.click())
+			const taskSelectBox = await page.waitForSelector('#ml_selector dl:first-child dd:nth-child(5) select')
+			await taskSelectBox.selectOption('CT')
+			const modelSelectBox = await page.waitForSelector('#ml_selector .model_selection #mlDisp')
+			await modelSelectBox.selectOption('chameleon')
+			const methodMenu = await page.waitForSelector('#ml_selector #method_menu')
+			const buttons = await methodMenu.waitForSelector('.buttons')
+
+			const fitButton = await buttons.waitForSelector('input[value=Fit]')
+			await fitButton.evaluate(el => el.click())
+
+			const svg = await page.waitForSelector('#plot-area svg')
+			await svg.waitForSelector('.datas circle')
+			const circles = await svg.$$('.datas circle')
+			const colors = new Set()
+			for (const circle of circles) {
+				const fill = await circle.evaluate(el => el.getAttribute('fill'))
+				colors.add(fill)
+			}
+			expect(colors.size).toBe(10)
+		},
+		60000
+	)
 })

tests/gui/view/histogram.test.js

@@ -1,6 +1,3 @@
-import { jest } from '@jest/globals'
-jest.retryTimes(3)
-
 import { getPage } from '../helper/browser'
 
 describe('density estimation', () => {
@@ -28,7 +25,7 @@ describe('density estimation', () => {
 		await expect(bins.inputValue()).resolves.toBe('10')
 	})
 
-	test('learn', async () => {
+	test('learn', { retry: 3 }, async () => {
 		const methodMenu = page.locator('#ml_selector #method_menu')
 		const buttons = methodMenu.locator('.buttons')
 

tests/gui/view/lsif.test.js

@@ -1,6 +1,3 @@
-import { jest } from '@jest/globals'
-jest.retryTimes(3)
-
 import { getPage } from '../helper/browser'
 
 describe('change point detection', () => {
@@ -28,24 +25,29 @@ describe('change point detection', () => {
 		await expect((await threshold.getProperty('value')).jsonValue()).resolves.toBe('0.01')
 	})
 
-	test('learn', async () => {
-		const dataSelectBox = await page.waitForSelector('#ml_selector dl:first-child dd:nth-child(2) select')
-		await dataSelectBox.selectOption('functional')
-		const presetSelectBox = await page.waitForSelector('#ml_selector #data_menu select[name=preset]')
-		await presetSelectBox.selectOption('tanh')
-
-		const taskSelectBox = await page.waitForSelector('#ml_selector dl:first-child dd:nth-child(5) select')
-		await taskSelectBox.selectOption('CP')
-		const modelSelectBox = await page.waitForSelector('#ml_selector .model_selection #mlDisp')
-		await modelSelectBox.selectOption('lsif')
-		const methodMenu = await page.waitForSelector('#ml_selector #method_menu')
-		const buttons = await methodMenu.waitForSelector('.buttons')
-
-		const calcButton = await buttons.waitForSelector('input[value=Calculate]')
-		await calcButton.evaluate(el => el.click())
-
-		const svg = await page.waitForSelector('#plot-area svg')
-		await svg.waitForSelector('.tile-render line', { state: 'attached' })
-		expect((await svg.$$('.tile-render line')).length).toBeGreaterThan(0)
-	}, 60000)
+	test(
+		'learn',
+		{ retry: 3 },
+		async () => {
+			const dataSelectBox = await page.waitForSelector('#ml_selector dl:first-child dd:nth-child(2) select')
+			await dataSelectBox.selectOption('functional')
+			const presetSelectBox = await page.waitForSelector('#ml_selector #data_menu select[name=preset]')
+			await presetSelectBox.selectOption('tanh')
+
+			const taskSelectBox = await page.waitForSelector('#ml_selector dl:first-child dd:nth-child(5) select')
+			await taskSelectBox.selectOption('CP')
+			const modelSelectBox = await page.waitForSelector('#ml_selector .model_selection #mlDisp')
+			await modelSelectBox.selectOption('lsif')
+			const methodMenu = await page.waitForSelector('#ml_selector #method_menu')
+			const buttons = await methodMenu.waitForSelector('.buttons')
+
+			const calcButton = await buttons.waitForSelector('input[value=Calculate]')
+			await calcButton.evaluate(el => el.click())
+
+			const svg = await page.waitForSelector('#plot-area svg')
+			await svg.waitForSelector('.tile-render line', { state: 'attached' })
+			expect((await svg.$$('.tile-render line')).length).toBeGreaterThan(0)
+		},
+		60000
+	)
 })

tests/gui/view/madaline.test.js

@@ -1,6 +1,3 @@
-import { jest } from '@jest/globals'
-jest.retryTimes(3)
-
 import { getPage } from '../helper/browser'
 
 describe('classification', () => {
@@ -37,7 +34,7 @@ describe('classification', () => {
 		await expect(epoch.textContent()).resolves.toBe('0')
 	})
 
-	test('learn', async () => {
+	test('learn', { retry: 3 }, async () => {
 		const methodMenu = await page.waitForSelector('#ml_selector #method_menu')
 		const buttons = await methodMenu.waitForSelector('.buttons')
 

tests/gui/view/word_to_vec.test.js

@@ -1,6 +1,3 @@
-import { jest } from '@jest/globals'
-jest.retryTimes(3)
-
 import { getPage } from '../helper/browser'
 
 describe('word embedding', () => {
@@ -38,7 +35,7 @@ describe('word embedding', () => {
 		await expect(batch.inputValue()).resolves.toBe('10')
 	})
 
-	test('learn', async () => {
+	test('learn', { retry: 3 }, async () => {
 		const methodMenu = page.locator('#ml_selector #method_menu')
 		const buttons = methodMenu.locator('.buttons')