chore: [#1161] Fixes review findings

capricorn86 · May 6, 2024 · c302656 · c302656
1 parent cbbf5b1
commit c302656
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 25 deletions.
diff --git a/packages/happy-dom/src/nodes/element/DOMRect.ts b/packages/happy-dom/src/nodes/element/DOMRect.ts
@@ -1,4 +1,5 @@
 import DOMRectReadOnly, { IDOMRectInit } from './DOMRectReadOnly.js';
+import * as PropertySymbol from '../../PropertySymbol.js';
 
 /* eslint-disable jsdoc/require-jsdoc */
 
@@ -9,35 +10,35 @@ import DOMRectReadOnly, { IDOMRectInit } from './DOMRectReadOnly.js';
  */
 export default class DOMRect extends DOMRectReadOnly {
 	public set x(value: number) {
-		this._x = value;
+		this[PropertySymbol.x] = value;
 	}
 
 	public get x(): number {
-		return this._x;
+		return this[PropertySymbol.x];
 	}
 
 	public set y(value: number) {
-		this._y = value;
+		this[PropertySymbol.y] = value;
 	}
 
 	public get y(): number {
-		return this._y;
+		return this[PropertySymbol.y];
 	}
 
 	public set width(value: number) {
-		this._width = value;
+		this[PropertySymbol.width] = value;
 	}
 
 	public get width(): number {
-		return this._width;
+		return this[PropertySymbol.width];
 	}
 
 	public set height(value: number) {
-		this._height = value;
+		this[PropertySymbol.height] = value;
 	}
 
 	public get height(): number {
-		return this._height;
+		return this[PropertySymbol.height];
 	}
 
 	public static fromRect(other: IDOMRectInit): DOMRect {

diff --git a/packages/happy-dom/src/nodes/element/DOMRectReadOnly.ts b/packages/happy-dom/src/nodes/element/DOMRectReadOnly.ts
@@ -1,3 +1,5 @@
+import * as PropertySymbol from '../../PropertySymbol.js';
+
 /* eslint-disable jsdoc/require-jsdoc */
 
 /**
@@ -6,10 +8,10 @@
  * @see https://drafts.fxtf.org/geometry/#DOMRect
  */
 export default class DOMRectReadOnly implements IDOMRectInit {
-	protected _x: number = 0;
-	protected _y: number = 0;
-	protected _width: number = 0;
-	protected _height: number = 0;
+	protected [PropertySymbol.x]: number = 0;
+	protected [PropertySymbol.y]: number = 0;
+	protected [PropertySymbol.width]: number = 0;
+	protected [PropertySymbol.height]: number = 0;
 
 	/**
 	 * Constructor.
@@ -19,43 +21,43 @@ export default class DOMRectReadOnly implements IDOMRectInit {
 	 * @param [width] Width.
 	 * @param [height] Height.
 	 */
-	constructor(x?: number, y?: number, width?: number, height?: number) {
-		this._x = x || 0;
-		this._y = y || 0;
-		this._width = width || 0;
-		this._height = height || 0;
+	constructor(x?: number | null, y?: number | null, width?: number | null, height?: number | null) {
+		this[PropertySymbol.x] = x !== undefined && x !== null ? Number(x) : 0;
+		this[PropertySymbol.y] = y !== undefined && y !== null ? Number(y) : 0;
+		this[PropertySymbol.width] = width !== undefined && width !== null ? Number(width) : 0;
+		this[PropertySymbol.height] = height !== undefined && height !== null ? Number(height) : 0;
 	}
 
 	public get x(): number {
-		return this._x;
+		return this[PropertySymbol.x];
 	}
 
 	public get y(): number {
-		return this._y;
+		return this[PropertySymbol.y];
 	}
 
 	public get width(): number {
-		return this._width;
+		return this[PropertySymbol.width];
 	}
 
 	public get height(): number {
-		return this._height;
+		return this[PropertySymbol.height];
 	}
 
 	public get top(): number {
-		return Math.min(this._y, this._y + this._height);
+		return Math.min(this[PropertySymbol.y], this[PropertySymbol.y] + this[PropertySymbol.height]);
 	}
 
 	public get right(): number {
-		return Math.max(this._x, this._x + this._width);
+		return Math.max(this[PropertySymbol.x], this[PropertySymbol.x] + this[PropertySymbol.width]);
 	}
 
 	public get bottom(): number {
-		return Math.max(this._y, this._y + this._height);
+		return Math.max(this[PropertySymbol.y], this[PropertySymbol.y] + this[PropertySymbol.height]);
 	}
 
 	public get left(): number {
-		return Math.min(this._x, this._x + this._width);
+		return Math.min(this[PropertySymbol.x], this[PropertySymbol.x] + this[PropertySymbol.width]);
 	}
 
 	public toJSON(): object {

diff --git a/packages/happy-dom/test/nodes/element/DOMRect.test.ts b/packages/happy-dom/test/nodes/element/DOMRect.test.ts
@@ -6,6 +6,39 @@ describe('DOMRect', () => {
 		vi.restoreAllMocks();
 	});
 
+	describe('constructor()', () => {
+		it('Sets properties.', () => {
+			const rect = new DOMRect(1, 2, 3, 4);
+			expect(rect.x).toBe(1);
+			expect(rect.y).toBe(2);
+			expect(rect.width).toBe(3);
+			expect(rect.height).toBe(4);
+
+			const rect2 = new DOMRect(null, null, null, 4);
+			expect(rect2.x).toBe(0);
+			expect(rect2.y).toBe(0);
+			expect(rect2.width).toBe(0);
+			expect(rect2.height).toBe(4);
+
+			const rect3 = new DOMRect();
+			expect(rect3.x).toBe(0);
+			expect(rect3.y).toBe(0);
+			expect(rect3.width).toBe(0);
+			expect(rect3.height).toBe(0);
+
+			const rect4 = new DOMRect(
+				<number>(<unknown>'nan'),
+				<number>(<unknown>'nan'),
+				<number>(<unknown>'nan'),
+				<number>(<unknown>'nan')
+			);
+			expect(isNaN(rect4.x)).toBe(true);
+			expect(isNaN(rect4.y)).toBe(true);
+			expect(isNaN(rect4.width)).toBe(true);
+			expect(isNaN(rect4.height)).toBe(true);
+		});
+	});
+
 	describe('set x()', () => {
 		it('Sets rect x property.', () => {
 			const rect = new DOMRect(1, 2, 3, 4);

diff --git a/packages/happy-dom/test/nodes/element/DOMRectReadOnly.test.ts b/packages/happy-dom/test/nodes/element/DOMRectReadOnly.test.ts
@@ -6,6 +6,39 @@ describe('DOMRectReadOnly', () => {
 		vi.restoreAllMocks();
 	});
 
+	describe('constructor()', () => {
+		it('Sets properties.', () => {
+			const rect = new DOMRectReadOnly(1, 2, 3, 4);
+			expect(rect.x).toBe(1);
+			expect(rect.y).toBe(2);
+			expect(rect.width).toBe(3);
+			expect(rect.height).toBe(4);
+
+			const rect2 = new DOMRectReadOnly(null, null, null, 4);
+			expect(rect2.x).toBe(0);
+			expect(rect2.y).toBe(0);
+			expect(rect2.width).toBe(0);
+			expect(rect2.height).toBe(4);
+
+			const rect3 = new DOMRectReadOnly();
+			expect(rect3.x).toBe(0);
+			expect(rect3.y).toBe(0);
+			expect(rect3.width).toBe(0);
+			expect(rect3.height).toBe(0);
+
+			const rect4 = new DOMRectReadOnly(
+				<number>(<unknown>'nan'),
+				<number>(<unknown>'nan'),
+				<number>(<unknown>'nan'),
+				<number>(<unknown>'nan')
+			);
+			expect(isNaN(rect4.x)).toBe(true);
+			expect(isNaN(rect4.y)).toBe(true);
+			expect(isNaN(rect4.width)).toBe(true);
+			expect(isNaN(rect4.height)).toBe(true);
+		});
+	});
+
 	describe('get x()', () => {
 		it('Returns rect x property.', () => {
 			const rect = new DOMRectReadOnly(1, 2, 3, 4);