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

annotate design_system/test/storybook_test.js @ 253:fdf3816959cb

[ui] Add Sonner-like notification stack Co-authored-by: Copilot <[email protected]>

author	MrJuneJune <me@mrjunejune.com>
date	Tue, 04 Aug 2026 12:21:19 -0700
parents	7a7581f040e8
children	2b6e732087ff

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',
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	123 '/components',
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	124 '/components/button',
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	125 '/components/card',
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	126 '/components/alert',
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	127 '/components/field',
252 7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	128 '/components/notifications',
251 117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	129 '/components/stack',
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	130 ]) {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	131 const response = await fetch(`${baseUrl}${route}`);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	132 assert.equal(response.status, 200, route);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	133 assert.match(
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	134 response.headers.get('content-type') \|\| '',
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	135 /^text\/html/,
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	136 );
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 for (const asset of [
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	139 '/styles/tokens.css',
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	140 '/styles/components.css',
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	141 '/components/index.js',
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	142 '/storybook.js',
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	143 ]) {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	144 const response = await fetch(`${baseUrl}${asset}`);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	145 assert.equal(response.status, 200, asset);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	146 assert.ok((await response.text()).length > 100, asset);
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
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	149 browser = await chromium.launch({
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	150 executablePath: chromiumPath,
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	151 headless: true,
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	152 args: ['--no-sandbox'],
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	153 });
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	154 const context = await browser.newContext({ colorScheme: 'light' });
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	155 const page = await context.newPage();
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	156 const errors = [];
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	157 page.on('pageerror', error => errors.push(error.message));
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	158 page.on('console', message => {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	159 if (message.type() === 'error') errors.push(message.text());
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	160 });
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	161 page.on('response', response => {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	162 if (response.status() >= 400) {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	163 errors.push(`${response.status()} ${response.url()}`);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	164 }
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	165 });
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	166
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	167 await page.goto(`${baseUrl}/components/button`, {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	168 waitUntil: 'networkidle',
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	169 });
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	170 await page.waitForFunction(() =>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	171 customElements.get('zen-button') &&
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	172 customElements.get('zen-story')
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	173 );
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	174 assert.equal(
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	175 await page.locator('[data-catalog-page="button"]').isVisible(),
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	176 true,
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	177 );
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	178 assert.equal(
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	179 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	180 'page',
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	181 );
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	182 assert.match(
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	183 await page.locator('zen-story pre').first().textContent(),
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	184 /<zen-button>/,
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	185 );
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	186 assert.equal(
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	187 await page.locator('zen-button[loading]').getAttribute('inert'),
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	188 null,
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	189 );
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	190 assert.equal(
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	191 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	192 'true',
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	193 );
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	194 assert.equal(
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	195 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	196 'true',
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	197 );
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	198 await page.evaluate(() => {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	199 window.__loadingClicks = 0;
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	200 document.querySelector('zen-button[loading] button')
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	201 .addEventListener('click', () => window.__loadingClicks++);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	202 });
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	203 await page.locator('zen-button[loading] button').evaluate(
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	204 button => button.click(),
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	205 );
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	206 assert.equal(await page.evaluate(() => window.__loadingClicks), 0);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	207 await page.locator('zen-button[loading] button').focus();
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	208 assert.equal(
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	209 await page.locator('zen-button[loading] button').evaluate(
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	210 button => document.activeElement === button,
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	211 ),
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	212 true,
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	213 );
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	214 await page.keyboard.press('Tab');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	215 assert.equal(
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	216 await page.locator('zen-button[loading] button').evaluate(
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	217 button => document.activeElement === button,
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	218 ),
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	219 false,
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	220 );
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	221 const nativeDisabledPreserved = await page.evaluate(async () => {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	222 const wrapper = document.createElement('zen-button');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	223 const button = document.createElement('button');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	224 button.disabled = true;
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	225 button.textContent = 'Native disabled';
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	226 wrapper.append(button);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	227 document.body.append(wrapper);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	228 await customElements.whenDefined('zen-button');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	229 wrapper.setAttribute('disabled', '');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	230 wrapper.removeAttribute('disabled');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	231 return button.disabled;
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	232 });
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	233 assert.equal(nativeDisabledPreserved, true);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	234 const replacementButtonState = await page.evaluate(async () => {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	235 const wrapper = document.createElement('zen-button');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	236 wrapper.setAttribute('disabled', '');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	237 const first = document.createElement('button');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	238 first.textContent = 'First';
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	239 wrapper.append(first);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	240 document.body.append(wrapper);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	241 await new Promise(resolve => setTimeout(resolve));
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	242 const second = document.createElement('button');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	243 second.textContent = 'Second';
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	244 wrapper.replaceChildren(second);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	245 await new Promise(resolve => setTimeout(resolve));
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	246 return {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	247 firstDisabled: first.disabled,
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	248 secondAriaDisabled: second.getAttribute('aria-disabled'),
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	249 wrapperInert: wrapper.hasAttribute('inert'),
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	250 };
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	251 });
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	252 assert.equal(replacementButtonState.firstDisabled, false);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	253 assert.equal(replacementButtonState.secondAriaDisabled, 'true');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	254 assert.equal(replacementButtonState.wrapperInert, false);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	255 const modifiedClickAllowed = await page.evaluate(() => {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	256 const link = document.querySelector(
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	257 '.catalog-sidebar a[href="/components/card"]',
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	258 );
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	259 return link.dispatchEvent(new MouseEvent('click', {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	260 bubbles: true,
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	261 cancelable: true,
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	262 button: 0,
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	263 ctrlKey: true,
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	264 }));
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	265 });
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	266 assert.equal(modifiedClickAllowed, true);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	267
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	268 await page.goto(`${baseUrl}/components/field`, {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	269 waitUntil: 'networkidle',
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	270 });
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	271 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	272 const label = field.querySelector('label');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	273 const input = field.querySelector('input');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	274 const help = field.querySelector('small');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	275 input.checkValidity();
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	276 return {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	277 describedBy: input.getAttribute('aria-describedby'),
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	278 helpId: help.id,
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	279 inputId: input.id,
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	280 invalid: field.hasAttribute('data-invalid'),
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	281 labelFor: label.htmlFor,
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	282 };
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	283 });
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	284 assert.ok(fieldWiring.inputId);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	285 assert.equal(fieldWiring.labelFor, fieldWiring.inputId);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	286 assert.equal(fieldWiring.describedBy, fieldWiring.helpId);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	287 assert.equal(fieldWiring.invalid, true);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	288 const replacementField = await page.locator('zen-field').first().evaluate(
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	289 async field => {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	290 const label = field.querySelector('label');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	291 const oldInput = field.querySelector('input');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	292 const blocker = document.createElement('div');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	293 blocker.id = 'zen-field-3';
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	294 document.body.append(blocker);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	295 const nextInput = document.createElement('input');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	296 nextInput.required = true;
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	297 oldInput.replaceWith(nextInput);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	298 await new Promise(resolve => setTimeout(resolve));
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	299 oldInput.dispatchEvent(new Event('invalid'));
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	300 const help = field.querySelector('small');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	301 nextInput.id = 'replacement-email';
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	302 help.id = 'replacement-help';
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	303 await new Promise(resolve => setTimeout(resolve));
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	304 return {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	305 describedBy: nextInput.getAttribute('aria-describedby'),
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	306 helpId: help.id,
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	307 labelFor: label.htmlFor,
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	308 nextId: nextInput.id,
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	309 blockerId: blocker.id,
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 },
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	312 );
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	313 assert.ok(replacementField.nextId);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	314 assert.notEqual(replacementField.nextId, replacementField.blockerId);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	315 assert.equal(replacementField.labelFor, replacementField.nextId);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	316 assert.equal(replacementField.describedBy, replacementField.helpId);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	317
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	318 await page.goto(`${baseUrl}/components/alert`, {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	319 waitUntil: 'networkidle',
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	320 });
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	321 await page.evaluate(() => {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	322 window.__dismissed = 0;
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	323 document.addEventListener('zen-dismiss', () => {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	324 window.__dismissed++;
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	325 });
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 const dismissible = page.locator('zen-alert[dismissible]');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	328 assert.equal(await dismissible.getAttribute('role'), 'alert');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	329 await dismissible.locator('[data-zen-dismiss]').click();
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	330 assert.equal(await dismissible.count(), 0);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	331 assert.equal(await page.evaluate(() => window.__dismissed), 1);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	332 const authoredDismissState = await page.evaluate(async () => {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	333 const alert = document.createElement('zen-alert');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	334 alert.setAttribute('dismissible', '');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	335 const message = document.createElement('p');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	336 message.textContent = 'Authored dismiss control';
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	337 const dismiss = document.createElement('button');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	338 dismiss.dataset.zenDismiss = '';
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	339 alert.append(message, dismiss);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	340 document.body.append(alert);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	341 await new Promise(resolve => setTimeout(resolve));
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	342 let events = 0;
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	343 alert.addEventListener('zen-dismiss', () => events++);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	344 alert.removeAttribute('dismissible');
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	345 dismiss.click();
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	346 return {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	347 connected: alert.isConnected,
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	348 events,
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 });
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	351 assert.equal(authoredDismissState.connected, true);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	352 assert.equal(authoredDismissState.events, 0);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	353
252 7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	354 await page.goto(`${baseUrl}/components/notifications`, {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	355 waitUntil: 'networkidle',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	356 });
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	357 const notificationScope = page.locator('zen-notifications').first();
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	358 const notificationPosition = await notificationScope.locator(
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	359 '[data-zen-notification-stack]',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	360 ).evaluate(stack => {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	361 const style = getComputedStyle(stack);
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	362 return {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	363 bottom: style.bottom,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	364 position: style.position,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	365 right: style.right,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	366 };
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	367 });
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	368 assert.equal(notificationPosition.position, 'fixed');
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	369 assert.notEqual(notificationPosition.bottom, 'auto');
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	370 assert.notEqual(notificationPosition.right, 'auto');
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	371
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	372 const dedupe = await notificationScope.evaluate(scope => {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	373 const source = scope.querySelector('[data-notification-demo]');
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	374 const send = detail => source.dispatchEvent(
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	375 new CustomEvent('zen-notify', {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	376 bubbles: true,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	377 composed: false,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	378 detail,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	379 }),
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	380 );
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	381 send({
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	382 version: 1,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	383 id: 'dedupe',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	384 tone: 'info',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	385 message: 'First announcement',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	386 announcement: 'polite',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	387 persistent: true,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	388 });
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	389 send({
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	390 version: 1,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	391 id: 'dedupe',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	392 tone: 'success',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	393 message: 'Updated without duplication',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	394 announcement: 'polite',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	395 persistent: true,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	396 });
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	397 send({ version: 99, id: 'invalid' });
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	398 return {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	399 size: scope.size,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	400 visible: scope.visibleCount,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	401 };
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	402 });
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	403 assert.deepEqual(dedupe, { size: 1, visible: 1 });
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	404 assert.equal(
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	405 await notificationScope.locator('article').count(),
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	406 1,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	407 );
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	408 assert.match(
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	409 await notificationScope.locator('article').textContent(),
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	410 /Updated without duplication/,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	411 );
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	412 await page.waitForFunction(() =>
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	413 document.querySelector(
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	414 'zen-notifications [data-zen-live="polite"]',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	415 )?.textContent === 'First announcement'
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	416 );
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	417
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	418 const bounded = await notificationScope.evaluate(scope => {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	419 let accepted = 0;
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	420 for (let index = 0; index < 25; index++) {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	421 if (scope.notify({
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	422 version: 1,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	423 id: `bounded-${index}`,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	424 tone: 'info',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	425 message: `Bounded ${index}`,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	426 announcement: 'none',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	427 durationMs: 120000,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	428 })) accepted++;
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	429 }
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	430 return {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	431 accepted,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	432 size: scope.size,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	433 visible: scope.visibleCount,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	434 };
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	435 });
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	436 assert.deepEqual(bounded, { accepted: 25, size: 23, visible: 3 });
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	437 assert.equal(
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	438 await notificationScope.locator('article').count(),
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	439 3,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	440 );
253 fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	441 await page.waitForFunction(() =>
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	442 [...document.querySelectorAll(
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	443 'zen-notifications article',
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	444 )].some(article => article.dataset.depth === '2')
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	445 );
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	446 const collapsedStack = await notificationScope.locator(
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	447 '[data-zen-notification-stack]',
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	448 ).evaluate(stack => {
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	449 const articles = [...stack.querySelectorAll('article')];
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	450 return {
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	451 depths: articles.map(article => article.dataset.depth),
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	452 height: stack.getBoundingClientRect().height,
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	453 positions: articles.map(article =>
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	454 getComputedStyle(article).position
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	455 ),
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	456 transforms: articles.map(article =>
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	457 getComputedStyle(article).transform
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	458 ),
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	459 };
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	460 });
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	461 assert.deepEqual(collapsedStack.depths, ['2', '1', '0']);
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	462 assert.deepEqual(
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	463 collapsedStack.positions,
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	464 ['absolute', 'absolute', 'absolute'],
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	465 );
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	466 await notificationScope.locator('article').last().hover();
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	467 await page.waitForTimeout(300);
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	468 const expandedStack = await notificationScope.locator(
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	469 '[data-zen-notification-stack]',
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	470 ).evaluate(stack => ({
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	471 height: stack.getBoundingClientRect().height,
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	472 rects: [...stack.querySelectorAll('article')].map(article => {
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	473 const bounds = article.getBoundingClientRect();
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	474 return {
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	475 bottom: bounds.bottom,
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	476 left: bounds.left,
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	477 right: bounds.right,
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	478 top: bounds.top,
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	479 };
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	480 }),
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	481 tops: [...stack.querySelectorAll('article')].map(
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	482 article => Math.round(article.getBoundingClientRect().top),
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	483 ),
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	484 transforms: [...stack.querySelectorAll('article')].map(
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	485 article => getComputedStyle(article).transform,
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	486 ),
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	487 }));
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	488 assert.ok(expandedStack.height > collapsedStack.height);
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	489 assert.equal(new Set(expandedStack.tops).size, 3);
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	490 const expandedGaps = [
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	491 expandedStack.rects[1].top - expandedStack.rects[0].bottom,
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	492 expandedStack.rects[2].top - expandedStack.rects[1].bottom,
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	493 ];
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	494 for (const gap of expandedGaps) {
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	495 assert.ok(gap >= 10 && gap <= 14, JSON.stringify(expandedGaps));
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	496 }
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	497 assert.notDeepEqual(
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	498 expandedStack.transforms,
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	499 collapsedStack.transforms,
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	500 );
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	501 const gapX =
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	502 (expandedStack.rects[0].left + expandedStack.rects[0].right) / 2;
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	503 const gapY =
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	504 (expandedStack.rects[0].bottom + expandedStack.rects[1].top) / 2;
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	505 await page.mouse.move(gapX, gapY);
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	506 await page.waitForTimeout(100);
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	507 const gapState = await notificationScope.locator(
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	508 '[data-zen-notification-stack]',
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	509 ).evaluate(stack => ({
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	510 height: stack.getBoundingClientRect().height,
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	511 hovered: stack.matches(':hover'),
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	512 }));
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	513 assert.equal(gapState.hovered, true);
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	514 assert.ok(gapState.height >= expandedStack.height - 1);
fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	515 await page.mouse.move(0, 0);
252 7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	516
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	517 const actionScope = await page.evaluate(() => {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	518 const scope = document.createElement('zen-notifications');
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	519 scope.id = 'action-scope';
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	520 const source = document.createElement('button');
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	521 scope.append(source);
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	522 document.body.append(scope);
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	523 window.__notificationAction = null;
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	524 scope.addEventListener('zen-notification-action', event => {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	525 window.__notificationAction = event.detail;
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	526 });
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	527 source.dispatchEvent(new CustomEvent('zen-notify', {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	528 bubbles: true,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	529 composed: false,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	530 detail: {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	531 version: 1,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	532 id: 'action',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	533 tone: 'error',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	534 message: 'Action required',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	535 announcement: 'assertive',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	536 persistent: true,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	537 action: {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	538 token: 'opaque-secret-token',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	539 label: 'Retry',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	540 },
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	541 },
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	542 }));
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	543 return scope.id;
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	544 });
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	545 assert.equal(
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	546 await page.locator(`#${actionScope}`).evaluate(
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	547 scope => scope.records,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	548 ),
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	549 undefined,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	550 );
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	551 const actionArticle = page.locator(
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	552 `#${actionScope} [data-zen-notification-id="action"]`,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	553 );
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	554 assert.doesNotMatch(
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	555 await actionArticle.evaluate(article => article.outerHTML),
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	556 /opaque-secret-token/,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	557 );
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	558 await actionArticle.locator('.zen-notification-action').focus();
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	559 await page.locator(`#${actionScope}`).evaluate(scope => {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	560 const source = scope.querySelector('button');
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	561 source.dispatchEvent(new CustomEvent('zen-notify', {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	562 bubbles: true,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	563 composed: false,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	564 detail: {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	565 version: 1,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	566 id: 'action-neighbor',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	567 tone: 'info',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	568 message: 'Neighbor',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	569 announcement: 'none',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	570 persistent: true,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	571 },
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	572 }));
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	573 });
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	574 assert.equal(
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	575 await actionArticle.locator('.zen-notification-action').evaluate(
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	576 action => document.activeElement === action,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	577 ),
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	578 true,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	579 );
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	580 await actionArticle.locator('.zen-notification-action').click();
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	581 assert.deepEqual(
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	582 await page.evaluate(() => window.__notificationAction),
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	583 {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	584 version: 1,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	585 id: 'action',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	586 token: 'opaque-secret-token',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	587 },
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	588 );
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	589 await page.locator(`#${actionScope}`).evaluate(scope => {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	590 const source = scope.querySelector('button');
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	591 source.dispatchEvent(new CustomEvent(
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	592 'zen-dismiss-notification',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	593 {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	594 bubbles: true,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	595 composed: false,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	596 detail: { version: 1, id: 'action' },
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	597 },
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	598 ));
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	599 });
253 fdf3816959cb [ui] Add Sonner-like notification stack MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	600 await actionArticle.waitFor({ state: 'detached' });
252 7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	601
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	602 await page.evaluate(() => {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	603 const scope = document.createElement('zen-notifications');
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	604 scope.id = 'announcement-scope';
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	605 const source = document.createElement('button');
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	606 scope.append(source);
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	607 document.body.append(scope);
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	608 window.__announcements = [];
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	609 const region = scope.querySelector('[data-zen-live="polite"]');
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	610 new MutationObserver(() => {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	611 if (region.textContent) {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	612 window.__announcements.push(region.textContent);
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	613 }
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	614 }).observe(region, { childList: true });
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	615 for (let index = 0; index < 3; index++) {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	616 source.dispatchEvent(new CustomEvent('zen-notify', {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	617 bubbles: true,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	618 composed: false,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	619 detail: {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	620 version: 1,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	621 id: `announcement-${index}`,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	622 tone: 'info',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	623 message: `Announcement ${index}`,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	624 announcement: 'polite',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	625 persistent: true,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	626 },
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	627 }));
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	628 }
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	629 });
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	630 await page.waitForFunction(() =>
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	631 window.__announcements?.length === 3
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	632 );
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	633 assert.deepEqual(
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	634 await page.evaluate(() => window.__announcements),
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	635 ['Announcement 0', 'Announcement 1', 'Announcement 2'],
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	636 );
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	637
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	638 const composedRejected = await page.evaluate(() => {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	639 const scope = document.createElement('zen-notifications');
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	640 const source = document.createElement('button');
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	641 scope.append(source);
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	642 document.body.append(scope);
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	643 source.dispatchEvent(new CustomEvent('zen-notify', {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	644 bubbles: true,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	645 composed: true,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	646 detail: {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	647 version: 1,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	648 id: 'composed',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	649 tone: 'info',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	650 message: 'Must be rejected',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	651 announcement: 'none',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	652 persistent: true,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	653 },
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	654 }));
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	655 return scope.size;
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	656 });
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	657 assert.equal(composedRejected, 0);
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	658
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	659 await page.evaluate(() => {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	660 const scope = document.createElement('zen-notifications');
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	661 scope.id = 'focus-timer-scope';
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	662 const source = document.createElement('button');
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	663 scope.append(source);
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	664 document.body.append(scope);
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	665 source.dispatchEvent(new CustomEvent('zen-notify', {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	666 bubbles: true,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	667 composed: false,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	668 detail: {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	669 version: 1,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	670 id: 'focus-timer',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	671 tone: 'warning',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	672 message: 'Focus timer',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	673 announcement: 'none',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	674 durationMs: 300,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	675 action: { token: 'focus-token', label: 'Keep focused' },
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	676 },
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	677 }));
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	678 });
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	679 const focusTimer = page.locator(
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	680 '#focus-timer-scope [data-zen-notification-id="focus-timer"]',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	681 );
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	682 await focusTimer.locator('.zen-notification-action').focus();
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	683 await page.locator('#focus-timer-scope').evaluate(scope => {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	684 const source = scope.querySelector(':scope > button');
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	685 source.dispatchEvent(new CustomEvent('zen-notify', {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	686 bubbles: true,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	687 composed: false,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	688 detail: {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	689 version: 1,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	690 id: 'focus-neighbor',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	691 tone: 'info',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	692 message: 'Focus neighbor',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	693 announcement: 'none',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	694 persistent: true,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	695 },
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	696 }));
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	697 });
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	698 await page.waitForTimeout(500);
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	699 assert.equal(await focusTimer.count(), 1);
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	700 assert.equal(
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	701 await focusTimer.locator('.zen-notification-action').evaluate(
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	702 action => document.activeElement === action,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	703 ),
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	704 true,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	705 );
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	706 await page.mouse.move(0, 0);
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	707 await page.locator('#catalogMain').focus();
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	708 await page.waitForFunction(() =>
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	709 !document.querySelector(
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	710 '#focus-timer-scope [data-zen-notification-id="focus-timer"]',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	711 )
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	712 );
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	713
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	714 await page.evaluate(() => {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	715 const scope = document.createElement('zen-notifications');
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	716 scope.id = 'timer-scope';
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	717 const source = document.createElement('button');
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	718 scope.append(source);
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	719 document.body.append(scope);
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	720 source.dispatchEvent(new CustomEvent('zen-notify', {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	721 bubbles: true,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	722 composed: false,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	723 detail: {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	724 version: 1,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	725 id: 'timer',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	726 tone: 'info',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	727 message: 'Paused timer',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	728 announcement: 'none',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	729 durationMs: 300,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	730 },
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	731 }));
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	732 });
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	733 const timerArticle = page.locator('#timer-scope article');
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	734 await timerArticle.hover();
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	735 await page.waitForTimeout(500);
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	736 assert.equal(await timerArticle.count(), 1);
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	737 await page.mouse.move(0, 0);
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	738 await page.waitForFunction(() =>
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	739 !document.querySelector('#timer-scope article')
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	740 );
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	741
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	742 await page.evaluate(() => {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	743 const scope = document.createElement('zen-notifications');
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	744 scope.id = 'hidden-timer-scope';
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	745 const source = document.createElement('button');
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	746 scope.append(source);
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	747 document.body.append(scope);
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	748 source.dispatchEvent(new CustomEvent('zen-notify', {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	749 bubbles: true,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	750 composed: false,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	751 detail: {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	752 version: 1,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	753 id: 'hidden-timer',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	754 tone: 'info',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	755 message: 'Hidden timer',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	756 announcement: 'none',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	757 durationMs: 300,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	758 },
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	759 }));
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	760 Object.defineProperty(document, 'hidden', {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	761 configurable: true,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	762 value: true,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	763 });
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	764 document.dispatchEvent(new Event('visibilitychange'));
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	765 });
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	766 await page.waitForTimeout(500);
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	767 assert.equal(
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	768 await page.locator('#hidden-timer-scope article').count(),
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	769 1,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	770 );
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	771 await page.evaluate(() => {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	772 Object.defineProperty(document, 'hidden', {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	773 configurable: true,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	774 value: false,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	775 });
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	776 document.dispatchEvent(new Event('visibilitychange'));
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	777 });
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	778 await page.waitForFunction(() =>
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	779 !document.querySelector('#hidden-timer-scope article')
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	780 );
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	781
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	782 const isolated = await page.evaluate(() => {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	783 const makeScope = id => {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	784 const scope = document.createElement('zen-notifications');
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	785 scope.id = id;
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	786 const source = document.createElement('button');
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	787 scope.append(source);
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	788 document.body.append(scope);
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	789 return { scope, source };
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	790 };
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	791 const first = makeScope('scope-one');
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	792 const second = makeScope('scope-two');
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	793 first.source.dispatchEvent(new CustomEvent('zen-notify', {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	794 bubbles: true,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	795 composed: false,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	796 detail: {
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	797 version: 1,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	798 id: 'isolated',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	799 tone: 'success',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	800 message: 'Only first scope',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	801 announcement: 'none',
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	802 persistent: true,
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	803 },
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	804 }));
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	805 return [first.scope.size, second.scope.size];
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	806 });
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	807 assert.deepEqual(isolated, [1, 0]);
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	808
251 117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	809 const lightCanvas = await page.evaluate(() =>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	810 getComputedStyle(document.documentElement)
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	811 .getPropertyValue('--zen-color-canvas')
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	812 .trim()
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	813 );
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	814 await page.locator('#themeToggle').click();
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	815 const darkCanvas = await page.evaluate(() =>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	816 getComputedStyle(document.documentElement)
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	817 .getPropertyValue('--zen-color-canvas')
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	818 .trim()
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	819 );
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	820 assert.notEqual(lightCanvas, darkCanvas);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	821 assert.equal(
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	822 await page.evaluate(() => localStorage.getItem('zen-theme')),
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	823 'dark',
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	824 );
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	825
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	826 assert.deepEqual(errors, []);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	827 await context.close();
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	828
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	829 const darkContext = await browser.newContext({ colorScheme: 'dark' });
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	830 const darkPage = await darkContext.newPage();
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	831 await darkPage.goto(baseUrl, { waitUntil: 'networkidle' });
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	832 assert.equal(
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	833 await darkPage.locator('#themeToggle').getAttribute('aria-pressed'),
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	834 'true',
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	835 );
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	836 const systemDarkCanvas = await darkPage.evaluate(() =>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	837 getComputedStyle(document.documentElement)
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	838 .getPropertyValue('--zen-color-canvas')
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	839 .trim()
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	840 );
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	841 await darkPage.locator('#themeToggle').click();
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	842 const explicitLightCanvas = await darkPage.evaluate(() =>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	843 getComputedStyle(document.documentElement)
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	844 .getPropertyValue('--zen-color-canvas')
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	845 .trim()
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	846 );
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	847 assert.notEqual(systemDarkCanvas, explicitLightCanvas);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	848 await darkContext.close();
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	849 } finally {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	850 if (browser) await browser.close();
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	851 await stopProcess(server);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	852 }
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	853 })().catch(error => {
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	854 console.error(error.stack \|\| error);
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	855 process.exitCode = 1;
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	856 });