add tests for highlighting keyword with keyboard navigation

Nosto · Oct 24, 2023 · b44c7e3 · b44c7e3
1 parent bd9dc5a
commit b44c7e3
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 1 deletion.
diff --git a/spec/autocomplete.spec.ts b/spec/autocomplete.spec.ts
@@ -261,7 +261,7 @@ describe('history', () => {
     it('should see results after typing', async () => {
         const user = userEvent.setup()
         handleAutocomplete()
-        
+
         await user.type(screen.getByTestId('input'), 're')
         await waitFor(
             () => {
@@ -405,4 +405,32 @@ describe('history', () => {
             expect(screen.queryByText('re')).toBeNull()
         })
     })
+
+    it('should highlight history keyword with keyboard navigation', async () => {
+        const user = userEvent.setup()
+        handleAutocomplete()
+
+        await user.clear(screen.getByTestId('input'))
+        await user.type(screen.getByTestId('input'), 're')
+        await user.click(screen.getByTestId('search-button'))
+        await user.clear(screen.getByTestId('input'))
+        await user.type(screen.getByTestId('input'), 'black')
+        await user.click(screen.getByTestId('search-button'))
+        await user.clear(screen.getByTestId('input'))
+
+        await waitFor(() => {
+            expect(screen.getByText('black')).toBeVisible()
+            expect(screen.getByText('re')).toBeVisible()
+        })
+
+        await user.keyboard('{arrowdown}')
+        await user.keyboard('{arrowdown}')
+        await user.keyboard('{arrowup}')
+
+        await waitFor(() => {
+            expect(screen.getByText('black')).toHaveClass(
+                'selected',
+            )
+        })
+    })
 })
diff --git a/spec/liquid.spec.ts b/spec/liquid.spec.ts
@@ -374,6 +374,21 @@ describe('fromRemoteLiquidTemplate', () => {
     })
 
     describe('history', () => {
+        // beforeEach(() => {
+        //     setup()
+        // })
+
+        // afterEach(() => {
+        //     jest.restoreAllMocks()
+
+        //     const dropdown = screen.getByTestId('dropdown')
+        //     const newElement = dropdown.cloneNode(true)
+        //     dropdown?.parentNode?.replaceChild(newElement, dropdown)
+
+        //     const w = window as any
+        //     w.nostojs = undefined
+        //     w.nosto = undefined
+        // })
         it('should see results after typing', async () => {
             const user = userEvent.setup()
             handleAutocomplete()
@@ -521,5 +536,33 @@ describe('fromRemoteLiquidTemplate', () => {
                 expect(screen.queryByText('re')).toBeNull()
             })
         })
+
+        it('should highlight history keyword with keyboard navigation', async () => {
+            const user = userEvent.setup()
+            handleAutocomplete()
+
+            await user.clear(screen.getByTestId('input'))
+            await user.type(screen.getByTestId('input'), 're')
+            await user.click(screen.getByTestId('search-button'))
+            await user.clear(screen.getByTestId('input'))
+            await user.type(screen.getByTestId('input'), 'black')
+            await user.click(screen.getByTestId('search-button'))
+            await user.clear(screen.getByTestId('input'))
+
+            await waitFor(() => {
+                expect(screen.getByText('black')).toBeVisible()
+                expect(screen.getByText('re')).toBeVisible()
+            })
+
+            await user.keyboard('{arrowdown}')
+            await user.keyboard('{arrowdown}')
+            await user.keyboard('{arrowup}')
+
+            await waitFor(() => {
+                expect(screen.getByText('black')).toHaveClass(
+                    'selected',
+                )
+            })
+        })
     })
 })