|
| 1 | +/* |
| 2 | + * Copyright (c) 2021, salesforce.com, inc. |
| 3 | + * All rights reserved. |
| 4 | + * SPDX-License-Identifier: BSD-3-Clause |
| 5 | + * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause |
| 6 | + */ |
| 7 | +import React from 'react' |
| 8 | +import {screen, within} from '@testing-library/react' |
| 9 | +import userEvent from '@testing-library/user-event' |
| 10 | +import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils' |
| 11 | +import SuggestionSection from '@salesforce/retail-react-app/app/components/search/partials/search-suggestions-section' |
| 12 | + |
| 13 | +// Mock dynamic image to keep DOM simple when HorizontalSuggestions renders |
| 14 | +jest.mock('@salesforce/retail-react-app/app/components/dynamic-image', () => { |
| 15 | + return function MockDynamicImage(props) { |
| 16 | + const {src, widths, imageProps} = props || {} |
| 17 | + return ( |
| 18 | + <img |
| 19 | + data-testid="dynamic-image" |
| 20 | + data-src={src} |
| 21 | + data-widths={(widths || []).join(',')} |
| 22 | + alt={imageProps?.alt ?? ''} |
| 23 | + /> |
| 24 | + ) |
| 25 | + } |
| 26 | +}) |
| 27 | + |
| 28 | +const baseStyles = { |
| 29 | + textContainer: {}, |
| 30 | + sectionHeader: {}, |
| 31 | + phraseContainer: {} |
| 32 | +} |
| 33 | + |
| 34 | +const makeSearchSuggestions = (overrides = {}) => ({ |
| 35 | + searchPhrase: 'Dress', |
| 36 | + phraseSuggestions: [], |
| 37 | + categorySuggestions: [], |
| 38 | + productSuggestions: [], |
| 39 | + ...overrides |
| 40 | +}) |
| 41 | + |
| 42 | +test('renders "Did you mean" with suggestion link when non-exact phrase exists (mobile and desktop)', () => { |
| 43 | + const searchSuggestions = makeSearchSuggestions({ |
| 44 | + phraseSuggestions: [{name: 'dresses', link: '/search?q=dresses', exactMatch: false}] |
| 45 | + }) |
| 46 | + |
| 47 | + renderWithProviders( |
| 48 | + <SuggestionSection |
| 49 | + searchSuggestions={searchSuggestions} |
| 50 | + closeAndNavigate={jest.fn()} |
| 51 | + styles={baseStyles} |
| 52 | + /> |
| 53 | + ) |
| 54 | + |
| 55 | + // Appears in both mobile and desktop sections |
| 56 | + const didYouMeanTexts = screen.getAllByText(/Did you mean/i) |
| 57 | + expect(didYouMeanTexts.length).toBeGreaterThanOrEqual(1) |
| 58 | + |
| 59 | + const links = screen.getAllByRole('link', {name: /dresses\?/i}) |
| 60 | + expect(links.length).toBeGreaterThanOrEqual(1) |
| 61 | +}) |
| 62 | + |
| 63 | +test('renders Categories header and category suggestions', () => { |
| 64 | + const searchSuggestions = makeSearchSuggestions({ |
| 65 | + categorySuggestions: [ |
| 66 | + {type: 'category', name: 'Women', link: '/women'}, |
| 67 | + {type: 'category', name: 'Men', link: '/men'} |
| 68 | + ] |
| 69 | + }) |
| 70 | + |
| 71 | + renderWithProviders( |
| 72 | + <SuggestionSection |
| 73 | + searchSuggestions={searchSuggestions} |
| 74 | + closeAndNavigate={jest.fn()} |
| 75 | + styles={baseStyles} |
| 76 | + /> |
| 77 | + ) |
| 78 | + |
| 79 | + // Header present (could be duplicated for mobile/desktop) |
| 80 | + expect(screen.getAllByText('Categories').length).toBeGreaterThanOrEqual(1) |
| 81 | + |
| 82 | + // Suggestions component renders buttons; ensure names are present |
| 83 | + expect(screen.getAllByText('Women').length).toBeGreaterThanOrEqual(1) |
| 84 | + expect(screen.getAllByText('Men').length).toBeGreaterThanOrEqual(1) |
| 85 | +}) |
| 86 | + |
| 87 | +test('renders horizontal product suggestions and "View All"; clicking a tile calls closeAndNavigate', async () => { |
| 88 | + const user = userEvent.setup() |
| 89 | + const closeAndNavigate = jest.fn() |
| 90 | + |
| 91 | + const searchSuggestions = makeSearchSuggestions({ |
| 92 | + productSuggestions: [ |
| 93 | + { |
| 94 | + type: 'product', |
| 95 | + name: 'Product 1', |
| 96 | + link: '/p1', |
| 97 | + image: 'https://example.com/p1.jpg', |
| 98 | + price: '19.99' |
| 99 | + }, |
| 100 | + {type: 'product', name: 'Product 2', link: '/p2'} |
| 101 | + ] |
| 102 | + }) |
| 103 | + |
| 104 | + renderWithProviders( |
| 105 | + <SuggestionSection |
| 106 | + searchSuggestions={searchSuggestions} |
| 107 | + closeAndNavigate={closeAndNavigate} |
| 108 | + styles={baseStyles} |
| 109 | + /> |
| 110 | + ) |
| 111 | + |
| 112 | + // HorizontalSuggestions container |
| 113 | + expect(screen.getByTestId('sf-horizontal-product-suggestions')).toBeInTheDocument() |
| 114 | + |
| 115 | + // "View All" link only renders when products exist (may be hidden by responsive wrapper in tests) |
| 116 | + expect(screen.getByText(/View All/i, {selector: 'a'})).toBeInTheDocument() |
| 117 | + |
| 118 | + // Click a product tile (desktop horizontal suggestions) |
| 119 | + const container = screen.getByTestId('sf-horizontal-product-suggestions') |
| 120 | + const tiles = within(container).getAllByTestId('product-tile') |
| 121 | + await user.click(tiles[1]) |
| 122 | + expect(closeAndNavigate).toHaveBeenCalledWith('/p2') |
| 123 | +}) |
| 124 | + |
| 125 | +test('renders nothing when there are no categories, products, or phrase suggestions', () => { |
| 126 | + const searchSuggestions = makeSearchSuggestions() |
| 127 | + |
| 128 | + renderWithProviders( |
| 129 | + <SuggestionSection |
| 130 | + searchSuggestions={searchSuggestions} |
| 131 | + closeAndNavigate={jest.fn()} |
| 132 | + styles={baseStyles} |
| 133 | + /> |
| 134 | + ) |
| 135 | + |
| 136 | + expect(screen.queryByText('Categories')).not.toBeInTheDocument() |
| 137 | + expect(screen.queryByText('Products')).not.toBeInTheDocument() |
| 138 | + expect(screen.queryByTestId('sf-horizontal-product-suggestions')).not.toBeInTheDocument() |
| 139 | +}) |
0 commit comments