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

annotate design_system/test/storybook_test.js @ 254:2b6e732087ff

[ui] Add complete native component catalog Co-authored-by: Copilot <[email protected]>

author	MrJuneJune <me@mrjunejune.com>
date	Tue, 04 Aug 2026 15:12:09 -0700
parents	fdf3816959cb
children	30c2196d03d4

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