fix(metadata): ensure safe user agent detection (#993)

sarahdayan · web-flow · commit fdf2b34673d4 · 2022-06-27T14:29:25.000+02:00
diff --git a/packages/autocomplete-core/src/__tests__/metadata.test.ts b/packages/autocomplete-core/src/__tests__/metadata.test.ts
@@ -36,6 +36,29 @@ describe('metadata', () => {
     expect(document.head).toMatchInlineSnapshot(`<head />`);
   });
 
+  test('does not enable metadata with a window but no navigator', async () => {
+    createPlayground(createAutocomplete, {
+      environment: {
+        ...createEnvironmentWithUserAgent(),
+        navigator: undefined,
+      },
+    });
+
+    await defer(noop, 0);
+
+    expect(document.head).toMatchInlineSnapshot(`<head />`);
+  });
+
+  test("does not enable metadata when navigator is different from browser's (React Native)", async () => {
+    createPlayground(createAutocomplete, {
+      environment: createEnvironmentWithUserAgent(),
+    });
+
+    await defer(noop, 0);
+
+    expect(document.head).toMatchInlineSnapshot(`<head />`);
+  });
+
   test('enables metadata with Algolia Crawler user agents', async () => {
     createPlayground(createAutocomplete, {
       environment: algoliaCrawlerEnvironment,
@@ -158,7 +181,7 @@ describe('metadata', () => {
   });
 });
 
-function createEnvironmentWithUserAgent(userAgent: string) {
+function createEnvironmentWithUserAgent(userAgent?: string) {
   return {
     ...global,
     navigator: {
diff --git a/packages/autocomplete-core/src/getPropGetters.ts b/packages/autocomplete-core/src/getPropGetters.ts
@@ -170,7 +170,7 @@ export function getPropGetters<
     const { inputElement, maxLength = 512, ...rest } = providedProps || {};
     const activeItem = getActiveItem(store.getState());
 
-    const userAgent = props.environment.navigator?.userAgent;
+    const userAgent = props.environment.navigator?.userAgent || '';
     const shouldFallbackKeyHint = isSamsung(userAgent);
     const enterKeyHint =
       activeItem?.itemUrl && !shouldFallbackKeyHint ? 'go' : 'search';
diff --git a/packages/autocomplete-core/src/metadata.ts b/packages/autocomplete-core/src/metadata.ts
@@ -62,7 +62,7 @@ export function injectMetadata({
   metadata,
   environment,
 }: InlineMetadataParams) {
-  const isMetadataEnabled = environment.navigator?.userAgent.includes(
+  const isMetadataEnabled = environment.navigator?.userAgent?.includes(
     'Algolia Crawler'
   );
 
diff --git a/packages/autocomplete-core/src/types/AutocompleteEnvironment.ts b/packages/autocomplete-core/src/types/AutocompleteEnvironment.ts
@@ -11,5 +11,8 @@ export type AutocompleteEnvironment =
         assign: Location['assign'];
       };
       open: Window['open'];
-      navigator: Window['navigator'];
+      // In React Native, `navigator` is polyfilled and doesn't have all
+      // properties traditionally exposed in the browser.
+      // https://github.com/facebook/react-native/blob/8bd3edec88148d0ab1f225d2119435681fbbba33/Libraries/Core/setUpNavigator.js
+      navigator?: Partial<Window['navigator']>;
     };
diff --git a/packages/autocomplete-core/src/utils/__tests__/isSamsung.test.ts b/packages/autocomplete-core/src/utils/__tests__/isSamsung.test.ts
@@ -200,4 +200,8 @@ describe('isSamsung', () => {
       });
     });
   });
+
+  test('returns false with an empty user agent', () => {
+    expect(isSamsung('')).toEqual(false);
+  });
 });
