Fix taskbarless minimization layout

The positioning of windows when minimized without a taskbar was broken in 82c4f2896990 when adding conversion to strings to resolve type checking errors. I think I was exhausted, judging by the "This is exhausting." in the commit message. Actually, the type errors were not due to these being numbers, but due to `titlebar_height` being possibly `undefined`. Also, I've started adding tests for the windowing system.
1j01 · Jun 5, 2024 · ce0a55d · ce0a55d
1 parent 574375b
commit ce0a55d
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 4 deletions.
diff --git a/$Window.js b/$Window.js
@@ -717,9 +717,9 @@ function $Window(options = {}) {
 						$w.css({
 							position: "fixed",
 							top: `calc(100% - ${titlebar_height + 5}px)`,
-							left: `${to_x}`,
-							width: `${to_width}`,
-							height: `${titlebar_height}`,
+							left: `${to_x}px`,
+							width: `${to_width}px`,
+							height: `${titlebar_height}px`,
 						});
 					}
 				};

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,7 +12,9 @@ The API is unstable, and [Semantic Versioning](https://semver.org/spec/v2.0.0.ht
 		Click to see more.
 	</summary>
 
-Nothing here yet.
+### Fixed
+
+- Fixed positioning of windows when minimized without a taskbar.
 
 </details>
 

diff --git a/cypress/e2e/windows.cy.js b/cypress/e2e/windows.cy.js
@@ -0,0 +1,48 @@
+/// <reference types="cypress" />
+
+describe('$Window Component', () => {
+	beforeEach(() => {
+		cy.visit('cypress/fixtures/window-test-page.html');
+		cy.viewport(300, 300);
+	});
+
+	// TODO: test menu bar in window; should be hidden when minimized (FIXME), and should be visible when restored; keyboard scope
+	// also, window dragging, resizing, restoring from maximize, restoring from minimize, and focus management with iframes and setting z-index, tabstop wrapping...
+
+	it('should minimize to the bottom left by default', () => {
+		cy.window().then((win) => {
+			const $window = win.$Window({
+				title: 'Test Window',
+				maximizeButton: true,
+				minimizeButton: true,
+				closeButton: true,
+			});
+			$window.minimize();
+			// These exact values may not be perfectly accurate to Windows 98, but it's easier to test exact values than proximity.
+			cy.get('.window').should('have.css', 'bottom', '-3px'); // result of `calc(100% - ${titlebar_height + 5}px)`
+			cy.get('.window').should('have.css', 'left', '10px'); // hardcoded `spacing`
+
+			cy.then(() => {
+				const $window2 = win.$Window({
+					title: 'Test Window 2',
+					minimizeButton: true,
+				});
+				$window2.minimize();
+				cy.get('.window').last().should('have.css', 'bottom', '-3px');
+				cy.get('.window').last().should('have.css', 'left', '170px'); // result of `spacing` + `to_width` + `spacing`
+				cy.then(() => {
+					const $window3 = win.$Window({
+						title: 'Test Window 3',
+						minimizeButton: true,
+					});
+					$window.close(); // free up slot
+					$window3.minimize();
+					cy.get('.window').should('have.length', 2);
+					cy.get('.window').last().should('have.css', 'bottom', '-3px');
+					// cy.get('.window').last().should('have.css', 'left', '10px'); // FIXME: it's getting placed in the third slot, not the first
+				});
+			});
+		});
+	});
+});
+
diff --git a/cypress/fixtures/window-test-page.html b/cypress/fixtures/window-test-page.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<title>OS GUI — $Window component tests</title>
+	<link href="../../build/layout.css" rel="stylesheet" type="text/css">
+	<link href="../../build/windows-98.css" rel="stylesheet" type="text/css">
+	<link href="../../build/windows-default.css" rel="stylesheet" title="Windows Default" type="text/css">
+	<link href="../../build/peggys-pastels.css" rel="alternate stylesheet" title="Peggy's Pastels" type="text/css">
+	<link rel="icon" href="../../images/os-gui-favicon.png" type="image/png">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+
+<body>
+	<script src="../../demo/lib/jquery-3.3.1.js"></script>
+	<script src="../../MenuBar.js"></script>
+	<script src="../../$Window.js"></script>
+	<script src="../../parse-theme.js"></script>
+</body>
+
+</html>