resolve comments: update tests + docs

sajari · Feb 8, 2023 · cca168c · cca168c
1 parent fe9ea75
commit cca168c
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 26 deletions.
diff --git a/.changeset/plenty-goats-tan.md b/.changeset/plenty-goats-tan.md
diff --git a/.changeset/strong-tomatoes-sneeze.md b/.changeset/strong-tomatoes-sneeze.md
@@ -0,0 +1,6 @@
+---
+'@sajari/react-search-ui': minor
+'sajari-sdk-docs': patch
+---
+
+feat: make redirects case-insensitive for search input component
diff --git a/docs/pages/search-ui/input.mdx b/docs/pages/search-ui/input.mdx
@@ -133,6 +133,12 @@ function Example() {
 }
 ```
 
+### Note
+
+The `Input` component treats redirects as _case-insensitive_, meaning the user-inputted value `Computer` returns the redirect for the query `computer` and vice versa.
+
+The component does not support the handling of multiple redirects for queries of the same word with varied letter casing. For example, if you have created redirects for each of the queries `computer`, `Computer`, and `COMPUTER`, only one of them is used (dependent upon your browser).
+
 ## Results
 
 ```jsx

diff --git a/packages/search-ui/src/Input/index.test.tsx b/packages/search-ui/src/Input/index.test.tsx
@@ -16,6 +16,12 @@ const redirectTarget = {
   token:
     'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJwdXJwb3NlIjoic2VhcmNoIiwiZGVzdGluYXRpb24iOiJodHRwOi8vdGFyZ2V0LmNvbS5hdS9zaGVldHMiLCJ2YWxzIjp7ImNvbGxlY3Rpb24iOlsiYmVzdGJ1eSJdLCJpZGVudGlmaWVyIjpbInJlZGlyZWN0Il0sInByb2plY3QiOlsiMTU5NDE1MzcxMTkwMTcyNDIyMCJdLCJxIjpbInNoZWV0cyJdLCJxLmlkIjpbIjc2ZGJiOGU2LWE3MDctNDU2NC1iYTYxLWY0NjNiYTRhZDdlYSJdLCJxLnVpZCI6WyI3NmRiYjhlNi1hNzA3LTQ1NjQtYmE2MS1mNDYzYmE0YWQ3ZWEwIl0sInJlZGlyZWN0LkNvbmRpdGlvbiI6WyJxIH4gJ3NoZWV0cyciXSwicmVkaXJlY3QuSUQiOlsiMjJ3MFZGdkdWYVlhQ1Jzc0NBUm11YkQ2bGdUIl0sInJlZGlyZWN0LlRhcmdldCI6WyJodHRwOi8vdGFyZ2V0LmNvbS5hdS9zaGVldHMiXX19.BhcAVPB4z9LjlIoV42CUaEW-H0qCJ2JKngs6OGAXTf8',
 };
+const redirectTarget2 = {
+  id: '12w0VFvGVaYaCRssCARmubD6lgA',
+  target: 'http://target.com.au/sheets2',
+  token:
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJwdXJwb3NlIjoic2VhcmNoIiwiZGVzdGluYXRpb24iOiJodHRwOi8vdGFyZ2V0LmNvbS5hdS9zaGVldHMiLCJ2YWxzIjp7ImNvbGxlY3Rpb24iOlsiYmVzdGJ1eSJdLCJpZGVudGlmaWVyIjpbInJlZGlyZWN0Il0sInByb2plY3QiOlsiMTU5NDE1MzcxMTkwMTcyNDIyMCJdLCJxIjpbInNoZWV0cyJdLCJxLmlkIjpbIjc2ZGJiOGU2LWE3MDctNDU2NC1iYTYxLWY0NjNiYTRhZDdlYSJdLCJxLnVpZCI6WyI3NmRiYjhlNi1hNzA3LTQ1NjQtYmE2MS1mNDYzYmE0YWQ3ZWEwIl0sInJlZGlyZWN0LkNvbmRpdGlvbiI6WyJxIH4gJ3NoZWV0cyciXSwicmVkaXJlY3QuSUQiOlsiMjJ3MFZGdkdWYVlhQ1Jzc0NBUm11YkQ2bGdUIl0sInJlZGlyZWN0LlRhcmdldCI6WyJodHRwOi8vdGFyZ2V0LmNvbS5hdS9zaGVldHMiXX19.BhcAVPB4z9LjlIoV42CUaEW-H0qCJ2JKngs6OGAXTf9',
+};
 const iPhoneResult = {
   values: {
     _id: {
@@ -53,6 +59,7 @@ const server = setupServer(
         },
         redirects: {
           sheets: redirectTarget,
+          Sheets: redirectTarget2,
         },
         searchResponse: {
           reads: '141',
@@ -77,6 +84,7 @@ describe('Input', () => {
   });
   afterEach(() => {
     jest.clearAllMocks();
+    jest.resetAllMocks();
     server.resetHandlers();
   });
   afterAll(() => {
@@ -92,28 +100,12 @@ describe('Input', () => {
     const input = screen.getByTestId('mysearch');
     input.focus(); // need this else we get TypeError: element.ownerDocument.getSelection is not a function
     await user.keyboard('sheets');
-    await waitFor(() => expect(screen.getByText('suggestion')).toBeInTheDocument());
+    await waitFor(() => expect(screen.getByRole('option')).toHaveTextContent('suggestion'));
     await user.keyboard('{enter}');
 
     expect(onRedirectSpy).toHaveBeenCalledWith({
-      ...redirectTarget,
-      token: `https://re.sajari.com/token/${redirectTarget.token}`, // sdk-js prepends the clickTokenURL
-    });
-  });
-
-  it('ignores letter casing of input query on redirect lookup', async () => {
-    const onRedirectSpy = jest.spyOn(eventTrackingPipeline.getTracking(), 'onRedirect');
-    customRender(<Input data-testid="mysearch" mode="suggestions" />, {
-      search: { pipeline: eventTrackingPipeline },
-    });
-    const input = screen.getByTestId('mysearch');
-    input.focus(); // need this else we get TypeError: element.ownerDocument.getSelection is not a function
-    await user.keyboard('ShEeTs');
-    await waitFor(() => expect(screen.getByText('suggestion')).toBeInTheDocument());
-    await user.keyboard('{enter}');
-    expect(onRedirectSpy).toHaveBeenCalledWith({
-      ...redirectTarget,
-      token: `https://re.sajari.com/token/${redirectTarget.token}`, // sdk-js prepends the clickTokenURL
+      ...redirectTarget2,
+      token: `https://re.sajari.com/token/${redirectTarget2.token}`, // sdk-js appends the clickTokenURL
     });
   });
 
@@ -172,3 +164,31 @@ describe('Input', () => {
     await waitFor(() => expect(input.attributes.getNamedItem('readonly')).toBeNull());
   });
 });
+
+describe('redirects', () => {
+  beforeAll(() => {
+    server.listen({ onUnhandledRequest: 'warn' });
+  });
+  afterAll(() => {
+    jest.restoreAllMocks();
+    server.close();
+  });
+
+  it('ignores letter casing of input query on redirect lookup', async () => {
+    const onRedirectSpy = jest.spyOn(eventTrackingPipeline.getTracking(), 'onRedirect');
+    customRender(<Input data-testid="mysearch" mode="suggestions" />, {
+      search: { pipeline: eventTrackingPipeline },
+    });
+    const input = screen.getByTestId('mysearch');
+    input.focus(); // need this else we get TypeError: element.ownerDocument.getSelection is not a function
+    await userEvent.type(input, 'ShEeTs');
+    await waitFor(() => expect(screen.getByRole('option')).toHaveTextContent('suggestion'));
+    await userEvent.keyboard('{enter}');
+    await waitFor(() => {
+      expect(onRedirectSpy).toHaveBeenCalledWith({
+        ...redirectTarget2,
+        token: `https://re.sajari.com/token/${redirectTarget2.token}`, // sdk-js appends the clickTokenURL
+      });
+    });
+  });
+});
diff --git a/packages/search-ui/src/Input/utils/index.test.ts b/packages/search-ui/src/Input/utils/index.test.ts
@@ -5,13 +5,14 @@ test('lowercaseRedirects', () => {
     FoO: { id: '1', target: 'a' },
     BAR: { id: '2', target: 'b' },
     baz: { id: '3', target: 'c' },
-    Test: { id: '4', target: 'd' },
+    test: { id: '4', target: 'd' },
+    Test: { id: '5', target: 'e' },
   };
   const want = {
     foo: { id: '1', target: 'a' },
     bar: { id: '2', target: 'b' },
     baz: { id: '3', target: 'c' },
-    test: { id: '4', target: 'd' },
+    test: { id: '5', target: 'e' },
   };
 
   const got = lowercaseObjectKeys(redirects);