chore: update react-instancesearch to v7 (#57020)

Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
This commit is contained in:
Sem Bauke
2024-11-08 14:20:13 +01:00
committed by GitHub
parent 6c34c2b341
commit 228c2316ee
13 changed files with 872 additions and 361 deletions
+13 -18
View File
@@ -2,6 +2,7 @@ import { test, expect, type Page } from '@playwright/test';
import translations from '../client/i18n/locales/english/translations.json';
import algoliaEightHits from './fixtures/algolia-eight-hits.json';
import algoliaFiveHits from './fixtures/algolia-five-hits.json';
import algoliaNoHits from './fixtures/algolia-no-hits.json';
const haveApiKeys =
process.env.ALGOLIA_APP_ID !== 'app_id_from_algolia_dashboard' &&
@@ -22,7 +23,7 @@ const getSearchInput = async ({
await menuButton.click();
}
return page.getByLabel('Search');
return page.getByLabel('Search', { exact: true });
};
const search = async ({
@@ -38,6 +39,8 @@ const search = async ({
await searchInput.fill(query);
};
// Mock Algolia requests to prevent hitting Algolia server unnecessarily.
// Comment out the function call if you want to test against the real server.
const mockAlgolia = async ({
page,
hitsPerPage
@@ -46,16 +49,16 @@ const mockAlgolia = async ({
hitsPerPage: number;
}) => {
if (hitsPerPage === 8) {
await page.route(/\w+(\.algolia\.net|\.algolianet\.com)/, async route => {
await page.route(/dsn.algolia.net/, async route => {
await route.fulfill({ json: algoliaEightHits });
});
} else if (hitsPerPage === 5) {
await page.route(/\w+(\.algolia\.net|\.algolianet\.com)/, async route => {
await page.route(/dsn.algolia.net/, async route => {
await route.fulfill({ json: algoliaFiveHits });
});
} else if (hitsPerPage === 0) {
await page.route(/\w+(\.algolia\.net|\.algolianet\.com)/, async route => {
await route.fulfill({ json: {} });
await page.route(/dsn.algolia.net/, async route => {
await route.fulfill({ json: algoliaNoHits });
});
}
};
@@ -63,22 +66,14 @@ const mockAlgolia = async ({
test.describe('Search bar', () => {
test.beforeEach(async ({ page }) => {
await page.goto('/learn');
// Mock Algolia requests to prevent hitting Algolia server unnecessarily.
// Comment out this line if you want to test against the real server.
await mockAlgolia({ page, hitsPerPage: 8 });
});
test('should display correctly', async ({ page, isMobile }) => {
const searchInput = await getSearchInput({ page, isMobile });
await expect(searchInput).toBeVisible();
// Because we're mocking Algolia requests, the placeholder
// should be the default one.
await expect(searchInput).toHaveAttribute(
'placeholder',
translations.search.placeholder.default
);
await expect(searchInput).toHaveAttribute('placeholder', /Search/i);
await expect(
page.getByRole('button', { name: 'Submit search terms' })
).toBeVisible();
@@ -89,7 +84,7 @@ test.describe('Search bar', () => {
isMobile
}) => {
test.skip(!haveApiKeys, 'This test requires Algolia API keys');
await mockAlgolia({ page, hitsPerPage: 8 });
await search({ page, isMobile, query: 'article' });
// Wait for the search results to show up
@@ -114,7 +109,7 @@ test.describe('Search bar', () => {
isMobile
}) => {
test.skip(!haveApiKeys, 'This test requires Algolia API keys');
await mockAlgolia({ page, hitsPerPage: 8 });
await search({ page, isMobile, query: 'article' });
// Wait for the search results to show up
@@ -139,7 +134,7 @@ test.describe('Search bar', () => {
isMobile
}) => {
await mockAlgolia({ page, hitsPerPage: 0 });
await search({ page, isMobile, query: '!@#$%^' });
await search({ page, isMobile, query: 'test' });
const resultList = page.getByRole('list', { name: 'Search results' });
await expect(resultList.getByRole('listitem')).toHaveCount(1);