From 4cafcaeedc1090f27c2a4b4c5bb3141783134980 Mon Sep 17 00:00:00 2001 From: Copilot <198982749+Copilot@users.noreply.github.com> Date: Sun, 8 Mar 2026 14:13:18 +0900 Subject: [PATCH] fix: spurious unsaved-changes warning when navigating between test cases in a test run (#406) Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: kimatata <117462761+kimatata@users.noreply.github.com> --- frontend/utils/formGuard.test.ts | 103 ++++++++++++++++++++++++++++++ frontend/utils/formGuard.ts | 18 +++++- package-lock.json | 106 ++++++++++++++++++++++++++++++- package.json | 2 + 4 files changed, 223 insertions(+), 6 deletions(-) create mode 100644 frontend/utils/formGuard.test.ts diff --git a/frontend/utils/formGuard.test.ts b/frontend/utils/formGuard.test.ts new file mode 100644 index 0000000..db09668 --- /dev/null +++ b/frontend/utils/formGuard.test.ts @@ -0,0 +1,103 @@ +// @vitest-environment happy-dom +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'; + +// mock cleanup +let cleanupFn: (() => void) | undefined; +vi.mock('react', () => ({ + useEffect: (fn: () => void) => { + cleanupFn = fn() as (() => void) | undefined; + }, +})); + +import { useFormGuard } from './formGuard'; + +describe('useFormGuard', () => { + let confirmSpy: ReturnType; + + beforeEach(() => { + // @ts-expect-error - we will mock confirm + confirmSpy = vi.spyOn(window, 'confirm'); + cleanupFn = undefined; + }); + + afterEach(() => { + cleanupFn?.(); + cleanupFn = undefined; + vi.restoreAllMocks(); + document.body.innerHTML = ''; + }); + + // helper: simulate clicking an anchor + const clickAnchor = (href: string, target?: string): MouseEvent => { + const anchor = document.createElement('a'); + anchor.setAttribute('href', href); + if (target) anchor.setAttribute('target', target); + document.body.appendChild(anchor); + + const event = new MouseEvent('click', { bubbles: true, cancelable: true }); + anchor.dispatchEvent(event); + return event; + }; + + describe('Basic functionality', () => { + it('does not show confirm when form is clean', () => { + useFormGuard(false, 'Leave?'); + clickAnchor('/some-path'); + + expect(confirmSpy).not.toHaveBeenCalled(); + }); + + it('shows confirm with the given text when dirty', () => { + confirmSpy.mockReturnValue(true); + useFormGuard(true, 'Are you sure?'); + clickAnchor('/other-page'); + + expect(confirmSpy).toHaveBeenCalledWith('Are you sure?'); + }); + + it('prevents navigation when dirty and user cancels confirm', () => { + confirmSpy.mockReturnValue(false); + useFormGuard(true, 'Leave?'); + + const event = clickAnchor('/other-page'); + expect(event.defaultPrevented).toBe(true); + }); + + it('allows navigation when dirty and user confirms', () => { + confirmSpy.mockReturnValue(true); + useFormGuard(true, 'Leave?'); + + const event = clickAnchor('/other-page'); + expect(event.defaultPrevented).toBe(false); + }); + }); + + describe('external links', () => { + it('does not show confirm for anchor with target="_blank"', () => { + useFormGuard(true, 'Leave?'); + clickAnchor('https://example.com', '_blank'); + + expect(confirmSpy).not.toHaveBeenCalled(); + }); + }); + + describe('UnitTCMS use case', () => { + it('does not show confirm when navigating to case detail page of test run', () => { + const projectId = '1'; + const runId = '2'; + useFormGuard(true, 'Leave?', [`/projects/${projectId}/runs/${runId}/cases/\\d+`]); + clickAnchor(`/projects/${projectId}/runs/${runId}/cases/123`); + + expect(confirmSpy).not.toHaveBeenCalled(); + }); + + it('shows confirm when navigating to test cases page', () => { + const projectId = '1'; + const runId = '2'; + useFormGuard(true, 'Leave?', [`/projects/${projectId}/runs/${runId}/cases/\\d+`]); + clickAnchor(`/projects/${projectId}/runs/${runId}/cases`); + + expect(confirmSpy).toHaveBeenCalled(); + }); + }); +}); diff --git a/frontend/utils/formGuard.ts b/frontend/utils/formGuard.ts index cc5a468..5db3447 100644 --- a/frontend/utils/formGuard.ts +++ b/frontend/utils/formGuard.ts @@ -1,7 +1,19 @@ import { useEffect } from 'react'; -export const useFormGuard = (isDirty: boolean, confirmText: string, ignorePaths?: string[]) => { +const isIgnoredPath = (href: string, compiledPatterns: RegExp[]): boolean => { + return compiledPatterns.some((regex) => regex.test(href)); +}; + +export const useFormGuard = (isDirty: boolean, confirmText: string, ignorePathPatterns?: string[]) => { useEffect(() => { + const compiledPatterns: RegExp[] = (ignorePathPatterns ?? []).flatMap((pattern) => { + try { + return [new RegExp(pattern)]; + } catch { + return []; + } + }); + const handleClick = (event: MouseEvent) => { if (!isDirty) return; @@ -13,7 +25,7 @@ export const useFormGuard = (isDirty: boolean, confirmText: string, ignorePaths? if (!href) return; // do not show confirm for ignored paths - if (ignorePaths && ignorePaths.some((path) => href.includes(path))) { + if (isIgnoredPath(href, compiledPatterns)) { return; } @@ -38,5 +50,5 @@ export const useFormGuard = (isDirty: boolean, confirmText: string, ignorePaths? window.removeEventListener('beforeunload', handleBeforeUnload); window.removeEventListener('click', handleClick, true); }; - }, [confirmText, isDirty, ignorePaths]); + }, [confirmText, isDirty, ignorePathPatterns]); }; diff --git a/package-lock.json b/package-lock.json index 5ecd736..6ea78d4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,7 +19,9 @@ "eslint-plugin-react": "^7.37.5", "express": "^4.21.0", "globals": "^16.0.0", + "happy-dom": "^20.8.3", "prettier": "^3.3.3", + "react": "^19.2.4", "sequelize": "^6.37.4", "sqlite3": "^5.1.7", "supertest": "^7.1.4", @@ -50,10 +52,11 @@ } }, "node_modules/@babel/helper-validator-identifier": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz", - "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==", + "version": "7.28.5", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz", + "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==", "dev": true, + "license": "MIT", "engines": { "node": ">=6.9.0" } @@ -1255,6 +1258,23 @@ "integrity": "sha512-2ipwZ2NydGQJImne+FhNdhgRM37e9lCev99KnqkbFHd94Xn/mErARWI1RSLem1QA19ch5kOhzIZd7e8CA2FI8g==", "dev": true }, + "node_modules/@types/whatwg-mimetype": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@types/whatwg-mimetype/-/whatwg-mimetype-3.0.2.tgz", + "integrity": "sha512-c2AKvDT8ToxLIOUlN51gTiHXflsfIFisS4pO7pDPoKouJCESkhZnEy623gwP9laCy5lnLDAw1vAzu2vM2YLOrA==", + "dev": true, + "license": "MIT" + }, + "node_modules/@types/ws": { + "version": "8.18.1", + "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz", + "integrity": "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/node": "*" + } + }, "node_modules/@typescript-eslint/eslint-plugin": { "version": "8.29.1", "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.29.1.tgz", @@ -1289,6 +1309,7 @@ "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.29.1.tgz", "integrity": "sha512-zczrHVEqEaTwh12gWBIJWj8nx+ayDcCJs06yoNMY0kwjMWDM6+kppljY+BxWI06d2Ja+h4+WdufDcwMnnMEWmg==", "dev": true, + "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "8.29.1", "@typescript-eslint/types": "8.29.1", @@ -1838,6 +1859,7 @@ "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz", "integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==", "dev": true, + "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -2938,6 +2960,19 @@ "once": "^1.4.0" } }, + "node_modules/entities": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz", + "integrity": "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==", + "dev": true, + "license": "BSD-2-Clause", + "engines": { + "node": ">=0.12" + }, + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } + }, "node_modules/env-paths": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz", @@ -3182,6 +3217,7 @@ "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.24.0.tgz", "integrity": "sha512-eh/jxIEJyZrvbWRe4XuVclLPDYSYYYgLy5zXGGxD6j8zjSAxFEzI2fL/8xNq6O2yKqVt+eF2YhV+hxjV6UKXwQ==", "dev": true, + "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.12.1", @@ -3361,6 +3397,7 @@ "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.31.0.tgz", "integrity": "sha512-ixmkI62Rbc2/w8Vfxyh1jQRTdRTF52VxwRVHl/ykPAmqG+Nb7/kNn+byLP0LxPgI7zWA16Jt82SybJInmMia3A==", "dev": true, + "peer": true, "dependencies": { "@rtsao/scc": "^1.1.0", "array-includes": "^3.1.8", @@ -4220,6 +4257,25 @@ "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==", "dev": true }, + "node_modules/happy-dom": { + "version": "20.8.3", + "resolved": "https://registry.npmjs.org/happy-dom/-/happy-dom-20.8.3.tgz", + "integrity": "sha512-lMHQRRwIPyJ70HV0kkFT7jH/gXzSI7yDkQFe07E2flwmNDFoWUTRMKpW2sglsnpeA7b6S2TJPp98EbQxai8eaQ==", + "dev": true, + "license": "MIT", + "peer": true, + "dependencies": { + "@types/node": ">=20.0.0", + "@types/whatwg-mimetype": "^3.0.2", + "@types/ws": "^8.18.1", + "entities": "^7.0.1", + "whatwg-mimetype": "^3.0.0", + "ws": "^8.18.3" + }, + "engines": { + "node": ">=20.0.0" + } + }, "node_modules/has-bigints": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz", @@ -6349,6 +6405,16 @@ "node": ">=0.10.0" } }, + "node_modules/react": { + "version": "19.2.4", + "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz", + "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -7498,6 +7564,7 @@ "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz", "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==", "dev": true, + "peer": true, "engines": { "node": ">=12" }, @@ -7974,6 +8041,7 @@ "resolved": "https://registry.npmjs.org/vitest/-/vitest-1.6.1.tgz", "integrity": "sha512-Ljb1cnSJSivGN0LqXd/zmDbWEM0RNNg2t1QW/XUhYl/qPqyu7CsqeWtqQXHVaJsecLPuDoak2oJcZN2QoRIOag==", "dev": true, + "peer": true, "dependencies": { "@vitest/expect": "1.6.1", "@vitest/runner": "1.6.1", @@ -8034,6 +8102,16 @@ } } }, + "node_modules/whatwg-mimetype": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz", + "integrity": "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + } + }, "node_modules/which": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", @@ -8184,6 +8262,28 @@ "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==", "dev": true }, + "node_modules/ws": { + "version": "8.19.0", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.19.0.tgz", + "integrity": "sha512-blAT2mjOEIi0ZzruJfIhb3nps74PRWTCz1IjglWEEpQl5XS/UNama6u2/rjFkDDouqr4L67ry+1aGIALViWjDg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=10.0.0" + }, + "peerDependencies": { + "bufferutil": "^4.0.1", + "utf-8-validate": ">=5.0.2" + }, + "peerDependenciesMeta": { + "bufferutil": { + "optional": true + }, + "utf-8-validate": { + "optional": true + } + } + }, "node_modules/yallist": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", diff --git a/package.json b/package.json index a8df1ae..190d631 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,9 @@ "eslint-plugin-react": "^7.37.5", "express": "^4.21.0", "globals": "^16.0.0", + "happy-dom": "^20.8.3", "prettier": "^3.3.3", + "react": "^19.2.4", "sequelize": "^6.37.4", "sqlite3": "^5.1.7", "supertest": "^7.1.4",