@prosopo/client-bundle-example 2.10.18 → 2.10.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.turbo/turbo-build$colon$cjs.log +9 -7
- package/.turbo/turbo-build$colon$tsc.log +11 -11
- package/.turbo/turbo-build.log +11 -8
- package/CHANGELOG.md +10 -0
- package/dist/_virtual/_rolldown/runtime.js +3 -0
- package/dist/cjs/index.cjs +39 -48
- package/dist/index.js +41 -47
- package/package.json +11 -9
- package/src/plugins/explanation-injector.ts +2 -2
- package/src/plugins/form-filler-injector.ts +2 -2
- package/src/plugins/navigation-injector.ts +2 -2
- package/src/plugins/status-log-injector.ts +2 -2
- package/src/tests/floatLabel.unit.test.ts +195 -0
- package/src/tests/floatLabelReady.unit.test.ts +36 -0
- package/src/tests/plugins.unit.test.ts +256 -0
- package/tsconfig.tsbuildinfo +1 -1
- package/vite.test.config.ts +19 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
> @prosopo/client-bundle-example@2.10.
|
|
2
|
+
> @prosopo/client-bundle-example@2.10.20 build:cjs
|
|
3
3
|
> NODE_ENV=${NODE_ENV:-development}; vite build --config vite.cjs.config.ts --mode $NODE_ENV
|
|
4
4
|
|
|
5
5
|
ViteCommonJSConfig: .
|
|
@@ -23,11 +23,13 @@ ViteCommonJSConfig: .
|
|
|
23
23
|
'@prosopo/util-crypto'
|
|
24
24
|
]
|
|
25
25
|
}
|
|
26
|
-
[
|
|
26
|
+
[33mThe plugin "vite-tsconfig-paths" is detected. Vite now supports tsconfig paths resolution natively via the [1mresolve.tsconfigPaths[22m option. You can remove the plugin and set [1mresolve.tsconfigPaths: true[22m in your Vite config instead.[39m
|
|
27
|
+
[36mvite v8.1.5 [32mbuilding ssr environment for production...[36m[39m
|
|
27
28
|
Bundle build started
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
[32m✓[39m 1 modules transformed.
|
|
29
|
+
[2K
|
|
30
|
+
✓ 2 modules transformed.
|
|
31
31
|
rendering chunks...
|
|
32
|
-
|
|
33
|
-
|
|
32
|
+
computing gzip size...
|
|
33
|
+
dist/cjs/index.cjs 1.41 kB │ gzip: 0.64 kB
|
|
34
|
+
|
|
35
|
+
[32m✓ built in 47ms[39m
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
|
|
2
|
-
> @prosopo/client-bundle-example@2.10.
|
|
2
|
+
> @prosopo/client-bundle-example@2.10.20 build:tsc
|
|
3
3
|
> tsc --build --verbose
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
12:43:57 PM - Projects in this build:
|
|
6
6
|
* ../../dev/config/tsconfig.json
|
|
7
7
|
* ../../packages/util/tsconfig.json
|
|
8
8
|
* ../../packages/logger/tsconfig.json
|
|
@@ -12,21 +12,21 @@
|
|
|
12
12
|
* ../../packages/types/tsconfig.json
|
|
13
13
|
* tsconfig.json
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
12:43:58 PM - Project '../../dev/config/tsconfig.json' is up to date because newest input '../../dev/config/src/index.ts' is older than output '../../dev/config/tsconfig.tsbuildinfo'
|
|
16
16
|
|
|
17
|
-
|
|
17
|
+
12:43:58 PM - Project '../../packages/util/tsconfig.json' is up to date because newest input '../../packages/util/src/url.ts' is older than output '../../packages/util/tsconfig.tsbuildinfo'
|
|
18
18
|
|
|
19
|
-
|
|
19
|
+
12:43:58 PM - Project '../../packages/logger/tsconfig.json' is up to date because newest input '../../packages/logger/src/index.ts' is older than output '../../packages/logger/tsconfig.tsbuildinfo'
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
12:43:58 PM - Project '../../packages/dotenv/tsconfig.json' is up to date because newest input '../../packages/dotenv/src/env.ts' is older than output '../../packages/dotenv/tsconfig.tsbuildinfo'
|
|
22
22
|
|
|
23
|
-
|
|
23
|
+
12:43:58 PM - Project '../../packages/locale/tsconfig.json' is up to date because newest input '../../packages/locale/src/translationKey.ts' is older than output '../../packages/locale/tsconfig.tsbuildinfo'
|
|
24
24
|
|
|
25
|
-
|
|
25
|
+
12:43:58 PM - Project '../../packages/util-crypto/tsconfig.json' is up to date because newest input '../../packages/util-crypto/src/types.ts' is older than output '../../packages/util-crypto/tsconfig.tsbuildinfo'
|
|
26
26
|
|
|
27
|
-
|
|
27
|
+
12:43:58 PM - Project '../../packages/types/tsconfig.json' is up to date because newest input '../../packages/types/src/types.test-d.ts' is older than output '../../packages/types/tsconfig.tsbuildinfo'
|
|
28
28
|
|
|
29
|
-
|
|
29
|
+
12:43:58 PM - Project 'tsconfig.json' is out of date because output file 'tsconfig.tsbuildinfo' does not exist
|
|
30
30
|
|
|
31
|
-
|
|
31
|
+
12:43:58 PM - Building project '/home/runner/work/captcha/captcha/demos/client-bundle-example/tsconfig.json'...
|
|
32
32
|
|
package/.turbo/turbo-build.log
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
|
|
2
|
-
> @prosopo/client-bundle-example@2.10.
|
|
2
|
+
> @prosopo/client-bundle-example@2.10.20 build
|
|
3
3
|
> npm run build:cross-env -- --mode ${NODE_ENV:-development}
|
|
4
4
|
|
|
5
5
|
|
|
6
|
-
> @prosopo/client-bundle-example@2.10.
|
|
6
|
+
> @prosopo/client-bundle-example@2.10.20 build:cross-env
|
|
7
7
|
> vite build --config vite.esm.config.ts --mode production
|
|
8
8
|
|
|
9
9
|
ViteEsmConfig: .
|
|
@@ -27,11 +27,14 @@ ViteEsmConfig: .
|
|
|
27
27
|
'@prosopo/util-crypto'
|
|
28
28
|
]
|
|
29
29
|
}
|
|
30
|
-
[
|
|
30
|
+
[33mThe plugin "vite-tsconfig-paths" is detected. Vite now supports tsconfig paths resolution natively via the [1mresolve.tsconfigPaths[22m option. You can remove the plugin and set [1mresolve.tsconfigPaths: true[22m in your Vite config instead.[39m
|
|
31
|
+
[36mvite v8.1.5 [32mbuilding ssr environment for production...[36m[39m
|
|
31
32
|
Bundle build started
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
[32m✓[39m 1 modules transformed.
|
|
33
|
+
[2K
|
|
34
|
+
✓ 2 modules transformed.
|
|
35
35
|
rendering chunks...
|
|
36
|
-
|
|
37
|
-
|
|
36
|
+
computing gzip size...
|
|
37
|
+
dist/_virtual/_rolldown/runtime.js 0.04 kB │ gzip: 0.06 kB
|
|
38
|
+
dist/index.js 1.47 kB │ gzip: 0.68 kB
|
|
39
|
+
|
|
40
|
+
[32m✓ built in 62ms[39m
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,15 @@
|
|
|
1
1
|
# @prosopo/client-bundle-example
|
|
2
2
|
|
|
3
|
+
## 2.10.20
|
|
4
|
+
### Patch Changes
|
|
5
|
+
|
|
6
|
+
- acb1671: test(client-bundle-example): add vitest setup and cover the demo vite plugins
|
|
7
|
+
|
|
8
|
+
## 2.10.19
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- e14fce6: chore(deps): bump vite to 6.4.3 and mongoose to 8.24.1, and adjust types for the mongoose 8.24 Document/ObjectId changes
|
|
12
|
+
|
|
3
13
|
## 2.10.18
|
|
4
14
|
### Patch Changes
|
|
5
15
|
|
package/dist/cjs/index.cjs
CHANGED
|
@@ -1,50 +1,41 @@
|
|
|
1
|
-
|
|
1
|
+
//#region src/index.ts
|
|
2
2
|
(() => {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
let checks = 0;
|
|
41
|
-
const iv = setInterval(() => {
|
|
42
|
-
checks++;
|
|
43
|
-
for (const w of wrappers) {
|
|
44
|
-
const input = w.querySelector("input,textarea,select");
|
|
45
|
-
if (input) input.dispatchEvent(new Event("input", { bubbles: true }));
|
|
46
|
-
}
|
|
47
|
-
if (checks >= maxChecks) clearInterval(iv);
|
|
48
|
-
}, 250);
|
|
49
|
-
});
|
|
3
|
+
function whenDOMReady(fn) {
|
|
4
|
+
if (document.readyState !== "loading") fn();
|
|
5
|
+
else document.addEventListener("DOMContentLoaded", fn);
|
|
6
|
+
}
|
|
7
|
+
whenDOMReady(() => {
|
|
8
|
+
const wrappers = Array.from(document.querySelectorAll(".mui-textfield--float-label"));
|
|
9
|
+
for (const wrapper of wrappers) {
|
|
10
|
+
const input = wrapper.querySelector("input, textarea, select");
|
|
11
|
+
const label = wrapper.querySelector("label");
|
|
12
|
+
if (!input || !label) return;
|
|
13
|
+
if (!input.getAttribute("aria-label") && label.textContent) input.setAttribute("aria-label", label.textContent.trim());
|
|
14
|
+
const update = () => {
|
|
15
|
+
const hasValue = input.type === "checkbox" || input.type === "radio" ? input.checked : input.value && input.value.trim() !== "";
|
|
16
|
+
if (document.activeElement === input || hasValue) wrapper.classList.add("label-hidden");
|
|
17
|
+
else wrapper.classList.remove("label-hidden");
|
|
18
|
+
};
|
|
19
|
+
for (const evt of [
|
|
20
|
+
"focus",
|
|
21
|
+
"input",
|
|
22
|
+
"blur",
|
|
23
|
+
"change",
|
|
24
|
+
"keyup",
|
|
25
|
+
"paste"
|
|
26
|
+
]) input.addEventListener(evt, update, { passive: true });
|
|
27
|
+
update();
|
|
28
|
+
}
|
|
29
|
+
const maxChecks = 12;
|
|
30
|
+
let checks = 0;
|
|
31
|
+
const iv = setInterval(() => {
|
|
32
|
+
checks++;
|
|
33
|
+
for (const w of wrappers) {
|
|
34
|
+
const input = w.querySelector("input,textarea,select");
|
|
35
|
+
if (input) input.dispatchEvent(new Event("input", { bubbles: true }));
|
|
36
|
+
}
|
|
37
|
+
if (checks >= maxChecks) clearInterval(iv);
|
|
38
|
+
}, 250);
|
|
39
|
+
});
|
|
50
40
|
})();
|
|
41
|
+
//#endregion
|
package/dist/index.js
CHANGED
|
@@ -1,49 +1,43 @@
|
|
|
1
|
+
import "./_virtual/_rolldown/runtime.js";
|
|
2
|
+
//#region src/index.ts
|
|
1
3
|
(() => {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
let checks = 0;
|
|
40
|
-
const iv = setInterval(() => {
|
|
41
|
-
checks++;
|
|
42
|
-
for (const w of wrappers) {
|
|
43
|
-
const input = w.querySelector("input,textarea,select");
|
|
44
|
-
if (input) input.dispatchEvent(new Event("input", { bubbles: true }));
|
|
45
|
-
}
|
|
46
|
-
if (checks >= maxChecks) clearInterval(iv);
|
|
47
|
-
}, 250);
|
|
48
|
-
});
|
|
4
|
+
function whenDOMReady(fn) {
|
|
5
|
+
if (document.readyState !== "loading") fn();
|
|
6
|
+
else document.addEventListener("DOMContentLoaded", fn);
|
|
7
|
+
}
|
|
8
|
+
whenDOMReady(() => {
|
|
9
|
+
const wrappers = Array.from(document.querySelectorAll(".mui-textfield--float-label"));
|
|
10
|
+
for (const wrapper of wrappers) {
|
|
11
|
+
const input = wrapper.querySelector("input, textarea, select");
|
|
12
|
+
const label = wrapper.querySelector("label");
|
|
13
|
+
if (!input || !label) return;
|
|
14
|
+
if (!input.getAttribute("aria-label") && label.textContent) input.setAttribute("aria-label", label.textContent.trim());
|
|
15
|
+
const update = () => {
|
|
16
|
+
const hasValue = input.type === "checkbox" || input.type === "radio" ? input.checked : input.value && input.value.trim() !== "";
|
|
17
|
+
if (document.activeElement === input || hasValue) wrapper.classList.add("label-hidden");
|
|
18
|
+
else wrapper.classList.remove("label-hidden");
|
|
19
|
+
};
|
|
20
|
+
for (const evt of [
|
|
21
|
+
"focus",
|
|
22
|
+
"input",
|
|
23
|
+
"blur",
|
|
24
|
+
"change",
|
|
25
|
+
"keyup",
|
|
26
|
+
"paste"
|
|
27
|
+
]) input.addEventListener(evt, update, { passive: true });
|
|
28
|
+
update();
|
|
29
|
+
}
|
|
30
|
+
const maxChecks = 12;
|
|
31
|
+
let checks = 0;
|
|
32
|
+
const iv = setInterval(() => {
|
|
33
|
+
checks++;
|
|
34
|
+
for (const w of wrappers) {
|
|
35
|
+
const input = w.querySelector("input,textarea,select");
|
|
36
|
+
if (input) input.dispatchEvent(new Event("input", { bubbles: true }));
|
|
37
|
+
}
|
|
38
|
+
if (checks >= maxChecks) clearInterval(iv);
|
|
39
|
+
}, 250);
|
|
40
|
+
});
|
|
49
41
|
})();
|
|
42
|
+
//#endregion
|
|
43
|
+
export {};
|
package/package.json
CHANGED
|
@@ -22,27 +22,29 @@
|
|
|
22
22
|
"build:cjs": "NODE_ENV=${NODE_ENV:-development}; vite build --config vite.cjs.config.ts --mode $NODE_ENV",
|
|
23
23
|
"bundle": "NODE_ENV=${NODE_ENV:-development}; vite build --config vite.config.ts --mode $NODE_ENV",
|
|
24
24
|
"typecheck": "tsc --project tsconfig.types.json",
|
|
25
|
-
"start": "NODE_ENV=${NODE_ENV:-development}; vite serve ./src --port 9232 --config vite.config.ts --mode=$NODE_ENV"
|
|
25
|
+
"start": "NODE_ENV=${NODE_ENV:-development}; vite serve ./src --port 9232 --config vite.config.ts --mode=$NODE_ENV",
|
|
26
|
+
"test": "NODE_ENV=${NODE_ENV:-test}; npx vitest run --config ./vite.test.config.ts"
|
|
26
27
|
},
|
|
27
|
-
"version": "2.10.
|
|
28
|
+
"version": "2.10.20",
|
|
28
29
|
"devDependencies": {
|
|
29
30
|
"@emotion/cache": "11.11.0",
|
|
30
|
-
"@prosopo/config": "3.3.
|
|
31
|
-
"@prosopo/dotenv": "3.0.
|
|
32
|
-
"@prosopo/locale": "3.2.
|
|
33
|
-
"@prosopo/types": "
|
|
31
|
+
"@prosopo/config": "3.3.6",
|
|
32
|
+
"@prosopo/dotenv": "3.0.50",
|
|
33
|
+
"@prosopo/locale": "3.2.8",
|
|
34
|
+
"@prosopo/types": "5.0.0",
|
|
34
35
|
"@types/node": "22.5.5",
|
|
35
|
-
"@vitest/coverage-v8": "
|
|
36
|
+
"@vitest/coverage-v8": "4.1.10",
|
|
36
37
|
"concurrently": "9.0.1",
|
|
37
38
|
"del-cli": "6.0.0",
|
|
39
|
+
"jsdom": "25.0.0",
|
|
38
40
|
"npm-run-all": "4.1.5",
|
|
39
41
|
"react": "18.3.1",
|
|
40
42
|
"react-dom": "18.3.1",
|
|
41
43
|
"tslib": "2.7.0",
|
|
42
44
|
"tsx": "4.20.3",
|
|
43
45
|
"typescript": "5.6.2",
|
|
44
|
-
"vite": "
|
|
45
|
-
"vitest": "
|
|
46
|
+
"vite": "8.1.5",
|
|
47
|
+
"vitest": "4.1.10"
|
|
46
48
|
},
|
|
47
49
|
"repository": {
|
|
48
50
|
"type": "git",
|
|
@@ -28,8 +28,8 @@ export default function explanationInjector(): Plugin {
|
|
|
28
28
|
return {
|
|
29
29
|
name: "explanation-injector",
|
|
30
30
|
transformIndexHtml: {
|
|
31
|
-
|
|
32
|
-
|
|
31
|
+
order: "post", // Run after other HTML transforms
|
|
32
|
+
handler(html: string, ctx: IndexHtmlTransformContext): string {
|
|
33
33
|
// Skip if no HTML body is found
|
|
34
34
|
if (!html.includes("<body") || !html.includes("</body>")) {
|
|
35
35
|
return html;
|
|
@@ -210,8 +210,8 @@ export default function formFillerInjector(): Plugin {
|
|
|
210
210
|
return {
|
|
211
211
|
name: "form-filler-injector",
|
|
212
212
|
transformIndexHtml: {
|
|
213
|
-
|
|
214
|
-
|
|
213
|
+
order: "post", // Run after other HTML transforms
|
|
214
|
+
handler(html: string, ctx: IndexHtmlTransformContext): string {
|
|
215
215
|
// Skip if no HTML body is found
|
|
216
216
|
if (!html.includes("<body") || !html.includes("</body>")) {
|
|
217
217
|
return html;
|
|
@@ -463,8 +463,8 @@ export default function navigationInjector(): Plugin {
|
|
|
463
463
|
return {
|
|
464
464
|
name: "navigation-injector",
|
|
465
465
|
transformIndexHtml: {
|
|
466
|
-
|
|
467
|
-
|
|
466
|
+
order: "pre",
|
|
467
|
+
handler(html: string, ctx: IndexHtmlTransformContext): string {
|
|
468
468
|
// Get the relative path from the root
|
|
469
469
|
const relativePath = ctx.filename
|
|
470
470
|
? normalizePath(path.relative(process.cwd(), ctx.filename))
|
|
@@ -170,8 +170,8 @@ export default function statusLogInjector(): Plugin {
|
|
|
170
170
|
return {
|
|
171
171
|
name: "status-log-injector",
|
|
172
172
|
transformIndexHtml: {
|
|
173
|
-
|
|
174
|
-
|
|
173
|
+
order: "post", // Run after other HTML transforms
|
|
174
|
+
handler(html: string, ctx: IndexHtmlTransformContext): string {
|
|
175
175
|
// Skip if no HTML body is found
|
|
176
176
|
if (!html.includes("<body") || !html.includes("</body>")) {
|
|
177
177
|
return html;
|
|
@@ -0,0 +1,195 @@
|
|
|
1
|
+
// Copyright 2021-2026 Prosopo (UK) Ltd.
|
|
2
|
+
//
|
|
3
|
+
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
// you may not use this file except in compliance with the License.
|
|
5
|
+
// You may obtain a copy of the License at
|
|
6
|
+
//
|
|
7
|
+
// http://www.apache.org/licenses/LICENSE-2.0
|
|
8
|
+
//
|
|
9
|
+
// Unless required by applicable law or agreed to in writing, software
|
|
10
|
+
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
11
|
+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
12
|
+
// See the License for the specific language governing permissions and
|
|
13
|
+
// limitations under the License.
|
|
14
|
+
|
|
15
|
+
// @vitest-environment jsdom
|
|
16
|
+
|
|
17
|
+
// src/index.ts is a self-executing float-label script: it hides the label of
|
|
18
|
+
// any wrapper whose input is focused or non-empty. It runs at import time, so
|
|
19
|
+
// each test seeds the DOM first and then imports it with a fresh module registry.
|
|
20
|
+
|
|
21
|
+
import {
|
|
22
|
+
afterEach,
|
|
23
|
+
beforeAll,
|
|
24
|
+
beforeEach,
|
|
25
|
+
describe,
|
|
26
|
+
expect,
|
|
27
|
+
it,
|
|
28
|
+
vi,
|
|
29
|
+
} from "vitest";
|
|
30
|
+
|
|
31
|
+
const WRAPPER = "mui-textfield--float-label";
|
|
32
|
+
const HIDDEN = "label-hidden";
|
|
33
|
+
|
|
34
|
+
const seed = (markup: string): void => {
|
|
35
|
+
document.body.innerHTML = markup;
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
const wrapper = (inner: string): string =>
|
|
39
|
+
`<div class="${WRAPPER}">${inner}</div>`;
|
|
40
|
+
|
|
41
|
+
// The script is a side-effecting IIFE that runs exactly once per module
|
|
42
|
+
// evaluation, and vitest will not re-evaluate it per test. So it is imported
|
|
43
|
+
// once with document.readyState pinned to "loading": that makes it register a
|
|
44
|
+
// DOMContentLoaded listener instead of running immediately, and each test then
|
|
45
|
+
// dispatches that event to run the script against its own freshly seeded DOM.
|
|
46
|
+
// (floatLabelReady.unit.test.ts covers the already-loaded branch.)
|
|
47
|
+
beforeAll(async () => {
|
|
48
|
+
vi.spyOn(document, "readyState", "get").mockReturnValue("loading");
|
|
49
|
+
await import("../index.js");
|
|
50
|
+
});
|
|
51
|
+
|
|
52
|
+
const load = (): void => {
|
|
53
|
+
document.dispatchEvent(new Event("DOMContentLoaded"));
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
beforeEach(() => {
|
|
57
|
+
vi.useFakeTimers();
|
|
58
|
+
document.body.innerHTML = "";
|
|
59
|
+
});
|
|
60
|
+
|
|
61
|
+
afterEach(() => {
|
|
62
|
+
vi.useRealTimers();
|
|
63
|
+
});
|
|
64
|
+
|
|
65
|
+
describe("float label script", () => {
|
|
66
|
+
it("hides the label of a pre-filled input", async () => {
|
|
67
|
+
seed(wrapper('<label>Email</label><input value="a@test.com" />'));
|
|
68
|
+
|
|
69
|
+
load();
|
|
70
|
+
|
|
71
|
+
expect(document.querySelector(`.${WRAPPER}`)?.classList).toContain(HIDDEN);
|
|
72
|
+
});
|
|
73
|
+
|
|
74
|
+
it("leaves the label visible for an empty input", async () => {
|
|
75
|
+
seed(wrapper("<label>Email</label><input />"));
|
|
76
|
+
|
|
77
|
+
load();
|
|
78
|
+
|
|
79
|
+
expect(document.querySelector(`.${WRAPPER}`)?.classList).not.toContain(
|
|
80
|
+
HIDDEN,
|
|
81
|
+
);
|
|
82
|
+
});
|
|
83
|
+
|
|
84
|
+
it("treats a whitespace-only value as empty", async () => {
|
|
85
|
+
seed(wrapper('<label>Email</label><input value=" " />'));
|
|
86
|
+
|
|
87
|
+
load();
|
|
88
|
+
|
|
89
|
+
expect(document.querySelector(`.${WRAPPER}`)?.classList).not.toContain(
|
|
90
|
+
HIDDEN,
|
|
91
|
+
);
|
|
92
|
+
});
|
|
93
|
+
|
|
94
|
+
it("hides the label once the input receives a value", async () => {
|
|
95
|
+
seed(wrapper("<label>Email</label><input />"));
|
|
96
|
+
load();
|
|
97
|
+
const input = document.querySelector("input");
|
|
98
|
+
if (!input) throw new Error("input missing");
|
|
99
|
+
|
|
100
|
+
input.value = "typed";
|
|
101
|
+
input.dispatchEvent(new Event("input", { bubbles: true }));
|
|
102
|
+
|
|
103
|
+
expect(document.querySelector(`.${WRAPPER}`)?.classList).toContain(HIDDEN);
|
|
104
|
+
});
|
|
105
|
+
|
|
106
|
+
it("restores the label when the value is cleared", async () => {
|
|
107
|
+
seed(wrapper('<label>Email</label><input value="typed" />'));
|
|
108
|
+
load();
|
|
109
|
+
const input = document.querySelector("input");
|
|
110
|
+
if (!input) throw new Error("input missing");
|
|
111
|
+
|
|
112
|
+
input.value = "";
|
|
113
|
+
input.dispatchEvent(new Event("input", { bubbles: true }));
|
|
114
|
+
|
|
115
|
+
expect(document.querySelector(`.${WRAPPER}`)?.classList).not.toContain(
|
|
116
|
+
HIDDEN,
|
|
117
|
+
);
|
|
118
|
+
});
|
|
119
|
+
|
|
120
|
+
it("hides the label for a checked checkbox", async () => {
|
|
121
|
+
seed(wrapper('<label>Agree</label><input type="checkbox" checked />'));
|
|
122
|
+
|
|
123
|
+
load();
|
|
124
|
+
|
|
125
|
+
expect(document.querySelector(`.${WRAPPER}`)?.classList).toContain(HIDDEN);
|
|
126
|
+
});
|
|
127
|
+
|
|
128
|
+
it("leaves the label visible for an unchecked checkbox", async () => {
|
|
129
|
+
seed(wrapper('<label>Agree</label><input type="checkbox" />'));
|
|
130
|
+
|
|
131
|
+
load();
|
|
132
|
+
|
|
133
|
+
expect(document.querySelector(`.${WRAPPER}`)?.classList).not.toContain(
|
|
134
|
+
HIDDEN,
|
|
135
|
+
);
|
|
136
|
+
});
|
|
137
|
+
|
|
138
|
+
it("copies the label text into aria-label for screen readers", async () => {
|
|
139
|
+
seed(wrapper("<label> Email </label><input />"));
|
|
140
|
+
|
|
141
|
+
load();
|
|
142
|
+
|
|
143
|
+
expect(document.querySelector("input")?.getAttribute("aria-label")).toBe(
|
|
144
|
+
"Email",
|
|
145
|
+
);
|
|
146
|
+
});
|
|
147
|
+
|
|
148
|
+
it("does not overwrite an explicit aria-label", async () => {
|
|
149
|
+
seed(wrapper('<label>Email</label><input aria-label="Your email" />'));
|
|
150
|
+
|
|
151
|
+
load();
|
|
152
|
+
|
|
153
|
+
expect(document.querySelector("input")?.getAttribute("aria-label")).toBe(
|
|
154
|
+
"Your email",
|
|
155
|
+
);
|
|
156
|
+
});
|
|
157
|
+
|
|
158
|
+
it("also drives a textarea", async () => {
|
|
159
|
+
seed(wrapper("<label>Notes</label><textarea>filled</textarea>"));
|
|
160
|
+
|
|
161
|
+
load();
|
|
162
|
+
|
|
163
|
+
expect(document.querySelector(`.${WRAPPER}`)?.classList).toContain(HIDDEN);
|
|
164
|
+
});
|
|
165
|
+
|
|
166
|
+
it("does nothing when there are no wrappers", async () => {
|
|
167
|
+
seed("<div><input /></div>");
|
|
168
|
+
|
|
169
|
+
expect(() => load()).not.toThrow();
|
|
170
|
+
});
|
|
171
|
+
|
|
172
|
+
it("tolerates a wrapper with no label", async () => {
|
|
173
|
+
seed(wrapper("<input />"));
|
|
174
|
+
|
|
175
|
+
expect(() => load()).not.toThrow();
|
|
176
|
+
});
|
|
177
|
+
|
|
178
|
+
it("polls for autofill and stops after roughly three seconds", async () => {
|
|
179
|
+
seed(wrapper('<label>Email</label><input value="" />'));
|
|
180
|
+
load();
|
|
181
|
+
const input = document.querySelector("input");
|
|
182
|
+
if (!input) throw new Error("input missing");
|
|
183
|
+
const spy = vi.spyOn(input, "dispatchEvent");
|
|
184
|
+
|
|
185
|
+
// the browser fills the field without emitting an event; the poll picks it up
|
|
186
|
+
input.value = "autofilled@test.com";
|
|
187
|
+
vi.advanceTimersByTime(250);
|
|
188
|
+
|
|
189
|
+
expect(document.querySelector(`.${WRAPPER}`)?.classList).toContain(HIDDEN);
|
|
190
|
+
|
|
191
|
+
// 12 checks at 250ms, then the interval clears itself
|
|
192
|
+
vi.advanceTimersByTime(10_000);
|
|
193
|
+
expect(spy.mock.calls.length).toBeLessThanOrEqual(12);
|
|
194
|
+
});
|
|
195
|
+
});
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
// Copyright 2021-2026 Prosopo (UK) Ltd.
|
|
2
|
+
//
|
|
3
|
+
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
// you may not use this file except in compliance with the License.
|
|
5
|
+
// You may obtain a copy of the License at
|
|
6
|
+
//
|
|
7
|
+
// http://www.apache.org/licenses/LICENSE-2.0
|
|
8
|
+
//
|
|
9
|
+
// Unless required by applicable law or agreed to in writing, software
|
|
10
|
+
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
11
|
+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
12
|
+
// See the License for the specific language governing permissions and
|
|
13
|
+
// limitations under the License.
|
|
14
|
+
|
|
15
|
+
// @vitest-environment jsdom
|
|
16
|
+
|
|
17
|
+
// Covers the branch of src/index.ts taken when the document has already
|
|
18
|
+
// finished loading: the script must run straight away rather than waiting for
|
|
19
|
+
// DOMContentLoaded. Kept in its own file because the IIFE only evaluates once
|
|
20
|
+
// per module instance. The waiting branch is covered by floatLabel.unit.test.ts.
|
|
21
|
+
|
|
22
|
+
import { describe, expect, it } from "vitest";
|
|
23
|
+
|
|
24
|
+
describe("float label script — document already loaded", () => {
|
|
25
|
+
it("applies the label state immediately on import", async () => {
|
|
26
|
+
document.body.innerHTML =
|
|
27
|
+
'<div class="mui-textfield--float-label"><label>Email</label><input value="a@test.com" /></div>';
|
|
28
|
+
expect(document.readyState).not.toBe("loading");
|
|
29
|
+
|
|
30
|
+
await import("../index.js");
|
|
31
|
+
|
|
32
|
+
expect(
|
|
33
|
+
document.querySelector(".mui-textfield--float-label")?.classList,
|
|
34
|
+
).toContain("label-hidden");
|
|
35
|
+
});
|
|
36
|
+
});
|