Meta: Update selector tests to expect an exact match count (refined-github#7165)

Author: fregante

package-lock.json

@@ -112,9 +112,11 @@
 		"eslint-plugin-react": "^7.33.2",
 		"eslint-plugin-react-hooks": "^4.6.0",
 		"fast-ignore": "^1.1.1",
+		"filenamify": "^6.0.0",
 		"highlight.js": "^11.9.0",
 		"mini-css-extract-plugin": "^2.7.6",
 		"npm-run-all": "^4.1.5",
+		"p-memoize": "^7.1.1",
 		"prettier": "^3.0.3",
 		"snarkdown": "^2.0.0",
 		"stylelint": "^15.11.0",

package.json

@@ -2,14 +2,10 @@ import {$$} from 'select-dom';
 import * as pageDetect from 'github-url-detection';
 
 import features from '../feature-manager.js';
-
-const selector = `
-	:is(.js-issue-row, .js-pinned-issue-list-item)
-	.Link--muted:is(a[aria-label$="comment"], a[aria-label$="comments"])
-`;
+import {openIssueToLastComment} from '../github-helpers/selectors.js';
 
 function init(): void {
-	for (const link of $$(selector)) {
+	for (const link of $$(openIssueToLastComment)) {
 		link.hash = '#issue-comment-box';
 	}
 }
@@ -19,6 +15,13 @@ void features.add(import.meta.url, {
 		pageDetect.isIssueOrPRList,
 	],
 	awaitDomReady: true,
-	deduplicate: 'has-rgh-inner',
 	init,
 });
+
+/*
+
+Test URLs:
+
+https://github.com/refined-github/sandbox/labels/bug
+
+*/

source/features/open-issue-to-latest-comment.tsx

@@ -1,7 +1,7 @@
 import {assert, test} from 'vitest';
 
 // @ts-expect-error JS only
-import {navigateToCommits} from '../../test/fixtures/globals.js';
+import {navigateToCommits} from '../../test/setup-file.js';
 import getCurrentGitRef, {getGitRef} from './get-current-git-ref.js';
 
 // The titles supplied here listed here are real, not guessed, except the error tester

source/github-helpers/get-current-git-ref.test.ts

@@ -1,13 +1,47 @@
-import mem from 'memoize';
+import pMemoize from 'p-memoize';
 import {test, assert, describe} from 'vitest';
 import {parseHTML} from 'linkedom';
+import filenamify from 'filenamify';
+import {writeFile, mkdir, unlink, readFile, access} from 'node:fs/promises';
 
 import * as exports from './selectors.js';
 
-const fetchDocument = mem(async (url: string): Promise<Window> => {
-	const request = await fetch(url);
-	const contents = await request.text();
-	return parseHTML(contents);
+const fsCache = {
+	async get(path: string): Promise<string | undefined> {
+		try {
+			const value = await readFile(path, 'utf8');
+			return value;
+		} catch {
+			return undefined;
+		}
+	},
+	async set(path: string, contents: string): Promise<void> {
+		await mkdir('./test/.cache', {recursive: true});
+		await writeFile(path, contents);
+	},
+	async has(path: string): Promise<boolean> {
+		try {
+			await access(path);
+			return true;
+		} catch {
+			return false;
+		}
+	},
+	async delete(path: string): Promise<void> {
+		await unlink(path);
+	},
+} as const;
+
+const fetchDocument = pMemoize(async (url: string): Promise<string> => {
+	const request = await fetch(url, {
+		headers: {
+			Accept: 'text/html',
+		},
+	});
+	return request.text();
+}, {
+	cacheKey: ([url]) => `./test/.cache/${filenamify(url.replace('https://github.com', ''))}.html`,
+	cache: fsCache,
 });
 
 describe.concurrent('selectors', () => {
@@ -21,13 +55,15 @@ describe.concurrent('selectors', () => {
 
 	test.each(selectors)('%s', async (name, selector) => {
 		// @ts-expect-error Index signature bs
-		const urls = exports[name + '_'] as string[];
+		const urls = exports[name + '_'] as exports.UrlMatch[];
 
 		assert.isArray(urls, `No URLs defined for "${name}"`);
-		await Promise.all(urls.map(async url => {
-			const {window} = await fetchDocument(url);
-			// It's not equivalent at the moment, but at least the tests don't fail. Let's see how it goes
-			assert.isDefined(window.document.querySelector(selector));
+		await Promise.all(urls.map(async ([expectations, url]) => {
+			const html = await fetchDocument(url);
+			const {document} = parseHTML(html);
+			// TODO: ? Use snapshot with outerHTML[]
+			const matches = document.querySelectorAll(selector);
+			assert.equal(matches.length, expectations, `Got wrong number of matches on ${url}:\n${selector}`);
 		}));
 	}, {timeout: 9999});
 });

source/github-helpers/selectors.test.ts

@@ -1,11 +1,13 @@
 import {css} from 'code-tag';
 
+export type UrlMatch = [expectations: number, url: string];
+
 /** The repo navigation bar */
 export const repoUnderlineNavUl = '.js-responsive-underlinenav ul.UnderlineNav-body';
 export const repoUnderlineNavUl_ = [
-	'https://github.com/refined-github/refined-github',
-	'https://github.com/refined-github/refined-github/releases',
-];
+	[1, 'https://github.com/refined-github/refined-github'],
+	[1, 'https://github.com/refined-github/refined-github/releases'],
+] satisfies UrlMatch[];
 
 export const standaloneGistLinkInMarkdown = css`
 	.js-comment-body p a:only-child:is(
@@ -14,23 +16,30 @@ export const standaloneGistLinkInMarkdown = css`
 	)
 ` as 'a'; // TODO: Drop after https://github.com/fregante/code-tag/issues/12
 export const standaloneGistLinkInMarkdown_ = [
-	'https://github.com/refined-github/sandbox/issues/77',
-];
+	[3, 'https://github.com/refined-github/sandbox/issues/77'],
+] satisfies UrlMatch[];
 
 /** The repo navigation bar’s overflow menu */
 export const repoUnderlineNavDropdownUl = '.js-responsive-underlinenav .dropdown-menu ul';
-export const repoUnderlineNavDropdownUl_ = repoUnderlineNavUl_;
+export const repoUnderlineNavDropdownUl_ = [
+	// Added via JS :(
+	// TOOD: Use Puppeteer?
+	[0, 'https://github.com/refined-github/refined-github'],
+	[0, 'https://github.com/refined-github/refined-github/releases'],
+] satisfies UrlMatch[];
 
 export const branchSelector = '[data-hotkey="w"]';
 export const branchSelector_ = [
-	'https://github.com/refined-github/refined-github',
-	'https://github.com/refined-github/refined-github/blob/main/readme.md',
-	'https://github.com/refined-github/refined-github/blame/main/readme.md',
-	'https://github.com/refined-github/refined-github/tree/main/source',
-	'https://github.com/refined-github/sandbox/tree/branch/with/slashes',
-	'https://github.com/refined-github/sandbox/commits/branch/with/slashes',
-	'https://github.com/refined-github/sandbox/commits',
-];
+	[1, 'https://github.com/refined-github/refined-github'],
+	// Added via JS :(
+	// TOOD: Use Puppeteer?
+	[0, 'https://github.com/refined-github/refined-github/blob/main/readme.md'],
+	[0, 'https://github.com/refined-github/refined-github/blame/main/readme.md'],
+	[0, 'https://github.com/refined-github/refined-github/tree/main/source'],
+	[1, 'https://github.com/refined-github/sandbox/tree/branch/with/slashes'],
+	[1, 'https://github.com/refined-github/sandbox/commits/branch/with/slashes'],
+	[1, 'https://github.com/refined-github/sandbox/commits'],
+] satisfies UrlMatch[];
 
 export const branchSelectorParent = 'details#branch-select-menu';
 export const branchSelectorParent_ = branchSelector_;
@@ -41,20 +50,21 @@ export const directoryListingFileIcon = [
 	'.js-navigation-container .octicon-file',
 ];
 export const directoryListingFileIcon_ = [
-	'https://github.com/refined-github/refined-github',
-	'https://github.com/refined-github/refined-github/tree/main/.github',
-];
+	[1, 'https://github.com/refined-github/refined-github'],
+	[1, 'https://github.com/refined-github/refined-github/tree/main/.github'],
+] satisfies UrlMatch[];
 
 export const prCommit = '.TimelineItem--condensed:has(.octicon-git-commit)';
 export const prCommit_ = [
-	'https://github.com/refined-github/sandbox/pull/10',
-];
+	[1, 'https://github.com/refined-github/sandbox/pull/10'],
+] satisfies UrlMatch[];
 
 // `summary` is needed because the details dropdown contains the list of check runs, each with its status icon
 export const prCommitStatusIcon = `:is(${prCommit}) details.commit-build-statuses summary .octicon`;
 export const prCommitStatusIcon_ = [
-	'https://github.com/refined-github/sandbox/pull/10',
-];
+	// Icon not loaded when logged out :(
+	[0, 'https://github.com/refined-github/sandbox/pull/10'],
+] satisfies UrlMatch[];
 
 // `.color-fg-open` is needed because of the icon added by `highlight-non-default-base-branch`
 export const openPrsListLink = css`
@@ -64,13 +74,24 @@ export const openPrsListLink = css`
 	) a.js-navigation-open
 `;
 export const openPrsListLink_ = [
-	'https://github.com/refined-github/sandbox/issues?q=conflict',
-];
+	[4, 'https://github.com/refined-github/sandbox/issues?q=conflict'],
+] satisfies UrlMatch[];
+
+export const openIssueToLastComment = `
+	:is(.js-issue-row, .js-pinned-issue-list-item)
+	.Link--muted:is(
+		a[aria-label$="comment"],
+		a[aria-label$="comments"]
+	)
+`;
+export const openIssueToLastComment_ = [
+	[2, 'https://github.com/refined-github/sandbox/labels/bug'],
+] satisfies UrlMatch[];
 
 export const actionsTab = '#actions-tab';
 export const actionsTab_ = [
-	'https://github.com/refined-github/sandbox',
-];
+	[1, 'https://github.com/refined-github/sandbox'],
+] satisfies UrlMatch[];
 
 export const codeSearchHeader = css`
 	div:has(
@@ -79,5 +100,6 @@ export const codeSearchHeader = css`
 	)
 `;
 export const codeSearchHeader_ = [
-	'https://github.com/search?q=repo%3Arefined-github%2Frefined-github&type=code',
-];
+	// Search not available when logged out :(
+	[0, 'https://github.com/search?q=repo%3Arefined-github%2Frefined-github&type=code'],
+] satisfies UrlMatch[];

source/github-helpers/selectors.ts

@@ -6,9 +6,6 @@ const globals = [
 	'HTMLAnchorElement',
 	'DocumentFragment',
 	'Node',
-
-	// Use JSDOM’s implementation because Node’s uses `pathname`’s accessors while the browser doesn’t
-	'URL',
 ];
 
 const {window} = parseHTML('...', 'text/html');

test/fixtures/globals.js test/setup-file.jstest/fixtures/globals.js renamed to test/setup-file.js

@@ -3,7 +3,7 @@ import {defineConfig} from 'vitest/config';
 export default defineConfig({
 	test: {
 		setupFiles: [
-			'./test/fixtures/globals.js',
+			'./test/setup-file.js',
 		],
 	},
 });