Skip to content

Commit b5a9e79

Browse files
authored
refactor: change to @vitest/browser and change build process (#4)
1 parent 1718369 commit b5a9e79

20 files changed

+1478
-468
lines changed

.github/workflows/ci.yaml

Lines changed: 37 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ name: Build, Lint and Test
22
on: [push, pull_request]
33
jobs:
44
build:
5-
name: Build, Lint and Test
5+
name: Build
66
runs-on: ubuntu-latest
77
steps:
88
- name: Checkout Repository
@@ -15,12 +15,42 @@ jobs:
1515
cache: pnpm
1616
node-version-file: package.json
1717
- name: Install Dependencies
18-
run: pnpm install
19-
- name: Lint
20-
run: pnpm run lint
18+
run: pnpm install --frozen-lockfile
2119
- name: Build
2220
run: pnpm run build
21+
lint:
22+
name: Lint
23+
runs-on: ubuntu-latest
24+
steps:
25+
- name: Checkout Repository
26+
uses: actions/checkout@v4
27+
- name: Setup pnpm
28+
uses: pnpm/action-setup@v3
29+
- name: Setup Node
30+
uses: actions/setup-node@v4
31+
with:
32+
cache: pnpm
33+
node-version-file: package.json
34+
- name: Install Dependencies
35+
run: pnpm install --frozen-lockfile
36+
- name: Lint
37+
run: pnpm run lint
38+
test:
39+
name: Test
40+
runs-on: ubuntu-latest
41+
steps:
42+
- name: Checkout Repository
43+
uses: actions/checkout@v4
44+
- name: Setup pnpm
45+
uses: pnpm/action-setup@v3
46+
- name: Setup Node
47+
uses: actions/setup-node@v4
48+
with:
49+
cache: pnpm
50+
node-version-file: package.json
51+
- name: Install Dependencies
52+
run: pnpm install --frozen-lockfile
53+
- name: Install Playwright Dependencies
54+
run: pnpm exec playwright install firefox --with-deps
2355
- name: Test
24-
run: pnpm test
25-
#TODO: Add Docker Build Step
26-
#build-docker:
56+
run: xvfb-run pnpm run test

.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,3 +108,6 @@ dist
108108

109109
# TernJS port file
110110
.tern-port
111+
112+
# Testing files
113+
test.html

package.json

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,10 @@
88
"prepare": "husky",
99
"lint": "eslint . --ext .ts && prettier --check .",
1010
"lint:fix": "eslint . --ext .ts --fix && prettier --write .",
11-
"build": "pnpm clean && tsc -b tsconfig.build.json && pnpm -r build",
12-
"build:watch": "pnpm clean && tsc -b tsconfig.build.json -w",
11+
"_build": "pnpm clean && tsc -b tsconfig.build.json && pnpm -r build",
12+
"build": "pnpm clean && pnpm -r build",
13+
"_dev": "pnpm clean && tsc -b tsconfig.build.json -w",
14+
"dev": "pnpm -r dev",
1315
"clean": "tsc -b tsconfig.build.json --clean",
1416
"test": "vitest --run",
1517
"test:ui": "vitest --ui",
@@ -21,17 +23,17 @@
2123
"@recodive/configs": "^1.7.6",
2224
"@recodive/eslint-config": "^1.7.6",
2325
"@rushstack/eslint-patch": "^1.7.2",
24-
"@types/node": "^20.11.19",
25-
"@vitest/coverage-v8": "^1.3.0",
26-
"@vitest/ui": "^1.3.0",
27-
"@vitest/web-worker": "^1.3.0",
26+
"@types/node": "^20.11.20",
27+
"@vitest/browser": "^1.3.1",
28+
"@vitest/coverage-istanbul": "^1.3.1",
29+
"@vitest/ui": "^1.3.1",
2830
"bumpp": "^9.3.0",
29-
"eslint": "^8.56.0",
30-
"happy-dom": "^13.3.8",
31+
"eslint": "^8.57.0",
3132
"husky": "^9.0.11",
33+
"playwright": "^1.41.2",
3234
"prettier": "^3.2.5",
3335
"typescript": "^5.3.3",
34-
"vitest": "^1.3.0"
36+
"vitest": "^1.3.1"
3537
},
3638
"packageManager": "pnpm@8.15.2",
3739
"engines": {

packages/pixilet/package.json

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,26 @@
33
"version": "1.0.0",
44
"description": "A Leaflet layer that uses PixiJS to render WebGL content",
55
"type": "module",
6-
"main": "lib/esnext/index.js",
6+
"main": "./lib/index.cjs",
7+
"unpkg": "./lib/pixilet.umd.cjs",
8+
"module": "./lib/index.js",
9+
"types": "./lib/index.d.ts",
10+
"exports": {
11+
".": {
12+
"import": "./lib/index.js",
13+
"require": "./lib/index.cjs",
14+
"types": "./lib/index.d.ts"
15+
},
16+
"./secondary": {
17+
"import": "./lib/register.js",
18+
"require": "./lib/register.cjs",
19+
"types": "./lib/register.d.ts"
20+
}
21+
},
722
"scripts": {
8-
"build": "vite build",
9-
"dev": "vite"
23+
"build": "pnpm run clean && vite build --config vite.config.ts && vite build --config vite.config.umd.ts",
24+
"dev": "pnpm run clean && concurrently -n es/cjs,umd -c blue,green \"vite build --config vite.config.ts --watch\" \"vite build --config vite.config.umd.ts --watch\"",
25+
"clean": "rimraf lib"
1026
},
1127
"files": [
1228
"lib"
@@ -21,9 +37,13 @@
2137
],
2238
"devDependencies": {
2339
"@types/leaflet": "^1.9.8",
40+
"concurrently": "^8.2.2",
2441
"leaflet": "^1.9.4",
2542
"pixi.js": "^7.4.0",
26-
"vite": "^5.1.1"
43+
"rimraf": "^5.0.5",
44+
"vite": "^5.1.4",
45+
"vite-plugin-checker": "^0.6.4",
46+
"vite-plugin-dts": "^3.7.3"
2747
},
2848
"peerDependencies": {
2949
"leaflet": "^1.9.0",

packages/pixilet/src/functions/setOptions.ts

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,19 @@ export function setOptions(this: IPixiLetLayer, L: typeof import("leaflet"), PIX
77
options.doubleBuffering ??= false;
88
options.padding ??= 0.1;
99
options.projectionZoom ??= projectionZoom;
10-
/* c8 ignore next */ // ? Covered
10+
/* istanbul ignore next -- @preserve */ // ? Covered
1111
options.shouldRedrawOnMove ??= () => false;
12+
/* istanbul ignore next -- @preserve */ // ? Can't test L.Browser.retina
1213
options.renderer ??= {
1314
antialias: true,
1415
backgroundAlpha: 0,
1516
clearBeforeRender: true,
16-
/* c8 ignore next */ // ? Can't test L.Browser.retina
1717
resolution: L.Browser.retina ? 2 : 1,
1818
};
1919
options.renderer.antialias ??= true;
2020
options.renderer.backgroundAlpha ??= 0;
2121
options.renderer.clearBeforeRender ??= true;
22-
/* c8 ignore next */ // ? Can't test L.Browser.retina
22+
/* istanbul ignore next -- @preserve */ // ? Can't test L.Browser.retina
2323
options.renderer.resolution ??= L.Browser.retina ? 2 : 1;
2424

2525
this.options = {
@@ -33,6 +33,7 @@ function getAllProperties<T = Record<string, unknown>>(startObject: T): T {
3333
object = startObject;
3434
for (; !!object && typeof object === "object"; object = Object.getPrototypeOf(object) as T) {
3535
const op = Object.getOwnPropertyNames(object);
36+
/* istanbul ignore next -- @preserve */ // ? Covered
3637
for (const property of op) if (!names.includes(property)) names.push(property);
3738
}
3839
const defaultProperties = Object.getOwnPropertyNames(Object.getPrototypeOf({}));

packages/pixilet/src/functions/setPosition.test.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ describe("setPosition", () => {
2323

2424
setPosition.call(layer as unknown as IPixiLetLayer, L, layer._map.getCenter(), layer._map.getZoom());
2525

26-
expect((layer._container as { _leaflet_pos: Record<string, unknown> } & HTMLDivElement)._leaflet_pos).toMatchObject({ x: -0.127_999_999_999_985_9, y: 0.258_551_462_728_803_47 });
27-
expect(layer._container.getAttribute("style")).toEqual("left: -0.1279999999999859px; top: 0.25855146272880347px;");
26+
expect(layer._container.style.transform).toBe("translate3d(-0.128px, 0.258551px, 0px) scale(1)");
2827
});
2928
});

packages/pixilet/src/functions/setPosition.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export function setPosition(this: IPixiLetLayer, L: typeof import("leaflet"), ce
88
currentCenterPoint = this._map.project(this._map.getCenter(), zoom),
99
topLeftOffset = padding.multiplyBy(-scale).add(currentCenterPoint).subtract(this._map._getNewPixelOrigin(center, zoom));
1010

11-
/* c8 ignore next */
11+
/* istanbul ignore else -- @preserve */
1212
if (L.Browser.any3d) L.DomUtil.setTransform(this._container, topLeftOffset, scale);
1313
else L.DomUtil.setPosition(this._container, topLeftOffset);
1414
}

packages/pixilet/src/functions/setStyle.test.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,5 +33,11 @@ describe.concurrent("setStyle", () => {
3333
setStyle({} as IRenderer, {
3434
backgroundColor: "red",
3535
});
36+
37+
setStyle({
38+
style: undefined,
39+
} as unknown as IRenderer, {
40+
backgroundColor: "red",
41+
});
3642
});
3743
});

packages/pixilet/src/index.test.ts

Lines changed: 136 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,14 @@ describe("register()", () => {
1010
expect(L.pixiLetLayer).toBeUndefined();
1111
expect(L.PixiLetLayer).toBeUndefined();
1212

13-
// eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-var-requires, unicorn/prefer-module
14-
register(require("leaflet"), require("pixi.js"));
13+
register(L, PIXI);
1514

1615
expect(L.pixiLetLayer).toBeInstanceOf(Function);
1716
expect(L.PixiLetLayer).toBeDefined();
1817
});
1918

2019
describe("pixiLetLayer()", () => {
21-
it.todo("returns a new PixiLetLayer", () => {
20+
it("returns a new PixiLetLayer", () => {
2221
expect(L.pixiLetLayer).toBeInstanceOf(Function);
2322
expect(L.pixiLetLayer(() => { /* test */ })).toBeInstanceOf(L.PixiLetLayer);
2423
const spy = vitest.fn(),
@@ -35,17 +34,145 @@ describe("register()", () => {
3534
expect(map.hasLayer(layer)).toBe(false);
3635
expect(layer.addTo(map)).toBe(layer);
3736
expect(map.hasLayer(layer)).toBe(true);
38-
expect(spy).toHaveBeenCalled();
37+
expect(spy).toHaveBeenCalledWith(layer.utils, expect.objectContaining({ type: "add" }));
38+
39+
layer.destroy();
40+
41+
expect(map.hasLayer(layer)).toBe(false);
3942
});
4043
});
4144

42-
describe.todo("new PixiLetLayer()", () => {
43-
it.todo("creates a new PixiLetLayer", () => {
44-
// TODO
45+
describe("new PixiLetLayer()", () => {
46+
it("creates a new PixiLetLayer", () => {
47+
const spy = vitest.fn(),
48+
container = new PIXI.Container(),
49+
layer = new L.PixiLetLayer(spy, {
50+
container,
51+
});
52+
expect(layer).toBeInstanceOf(L.PixiLetLayer);
53+
expect(spy).not.toHaveBeenCalled();
54+
expect(layer.options.padding).toBe(0.1);
55+
56+
const map = L.map(document.createElement("div")).setView([51.505, -0.09], 13);
57+
expect(map.hasLayer(layer)).toBe(false);
58+
expect(layer.addTo(map)).toBe(layer);
59+
expect(map.hasLayer(layer)).toBe(true);
60+
61+
expect(spy).toHaveBeenCalledWith(layer.utils, expect.objectContaining({ type: "add" }));
62+
expect(spy).toHaveBeenCalledTimes(1);
63+
64+
layer.destroy();
65+
66+
expect(map.hasLayer(layer)).toBe(false);
67+
});
68+
69+
it("creates a new PixiLetLayer (with doubleBuffering)", async () => {
70+
const spy = vitest.fn(),
71+
container = new PIXI.Container(),
72+
layer = new L.PixiLetLayer(spy, {
73+
container,
74+
doubleBuffering: true,
75+
});
76+
expect(layer).toBeInstanceOf(L.PixiLetLayer);
77+
expect(spy).not.toHaveBeenCalled();
78+
expect(layer.options.padding).toBe(0.1);
79+
80+
const map = L.map(document.createElement("div")).setView([51.505, -0.09], 13);
81+
expect(map.hasLayer(layer)).toBe(false);
82+
expect(layer.addTo(map)).toBe(layer);
83+
expect(map.hasLayer(layer)).toBe(true);
84+
85+
await new Promise(resolve => setTimeout(resolve, 1000));
86+
expect(spy).toHaveBeenCalledWith(layer.utils, expect.objectContaining({ type: "add" }));
87+
expect(spy).toHaveBeenCalledTimes(1);
88+
89+
layer.destroy();
90+
91+
expect(map.hasLayer(layer)).toBe(false);
4592
});
4693

47-
it.todo("sets the options", () => {
48-
// TODO
94+
it("redraw()", async () => {
95+
const spy = vitest.fn(),
96+
container = new PIXI.Container(),
97+
layer = new L.PixiLetLayer(spy, {
98+
container,
99+
}), map = L.map(document.createElement("div")).setView([51.505, -0.09], 13);
100+
101+
expect(map.hasLayer(layer)).toBe(false);
102+
await layer.redraw();
103+
expect(spy).toHaveBeenCalledTimes(0);
104+
105+
layer.addTo(map);
106+
107+
expect(spy).toHaveBeenCalledWith(layer.utils, expect.objectContaining({ type: "add" }));
108+
expect(spy).toHaveBeenCalledTimes(1);
109+
110+
await layer.redraw({ type: "test" });
111+
112+
expect(spy).toHaveBeenCalledWith(layer.utils, expect.objectContaining({ type: "test" }));
113+
expect(spy).toHaveBeenCalledTimes(2);
114+
115+
layer.destroy();
116+
117+
expect(map.hasLayer(layer)).toBe(false);
118+
});
119+
120+
it("_onZoom", async () => {
121+
const spy = vitest.fn(),
122+
container = new PIXI.Container(),
123+
layer = new L.PixiLetLayer(spy, {
124+
container,
125+
}), map = L.map(document.createElement("div"), {
126+
zoomAnimation: false,
127+
}).setView([51.505, -0.09], 13);
128+
129+
layer.addTo(map);
130+
131+
expect(spy).toHaveBeenCalledWith(layer.utils, expect.objectContaining({ type: "add" }));
132+
expect(spy).toHaveBeenCalledTimes(1);
133+
134+
map.zoomIn();
135+
136+
await new Promise(resolve => setTimeout(resolve, 1000));
137+
expect(spy).toHaveBeenCalledWith(layer.utils, expect.objectContaining({ type: "moveend" }));
138+
expect(spy).toHaveBeenCalledTimes(2);
139+
140+
layer.destroy();
141+
142+
expect(map.hasLayer(layer)).toBe(false);
143+
});
144+
145+
it("_onAnimZoom", async () => {
146+
const spy = vitest.fn(),
147+
container = new PIXI.Container(),
148+
element = document.createElement("div");
149+
element.style.width = "100vw";
150+
element.style.height = "100vh";
151+
const layer = new L.PixiLetLayer(spy, {
152+
container,
153+
shouldRedrawOnMove: () => true,
154+
// eslint-disable-next-line unicorn/no-array-callback-reference, unicorn/no-array-method-this-argument
155+
}), map = L.map(element).setView([51.505, -0.09], 13);
156+
157+
layer.addTo(map);
158+
159+
expect(spy).toHaveBeenCalledWith(layer.utils, expect.objectContaining({ type: "add" }));
160+
expect(spy).toHaveBeenCalledTimes(1);
161+
162+
//* Emit event to simulate a scroll movement
163+
element.dispatchEvent(new WheelEvent("onwheel" in window ? "wheel" : "mousewheel", {
164+
deltaMode: 0,
165+
deltaY: -120,
166+
}));
167+
168+
await new Promise(resolve => setTimeout(resolve, 2000));
169+
expect(spy).toHaveBeenCalledWith(layer.utils, expect.objectContaining({ type: "move" }));
170+
expect(spy).toHaveBeenCalledWith(layer.utils, expect.objectContaining({ type: "moveend" }));
171+
expect(spy).toHaveBeenCalledTimes(3);
172+
173+
layer.destroy();
174+
175+
expect(map.hasLayer(layer)).toBe(false);
49176
});
50177
});
51178
});

0 commit comments

Comments
 (0)