catalyst/core/tests/ui/e2e/search.spec.ts at ce366b5ec18f7457c2bb4d3d0013d4a098051628 · bigcommerce/catalyst · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
import { faker } from '@faker-js/faker';

import { expect, test } from '~/tests/fixtures';
import { getTranslations } from '~/tests/lib/i18n';

test.describe('Search', () => {
  test('Typing in the search bar displays quick search results', async ({ page, catalog }) => {
    const t = await getTranslations('Components.Header');
    const { name } = await catalog.getDefaultProduct();

    await page.goto('/');
    await page.getByRole('button', { name: t('Icons.search') }).click();
    await page.getByPlaceholder(t('Search.inputPlaceholder')).fill(name);
    await page.waitForLoadState('networkidle');

    await expect(page.getByRole('heading', { name: t('Search.categories') })).toBeVisible();
    await expect(page.getByRole('heading', { name: t('Search.brands') })).toBeVisible();
    await expect(page.getByRole('heading', { name: t('Search.products') })).toBeVisible();

    const searchResultLocator = page.getByRole('region', { name: t('Search.products') });

    await expect(searchResultLocator.getByRole('link', { name })).toBeVisible();
  });

  test('Typing in the search bar and pressing Enter goes to the Search Results page', async ({
    page,
    catalog,
  }) => {
    const t = await getTranslations();
    const { name } = await catalog.getDefaultProduct();

    await page.goto('/');
    await page.getByRole('button', { name: t('Components.Header.Icons.search') }).click();

    const searchInput = page.getByPlaceholder(t('Components.Header.Search.inputPlaceholder'));

    await searchInput.fill(name);
    await searchInput.press('Enter');
    await page.waitForLoadState('networkidle');

    await expect(
      page.getByRole('heading', { name: t('Faceted.Search.searchResults') }),
    ).toBeVisible();
    await expect(page.getByRole('link', { name })).toBeVisible();
  });

  test('Searching by SKU returns the product in the search results', async ({ page, catalog }) => {
    const t = await getTranslations('Components.Header');
    const { name, sku } = await catalog.getDefaultProduct();

    await page.goto('/');
    await page.getByRole('button', { name: t('Icons.search') }).click();
    await page.getByPlaceholder(t('Search.inputPlaceholder')).fill(sku);
    await page.waitForLoadState('networkidle');

    const searchResultLocator = page.getByRole('region', { name: t('Search.products') });

    await expect(searchResultLocator.getByRole('link', { name })).toBeVisible();
  });

  test('Searching for non-existent product displays no results', async ({ page }) => {
    const t = await getTranslations();
    const randomSearchTerm = faker.string.alphanumeric(10);

    await page.goto('/');
    await page.getByRole('button', { name: t('Components.Header.Icons.search') }).click();
    await page
      .getByPlaceholder(t('Components.Header.Search.inputPlaceholder'))
      .fill(randomSearchTerm);

    await page.waitForLoadState('networkidle');

    await expect(
      page.getByText(
        t('Components.Header.Search.noSearchResultsTitle', { term: randomSearchTerm }),
      ),
    ).toBeVisible();

    await expect(
      page.getByText(t('Components.Header.Search.noSearchResultsSubtitle')),
    ).toBeVisible();
  });

  test('Searching for non-existent product displays no results on the Search Results page', async ({
    page,
  }) => {
    const t = await getTranslations();

    await page.goto('/');
    await page.getByRole('button', { name: t('Components.Header.Icons.search') }).click();

    const searchInput = page.getByPlaceholder(t('Components.Header.Search.inputPlaceholder'));
    const randomSearchTerm = faker.string.alphanumeric(10);

    await searchInput.fill(randomSearchTerm);
    await searchInput.press('Enter');
    await page.waitForLoadState('networkidle');

    await expect(
      page.getByText(t('Faceted.Search.Empty.title', { term: randomSearchTerm })),
    ).toBeVisible();

    await expect(page.getByText(t('Faceted.Search.Empty.subtitle'))).toBeVisible();
  });

  test('Searching for a category displays in the search results', async ({ page, catalog }) => {
    const t = await getTranslations('Components.Header');
    const categories = await catalog.getCategories();
    const category = categories[0];

    if (!category) {
      test.skip(true, 'No categories found in the catalog');

      return;
    }

    const { name } = category;

    await page.goto('/');
    await page.getByRole('button', { name: t('Icons.search') }).click();

    await page.getByPlaceholder(t('Search.inputPlaceholder')).fill(name);
    await page.waitForLoadState('networkidle');

    const searchResultLocator = page.getByRole('region', { name: t('Search.categories') });

    await expect(searchResultLocator.getByRole('link', { name })).toBeVisible();
  });

  test('Searching for a brand displays in the search results', async ({ page, catalog }) => {
    const t = await getTranslations('Components.Header');
    const brands = await catalog.getBrands();
    const brand = brands[0];

    if (!brand) {
      test.skip(true, 'No brands found in the catalog');

      return;
    }

    const { name } = brand;

    await page.goto('/');
    await page.getByRole('button', { name: t('Icons.search') }).click();

    await page.getByPlaceholder(t('Search.inputPlaceholder')).fill(name);
    await page.waitForLoadState('networkidle');

    const searchResultLocator = page.getByRole('region', { name: t('Search.brands') });

    await expect(searchResultLocator.getByRole('link', { name })).toBeVisible();
  });
});