Merge pull request #1075 from capricorn86/task/802-dialog-is-not-acce…

…ssible

#802@patch: Fixes issue with wrong computed style for "display" being…

packages/happy-dom/package.json

@@ -71,10 +71,10 @@
 		"watch": "tsc -w --preserveWatchOutput",
 		"lint": "eslint --ignore-path .gitignore --max-warnings 0 .",
 		"lint:fix": "eslint --ignore-path .gitignore --max-warnings 0 --fix .",
-		"test": "vitest run",
+		"test": "vitest run --singleThread",
 		"test:ui": "vitest --ui",
-		"test:watch": "vitest",
-		"test:debug": "vitest run --inspect-brk --threads false"
+		"test:watch": "vitest --singleThread",
+		"test:debug": "vitest run --inspect-brk --threads=false"
 	},
 	"dependencies": {
 		"css.escape": "^1.5.1",

packages/happy-dom/src/css/declaration/element-style/CSSStyleDeclarationElementStyle.ts

@@ -174,6 +174,24 @@ export default class CSSStyleDeclarationElementStyle {
 
 			let elementCSSText = '';
 			if (CSSStyleDeclarationElementDefaultCSS[(<IElement>parentElement.element).tagName]) {
+				if (
+					typeof CSSStyleDeclarationElementDefaultCSS[(<IElement>parentElement.element).tagName] ===
+					'string'
+				) {
+					elementCSSText +=
+						CSSStyleDeclarationElementDefaultCSS[(<IElement>parentElement.element).tagName];
+				} else {
+					for (const key of Object.keys(
+						CSSStyleDeclarationElementDefaultCSS[(<IElement>parentElement.element).tagName]
+					)) {
+						if (key === 'default' || !!parentElement.element[key]) {
+							elementCSSText +=
+								CSSStyleDeclarationElementDefaultCSS[(<IElement>parentElement.element).tagName][
+									key
+								];
+						}
+					}
+				}
 				elementCSSText +=
 					CSSStyleDeclarationElementDefaultCSS[(<IElement>parentElement.element).tagName];
 			}

packages/happy-dom/src/css/declaration/element-style/config/CSSStyleDeclarationElementDefaultCSS.ts

@@ -49,7 +49,10 @@ export default {
 	DEL: '',
 	DETAILS: 'display: block;',
 	DFN: '',
-	DIALOG: 'display: none;',
+	DIALOG: {
+		default: 'display: none;',
+		open: 'display: block;'
+	},
 	DIV: 'display: block;',
 	DL: 'display: block;',
 	DT: 'display: block;',

packages/happy-dom/src/nodes/html-dialog-element/HTMLDialogElement.ts

@@ -15,13 +15,26 @@ export default class HTMLDialogElement extends HTMLElement implements IHTMLDialo
 	public oncancel: (event: Event) => void | null = null;
 	public onclose: (event: Event) => void | null = null;
 
+	/**
+	 * Sets the "open" attribute.
+	 *
+	 * @param open Open.
+	 */
+	public set open(open: boolean) {
+		if (open) {
+			this.setAttribute('open', '');
+		} else {
+			this.removeAttribute('open');
+		}
+	}
+
 	/**
 	 * Returns open.
 	 *
 	 * @returns Open.
 	 */
 	public get open(): boolean {
-		return this.hasAttributeNS(null, 'open');
+		return this.getAttribute('open') !== null;
 	}
 
 	/**

packages/happy-dom/test/console/VirtualConsole.test.ts

@@ -1,4 +1,4 @@
-import { beforeEach, describe, it, expect } from 'vitest';
+import { beforeEach, afterEach, describe, it, expect, vi } from 'vitest';
 import VirtualConsole from '../../src/console/VirtualConsole.js';
 import VirtualConsolePrinter from '../../src/console/VirtualConsolePrinter.js';
 
@@ -14,6 +14,10 @@ describe('VirtualConsole', () => {
 		virtualConsole = new VirtualConsole(virtualConsolePrinter);
 	});
 
+	afterEach(() => {
+		vi.restoreAllMocks();
+	});
+
 	describe('assert()', () => {
 		it('Should print a message if the assertion is false.', () => {
 			virtualConsole.assert(false, 'Test', { test: true });
@@ -221,37 +225,47 @@ describe('VirtualConsole', () => {
 
 	describe('time()', () => {
 		it('Should store time for the default label.', () => {
+			let performanceNow = 12345;
+			vi.spyOn(performance, 'now').mockImplementation(() => performanceNow++);
 			virtualConsole.time();
 			virtualConsole.timeEnd();
-			expect(virtualConsolePrinter.readAsString()).toMatch(/default: [\d.]+ms/);
+			expect(virtualConsolePrinter.readAsString()).toBe('default: 1ms - timer ended\n');
 		});
 
 		it('Should store time for a label.', () => {
+			let performanceNow = 12345;
+			vi.spyOn(performance, 'now').mockImplementation(() => performanceNow++);
 			virtualConsole.time('test');
 			virtualConsole.timeEnd('test');
-			expect(virtualConsolePrinter.readAsString()).toMatch(/test: [\d.]+ms/);
+			expect(virtualConsolePrinter.readAsString()).toBe('test: 1ms - timer ended\n');
 		});
 	});
 
 	describe('timeEnd()', () => {
 		it('Should print the time between the stored start time and when it was ended.', () => {
+			let performanceNow = 12345;
+			vi.spyOn(performance, 'now').mockImplementation(() => performanceNow++);
 			virtualConsole.time();
 			virtualConsole.timeEnd();
-			expect(virtualConsolePrinter.readAsString()).toMatch(/default: [\d.]+ms/);
+			expect(virtualConsolePrinter.readAsString()).toBe('default: 1ms - timer ended\n');
 		});
 	});
 
 	describe('timeLog()', () => {
 		it('Should print the time between the stored start time and when it was ended.', () => {
+			let performanceNow = 12345;
+			vi.spyOn(performance, 'now').mockImplementation(() => performanceNow++);
 			virtualConsole.time();
 			virtualConsole.timeLog();
-			expect(virtualConsolePrinter.readAsString()).toMatch(/default: [\d.]+ms/);
+			expect(virtualConsolePrinter.readAsString()).toMatch('default: 1ms');
 		});
 
 		it('Should print the time between the stored start time and when it was ended with a label.', () => {
+			let performanceNow = 12345;
+			vi.spyOn(performance, 'now').mockImplementation(() => performanceNow++);
 			virtualConsole.time('test');
 			virtualConsole.timeLog('test');
-			expect(virtualConsolePrinter.readAsString()).toMatch(/test: [\d.]+ms/);
+			expect(virtualConsolePrinter.readAsString()).toMatch('test: 1ms');
 		});
 	});
 

packages/happy-dom/test/event/Event.test.ts

@@ -161,14 +161,10 @@ describe('Event', () => {
 
 	describe('get timeStamp()', () => {
 		it('Returns the value returned by performance.now() at the time it was created.', () => {
-			Object.defineProperty(performance, 'now', {
-				value: vi.fn(),
-				configurable: true,
-				writable: true
-			});
-
 			const performanceNow = 12345;
-			vi.spyOn(performance, 'now').mockImplementation(() => performanceNow);
+			vi.spyOn(performance, 'now').mockImplementation(() => {
+				return performanceNow;
+			});
 			const event = new Event('click');
 			expect(event.timeStamp).toBe(performanceNow);
 		});

packages/happy-dom/test/nodes/html-dialog-element/HTMLDialogElement.test.ts

@@ -22,6 +22,15 @@ describe('HTMLDialogElement', () => {
 		});
 	});
 
+	describe('set open()', () => {
+		it('Should set the open state', () => {
+			element.open = true;
+			expect(element.open).toBe(true);
+			element.open = false;
+			expect(element.open).toBe(false);
+		});
+	});
+
 	describe('get open()', () => {
 		it('Should be closed by default', () => {
 			expect(element.open).toBe(false);

packages/happy-dom/test/window/Window.test.ts

@@ -27,6 +27,7 @@ import { beforeEach, afterEach, describe, it, expect, vi } from 'vitest';
 import VirtualConsole from '../../src/console/VirtualConsole.js';
 import VirtualConsolePrinter from '../../src/console/VirtualConsolePrinter.js';
 import PackageVersion from '../../src/version.js';
+import { IHTMLDialogElement } from '../../src/index.js';
 
 const GET_NAVIGATOR_PLATFORM = (): string => {
 	return (
@@ -528,12 +529,33 @@ describe('Window', () => {
 			const element = <IHTMLElement>document.createElement('div');
 			const computedStyle = window.getComputedStyle(element);
 
+			expect(computedStyle.display).toBe('');
+
 			window.document.body.appendChild(element);
 
 			expect(computedStyle.direction).toBe('ltr');
 			expect(computedStyle.display).toBe('block');
 		});
 
+		it('Handles default properties "display" on a dialog element.', () => {
+			const element = <IHTMLDialogElement>document.createElement('dialog');
+			const computedStyle = window.getComputedStyle(element);
+
+			expect(computedStyle.display).toBe('');
+
+			window.document.body.appendChild(element);
+
+			expect(computedStyle.display).toBe('none');
+
+			element.show();
+
+			expect(computedStyle.display).toBe('block');
+
+			element.close();
+
+			expect(computedStyle.display).toBe('none');
+		});
+
 		it('Returns a CSSStyleDeclaration object with computed styles that are live updated whenever the element styles are changed.', () => {
 			const element = <IHTMLElement>document.createElement('div');
 			const computedStyle = window.getComputedStyle(element);

packages/jest-environment/test/testing-library/TestingLibrary.test.tsx

@@ -56,4 +56,12 @@ describe('TestingLibrary', () => {
 
 		expect(clickHandler).toHaveBeenCalledTimes(1);
 	});
+
+	it('Finds element using "screen.getByRole()".', () => {
+		render(<dialog open></dialog>);
+
+		const element = screen.getByRole('dialog');
+
+		expect(element).toBeInstanceOf(HTMLDialogElement);
+	});
 });