/home/mrjunejune/zenbu: design_system/test/storybook_test.js annotate

annotate design_system/test/storybook_test.js @ 256:30c2196d03d4

[site] Integrate Zenbu themes and components Co-authored-by: Copilot <[email protected]>

author	MrJuneJune <me@mrjunejune.com>
date	Tue, 04 Aug 2026 16:49:01 -0700
parents	2b6e732087ff
children

rev	line source
251 117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	1 const assert = require('node:assert/strict');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	2 const http = require('node:http');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	3 const net = require('node:net');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	4 const path = require('node:path');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	5 const { spawn } = require('node:child_process');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	6
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	7 const RUNFILES = process.env.JS_BINARY__RUNFILES;
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	8 const WORKSPACE = process.env.JS_BINARY__WORKSPACE;
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	9 const runfilesWorkspace = path.join(RUNFILES, WORKSPACE);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	10 const playwrightPath = path.join(
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	11 runfilesWorkspace,
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	12 'hg-web/e2e/node_modules/playwright-core',
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	13 );
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	14 const { chromium } = require(playwrightPath);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	15
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	16 function findFreePort() {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	17 return new Promise((resolve, reject) => {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	18 const server = net.createServer();
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	19 server.once('error', reject);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	20 server.listen(0, '127.0.0.1', () => {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	21 const address = server.address();
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	22 server.close(error => {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	23 if (error) reject(error);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	24 else resolve(String(address.port));
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	25 });
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	26 });
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	27 });
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	28 }
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	29
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	30 async function stopProcess(child) {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	31 if (!child \|\| child.exitCode !== null) return;
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	32 child.kill('SIGTERM');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	33 await new Promise(resolve => {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	34 const timer = setTimeout(() => {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	35 if (child.exitCode === null) child.kill('SIGKILL');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	36 }, 3000);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	37 child.once('exit', () => {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	38 clearTimeout(timer);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	39 resolve();
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	40 });
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	41 });
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	42 }
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	43
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	44 async function waitForServer(server, baseUrl, logs) {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	45 const deadline = Date.now() + 15000;
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	46 while (Date.now() < deadline) {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	47 if (server.exitCode !== null) {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	48 throw new Error(`Server exited with ${server.exitCode}\n${logs.join('')}`);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	49 }
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	50 try {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	51 const response = await fetch(baseUrl);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	52 if (response.ok) return;
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	53 } catch {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	54 // Keep waiting.
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	55 }
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	56 await new Promise(resolve => setTimeout(resolve, 100));
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	57 }
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	58 throw new Error(`Server startup timed out\n${logs.join('')}`);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	59 }
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	60
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	61 function requestRawPath(port, requestPath) {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	62 return new Promise((resolve, reject) => {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	63 const request = http.request({
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	64 host: '127.0.0.1',
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	65 port,
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	66 method: 'GET',
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	67 path: requestPath,
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	68 agent: false,
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	69 }, response => {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	70 response.resume();
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	71 response.on('end', () => resolve(response.statusCode));
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	72 });
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	73 request.on('error', reject);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	74 request.end();
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	75 });
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	76 }
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	77
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	78 (async () => {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	79 assert.ok(RUNFILES);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	80 assert.ok(WORKSPACE);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	81 const serverBinary = path.join(
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	82 runfilesWorkspace,
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	83 'design_system/design_system_server',
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	84 );
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	85 const chromiumPath = path.resolve(process.env.CHROMIUM_PATH);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	86 const port = await findFreePort();
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	87 const baseUrl = `http://127.0.0.1:${port}`;
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	88 const logs = [];
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	89 let server;
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	90 let browser;
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	91
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	92 try {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	93 const invalidServer = spawn(serverBinary, [], {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	94 cwd: runfilesWorkspace,
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	95 env: {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	96 ...process.env,
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	97 DESIGN_SYSTEM_PORT: 'not-a-port',
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	98 },
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	99 stdio: ['ignore', 'pipe', 'pipe'],
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	100 });
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	101 const invalidExit = await new Promise(resolve => {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	102 invalidServer.once('exit', (code, signal) => resolve({ code, signal }));
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	103 });
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	104 assert.equal(invalidExit.code, 1);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	105 assert.equal(invalidExit.signal, null);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	106
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	107 server = spawn(serverBinary, [], {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	108 cwd: runfilesWorkspace,
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	109 env: {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	110 ...process.env,
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	111 DESIGN_SYSTEM_PORT: port,
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	112 },
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	113 stdio: ['ignore', 'pipe', 'pipe'],
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	114 });
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	115 server.stdout.on('data', chunk => logs.push(chunk.toString()));
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	116 server.stderr.on('data', chunk => logs.push(chunk.toString()));
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	117 await waitForServer(server, baseUrl, logs);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	118 assert.equal(await requestRawPath(port, '/../../MODULE.bazel'), 400);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	119
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	120 for (const route of [
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	121 '/',
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	122 '/tokens',
254 2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	123 '/icons',
251 117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	124 '/components',
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	125 '/components/button',
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	126 '/components/card',
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	127 '/components/alert',
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	128 '/components/field',
252 7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	129 '/components/notifications',
251 117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	130 '/components/stack',
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	131 ]) {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	132 const response = await fetch(`${baseUrl}${route}`);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	133 assert.equal(response.status, 200, route);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	134 assert.match(
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	135 response.headers.get('content-type') \|\| '',
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	136 /^text\/html/,
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	137 );
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	138 }
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	139 for (const asset of [
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	140 '/styles/tokens.css',
256 30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	141 '/styles/themes.css',
251 117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	142 '/styles/components.css',
254 2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	143 '/styles/shadcn.css',
251 117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	144 '/components/index.js',
254 2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	145 '/components/icon.js',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	146 '/catalog.js',
251 117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	147 '/storybook.js',
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	148 ]) {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	149 const response = await fetch(`${baseUrl}${asset}`);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	150 assert.equal(response.status, 200, asset);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	151 assert.ok((await response.text()).length > 100, asset);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	152 }
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	153
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	154 browser = await chromium.launch({
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	155 executablePath: chromiumPath,
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	156 headless: true,
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	157 args: ['--no-sandbox'],
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	158 });
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	159 const context = await browser.newContext({ colorScheme: 'light' });
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	160 const page = await context.newPage();
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	161 const errors = [];
254 2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	162 const devtools = await context.newCDPSession(page);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	163 await devtools.send('Runtime.enable');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	164 devtools.on('Runtime.exceptionThrown', event => {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	165 const exception = event.exceptionDetails;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	166 errors.push(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	167 `${exception.text}: ${exception.exception?.description \|\| ''} ` +
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	168 `${exception.url \|\| ''}:${exception.lineNumber + 1}`,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	169 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	170 });
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	171 page.on('pageerror', error => errors.push(error.stack \|\| error.message));
251 117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	172 page.on('console', message => {
254 2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	173 if (message.type() === 'error') {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	174 const location = message.location();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	175 errors.push(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	176 `${message.text()} ${location.url \|\| ''}:${location.lineNumber + 1}`,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	177 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	178 }
251 117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	179 });
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	180 page.on('response', response => {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	181 if (response.status() >= 400) {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	182 errors.push(`${response.status()} ${response.url()}`);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	183 }
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	184 });
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	185
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	186 await page.goto(`${baseUrl}/components/button`, {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	187 waitUntil: 'networkidle',
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	188 });
254 2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	189 try {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	190 await page.waitForFunction(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	191 () => customElements.get('zen-button') &&
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	192 customElements.get('zen-story'),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	193 undefined,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	194 { timeout: 5000 },
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	195 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	196 } catch (error) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	197 throw new Error(`${error.message}\n${errors.join('\n')}`);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	198 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	199 const catalogState = await page.evaluate(async () => {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	200 const links = [
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	201 ...document.querySelectorAll(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	202 '.catalog-nav[aria-label="Components"] a',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	203 ),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	204 ];
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	205 const elements = [...new Set(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	206 links.map(link => link.dataset.zenElement).filter(Boolean),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	207 )];
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	208 const statuses = await Promise.all(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	209 links.map(async link => (await fetch(link.href)).status),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	210 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	211 return {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	212 cards: document.querySelectorAll('.component-grid > a').length,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	213 elements,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	214 links: links.length,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	215 missing: elements.filter(name => !customElements.get(name)),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	216 routes: links.map(link => new URL(link.href).pathname),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	217 statuses,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	218 };
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	219 });
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	220 assert.equal(catalogState.cards, 66);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	221 assert.equal(catalogState.links, 66);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	222 assert.equal(catalogState.elements.length, 65);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	223 assert.deepEqual(catalogState.missing, []);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	224 assert.deepEqual(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	225 [...new Set(catalogState.statuses)],
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	226 [200],
251 117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	227 );
254 2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	228 const brokenCatalogPages = await page.evaluate(routes => {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	229 const failures = [];
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	230 for (const route of ['/', '/tokens', '/icons', '/components', ...routes]) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	231 history.replaceState({}, '', route);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	232 window.dispatchEvent(new PopStateEvent('popstate'));
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	233 const visible = [
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	234 ...document.querySelectorAll('[data-catalog-page]:not([hidden])'),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	235 ];
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	236 const expected = route === '/' \|\| route === '/components'
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	237 ? 'overview'
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	238 : route.slice(route.lastIndexOf('/') + 1);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	239 if (visible.length !== 1 \|\|
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	240 visible[0].dataset.catalogPage !== expected \|\|
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	241 !visible[0].querySelector('h1')?.textContent.trim()) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	242 failures.push(route);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	243 continue;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	244 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	245 if (route.startsWith('/components/')) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	246 const story = visible[0].querySelector('zen-story');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	247 const canvas = story?.querySelector('.story-canvas');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	248 const source = story?.querySelector('pre code');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	249 if (!story \|\| !canvas?.children.length \|\|
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	250 !source?.textContent.trim()) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	251 failures.push(`${route}:empty-story`);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	252 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	253 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	254 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	255 history.replaceState({}, '', '/components/button');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	256 window.dispatchEvent(new PopStateEvent('popstate'));
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	257 return failures;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	258 }, catalogState.routes);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	259 assert.deepEqual(brokenCatalogPages, []);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	260 await page.keyboard.press('/');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	261 assert.equal(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	262 await page.locator('#componentSearch').evaluate(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	263 input => document.activeElement === input,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	264 ),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	265 true,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	266 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	267 await page.locator('#componentSearch').fill('date');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	268 assert.equal(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	269 await page.locator(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	270 '.catalog-nav[aria-label="Components"] a:not([hidden])',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	271 ).count(),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	272 2,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	273 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	274 assert.equal(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	275 await page.locator('.component-grid > a:not([hidden])').count(),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	276 2,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	277 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	278 assert.match(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	279 await page.locator('#componentSearchStatus').textContent(),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	280 /^2 components found$/,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	281 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	282 await page.locator('#componentSearch').press('Escape');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	283 assert.equal(await page.locator('#componentSearch').inputValue(), '');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	284 assert.equal(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	285 await page.locator(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	286 '.catalog-nav[aria-label="Components"] a:not([hidden])',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	287 ).count(),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	288 66,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	289 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	290 await page.locator('#componentSearch').fill('stack');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	291 assert.equal(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	292 await page.locator(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	293 '.catalog-nav[aria-label="Components"] a[href="/components/stack"]',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	294 ).getAttribute('hidden'),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	295 null,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	296 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	297 assert.equal(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	298 await page.locator(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	299 '.component-grid > a[href="/components/stack"]',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	300 ).getAttribute('hidden'),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	301 null,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	302 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	303 await page.locator('#componentSearch').press('Escape');
251 117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	304 assert.equal(
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	305 await page.locator('[data-catalog-page="button"]').isVisible(),
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	306 true,
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	307 );
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	308 assert.equal(
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	309 await page.locator('.catalog-sidebar a[href="/components/button"]').getAttribute('aria-current'),
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	310 'page',
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	311 );
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	312 assert.match(
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	313 await page.locator('zen-story pre').first().textContent(),
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	314 /<zen-button>/,
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	315 );
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	316 assert.equal(
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	317 await page.locator('zen-button[loading]').getAttribute('inert'),
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	318 null,
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	319 );
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	320 assert.equal(
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	321 await page.locator('zen-button[loading] button').getAttribute('aria-disabled'),
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	322 'true',
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	323 );
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	324 assert.equal(
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	325 await page.locator('zen-button[loading] button').getAttribute('aria-busy'),
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	326 'true',
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	327 );
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	328 await page.evaluate(() => {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	329 window.__loadingClicks = 0;
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	330 document.querySelector('zen-button[loading] button')
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	331 .addEventListener('click', () => window.__loadingClicks++);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	332 });
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	333 await page.locator('zen-button[loading] button').evaluate(
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	334 button => button.click(),
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	335 );
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	336 assert.equal(await page.evaluate(() => window.__loadingClicks), 0);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	337 await page.locator('zen-button[loading] button').focus();
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	338 assert.equal(
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	339 await page.locator('zen-button[loading] button').evaluate(
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	340 button => document.activeElement === button,
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	341 ),
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	342 true,
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	343 );
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	344 await page.keyboard.press('Tab');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	345 assert.equal(
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	346 await page.locator('zen-button[loading] button').evaluate(
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	347 button => document.activeElement === button,
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	348 ),
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	349 false,
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	350 );
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	351 const nativeDisabledPreserved = await page.evaluate(async () => {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	352 const wrapper = document.createElement('zen-button');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	353 const button = document.createElement('button');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	354 button.disabled = true;
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	355 button.textContent = 'Native disabled';
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	356 wrapper.append(button);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	357 document.body.append(wrapper);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	358 await customElements.whenDefined('zen-button');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	359 wrapper.setAttribute('disabled', '');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	360 wrapper.removeAttribute('disabled');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	361 return button.disabled;
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	362 });
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	363 assert.equal(nativeDisabledPreserved, true);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	364 const replacementButtonState = await page.evaluate(async () => {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	365 const wrapper = document.createElement('zen-button');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	366 wrapper.setAttribute('disabled', '');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	367 const first = document.createElement('button');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	368 first.textContent = 'First';
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	369 wrapper.append(first);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	370 document.body.append(wrapper);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	371 await new Promise(resolve => setTimeout(resolve));
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	372 const second = document.createElement('button');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	373 second.textContent = 'Second';
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	374 wrapper.replaceChildren(second);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	375 await new Promise(resolve => setTimeout(resolve));
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	376 return {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	377 firstDisabled: first.disabled,
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	378 secondAriaDisabled: second.getAttribute('aria-disabled'),
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	379 wrapperInert: wrapper.hasAttribute('inert'),
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	380 };
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	381 });
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	382 assert.equal(replacementButtonState.firstDisabled, false);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	383 assert.equal(replacementButtonState.secondAriaDisabled, 'true');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	384 assert.equal(replacementButtonState.wrapperInert, false);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	385 const modifiedClickAllowed = await page.evaluate(() => {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	386 const link = document.querySelector(
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	387 '.catalog-sidebar a[href="/components/card"]',
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	388 );
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	389 return link.dispatchEvent(new MouseEvent('click', {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	390 bubbles: true,
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	391 cancelable: true,
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	392 button: 0,
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	393 ctrlKey: true,
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	394 }));
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	395 });
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	396 assert.equal(modifiedClickAllowed, true);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	397
254 2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	398 await page.goto(`${baseUrl}/icons`, { waitUntil: 'networkidle' });
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	399 const iconCount = await page.locator('#iconGrid figure').count();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	400 assert.ok(iconCount >= 30);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	401 assert.equal(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	402 await page.locator('#iconGrid figure zen-icon > svg').count(),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	403 iconCount,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	404 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	405 const iconFallback = await page.evaluate(() => {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	406 const icon = document.createElement('zen-icon');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	407 icon.setAttribute('name', 'not-a-real-icon');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	408 icon.setAttribute('label', 'Missing icon fallback');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	409 document.body.append(icon);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	410 return {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	411 fallback: icon.dataset.zenIcon,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	412 hidden: icon.getAttribute('aria-hidden'),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	413 label: icon.getAttribute('aria-label'),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	414 role: icon.getAttribute('role'),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	415 };
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	416 });
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	417 assert.deepEqual(iconFallback, {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	418 fallback: 'alert',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	419 hidden: null,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	420 label: 'Missing icon fallback',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	421 role: 'img',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	422 });
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	423
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	424 await page.goto(`${baseUrl}/tokens`, { waitUntil: 'networkidle' });
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	425 const colorTokenState = await page.evaluate(() => {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	426 const root = document.documentElement;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	427 const value = name => getComputedStyle(root)
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	428 .getPropertyValue(`--zen-color-${name}`)
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	429 .trim();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	430 const families = [
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	431 'neutral',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	432 'red',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	433 'orange',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	434 'amber',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	435 'green',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	436 'teal',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	437 'blue',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	438 'violet',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	439 'rose',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	440 'brown',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	441 ];
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	442 const steps = [
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	443 '50',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	444 '100',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	445 '200',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	446 '300',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	447 '400',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	448 '500',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	449 '600',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	450 '700',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	451 '800',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	452 '900',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	453 '950',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	454 ];
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	455 const rampsComplete = families.every(family =>
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	456 steps.every(step => value(`${family}-${step}`))
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	457 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	458 const data = Array.from(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	459 { length: 10 },
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	460 (_, index) => value(`data-${index + 1}`),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	461 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	462 const materials = [
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	463 'paper',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	464 'washi',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	465 'linen',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	466 'sumi',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	467 'brick',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	468 'persimmon',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	469 'ochre',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	470 'moss',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	471 'patina',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	472 'indigo',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	473 'plum',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	474 'clay',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	475 'wood',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	476 ].map(value);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	477 const lightMuted = value('surface-muted');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	478 root.dataset.zenTheme = 'dark';
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	479 const darkMuted = value('surface-muted');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	480 const darkData = Array.from(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	481 { length: 10 },
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	482 (_, index) => value(`data-${index + 1}`),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	483 );
256 30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	484 const themes = ['paper', 'ink', 'playful'].map(theme => {
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	485 root.dataset.zenTheme = theme;
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	486 const channels = value => value.match(/\d+(?:\.\d+)?/g)
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	487 .slice(0, 3)
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	488 .map(Number);
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	489 const luminance = value => {
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	490 const converted = channels(value).map(channel => {
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	491 const normalized = channel / 255;
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	492 return normalized <= 0.04045
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	493 ? normalized / 12.92
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	494 : ((normalized + 0.055) / 1.055) ** 2.4;
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	495 });
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	496 return converted[0] * 0.2126 +
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	497 converted[1] * 0.7152 +
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	498 converted[2] * 0.0722;
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	499 };
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	500 const contrasts = [
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	501 'info',
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	502 'success',
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	503 'warning',
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	504 'danger',
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	505 ].map(tone => {
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	506 const probe = document.createElement('span');
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	507 probe.style.background = `var(--zen-color-${tone})`;
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	508 probe.style.color = `var(--zen-color-on-${tone})`;
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	509 document.body.append(probe);
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	510 const probeStyle = getComputedStyle(probe);
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	511 const foreground = luminance(probeStyle.color);
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	512 const background = luminance(probeStyle.backgroundColor);
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	513 const contrast = (Math.max(foreground, background) + 0.05) /
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	514 (Math.min(foreground, background) + 0.05);
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	515 probe.remove();
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	516 return contrast;
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	517 });
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	518 return {
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	519 canvas: value('canvas'),
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	520 contrast: Math.min(...contrasts),
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	521 font: getComputedStyle(root)
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	522 .getPropertyValue('--zen-font-sans')
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	523 .trim(),
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	524 name: theme,
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	525 radius: getComputedStyle(root)
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	526 .getPropertyValue('--zen-radius-lg')
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	527 .trim(),
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	528 };
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	529 });
254 2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	530 delete root.dataset.zenTheme;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	531 return {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	532 darkData,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	533 darkMuted,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	534 data,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	535 lightMuted,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	536 materials,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	537 rampsComplete,
256 30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	538 themes,
254 2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	539 };
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	540 });
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	541 assert.equal(colorTokenState.rampsComplete, true);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	542 assert.equal(new Set(colorTokenState.materials).size, 13);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	543 assert.equal(new Set(colorTokenState.data).size, 10);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	544 assert.equal(new Set(colorTokenState.darkData).size, 10);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	545 assert.notDeepEqual(colorTokenState.data, colorTokenState.darkData);
256 30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	546 assert.equal(
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	547 new Set(colorTokenState.themes.map(theme => theme.canvas)).size,
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	548 3,
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	549 );
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	550 assert.notEqual(
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	551 colorTokenState.themes.find(theme => theme.name === 'paper').radius,
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	552 colorTokenState.themes.find(theme => theme.name === 'playful').radius,
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	553 );
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	554 assert.ok(
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	555 colorTokenState.themes.every(theme => theme.contrast >= 4.5),
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	556 JSON.stringify(colorTokenState.themes),
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	557 );
254 2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	558 assert.notEqual(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	559 colorTokenState.lightMuted,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	560 colorTokenState.darkMuted,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	561 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	562 assert.equal(await page.locator('.palette-grid > div').count(), 13);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	563 assert.equal(await page.locator('.data-palette > span').count(), 10);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	564
251 117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	565 await page.goto(`${baseUrl}/components/field`, {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	566 waitUntil: 'networkidle',
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	567 });
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	568 const fieldWiring = await page.locator('zen-field').first().evaluate(field => {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	569 const label = field.querySelector('label');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	570 const input = field.querySelector('input');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	571 const help = field.querySelector('small');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	572 input.checkValidity();
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	573 return {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	574 describedBy: input.getAttribute('aria-describedby'),
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	575 helpId: help.id,
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	576 inputId: input.id,
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	577 invalid: field.hasAttribute('data-invalid'),
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	578 labelFor: label.htmlFor,
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	579 };
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	580 });
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	581 assert.ok(fieldWiring.inputId);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	582 assert.equal(fieldWiring.labelFor, fieldWiring.inputId);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	583 assert.equal(fieldWiring.describedBy, fieldWiring.helpId);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	584 assert.equal(fieldWiring.invalid, true);
254 2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	585 await page.locator('zen-field input').first().focus();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	586 assert.equal(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	587 await page.locator('zen-field input').first().evaluate(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	588 input => getComputedStyle(input).outlineStyle,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	589 ),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	590 'none',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	591 );
251 117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	592 const replacementField = await page.locator('zen-field').first().evaluate(
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	593 async field => {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	594 const label = field.querySelector('label');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	595 const oldInput = field.querySelector('input');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	596 const blocker = document.createElement('div');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	597 blocker.id = 'zen-field-3';
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	598 document.body.append(blocker);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	599 const nextInput = document.createElement('input');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	600 nextInput.required = true;
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	601 oldInput.replaceWith(nextInput);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	602 await new Promise(resolve => setTimeout(resolve));
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	603 oldInput.dispatchEvent(new Event('invalid'));
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	604 const help = field.querySelector('small');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	605 nextInput.id = 'replacement-email';
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	606 help.id = 'replacement-help';
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	607 await new Promise(resolve => setTimeout(resolve));
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	608 return {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	609 describedBy: nextInput.getAttribute('aria-describedby'),
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	610 helpId: help.id,
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	611 labelFor: label.htmlFor,
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	612 nextId: nextInput.id,
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	613 blockerId: blocker.id,
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	614 };
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	615 },
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	616 );
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	617 assert.ok(replacementField.nextId);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	618 assert.notEqual(replacementField.nextId, replacementField.blockerId);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	619 assert.equal(replacementField.labelFor, replacementField.nextId);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	620 assert.equal(replacementField.describedBy, replacementField.helpId);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	621
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	622 await page.goto(`${baseUrl}/components/alert`, {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	623 waitUntil: 'networkidle',
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	624 });
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	625 await page.evaluate(() => {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	626 window.__dismissed = 0;
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	627 document.addEventListener('zen-dismiss', () => {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	628 window.__dismissed++;
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	629 });
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	630 });
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	631 const dismissible = page.locator('zen-alert[dismissible]');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	632 assert.equal(await dismissible.getAttribute('role'), 'alert');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	633 await dismissible.locator('[data-zen-dismiss]').click();
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	634 assert.equal(await dismissible.count(), 0);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	635 assert.equal(await page.evaluate(() => window.__dismissed), 1);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	636 const authoredDismissState = await page.evaluate(async () => {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	637 const alert = document.createElement('zen-alert');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	638 alert.setAttribute('dismissible', '');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	639 const message = document.createElement('p');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	640 message.textContent = 'Authored dismiss control';
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	641 const dismiss = document.createElement('button');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	642 dismiss.dataset.zenDismiss = '';
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	643 alert.append(message, dismiss);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	644 document.body.append(alert);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	645 await new Promise(resolve => setTimeout(resolve));
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	646 let events = 0;
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	647 alert.addEventListener('zen-dismiss', () => events++);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	648 alert.removeAttribute('dismissible');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	649 dismiss.click();
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	650 return {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	651 connected: alert.isConnected,
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	652 events,
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	653 };
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	654 });
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	655 assert.equal(authoredDismissState.connected, true);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	656 assert.equal(authoredDismissState.events, 0);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	657
254 2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	658 await page.goto(`${baseUrl}/components/accordion`, {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	659 waitUntil: 'networkidle',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	660 });
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	661 const accordion = page.locator('zen-accordion').first();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	662 const disclosureIcon = accordion.locator(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	663 'summary > zen-icon[data-zen-disclosure-icon]',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	664 ).nth(1);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	665 const collapsedDisclosure = await disclosureIcon.evaluate(icon => {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	666 const style = getComputedStyle(icon);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	667 return {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	668 duration: style.transitionDuration,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	669 transform: style.transform,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	670 };
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	671 });
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	672 assert.notEqual(collapsedDisclosure.duration, '0s');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	673 await accordion.locator('summary').nth(1).click();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	674 await page.waitForTimeout(250);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	675 assert.notEqual(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	676 await disclosureIcon.evaluate(icon => getComputedStyle(icon).transform),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	677 collapsedDisclosure.transform,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	678 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	679 assert.equal(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	680 await accordion.locator('details').first().getAttribute('open'),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	681 null,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	682 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	683 assert.equal(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	684 await accordion.locator('details').nth(1).getAttribute('open'),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	685 '',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	686 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	687 await accordion.locator('summary').nth(1).press('ArrowUp');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	688 assert.equal(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	689 await accordion.locator('summary').first().evaluate(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	690 summary => document.activeElement === summary,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	691 ),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	692 true,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	693 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	694
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	695 await page.goto(`${baseUrl}/components/aspect-ratio`, {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	696 waitUntil: 'networkidle',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	697 });
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	698 const aspectColors = await page.locator('.demo-media').evaluate(media => {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	699 const style = getComputedStyle(media);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	700 const probe = document.createElement('span');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	701 probe.style.background = 'var(--zen-color-surface-muted)';
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	702 document.body.append(probe);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	703 const token = getComputedStyle(probe).backgroundColor;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	704 probe.remove();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	705 return {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	706 background: style.backgroundColor,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	707 image: style.backgroundImage,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	708 token,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	709 };
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	710 });
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	711 assert.equal(aspectColors.image, 'none');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	712 assert.equal(aspectColors.background, aspectColors.token);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	713
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	714 await page.goto(`${baseUrl}/components/tabs`, {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	715 waitUntil: 'networkidle',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	716 });
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	717 await page.evaluate(() => {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	718 window.__tabValue = null;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	719 document.querySelector('zen-tabs').addEventListener(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	720 'zen-change',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	721 event => {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	722 window.__tabValue = event.detail.value;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	723 },
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	724 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	725 });
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	726 await page.locator('zen-tabs [role="tab"]').nth(1).click();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	727 assert.equal(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	728 await page.locator('zen-tabs [role="tab"]').nth(1)
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	729 .getAttribute('aria-selected'),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	730 'true',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	731 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	732 assert.equal(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	733 await page.locator('zen-tabs [role="tabpanel"]').nth(1)
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	734 .getAttribute('hidden'),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	735 null,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	736 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	737 assert.equal(await page.evaluate(() => window.__tabValue), 'history');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	738
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	739 await page.goto(`${baseUrl}/components/dialog`, {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	740 waitUntil: 'networkidle',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	741 });
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	742 await page.locator('zen-dialog [data-zen-trigger]').click();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	743 assert.equal(await page.locator('zen-dialog dialog').getAttribute('open'), '');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	744 await page.locator('zen-dialog [data-zen-close]').click();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	745 assert.equal(await page.locator('zen-dialog dialog').getAttribute('open'), null);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	746 const dynamicOverlays = await page.evaluate(async () => {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	747 const dialogHost = document.createElement('zen-dialog');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	748 const popoverHost = document.createElement('zen-popover');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	749 const tooltipHost = document.createElement('zen-tooltip');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	750 const menuHost = document.createElement('zen-dropdown-menu');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	751 document.body.append(dialogHost, popoverHost, tooltipHost, menuHost);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	752
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	753 const dialogTrigger = document.createElement('button');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	754 dialogTrigger.type = 'button';
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	755 dialogTrigger.dataset.zenTrigger = '';
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	756 const dialog = document.createElement('dialog');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	757 dialogHost.append(dialogTrigger, dialog);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	758
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	759 const popoverTrigger = document.createElement('button');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	760 popoverTrigger.type = 'button';
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	761 popoverTrigger.dataset.zenTrigger = '';
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	762 const popover = document.createElement('div');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	763 popover.dataset.zenContent = '';
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	764 popoverHost.append(popoverTrigger, popover);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	765
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	766 const tooltipTrigger = document.createElement('button');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	767 tooltipTrigger.type = 'button';
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	768 tooltipTrigger.dataset.zenTrigger = '';
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	769 const tooltip = document.createElement('span');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	770 tooltip.dataset.zenContent = '';
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	771 tooltipHost.append(tooltipTrigger, tooltip);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	772
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	773 const menuTrigger = document.createElement('button');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	774 menuTrigger.type = 'button';
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	775 menuTrigger.dataset.zenTrigger = '';
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	776 const menu = document.createElement('div');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	777 menu.setAttribute('role', 'menu');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	778 const item = document.createElement('button');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	779 item.type = 'button';
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	780 item.setAttribute('role', 'menuitem');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	781 menu.append(item);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	782 menuHost.append(menuTrigger, menu);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	783
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	784 await new Promise(resolve => setTimeout(resolve));
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	785 dialogTrigger.click();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	786 const dialogOpen = dialog.open;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	787 dialog.close();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	788 popoverTrigger.click();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	789 menuTrigger.click();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	790 tooltipTrigger.focus();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	791 await new Promise(resolve => setTimeout(resolve, 375));
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	792 return {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	793 dialogControlled: Boolean(dialogTrigger.getAttribute('aria-controls')),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	794 dialogOpen,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	795 menuOpen: !menu.hidden,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	796 popoverExpanded: popoverTrigger.getAttribute('aria-expanded'),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	797 tooltipOpen: !tooltip.hidden,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	798 };
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	799 });
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	800 assert.deepEqual(dynamicOverlays, {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	801 dialogControlled: true,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	802 dialogOpen: true,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	803 menuOpen: true,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	804 popoverExpanded: 'true',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	805 tooltipOpen: true,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	806 });
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	807
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	808 await page.goto(`${baseUrl}/components/dropdown-menu`, {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	809 waitUntil: 'networkidle',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	810 });
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	811 const dropdownTrigger = page.locator(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	812 'zen-dropdown-menu [data-zen-trigger]',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	813 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	814 await dropdownTrigger.click();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	815 assert.equal(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	816 await page.locator('zen-dropdown-menu [role="menu"]')
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	817 .getAttribute('hidden'),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	818 null,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	819 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	820 await page.keyboard.press('Escape');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	821 assert.equal(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	822 await page.locator('zen-dropdown-menu [role="menu"]')
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	823 .getAttribute('hidden'),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	824 '',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	825 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	826 assert.equal(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	827 await dropdownTrigger.evaluate(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	828 trigger => document.activeElement === trigger,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	829 ),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	830 true,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	831 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	832 await dropdownTrigger.click();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	833 await page.locator('zen-dropdown-menu [role="menuitem"]').first().click();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	834 assert.equal(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	835 await dropdownTrigger.evaluate(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	836 trigger => document.activeElement === trigger,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	837 ),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	838 true,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	839 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	840
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	841 await page.goto(`${baseUrl}/components/combobox`, {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	842 waitUntil: 'networkidle',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	843 });
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	844 const comboboxInput = page.locator('zen-combobox input');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	845 await comboboxInput.fill('seo');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	846 assert.equal(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	847 await page.locator('zen-combobox [role="option"]:not([hidden])').count(),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	848 1,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	849 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	850 await comboboxInput.press('ArrowDown');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	851 await comboboxInput.press('Enter');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	852 assert.equal(await comboboxInput.inputValue(), 'seobeo');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	853 assert.equal(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	854 await page.locator('zen-combobox [role="listbox"]')
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	855 .getAttribute('hidden'),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	856 '',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	857 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	858
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	859 await page.goto(`${baseUrl}/components/date-picker`, {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	860 waitUntil: 'networkidle',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	861 });
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	862 const dateInput = page.locator('zen-date-picker input[type="date"]');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	863 assert.equal(await dateInput.getAttribute('aria-hidden'), 'true');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	864 assert.equal(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	865 await dateInput.evaluate(input => getComputedStyle(input).position),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	866 'absolute',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	867 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	868 await page.evaluate(() => {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	869 window.__dateValue = null;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	870 document.querySelector('zen-date-picker').addEventListener(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	871 'zen-change',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	872 event => {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	873 window.__dateValue = event.detail.value;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	874 },
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	875 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	876 });
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	877 const dateTrigger = page.locator(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	878 'zen-date-picker [data-zen-date-trigger]',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	879 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	880 await dateTrigger.click();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	881 assert.equal(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	882 await page.locator('zen-date-picker [data-zen-calendar-panel]')
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	883 .getAttribute('hidden'),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	884 null,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	885 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	886 assert.equal(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	887 await page.locator(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	888 'zen-date-picker [data-zen-calendar-day]',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	889 ).count(),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	890 42,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	891 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	892 const chosenDate = await page.locator(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	893 'zen-date-picker [data-zen-calendar-day]:not([data-outside]):not(:disabled)',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	894 ).nth(14).getAttribute('data-zen-calendar-day');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	895 await page.locator(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	896 `zen-date-picker [data-zen-calendar-day="${chosenDate}"]`,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	897 ).click();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	898 assert.equal(await dateInput.inputValue(), chosenDate);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	899 assert.equal(await page.evaluate(() => window.__dateValue), chosenDate);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	900 assert.equal(await dateTrigger.getAttribute('aria-expanded'), 'false');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	901 const triggerName = await dateTrigger.evaluate(trigger =>
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	902 (trigger.getAttribute('aria-labelledby') \|\| '')
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	903 .split(/\s+/)
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	904 .map(id => document.getElementById(id)?.textContent \|\| '')
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	905 .join(' ')
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	906 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	907 assert.match(triggerName, /Deploy on/);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	908 assert.equal(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	909 await page.locator('zen-date-picker > label').getAttribute('for'),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	910 await dateTrigger.getAttribute('id'),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	911 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	912 const minimumDate = `${chosenDate.slice(0, 8)}10`;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	913 await dateInput.evaluate((input, minimum) => {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	914 input.min = minimum;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	915 }, minimumDate);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	916 await page.waitForTimeout(0);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	917 await dateTrigger.click();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	918 const focusedBoundary = page.locator(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	919 `zen-date-picker [data-zen-calendar-day="${chosenDate}"]`,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	920 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	921 await focusedBoundary.press('PageUp');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	922 assert.equal(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	923 await page.evaluate(() =>
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	924 document.activeElement?.dataset.zenCalendarDay
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	925 ),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	926 minimumDate,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	927 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	928 assert.equal(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	929 await page.locator(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	930 'zen-date-picker [data-zen-calendar-day][tabindex="0"]:not(:disabled)',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	931 ).count(),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	932 1,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	933 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	934 await page.keyboard.press('Escape');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	935 await dateInput.evaluate(input => {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	936 input.disabled = true;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	937 });
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	938 await page.waitForTimeout(0);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	939 assert.equal(await dateTrigger.isDisabled(), true);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	940 await dateInput.evaluate(input => {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	941 input.disabled = false;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	942 input.readOnly = true;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	943 });
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	944 await page.waitForTimeout(0);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	945 assert.equal(await dateTrigger.isDisabled(), true);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	946 await dateInput.evaluate(input => {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	947 input.readOnly = false;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	948 input.required = true;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	949 input.value = '';
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	950 input.dispatchEvent(new Event('input', { bubbles: true }));
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	951 input.reportValidity();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	952 });
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	953 await page.waitForTimeout(0);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	954 assert.equal(await dateTrigger.getAttribute('aria-invalid'), 'true');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	955 assert.equal(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	956 await dateTrigger.evaluate(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	957 trigger => document.activeElement === trigger,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	958 ),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	959 true,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	960 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	961 assert.equal(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	962 await page.locator('zen-date-picker').getAttribute('data-invalid'),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	963 '',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	964 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	965 await dateInput.evaluate((input, value) => {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	966 input.value = value;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	967 input.dispatchEvent(new Event('input', { bubbles: true }));
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	968 }, chosenDate);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	969 assert.equal(await dateTrigger.getAttribute('aria-invalid'), 'false');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	970 const earlyYear = await page.evaluate(async () => {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	971 const calendar = document.createElement('zen-calendar');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	972 const input = document.createElement('input');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	973 input.type = 'date';
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	974 input.value = '0001-01-01';
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	975 input.setAttribute('aria-label', 'Early date');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	976 calendar.append(input);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	977 document.body.append(calendar);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	978 await new Promise(resolve => setTimeout(resolve));
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	979 return {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	980 selected: calendar.querySelector(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	981 '[data-zen-calendar-day][aria-selected="true"]',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	982 )?.dataset.zenCalendarDay,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	983 value: input.value,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	984 };
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	985 });
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	986 assert.deepEqual(earlyYear, {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	987 selected: '0001-01-01',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	988 value: '0001-01-01',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	989 });
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	990 const resetDateState = await page.evaluate(async () => {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	991 const label = document.createElement('span');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	992 label.id = 'reset-date-label';
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	993 label.textContent = 'Reset date';
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	994 const form = document.createElement('form');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	995 const picker = document.createElement('zen-date-picker');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	996 const input = document.createElement('input');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	997 input.type = 'date';
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	998 input.defaultValue = '2026-08-04';
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	999 input.setAttribute('aria-labelledby', label.id);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1000 picker.append(input);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1001 form.append(picker);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1002 document.body.append(label, form);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1003 await new Promise(resolve => setTimeout(resolve));
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1004 input.value = '2026-08-12';
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1005 input.dispatchEvent(new Event('input', { bubbles: true }));
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1006 form.reset();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1007 await new Promise(resolve => setTimeout(resolve));
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1008 const trigger = picker.querySelector('[data-zen-date-trigger]');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1009 return {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1010 labelledBy: trigger.getAttribute('aria-labelledby'),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1011 selected: picker.querySelector(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1012 '[data-zen-calendar-day][aria-selected="true"]',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1013 )?.dataset.zenCalendarDay,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1014 value: input.value,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1015 };
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1016 });
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1017 assert.match(resetDateState.labelledBy, /^reset-date-label /);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1018 assert.deepEqual(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1019 {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1020 selected: resetDateState.selected,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1021 value: resetDateState.value,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1022 },
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1023 {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1024 selected: '2026-08-04',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1025 value: '2026-08-04',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1026 },
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1027 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1028
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1029 await page.goto(`${baseUrl}/components/input-otp`, {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1030 waitUntil: 'networkidle',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1031 });
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1032 await page.evaluate(() => {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1033 window.__otpValue = null;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1034 document.querySelector('zen-input-otp').addEventListener(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1035 'zen-complete',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1036 event => {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1037 window.__otpValue = event.detail.value;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1038 },
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1039 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1040 });
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1041 await page.locator('zen-input-otp input').evaluate(input => {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1042 input.value = '12a3456';
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1043 input.dispatchEvent(new Event('input', { bubbles: true }));
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1044 });
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1045 assert.equal(await page.locator('zen-input-otp input').inputValue(), '123456');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1046 assert.equal(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1047 await page.locator('zen-input-otp [data-zen-otp-slots] > span').count(),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1048 6,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1049 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1050 assert.equal(await page.evaluate(() => window.__otpValue), '123456');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1051
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1052 await page.goto(`${baseUrl}/components/data-table`, {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1053 waitUntil: 'networkidle',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1054 });
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1055 await page.locator('zen-data-table [data-zen-sort="commits"]').click();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1056 assert.equal(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1057 await page.locator('zen-data-table th').nth(1).getAttribute('aria-sort'),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1058 'ascending',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1059 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1060 assert.equal(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1061 await page.locator('zen-data-table tbody tr').first().locator(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1062 '[data-key="commits"]',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1063 ).textContent(),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1064 '12',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1065 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1066
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1067 await page.goto(`${baseUrl}/components/carousel`, {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1068 waitUntil: 'networkidle',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1069 });
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1070 await page.evaluate(() => {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1071 window.__carouselIndex = null;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1072 document.querySelector('zen-carousel').addEventListener(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1073 'zen-change',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1074 event => {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1075 window.__carouselIndex = event.detail.index;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1076 },
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1077 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1078 });
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1079 await page.locator('zen-carousel [data-zen-next]').click();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1080 assert.equal(await page.evaluate(() => window.__carouselIndex), 1);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1081 assert.equal(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1082 await page.locator('zen-carousel [data-zen-prev]').isDisabled(),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1083 false,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1084 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1085
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1086 await page.goto(`${baseUrl}/components/resizable`, {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1087 waitUntil: 'networkidle',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1088 });
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1089 const resizeHandle = page.locator('zen-resizable [data-zen-handle]');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1090 const initialPercent = Number(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1091 await resizeHandle.getAttribute('aria-valuenow'),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1092 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1093 await resizeHandle.focus();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1094 await resizeHandle.press('ArrowRight');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1095 assert.ok(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1096 Number(await resizeHandle.getAttribute('aria-valuenow')) > initialPercent,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1097 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1098
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1099 await page.goto(`${baseUrl}/components/switch`, {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1100 waitUntil: 'networkidle',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1101 });
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1102 const switchInput = page.locator('zen-switch input');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1103 assert.equal(await switchInput.getAttribute('role'), 'switch');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1104 assert.equal(await switchInput.getAttribute('aria-checked'), 'true');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1105 await switchInput.uncheck();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1106 assert.equal(await switchInput.getAttribute('aria-checked'), 'false');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1107
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1108 await page.goto(`${baseUrl}/components/checkbox`, {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1109 waitUntil: 'networkidle',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1110 });
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1111 assert.equal(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1112 await page.locator('zen-checkbox input').evaluate(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1113 input => getComputedStyle(input).appearance,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1114 ),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1115 'none',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1116 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1117 await page.goto(`${baseUrl}/components/native-select`, {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1118 waitUntil: 'networkidle',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1119 });
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1120 assert.equal(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1121 await page.locator('zen-native-select select').evaluate(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1122 select => getComputedStyle(select).appearance,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1123 ),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1124 'none',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1125 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1126 assert.equal(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1127 await page.locator(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1128 'zen-native-select > zen-icon[data-zen-select-icon]',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1129 ).count(),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1130 1,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1131 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1132 await page.goto(`${baseUrl}/components/slider`, {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1133 waitUntil: 'networkidle',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1134 });
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1135 assert.equal(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1136 await page.locator('zen-slider input').evaluate(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1137 input => getComputedStyle(input).appearance,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1138 ),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1139 'none',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1140 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1141
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1142 await page.goto(`${baseUrl}/components/toggle-group`, {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1143 waitUntil: 'networkidle',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1144 });
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1145 await page.locator('zen-toggle-group button[value="right"]').click();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1146 assert.equal(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1147 await page.locator('zen-toggle-group button[value="right"]')
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1148 .getAttribute('aria-pressed'),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1149 'true',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1150 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1151 assert.equal(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1152 await page.locator('zen-toggle-group').getAttribute('value'),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1153 'right',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1154 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1155
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1156 await page.goto(`${baseUrl}/components/sidebar`, {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1157 waitUntil: 'networkidle',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1158 });
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1159 const sidebarTrigger = page.locator(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1160 'zen-sidebar [data-zen-sidebar-trigger]',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1161 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1162 const sidebarPanel = page.locator(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1163 'zen-sidebar [data-zen-sidebar-panel]',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1164 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1165 assert.equal(await sidebarTrigger.getAttribute('aria-expanded'), 'true');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1166 assert.equal(await sidebarPanel.getAttribute('hidden'), null);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1167 await sidebarTrigger.click();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1168 assert.equal(await sidebarTrigger.getAttribute('aria-expanded'), 'false');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1169 assert.equal(await sidebarPanel.getAttribute('hidden'), '');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1170
252 7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1171 await page.goto(`${baseUrl}/components/notifications`, {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1172 waitUntil: 'networkidle',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1173 });
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1174 const notificationScope = page.locator('zen-notifications').first();
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1175 const notificationPosition = await notificationScope.locator(
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1176 '[data-zen-notification-stack]',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1177 ).evaluate(stack => {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1178 const style = getComputedStyle(stack);
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1179 return {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1180 bottom: style.bottom,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1181 position: style.position,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1182 right: style.right,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1183 };
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1184 });
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1185 assert.equal(notificationPosition.position, 'fixed');
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1186 assert.notEqual(notificationPosition.bottom, 'auto');
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1187 assert.notEqual(notificationPosition.right, 'auto');
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1188
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1189 const dedupe = await notificationScope.evaluate(scope => {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1190 const source = scope.querySelector('[data-notification-demo]');
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1191 const send = detail => source.dispatchEvent(
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1192 new CustomEvent('zen-notify', {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1193 bubbles: true,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1194 composed: false,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1195 detail,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1196 }),
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1197 );
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1198 send({
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1199 version: 1,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1200 id: 'dedupe',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1201 tone: 'info',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1202 message: 'First announcement',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1203 announcement: 'polite',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1204 persistent: true,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1205 });
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1206 send({
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1207 version: 1,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1208 id: 'dedupe',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1209 tone: 'success',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1210 message: 'Updated without duplication',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1211 announcement: 'polite',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1212 persistent: true,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1213 });
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1214 send({ version: 99, id: 'invalid' });
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1215 return {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1216 size: scope.size,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1217 visible: scope.visibleCount,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1218 };
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1219 });
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1220 assert.deepEqual(dedupe, { size: 1, visible: 1 });
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1221 assert.equal(
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1222 await notificationScope.locator('article').count(),
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1223 1,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1224 );
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1225 assert.match(
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1226 await notificationScope.locator('article').textContent(),
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1227 /Updated without duplication/,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1228 );
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1229 await page.waitForFunction(() =>
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1230 document.querySelector(
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1231 'zen-notifications [data-zen-live="polite"]',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1232 )?.textContent === 'First announcement'
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1233 );
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1234
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1235 const bounded = await notificationScope.evaluate(scope => {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1236 let accepted = 0;
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1237 for (let index = 0; index < 25; index++) {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1238 if (scope.notify({
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1239 version: 1,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1240 id: `bounded-${index}`,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1241 tone: 'info',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1242 message: `Bounded ${index}`,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1243 announcement: 'none',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1244 durationMs: 120000,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1245 })) accepted++;
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1246 }
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1247 return {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1248 accepted,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1249 size: scope.size,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1250 visible: scope.visibleCount,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1251 };
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1252 });
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1253 assert.deepEqual(bounded, { accepted: 25, size: 23, visible: 3 });
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1254 assert.equal(
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1255 await notificationScope.locator('article').count(),
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1256 3,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1257 );
253 fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1258 await page.waitForFunction(() =>
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1259 [...document.querySelectorAll(
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1260 'zen-notifications article',
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1261 )].some(article => article.dataset.depth === '2')
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1262 );
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1263 const collapsedStack = await notificationScope.locator(
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1264 '[data-zen-notification-stack]',
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1265 ).evaluate(stack => {
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1266 const articles = [...stack.querySelectorAll('article')];
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1267 return {
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1268 depths: articles.map(article => article.dataset.depth),
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1269 height: stack.getBoundingClientRect().height,
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1270 positions: articles.map(article =>
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1271 getComputedStyle(article).position
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1272 ),
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1273 transforms: articles.map(article =>
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1274 getComputedStyle(article).transform
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1275 ),
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1276 };
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1277 });
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1278 assert.deepEqual(collapsedStack.depths, ['2', '1', '0']);
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1279 assert.deepEqual(
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1280 collapsedStack.positions,
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1281 ['absolute', 'absolute', 'absolute'],
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1282 );
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1283 await notificationScope.locator('article').last().hover();
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1284 await page.waitForTimeout(300);
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1285 const expandedStack = await notificationScope.locator(
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1286 '[data-zen-notification-stack]',
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1287 ).evaluate(stack => ({
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1288 height: stack.getBoundingClientRect().height,
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1289 rects: [...stack.querySelectorAll('article')].map(article => {
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1290 const bounds = article.getBoundingClientRect();
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1291 return {
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1292 bottom: bounds.bottom,
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1293 left: bounds.left,
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1294 right: bounds.right,
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1295 top: bounds.top,
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1296 };
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1297 }),
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1298 tops: [...stack.querySelectorAll('article')].map(
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1299 article => Math.round(article.getBoundingClientRect().top),
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1300 ),
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1301 transforms: [...stack.querySelectorAll('article')].map(
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1302 article => getComputedStyle(article).transform,
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1303 ),
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1304 }));
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1305 assert.ok(expandedStack.height > collapsedStack.height);
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1306 assert.equal(new Set(expandedStack.tops).size, 3);
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1307 const expandedGaps = [
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1308 expandedStack.rects[1].top - expandedStack.rects[0].bottom,
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1309 expandedStack.rects[2].top - expandedStack.rects[1].bottom,
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1310 ];
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1311 for (const gap of expandedGaps) {
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1312 assert.ok(gap >= 10 && gap <= 14, JSON.stringify(expandedGaps));
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1313 }
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1314 assert.notDeepEqual(
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1315 expandedStack.transforms,
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1316 collapsedStack.transforms,
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1317 );
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1318 const gapX =
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1319 (expandedStack.rects[0].left + expandedStack.rects[0].right) / 2;
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1320 const gapY =
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1321 (expandedStack.rects[0].bottom + expandedStack.rects[1].top) / 2;
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1322 await page.mouse.move(gapX, gapY);
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1323 await page.waitForTimeout(100);
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1324 const gapState = await notificationScope.locator(
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1325 '[data-zen-notification-stack]',
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1326 ).evaluate(stack => ({
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1327 height: stack.getBoundingClientRect().height,
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1328 hovered: stack.matches(':hover'),
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1329 }));
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1330 assert.equal(gapState.hovered, true);
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1331 assert.ok(gapState.height >= expandedStack.height - 1);
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1332 await page.mouse.move(0, 0);
252 7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1333
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1334 const actionScope = await page.evaluate(() => {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1335 const scope = document.createElement('zen-notifications');
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1336 scope.id = 'action-scope';
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1337 const source = document.createElement('button');
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1338 scope.append(source);
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1339 document.body.append(scope);
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1340 window.__notificationAction = null;
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1341 scope.addEventListener('zen-notification-action', event => {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1342 window.__notificationAction = event.detail;
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1343 });
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1344 source.dispatchEvent(new CustomEvent('zen-notify', {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1345 bubbles: true,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1346 composed: false,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1347 detail: {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1348 version: 1,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1349 id: 'action',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1350 tone: 'error',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1351 message: 'Action required',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1352 announcement: 'assertive',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1353 persistent: true,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1354 action: {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1355 token: 'opaque-secret-token',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1356 label: 'Retry',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1357 },
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1358 },
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1359 }));
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1360 return scope.id;
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1361 });
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1362 assert.equal(
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1363 await page.locator(`#${actionScope}`).evaluate(
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1364 scope => scope.records,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1365 ),
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1366 undefined,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1367 );
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1368 const actionArticle = page.locator(
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1369 `#${actionScope} [data-zen-notification-id="action"]`,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1370 );
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1371 assert.doesNotMatch(
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1372 await actionArticle.evaluate(article => article.outerHTML),
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1373 /opaque-secret-token/,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1374 );
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1375 await actionArticle.locator('.zen-notification-action').focus();
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1376 await page.locator(`#${actionScope}`).evaluate(scope => {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1377 const source = scope.querySelector('button');
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1378 source.dispatchEvent(new CustomEvent('zen-notify', {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1379 bubbles: true,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1380 composed: false,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1381 detail: {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1382 version: 1,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1383 id: 'action-neighbor',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1384 tone: 'info',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1385 message: 'Neighbor',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1386 announcement: 'none',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1387 persistent: true,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1388 },
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1389 }));
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1390 });
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1391 assert.equal(
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1392 await actionArticle.locator('.zen-notification-action').evaluate(
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1393 action => document.activeElement === action,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1394 ),
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1395 true,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1396 );
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1397 await actionArticle.locator('.zen-notification-action').click();
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1398 assert.deepEqual(
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1399 await page.evaluate(() => window.__notificationAction),
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1400 {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1401 version: 1,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1402 id: 'action',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1403 token: 'opaque-secret-token',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1404 },
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1405 );
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1406 await page.locator(`#${actionScope}`).evaluate(scope => {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1407 const source = scope.querySelector('button');
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1408 source.dispatchEvent(new CustomEvent(
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1409 'zen-dismiss-notification',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1410 {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1411 bubbles: true,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1412 composed: false,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1413 detail: { version: 1, id: 'action' },
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1414 },
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1415 ));
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1416 });
253 fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	1417 await actionArticle.waitFor({ state: 'detached' });
252 7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1418
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1419 await page.evaluate(() => {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1420 const scope = document.createElement('zen-notifications');
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1421 scope.id = 'announcement-scope';
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1422 const source = document.createElement('button');
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1423 scope.append(source);
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1424 document.body.append(scope);
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1425 window.__announcements = [];
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1426 const region = scope.querySelector('[data-zen-live="polite"]');
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1427 new MutationObserver(() => {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1428 if (region.textContent) {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1429 window.__announcements.push(region.textContent);
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1430 }
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1431 }).observe(region, { childList: true });
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1432 for (let index = 0; index < 3; index++) {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1433 source.dispatchEvent(new CustomEvent('zen-notify', {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1434 bubbles: true,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1435 composed: false,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1436 detail: {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1437 version: 1,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1438 id: `announcement-${index}`,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1439 tone: 'info',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1440 message: `Announcement ${index}`,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1441 announcement: 'polite',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1442 persistent: true,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1443 },
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1444 }));
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1445 }
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1446 });
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1447 await page.waitForFunction(() =>
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1448 window.__announcements?.length === 3
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1449 );
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1450 assert.deepEqual(
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1451 await page.evaluate(() => window.__announcements),
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1452 ['Announcement 0', 'Announcement 1', 'Announcement 2'],
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1453 );
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1454
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1455 const composedRejected = await page.evaluate(() => {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1456 const scope = document.createElement('zen-notifications');
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1457 const source = document.createElement('button');
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1458 scope.append(source);
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1459 document.body.append(scope);
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1460 source.dispatchEvent(new CustomEvent('zen-notify', {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1461 bubbles: true,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1462 composed: true,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1463 detail: {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1464 version: 1,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1465 id: 'composed',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1466 tone: 'info',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1467 message: 'Must be rejected',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1468 announcement: 'none',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1469 persistent: true,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1470 },
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1471 }));
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1472 return scope.size;
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1473 });
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1474 assert.equal(composedRejected, 0);
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1475
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1476 await page.evaluate(() => {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1477 const scope = document.createElement('zen-notifications');
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1478 scope.id = 'focus-timer-scope';
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1479 const source = document.createElement('button');
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1480 scope.append(source);
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1481 document.body.append(scope);
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1482 source.dispatchEvent(new CustomEvent('zen-notify', {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1483 bubbles: true,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1484 composed: false,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1485 detail: {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1486 version: 1,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1487 id: 'focus-timer',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1488 tone: 'warning',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1489 message: 'Focus timer',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1490 announcement: 'none',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1491 durationMs: 300,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1492 action: { token: 'focus-token', label: 'Keep focused' },
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1493 },
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1494 }));
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1495 });
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1496 const focusTimer = page.locator(
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1497 '#focus-timer-scope [data-zen-notification-id="focus-timer"]',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1498 );
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1499 await focusTimer.locator('.zen-notification-action').focus();
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1500 await page.locator('#focus-timer-scope').evaluate(scope => {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1501 const source = scope.querySelector(':scope > button');
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1502 source.dispatchEvent(new CustomEvent('zen-notify', {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1503 bubbles: true,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1504 composed: false,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1505 detail: {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1506 version: 1,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1507 id: 'focus-neighbor',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1508 tone: 'info',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1509 message: 'Focus neighbor',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1510 announcement: 'none',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1511 persistent: true,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1512 },
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1513 }));
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1514 });
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1515 await page.waitForTimeout(500);
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1516 assert.equal(await focusTimer.count(), 1);
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1517 assert.equal(
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1518 await focusTimer.locator('.zen-notification-action').evaluate(
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1519 action => document.activeElement === action,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1520 ),
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1521 true,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1522 );
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1523 await page.mouse.move(0, 0);
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1524 await page.locator('#catalogMain').focus();
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1525 await page.waitForFunction(() =>
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1526 !document.querySelector(
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1527 '#focus-timer-scope [data-zen-notification-id="focus-timer"]',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1528 )
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1529 );
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1530
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1531 await page.evaluate(() => {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1532 const scope = document.createElement('zen-notifications');
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1533 scope.id = 'timer-scope';
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1534 const source = document.createElement('button');
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1535 scope.append(source);
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1536 document.body.append(scope);
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1537 source.dispatchEvent(new CustomEvent('zen-notify', {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1538 bubbles: true,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1539 composed: false,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1540 detail: {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1541 version: 1,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1542 id: 'timer',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1543 tone: 'info',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1544 message: 'Paused timer',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1545 announcement: 'none',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1546 durationMs: 300,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1547 },
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1548 }));
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1549 });
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1550 const timerArticle = page.locator('#timer-scope article');
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1551 await timerArticle.hover();
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1552 await page.waitForTimeout(500);
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1553 assert.equal(await timerArticle.count(), 1);
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1554 await page.mouse.move(0, 0);
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1555 await page.waitForFunction(() =>
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1556 !document.querySelector('#timer-scope article')
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1557 );
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1558
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1559 await page.evaluate(() => {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1560 const scope = document.createElement('zen-notifications');
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1561 scope.id = 'hidden-timer-scope';
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1562 const source = document.createElement('button');
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1563 scope.append(source);
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1564 document.body.append(scope);
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1565 source.dispatchEvent(new CustomEvent('zen-notify', {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1566 bubbles: true,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1567 composed: false,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1568 detail: {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1569 version: 1,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1570 id: 'hidden-timer',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1571 tone: 'info',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1572 message: 'Hidden timer',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1573 announcement: 'none',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1574 durationMs: 300,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1575 },
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1576 }));
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1577 Object.defineProperty(document, 'hidden', {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1578 configurable: true,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1579 value: true,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1580 });
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1581 document.dispatchEvent(new Event('visibilitychange'));
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1582 });
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1583 await page.waitForTimeout(500);
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1584 assert.equal(
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1585 await page.locator('#hidden-timer-scope article').count(),
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1586 1,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1587 );
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1588 await page.evaluate(() => {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1589 Object.defineProperty(document, 'hidden', {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1590 configurable: true,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1591 value: false,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1592 });
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1593 document.dispatchEvent(new Event('visibilitychange'));
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1594 });
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1595 await page.waitForFunction(() =>
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1596 !document.querySelector('#hidden-timer-scope article')
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1597 );
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1598
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1599 const isolated = await page.evaluate(() => {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1600 const makeScope = id => {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1601 const scope = document.createElement('zen-notifications');
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1602 scope.id = id;
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1603 const source = document.createElement('button');
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1604 scope.append(source);
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1605 document.body.append(scope);
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1606 return { scope, source };
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1607 };
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1608 const first = makeScope('scope-one');
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1609 const second = makeScope('scope-two');
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1610 first.source.dispatchEvent(new CustomEvent('zen-notify', {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1611 bubbles: true,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1612 composed: false,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1613 detail: {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1614 version: 1,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1615 id: 'isolated',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1616 tone: 'success',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1617 message: 'Only first scope',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1618 announcement: 'none',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1619 persistent: true,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1620 },
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1621 }));
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1622 return [first.scope.size, second.scope.size];
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1623 });
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1624 assert.deepEqual(isolated, [1, 0]);
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	1625
251 117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	1626 const lightCanvas = await page.evaluate(() =>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	1627 getComputedStyle(document.documentElement)
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	1628 .getPropertyValue('--zen-color-canvas')
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	1629 .trim()
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	1630 );
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	1631 await page.locator('#themeToggle').click();
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	1632 const darkCanvas = await page.evaluate(() =>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	1633 getComputedStyle(document.documentElement)
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	1634 .getPropertyValue('--zen-color-canvas')
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	1635 .trim()
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	1636 );
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	1637 assert.notEqual(lightCanvas, darkCanvas);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	1638 assert.equal(
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	1639 await page.evaluate(() => localStorage.getItem('zen-theme')),
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	1640 'dark',
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	1641 );
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	1642
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	1643 assert.deepEqual(errors, []);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	1644 await context.close();
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	1645
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	1646 const darkContext = await browser.newContext({ colorScheme: 'dark' });
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	1647 const darkPage = await darkContext.newPage();
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	1648 await darkPage.goto(baseUrl, { waitUntil: 'networkidle' });
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	1649 assert.equal(
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	1650 await darkPage.locator('#themeToggle').getAttribute('aria-pressed'),
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	1651 'true',
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	1652 );
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	1653 const systemDarkCanvas = await darkPage.evaluate(() =>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	1654 getComputedStyle(document.documentElement)
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	1655 .getPropertyValue('--zen-color-canvas')
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	1656 .trim()
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	1657 );
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	1658 await darkPage.locator('#themeToggle').click();
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	1659 const explicitLightCanvas = await darkPage.evaluate(() =>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	1660 getComputedStyle(document.documentElement)
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	1661 .getPropertyValue('--zen-color-canvas')
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	1662 .trim()
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	1663 );
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	1664 assert.notEqual(systemDarkCanvas, explicitLightCanvas);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	1665 await darkContext.close();
254 2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1666
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1667 const mobileContext = await browser.newContext({
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1668 colorScheme: 'light',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1669 viewport: { width: 390, height: 844 },
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1670 });
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1671 const mobilePage = await mobileContext.newPage();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1672 const mobileErrors = [];
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1673 mobilePage.on('pageerror', error => {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1674 mobileErrors.push(error.stack \|\| error.message);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1675 });
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1676 mobilePage.on('console', message => {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1677 if (message.type() === 'error') mobileErrors.push(message.text());
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1678 });
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1679 await mobilePage.goto(baseUrl, { waitUntil: 'networkidle' });
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1680 await mobilePage.waitForFunction(() =>
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1681 customElements.get('zen-date-picker') &&
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1682 document.querySelectorAll(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1683 '.catalog-nav[aria-label="Components"] a',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1684 ).length === 66
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1685 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1686 const mobileFailures = await mobilePage.evaluate(() => {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1687 const routes = [
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1688 '/',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1689 '/tokens',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1690 '/icons',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1691 ...[...document.querySelectorAll(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1692 '.catalog-nav[aria-label="Components"] a',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1693 )].map(link => new URL(link.href).pathname),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1694 ];
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1695 const failures = [];
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1696 for (const route of routes) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1697 history.replaceState({}, '', route);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1698 window.dispatchEvent(new PopStateEvent('popstate'));
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1699 const page = document.querySelector(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1700 '[data-catalog-page]:not([hidden])',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1701 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1702 if (!page \|\|
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1703 document.documentElement.scrollWidth > innerWidth + 1 \|\|
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1704 page.getBoundingClientRect().right > innerWidth + 1) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1705 failures.push(route);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1706 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1707 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1708 return failures;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1709 });
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1710 assert.deepEqual(mobileFailures, []);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1711 await mobilePage.goto(`${baseUrl}/components/date-picker`, {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1712 waitUntil: 'networkidle',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1713 });
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1714 await mobilePage.locator(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1715 'zen-date-picker [data-zen-date-trigger]',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1716 ).click();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1717 const mobileCalendarBounds = await mobilePage.locator(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1718 'zen-date-picker [data-zen-calendar-panel]',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1719 ).evaluate(panel => {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1720 const bounds = panel.getBoundingClientRect();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1721 return {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1722 bottom: bounds.bottom,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1723 left: bounds.left,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1724 right: bounds.right,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1725 top: bounds.top,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1726 };
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1727 });
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1728 assert.ok(mobileCalendarBounds.left >= 0);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1729 assert.ok(mobileCalendarBounds.right <= 390);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1730 assert.ok(mobileCalendarBounds.top >= 0);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1731 assert.ok(mobileCalendarBounds.bottom <= 844);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1732 assert.deepEqual(mobileErrors, []);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 253 diff changeset	1733 await mobileContext.close();
251 117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	1734 } finally {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	1735 if (browser) await browser.close();
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	1736 await stopProcess(server);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	1737 }
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	1738 })().catch(error => {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	1739 console.error(error.stack \|\| error);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	1740 process.exitCode = 1;
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	1741 });