NTP: Display URL in if Omnibar suggestion title is empty (#1825)

* Display URL if suggestion title is empty

* Add unit tests for getSuggestionTitle

* Fix importing JSX into tests

Author: noisysocks

special-pages/package.json

@@ -10,7 +10,7 @@
     "build": "node index.mjs",
     "build.dev": "npm run build -- --env development",
     "lint-fix": "cd ../ && npm run lint-fix",
-    "test-unit": "node --test \"unit-test/*\" \"pages/history/unit-tests/*\" \"pages/duckplayer/unit-tests/*\" \"pages/new-tab/app/freemium-pir-banner/unit-tests/*\"",
+    "test-unit": "node --test \"unit-test/*\" \"pages/history/unit-tests/*\" \"pages/duckplayer/unit-tests/*\" \"pages/new-tab/app/freemium-pir-banner/unit-tests/*\" \"pages/new-tab/app/omnibar/unit-tests/*\"",
     "test-int": "playwright test --grep-invert '@screenshots'",
     "test-int-x": "npm run test-int",
     "test-int-snapshots": "playwright test --grep '@screenshots'",

special-pages/pages/new-tab/app/omnibar/components/useSuggestions.js

@@ -1,6 +1,7 @@
 import { useContext, useEffect, useReducer } from 'preact/hooks';
 import { eventToTarget } from '../../../../../shared/handlers.js';
 import { usePlatformName } from '../../settings.provider.js';
+import { getSuggestionTitle } from '../utils.js';
 import { OmnibarContext } from './OmnibarProvider.js';
 
 /**
@@ -264,31 +265,6 @@ export function useSuggestions({ term, onChangeTerm, onOpenSuggestion, onSubmitS
     };
 }
 
-/**
- * @param {Suggestion} suggestion
- * @returns {string}
- */
-function getSuggestionTitle(suggestion) {
-    switch (suggestion.kind) {
-        case 'bookmark':
-            return suggestion.title;
-        case 'historyEntry':
-            return suggestion.title;
-        case 'phrase':
-            return suggestion.phrase;
-        case 'openTab':
-            return suggestion.title;
-        case 'website': {
-            const url = new URL(suggestion.url);
-            return url.host + url.pathname + url.search + url.hash;
-        }
-        case 'internalPage':
-            return suggestion.title;
-        default:
-            throw new Error('Unknown suggestion kind');
-    }
-}
-
 /**
  * @param {string} text
  * @param {string} searchTerm

special-pages/pages/new-tab/app/omnibar/unit-tests/utils.spec.js

@@ -0,0 +1,74 @@
+import { test } from 'node:test';
+import { equal, throws } from 'node:assert/strict';
+import { getSuggestionTitle } from '../utils.js';
+
+/**
+ * @typedef {import('../../../types/new-tab.js').Suggestion} Suggestion
+ */
+
+test.describe('getSuggestionTitle', () => {
+    test('returns title for bookmark', () => {
+        /** @type {Suggestion} */
+        const suggestion = { kind: 'bookmark', title: 'pizzahut.com', url: 'pizzahut.com', isFavorite: true, score: 97 };
+        equal(getSuggestionTitle(suggestion), 'pizzahut.com');
+    });
+
+    test('returns display URL for bookmark without title', () => {
+        /** @type {Suggestion} */
+        const suggestion = { kind: 'bookmark', title: '', url: 'https://dominos.com/order?pizza#special', isFavorite: false, score: 96 };
+        equal(getSuggestionTitle(suggestion), 'dominos.com/order?pizza#special');
+    });
+
+    test('returns title for historyEntry', () => {
+        /** @type {Suggestion} */
+        const suggestion = {
+            kind: 'historyEntry',
+            title: 'Best Pizza Places in New York',
+            url: 'https://example.com/search?q=Best%20Pizza%20Places%20in%20New%20York',
+            score: 87,
+        };
+        equal(getSuggestionTitle(suggestion), 'Best Pizza Places in New York');
+    });
+
+    test('returns display URL for historyEntry without title', () => {
+        /** @type {Suggestion} */
+        const suggestion = { kind: 'historyEntry', title: '', url: 'https://example.com/search?q=Pizza%20Dough%20Calculator', score: 85 };
+        equal(getSuggestionTitle(suggestion), 'example.com/search?q=Pizza%20Dough%20Calculator');
+    });
+
+    test('returns title for internalPage', () => {
+        /** @type {Suggestion} */
+        const suggestion = { kind: 'internalPage', title: 'Settings', url: 'duck://settings', score: 1 };
+        equal(getSuggestionTitle(suggestion), 'Settings');
+    });
+
+    test('returns display URL for internalPage without title', () => {
+        /** @type {Suggestion} */
+        const suggestion = { kind: 'internalPage', title: '', url: 'duck://settings', score: 2 };
+        equal(getSuggestionTitle(suggestion), 'settings');
+    });
+
+    test('returns phrase for phrase kind', () => {
+        /** @type {Suggestion} */
+        const suggestion = { kind: 'phrase', phrase: 'pizza delivery' };
+        equal(getSuggestionTitle(suggestion), 'pizza delivery');
+    });
+
+    test('returns title for openTab', () => {
+        /** @type {Suggestion} */
+        const suggestion = { kind: 'openTab', title: 'Pizza Dough Calculator', tabId: 'tab-1', score: 1 };
+        equal(getSuggestionTitle(suggestion), 'Pizza Dough Calculator');
+    });
+
+    test('returns display URL for website', () => {
+        /** @type {Suggestion} */
+        const suggestion = { kind: 'website', url: 'https://pizzaexpress.com/menu#vegetarian' };
+        equal(getSuggestionTitle(suggestion), 'pizzaexpress.com/menu#vegetarian');
+    });
+
+    test('throws error for unknown kind', () => {
+        /** @type {any} */
+        const suggestion = { kind: 'unknown' };
+        throws(() => getSuggestionTitle(suggestion), { message: 'Unknown suggestion kind' });
+    });
+});

special-pages/pages/new-tab/app/omnibar/utils.js

@@ -0,0 +1,33 @@
+/**
+ * @typedef {import('../../types/new-tab.js').Suggestion} Suggestion
+ */
+
+/**
+ * @param {Suggestion} suggestion
+ * @returns {string}
+ */
+export function getSuggestionTitle(suggestion) {
+    switch (suggestion.kind) {
+        case 'bookmark':
+        case 'historyEntry':
+        case 'internalPage':
+            return suggestion.title || getDisplayURL(suggestion.url);
+        case 'phrase':
+            return suggestion.phrase;
+        case 'openTab':
+            return suggestion.title;
+        case 'website':
+            return getDisplayURL(suggestion.url);
+        default:
+            throw new Error('Unknown suggestion kind');
+    }
+}
+
+/**
+ * @param {string} url
+ * @returns {string}
+ */
+function getDisplayURL(url) {
+    const { host, pathname, search, hash } = new URL(url);
+    return host + pathname + search + hash;
+}