Skip to content

Commit 2b7572e

Browse files
paralinparalin
committed
chore: add vitest browser tests
Signed-off-by: Christian Stewart <christian@aperture.us>
1 parent 3fcf585 commit 2b7572e

File tree

6 files changed

+1488
-113
lines changed

6 files changed

+1488
-113
lines changed

‎README.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,19 @@ Features:
3838
* component state is preserved when tabs are moved
3939
* typescript type declarations
4040

41+
## Demo
42+
43+
To demo and test this library, clone this repo, then:
44+
45+
```
46+
npm i -g yarn
47+
yarn
48+
yarn test:browser
49+
```
50+
51+
Your browser will open to show + all the tests with vitest Browser Mode.
52+
53+
4154
## Installation
4255

4356
FlexLayout is in the npm repository. install using:

‎package.json

Lines changed: 110 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -1,105 +1,113 @@
11
{
2-
"name": "@aptre/flex-layout",
3-
"author": "Caplin Systems Ltd",
4-
"description": "A multi-tab docking layout manager",
5-
"version": "0.3.5",
6-
"license": "ISC",
7-
"repository": {
8-
"type": "git",
9-
"url": "git+https://github.com/aperturerobotics/flex-layout.git"
2+
"name": "@aptre/flex-layout",
3+
"author": "Caplin Systems Ltd",
4+
"description": "A multi-tab docking layout manager",
5+
"version": "0.3.5",
6+
"license": "ISC",
7+
"repository": {
8+
"type": "git",
9+
"url": "git+https://github.com/aperturerobotics/flex-layout.git"
10+
},
11+
"keywords": [
12+
"react",
13+
"layout",
14+
"dock",
15+
"popout",
16+
"tabs",
17+
"tabset",
18+
"splitter",
19+
"drag",
20+
"drop",
21+
"reactjs",
22+
"flexlayout",
23+
"flex layout",
24+
"layout manager",
25+
"drag and drop",
26+
"split view",
27+
"docking library",
28+
"docking layout"
29+
],
30+
"type": "module",
31+
"types": "./dist/index.d.ts",
32+
"exports": {
33+
".": {
34+
"types": "./dist/index.d.ts",
35+
"import": "./dist/index.mjs",
36+
"default": "./dist/index.mjs"
1037
},
11-
"keywords": [
12-
"react",
13-
"layout",
14-
"dock",
15-
"popout",
16-
"tabs",
17-
"tabset",
18-
"splitter",
19-
"drag",
20-
"drop",
21-
"reactjs",
22-
"flexlayout",
23-
"flex layout",
24-
"layout manager",
25-
"drag and drop",
26-
"split view",
27-
"docking library",
28-
"docking layout"
29-
],
30-
"type": "module",
31-
"types": "./dist/index.d.ts",
32-
"exports": {
33-
".": {
34-
"types": "./dist/index.d.ts",
35-
"import": "./dist/index.mjs",
36-
"default": "./dist/index.mjs"
37-
},
38-
"./style": "./style/",
39-
"./style/_base.scss": "./style/_base.scss",
40-
"./style/dark.css": "./style/dark.css",
41-
"./style/dark.css.map": "./style/dark.css.map",
42-
"./style/dark.scss": "./style/dark.scss",
43-
"./style/gray.css": "./style/gray.css",
44-
"./style/gray.css.map": "./style/gray.css.map",
45-
"./style/gray.scss": "./style/gray.scss",
46-
"./style/light.css": "./style/light.css",
47-
"./style/light.css.map": "./style/light.css.map",
48-
"./style/light.scss": "./style/light.scss",
49-
"./style/underline.css": "./style/underline.css",
50-
"./style/underline.css.map": "./style/underline.css.map",
51-
"./style/underline.scss": "./style/underline.scss"
52-
},
53-
"files": [
54-
"README.md",
55-
"LICENSE",
56-
"tsconfig.json",
57-
"style/",
58-
"typedoc/",
59-
"dist/"
60-
],
61-
"scripts": {
62-
"build": "npm run build:style && npm run build:doc && npm run build:lib && npm run build:types",
63-
"build:min": "npm run build:style && npm run build:doc && npm run build:lib:min && npm run build:types",
64-
"build:lib": "rimraf ./dist && esbuild --bundle --external:react --external:react-dom --format=esm --target=es2022 --platform=browser --outfile=./dist/index.mjs ./src/index.ts",
65-
"build:lib:min": "npm run build:lib -- --minify",
66-
"build:doc": "typedoc --out typedoc --exclude \"**/examples/**/*.tsx\" --excludeInternal --disableSources --excludePrivate --excludeProtected --readme none ./src",
67-
"build:style": "sass style/underline.scss style/underline.css && sass style/gray.scss style/gray.css && sass style/light.scss style/light.css && sass style/dark.scss style/dark.css",
68-
"build:types": "tsc --emitDeclarationOnly --declaration --outDir dist/",
69-
"typecheck": "tsc --noEmit",
70-
"test": "tsc --project tsconfig.json --noEmit",
71-
"lint": "eslint src/*",
72-
"format": "prettier --write './style/*.scss' './{src,declarations}/**/(*.ts|*.tsx|*.html)' package.json",
73-
"release:version": "npm version patch -m \"release: v%s\" --no-git-tag-version",
74-
"release:commit": "git reset && git add package.json && git commit -s -m \"release: v$npm_package_version\" && git tag v$npm_package_version",
75-
"release:publish": "git push && git push --tags && npm run build && npm publish",
76-
"release": "npm run release:version && npm run release:commit"
77-
},
78-
"peerDependencies": {
79-
"react": "^18.0.0 || ^19.0.0",
80-
"react-dom": "^18.0.0 || ^19.0.0"
81-
},
82-
"dependencies": {},
83-
"devDependencies": {
84-
"@eslint/eslintrc": "^3.2.0",
85-
"@eslint/js": "^9.16.0",
86-
"@types/node": "^22.10.1",
87-
"@types/prismjs": "^1.26.0",
88-
"@types/react": "^19.0.0",
89-
"@types/react-dom": "^19.0.0",
90-
"@typescript-eslint/eslint-plugin": "^8.17.0",
91-
"@typescript-eslint/parser": "^8.17.0",
92-
"esbuild": "^0.24.0",
93-
"eslint": "^9.16.0",
94-
"eslint-plugin-react": "^7.37.2",
95-
"globals": "^15.13.0",
96-
"prettier": "^3.0.0",
97-
"prismjs": "^1.28.0",
98-
"react": "^19.0.0",
99-
"react-dom": "^19.0.0",
100-
"rimraf": "^6.0.1",
101-
"sass": "^1.50.0",
102-
"typedoc": "^0.27.2",
103-
"typescript": "^5.0.0"
104-
}
38+
"./style": "./style/",
39+
"./style/_base.scss": "./style/_base.scss",
40+
"./style/dark.css": "./style/dark.css",
41+
"./style/dark.css.map": "./style/dark.css.map",
42+
"./style/dark.scss": "./style/dark.scss",
43+
"./style/gray.css": "./style/gray.css",
44+
"./style/gray.css.map": "./style/gray.css.map",
45+
"./style/gray.scss": "./style/gray.scss",
46+
"./style/light.css": "./style/light.css",
47+
"./style/light.css.map": "./style/light.css.map",
48+
"./style/light.scss": "./style/light.scss",
49+
"./style/underline.css": "./style/underline.css",
50+
"./style/underline.css.map": "./style/underline.css.map",
51+
"./style/underline.scss": "./style/underline.scss"
52+
},
53+
"files": [
54+
"README.md",
55+
"LICENSE",
56+
"tsconfig.json",
57+
"style/",
58+
"typedoc/",
59+
"dist/"
60+
],
61+
"scripts": {
62+
"build": "npm run build:style && npm run build:doc && npm run build:lib && npm run build:types",
63+
"build:min": "npm run build:style && npm run build:doc && npm run build:lib:min && npm run build:types",
64+
"build:lib": "rimraf ./dist && esbuild --bundle --external:react --external:react-dom --format=esm --target=es2022 --platform=browser --outfile=./dist/index.mjs ./src/index.ts",
65+
"build:lib:min": "npm run build:lib -- --minify",
66+
"build:doc": "typedoc --out typedoc --exclude \"**/examples/**/*.tsx\" --excludeInternal --disableSources --excludePrivate --excludeProtected --readme none ./src",
67+
"build:style": "sass style/underline.scss style/underline.css && sass style/gray.scss style/gray.css && sass style/light.scss style/light.css && sass style/dark.scss style/dark.css",
68+
"build:types": "tsc --emitDeclarationOnly --declaration --outDir dist/",
69+
"typecheck": "tsc --project tsconfig.json --noEmit",
70+
"test": "npm run typecheck",
71+
"test:browser": "vitest --workspace=vitest.workspace.ts",
72+
"lint": "eslint src/*",
73+
"format": "prettier --write './style/*.scss' './{src,declarations}/**/(*.ts|*.tsx|*.html)' package.json",
74+
"release:version": "npm version patch -m \"release: v%s\" --no-git-tag-version",
75+
"release:commit": "git reset && git add package.json && git commit -s -m \"release: v$npm_package_version\" && git tag v$npm_package_version",
76+
"release:publish": "git push && git push --tags && npm run build && npm publish",
77+
"release": "npm run release:version && npm run release:commit"
78+
},
79+
"peerDependencies": {
80+
"react": "^18.0.0 || ^19.0.0",
81+
"react-dom": "^18.0.0 || ^19.0.0"
82+
},
83+
"dependencies": {},
84+
"devDependencies": {
85+
"@eslint/eslintrc": "^3.2.0",
86+
"@eslint/js": "^9.16.0",
87+
"@testing-library/dom": "^10.4.0",
88+
"@testing-library/react": "^16.2.0",
89+
"@types/node": "^22.10.1",
90+
"@types/prismjs": "^1.26.0",
91+
"@types/react": "^19.0.0",
92+
"@types/react-dom": "^19.0.0",
93+
"@typescript-eslint/eslint-plugin": "^8.17.0",
94+
"@typescript-eslint/parser": "^8.17.0",
95+
"@vitejs/plugin-react": "^4.3.4",
96+
"@vitest/browser": "^3.1.1",
97+
"esbuild": "^0.24.0",
98+
"eslint": "^9.16.0",
99+
"eslint-plugin-react": "^7.37.2",
100+
"globals": "^15.13.0",
101+
"jsdom": "^26.0.0",
102+
"prettier": "^3.0.0",
103+
"prismjs": "^1.28.0",
104+
"react": "^19.0.0",
105+
"react-dom": "^19.0.0",
106+
"rimraf": "^6.0.1",
107+
"sass": "^1.50.0",
108+
"typedoc": "^0.27.2",
109+
"typescript": "^5.0.0",
110+
"vitest": "^3.1.1",
111+
"vitest-browser-react": "^0.1.1"
112+
}
105113
}

‎src/Layout.test.tsx

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import React from "react";
2+
import { render, screen } from "@testing-library/react";
3+
import { describe, it, expect } from "vitest";
4+
import "../style/underline.css"; // Import the CSS file for styling in tests
5+
import { Layout } from "./view/Layout.js";
6+
import { Model, TabNode, IJsonModel } from "./index.js";
7+
8+
// Basic factory function for tab content, making content text unique
9+
const factory = (node: TabNode) => {
10+
const component = node.getComponent();
11+
if (component === "text") {
12+
return <div>Content for {node.getName()}</div>;
13+
}
14+
return null;
15+
};
16+
17+
// Basic JSON model with one tabset and three tabs
18+
const jsonModel: IJsonModel = {
19+
global: {},
20+
layout: {
21+
type: "row",
22+
weight: 100,
23+
children: [
24+
{
25+
type: "tabset",
26+
weight: 100,
27+
children: [
28+
{
29+
type: "tab",
30+
name: "Tab 1",
31+
component: "text",
32+
},
33+
{
34+
type: "tab",
35+
name: "Tab 2",
36+
component: "text",
37+
},
38+
{
39+
type: "tab",
40+
name: "Tab 3",
41+
component: "text",
42+
},
43+
],
44+
},
45+
],
46+
},
47+
};
48+
49+
describe("Layout Component", () => {
50+
it("should render three tabs correctly", () => {
51+
// Create a model instance from the JSON
52+
const model = Model.fromJson(jsonModel);
53+
54+
// Render the Layout component
55+
render(<Layout model={model} factory={factory} />);
56+
57+
// Check if the tab buttons are rendered using role query
58+
expect(screen.getByRole("button", { name: "Tab 1" })).toBeInTheDocument();
59+
expect(screen.getByRole("button", { name: "Tab 2" })).toBeInTheDocument();
60+
expect(screen.getByRole("button", { name: "Tab 3" })).toBeInTheDocument();
61+
62+
// Check if the content of the initially selected tab (Tab 1) is rendered
63+
expect(screen.getByText("Content for Tab 1")).toBeInTheDocument();
64+
65+
// Check that the content of the other tabs is not initially visible (due to render on demand)
66+
expect(screen.queryByText("Content for Tab 2")).toBeNull();
67+
expect(screen.queryByText("Content for Tab 3")).toBeNull();
68+
});
69+
});

‎vitest.config.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { configDefaults, defineConfig } from 'vitest/config'
2+
3+
export default defineConfig({
4+
test: {
5+
environment: 'jsdom',
6+
exclude: [...configDefaults.exclude, 'dist', 'node_modules', 'typedoc'],
7+
},
8+
})

‎vitest.workspace.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { defineWorkspace } from 'vitest/config'
2+
3+
export default defineWorkspace([
4+
{
5+
extends: 'vitest.config.ts',
6+
test: {
7+
browser: {
8+
enabled: true,
9+
provider: 'preview',
10+
instances: [
11+
{ browser: 'chrome' },
12+
],
13+
},
14+
},
15+
},
16+
])

0 commit comments

Comments
 (0)