import { fetchMock } from '../../../test/fetch-mock.ts'; import { fetchLocalAutocomplete, fetchSuggestions, purgeSuggestionsCache, SuggestionsPopup, TermSuggestion, } from '../suggestions.ts'; import fs from 'fs'; import path from 'path'; import { LocalAutocompleter } from '../local-autocompleter.ts'; import { afterEach } from 'vitest'; import { fireEvent } from '@testing-library/dom'; const mockedSuggestionsEndpoint = '/endpoint?term='; const mockedSuggestionsResponse = [ { label: 'artist:assasinmonkey (1)', value: 'artist:assasinmonkey' }, { label: 'artist:hydrusbeta (1)', value: 'artist:hydrusbeta' }, { label: 'artist:the sexy assistant (1)', value: 'artist:the sexy assistant' }, { label: 'artist:devinian (1)', value: 'artist:devinian' }, { label: 'artist:moe (1)', value: 'artist:moe' }, ]; function mockBaseSuggestionsPopup(includeMockedSuggestions: boolean = false): [SuggestionsPopup, HTMLInputElement] { const input = document.createElement('input'); const popup = new SuggestionsPopup(); document.body.append(input); popup.showForField(input); if (includeMockedSuggestions) { popup.renderSuggestions(mockedSuggestionsResponse); } return [popup, input]; } const selectedItemClassName = 'autocomplete__item--selected'; describe('Suggestions', () => { let mockedAutocompleteBuffer: ArrayBuffer; let popup: SuggestionsPopup | undefined; let input: HTMLInputElement | undefined; beforeAll(async () => { fetchMock.enableMocks(); mockedAutocompleteBuffer = await fs.promises .readFile(path.join(__dirname, 'autocomplete-compiled-v2.bin')) .then(fileBuffer => fileBuffer.buffer); }); afterAll(() => { fetchMock.disableMocks(); }); beforeEach(() => { purgeSuggestionsCache(); fetchMock.resetMocks(); }); afterEach(() => { if (input) { input.remove(); input = undefined; } if (popup) { popup.hide(); popup = undefined; } }); describe('SuggestionsPopup', () => { it('should create the popup container', () => { [popup, input] = mockBaseSuggestionsPopup(); expect(document.querySelector('.autocomplete')).toBeInstanceOf(HTMLElement); expect(popup.isActive).toBe(true); }); it('should be removed when hidden', () => { [popup, input] = mockBaseSuggestionsPopup(); popup.hide(); expect(document.querySelector('.autocomplete')).not.toBeInstanceOf(HTMLElement); expect(popup.isActive).toBe(false); }); it('should render suggestions', () => { [popup, input] = mockBaseSuggestionsPopup(true); expect(document.querySelectorAll('.autocomplete__item').length).toBe(mockedSuggestionsResponse.length); }); it('should initially select first element when selectNext called', () => { [popup, input] = mockBaseSuggestionsPopup(true); popup.selectNext(); expect(document.querySelector('.autocomplete__item:first-child')).toHaveClass(selectedItemClassName); }); it('should initially select last element when selectPrevious called', () => { [popup, input] = mockBaseSuggestionsPopup(true); popup.selectPrevious(); expect(document.querySelector('.autocomplete__item:last-child')).toHaveClass(selectedItemClassName); }); it('should select and de-select items when hovering items over', () => { [popup, input] = mockBaseSuggestionsPopup(true); const firstItem = document.querySelector('.autocomplete__item:first-child'); const lastItem = document.querySelector('.autocomplete__item:last-child'); if (firstItem) { fireEvent.mouseOver(firstItem); fireEvent.mouseMove(firstItem); } expect(firstItem).toHaveClass(selectedItemClassName); if (lastItem) { fireEvent.mouseOver(lastItem); fireEvent.mouseMove(lastItem); } expect(firstItem).not.toHaveClass(selectedItemClassName); expect(lastItem).toHaveClass(selectedItemClassName); if (lastItem) { fireEvent.mouseOut(lastItem); } expect(lastItem).not.toHaveClass(selectedItemClassName); }); it('should allow switching between mouse and selection', () => { [popup, input] = mockBaseSuggestionsPopup(true); const secondItem = document.querySelector('.autocomplete__item:nth-child(2)'); const thirdItem = document.querySelector('.autocomplete__item:nth-child(3)'); if (secondItem) { fireEvent.mouseOver(secondItem); fireEvent.mouseMove(secondItem); } expect(secondItem).toHaveClass(selectedItemClassName); popup.selectNext(); expect(secondItem).not.toHaveClass(selectedItemClassName); expect(thirdItem).toHaveClass(selectedItemClassName); }); it('should loop around when selecting next on last and previous on first', () => { [popup, input] = mockBaseSuggestionsPopup(true); const firstItem = document.querySelector('.autocomplete__item:first-child'); const lastItem = document.querySelector('.autocomplete__item:last-child'); if (lastItem) { fireEvent.mouseOver(lastItem); fireEvent.mouseMove(lastItem); } expect(lastItem).toHaveClass(selectedItemClassName); popup.selectNext(); expect(document.querySelector(`.${selectedItemClassName}`)).toBeNull(); popup.selectNext(); expect(firstItem).toHaveClass(selectedItemClassName); popup.selectPrevious(); expect(document.querySelector(`.${selectedItemClassName}`)).toBeNull(); popup.selectPrevious(); expect(lastItem).toHaveClass(selectedItemClassName); }); it('should return selected item value', () => { [popup, input] = mockBaseSuggestionsPopup(true); expect(popup.selectedTerm).toBe(null); popup.selectNext(); expect(popup.selectedTerm).toBe(mockedSuggestionsResponse[0].value); }); it('should emit an event when item was clicked with mouse', () => { [popup, input] = mockBaseSuggestionsPopup(true); let clickEvent: CustomEvent<TermSuggestion> | undefined; const itemSelectedHandler = vi.fn((event: CustomEvent<TermSuggestion>) => { clickEvent = event; }); popup.onItemSelected(itemSelectedHandler); const firstItem = document.querySelector('.autocomplete__item'); if (firstItem) { fireEvent.click(firstItem); } expect(itemSelectedHandler).toBeCalledTimes(1); expect(clickEvent?.detail).toEqual(mockedSuggestionsResponse[0]); }); it('should not emit selection on items without value', () => { [popup, input] = mockBaseSuggestionsPopup(); popup.renderSuggestions([{ label: 'Option without value', value: '' }]); const itemSelectionHandler = vi.fn(); popup.onItemSelected(itemSelectionHandler); const firstItem = document.querySelector('.autocomplete__item:first-child')!; if (firstItem) { fireEvent.click(firstItem); } expect(itemSelectionHandler).not.toBeCalled(); }); }); describe('fetchSuggestions', () => { it('should only call fetch once per single term', () => { fetchSuggestions(mockedSuggestionsEndpoint, 'art'); fetchSuggestions(mockedSuggestionsEndpoint, 'art'); expect(fetch).toHaveBeenCalledTimes(1); }); it('should be case-insensitive to terms and trim spaces', () => { fetchSuggestions(mockedSuggestionsEndpoint, 'art'); fetchSuggestions(mockedSuggestionsEndpoint, 'Art'); fetchSuggestions(mockedSuggestionsEndpoint, ' ART '); expect(fetch).toHaveBeenCalledTimes(1); }); it('should return the same suggestions from cache', async () => { fetchMock.mockResolvedValueOnce(new Response(JSON.stringify(mockedSuggestionsResponse), { status: 200 })); const firstSuggestions = await fetchSuggestions(mockedSuggestionsEndpoint, 'art'); const secondSuggestions = await fetchSuggestions(mockedSuggestionsEndpoint, 'art'); expect(firstSuggestions).toBe(secondSuggestions); }); it('should parse and return array of suggestions', async () => { fetchMock.mockResolvedValueOnce(new Response(JSON.stringify(mockedSuggestionsResponse), { status: 200 })); const resolvedSuggestions = await fetchSuggestions(mockedSuggestionsEndpoint, 'art'); expect(resolvedSuggestions).toBeInstanceOf(Array); expect(resolvedSuggestions.length).toBe(mockedSuggestionsResponse.length); expect(resolvedSuggestions).toEqual(mockedSuggestionsResponse); }); it('should return empty array on server error', async () => { fetchMock.mockResolvedValueOnce(new Response('', { status: 500 })); const resolvedSuggestions = await fetchSuggestions(mockedSuggestionsEndpoint, 'unknown tag'); expect(resolvedSuggestions).toBeInstanceOf(Array); expect(resolvedSuggestions.length).toBe(0); }); it('should return empty array on invalid response format', async () => { fetchMock.mockResolvedValueOnce(new Response('invalid non-JSON response', { status: 200 })); const resolvedSuggestions = await fetchSuggestions(mockedSuggestionsEndpoint, 'invalid response'); expect(resolvedSuggestions).toBeInstanceOf(Array); expect(resolvedSuggestions.length).toBe(0); }); }); describe('purgeSuggestionsCache', () => { it('should clear cached responses', async () => { fetchMock.mockResolvedValueOnce(new Response(JSON.stringify(mockedSuggestionsResponse), { status: 200 })); const firstResult = await fetchSuggestions(mockedSuggestionsEndpoint, 'art'); purgeSuggestionsCache(); const resultAfterPurge = await fetchSuggestions(mockedSuggestionsEndpoint, 'art'); expect(fetch).toBeCalledTimes(2); expect(firstResult).not.toBe(resultAfterPurge); }); }); describe('fetchLocalAutocomplete', () => { it('should request binary with date-related cache key', () => { fetchMock.mockResolvedValue(new Response(mockedAutocompleteBuffer, { status: 200 })); const now = new Date(); const cacheKey = `${now.getUTCFullYear()}-${now.getUTCMonth()}-${now.getUTCDate()}`; const expectedEndpoint = `/autocomplete/compiled?vsn=2&key=${cacheKey}`; fetchLocalAutocomplete(); expect(fetch).toBeCalledWith(expectedEndpoint, { credentials: 'omit', cache: 'force-cache' }); }); it('should return auto-completer instance', async () => { fetchMock.mockResolvedValue(new Response(mockedAutocompleteBuffer, { status: 200 })); const autocomplete = await fetchLocalAutocomplete(); expect(autocomplete).toBeInstanceOf(LocalAutocompleter); }); it('should throw generic server error on failing response', async () => { fetchMock.mockResolvedValue(new Response('error', { status: 500 })); expect(() => fetchLocalAutocomplete()).rejects.toThrowError('Received error from server'); }); }); });