@faststore/core 4.6.0-dev.0 → 4.6.0-dev.1

package/test/components/skeletons/ProductGridSkeleton.browser.test.tsx

@@ -0,0 +1,32 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+vi.mock('src/components/skeletons/ProductCardSkeleton', () => ({
+  __esModule: true,
+  default: () => <div data-testid="product-card-skeleton" />,
+}))
+
+import ProductGridSkeleton from '../../../src/components/skeletons/ProductGridSkeleton/ProductGridSkeleton'
+
+describe('ProductGridSkeleton', () => {
+  it('renders the requested number of placeholder cards', () => {
+    render(<ProductGridSkeleton loading count={4} />)
+
+    expect(screen.getAllByTestId('product-card-skeleton')).toHaveLength(4)
+  })
+
+  it('renders children when not loading', () => {
+    render(
+      <ProductGridSkeleton loading={false}>
+        <div data-testid="grid-content">products</div>
+      </ProductGridSkeleton>
+    )
+
+    expect(screen.getByTestId('grid-content')).toBeTruthy()
+    expect(screen.queryByTestId('product-card-skeleton')).toBeNull()
+  })
+})

package/test/components/templates/SearchPage/SearchWrapper.browser.test.tsx

@@ -0,0 +1,137 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import React from 'react'
+import { act, render, waitFor } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const replace = vi.fn()
+const resetInfiniteScroll = vi.fn()
+const useProductGalleryQuery = vi.fn()
+
+vi.mock('next/router', () => ({
+  useRouter: () => ({ replace }),
+}))
+
+vi.mock('@faststore/sdk', () => ({
+  useSearch: () => ({
+    state: { term: 'refil', sort: 'score_desc', selectedFacets: [] },
+    pages: [0],
+    resetInfiniteScroll,
+  }),
+}))
+
+vi.mock('discovery.config', () => ({
+  __esModule: true,
+  default: {
+    experimental: { enableSearchSSR: false },
+    seo: { search: { bodyH1: 'Showing results for:' } },
+  },
+}))
+
+vi.mock('src/sdk/product/useProductGalleryQuery', () => ({
+  useProductGalleryQuery: (...args: unknown[]) =>
+    useProductGalleryQuery(...args),
+}))
+
+vi.mock('src/components/cms/RenderSections', () => ({
+  __esModule: true,
+  default: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+}))
+
+vi.mock('src/sdk/overrides/PageProvider', () => ({
+  __esModule: true,
+  default: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+}))
+
+vi.mock('src/components/templates/SearchPage/EmptySearch', () => ({
+  __esModule: true,
+  default: () => <div data-testid="empty-search" />,
+}))
+
+vi.mock('src/components/templates/SearchPage/SearchPage', () => ({
+  __esModule: true,
+  default: () => <div data-testid="search-page" />,
+}))
+
+import SearchWrapper from 'src/components/templates/SearchPage/SearchWrapper'
+
+describe('SearchWrapper Intelligent Search redirect', () => {
+  beforeEach(() => {
+    replace.mockClear()
+    resetInfiniteScroll.mockClear()
+  })
+
+  it('calls router.replace once from an effect when redirect.url is present', async () => {
+    useProductGalleryQuery.mockReturnValue({
+      data: { redirect: { url: '/office' }, search: { products: null } },
+    })
+
+    await act(async () => {
+      render(
+        <SearchWrapper
+          itemsPerPage={12}
+          searchContentType={{} as never}
+          serverData={{ searchTerm: 'refil' } as never}
+        />
+      )
+    })
+
+    await waitFor(() => {
+      expect(replace).toHaveBeenCalledTimes(1)
+      expect(replace).toHaveBeenCalledWith('/office')
+    })
+  })
+
+  it('does not call router.replace again for the same redirect url on rerender', async () => {
+    useProductGalleryQuery.mockReturnValue({
+      data: { redirect: { url: '/office' }, search: { products: null } },
+    })
+
+    const { rerender } = render(
+      <SearchWrapper
+        itemsPerPage={12}
+        searchContentType={{} as never}
+        serverData={{ searchTerm: 'refil' } as never}
+      />
+    )
+
+    await waitFor(() => {
+      expect(replace).toHaveBeenCalledTimes(1)
+    })
+
+    await act(async () => {
+      rerender(
+        <SearchWrapper
+          itemsPerPage={12}
+          searchContentType={{} as never}
+          serverData={{ searchTerm: 'refil' } as never}
+        />
+      )
+    })
+
+    expect(replace).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not redirect when there is no redirect url', async () => {
+    useProductGalleryQuery.mockReturnValue({
+      data: {
+        redirect: null,
+        search: { products: { pageInfo: { totalCount: 12 } } },
+      },
+    })
+
+    await act(async () => {
+      render(
+        <SearchWrapper
+          itemsPerPage={12}
+          searchContentType={{} as never}
+          serverData={{ searchTerm: 'desk' } as never}
+        />
+      )
+    })
+
+    expect(replace).not.toHaveBeenCalled()
+  })
+})

package/test/components/ui/ProductGallery/GalleryPageHeightLock.browser.test.tsx

@@ -0,0 +1,230 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { act, render, screen } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('@faststore/sdk', () => ({
+  useSearch: () => ({
+    state: {
+      term: null,
+      sort: 'score_desc',
+      selectedFacets: [],
+    },
+  }),
+}))
+
+import GalleryPageHeightLock, {
+  buildGalleryPageHeightKey,
+  getGalleryViewportBucket,
+  getReservedGalleryHeight,
+  readGalleryPageHeight,
+  resolveReservedGalleryHeight,
+} from 'src/components/ui/ProductGallery/GalleryPageHeightLock'
+
+describe('GalleryPageHeightLock helpers', () => {
+  beforeEach(() => {
+    sessionStorage.clear()
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('maps viewport widths to layout buckets', () => {
+    Object.defineProperty(window, 'innerWidth', {
+      configurable: true,
+      value: 390,
+    })
+    expect(getGalleryViewportBucket()).toBe('mobile')
+
+    Object.defineProperty(window, 'innerWidth', {
+      configurable: true,
+      value: 700,
+    })
+    expect(getGalleryViewportBucket()).toBe('tablet')
+
+    Object.defineProperty(window, 'innerWidth', {
+      configurable: true,
+      value: 1024,
+    })
+    expect(getGalleryViewportBucket()).toBe('notebook')
+
+    Object.defineProperty(window, 'innerWidth', {
+      configurable: true,
+      value: 1440,
+    })
+    expect(getGalleryViewportBucket()).toBe('desktop')
+  })
+
+  it('builds stable storage keys that include viewport', () => {
+    const keyA = buildGalleryPageHeightKey(2, {
+      path: '/office',
+      term: null,
+      sort: 'score_desc',
+      selectedFacets: [],
+      viewport: 'desktop',
+    })
+    const keyB = buildGalleryPageHeightKey(2, {
+      path: '/office',
+      term: null,
+      sort: 'score_desc',
+      selectedFacets: [],
+      viewport: 'mobile',
+    })
+
+    expect(keyA).toMatch(/^__fs_gallery_page_h_p2_desktop_/)
+    expect(keyB).toMatch(/^__fs_gallery_page_h_p2_mobile_/)
+    expect(keyA).not.toBe(keyB)
+  })
+
+  it('keeps page and viewport distinct for long path + facets', () => {
+    // Truncating a sanitized JSON at 180 chars used to drop page/viewport and
+    // collide mobile↔desktop (and page 0↔1) on filtered PLPs.
+    const search = {
+      path: '/eletronicos/celulares-e-smartphones',
+      term: null,
+      sort: 'score_desc',
+      selectedFacets: [
+        { key: 'brand', value: 'samsung' },
+        { key: 'price', value: '1000-to-2000' },
+      ],
+    }
+
+    const mobile = buildGalleryPageHeightKey(0, {
+      ...search,
+      viewport: 'mobile',
+    })
+    const desktop = buildGalleryPageHeightKey(0, {
+      ...search,
+      viewport: 'desktop',
+    })
+    const page1 = buildGalleryPageHeightKey(1, {
+      ...search,
+      viewport: 'desktop',
+    })
+
+    expect(mobile).not.toBe(desktop)
+    expect(desktop).not.toBe(page1)
+    expect(mobile).toContain('_mobile_')
+    expect(desktop).toContain('_desktop_')
+    expect(page1).toMatch(/^__fs_gallery_page_h_p1_/)
+  })
+
+  it('reads and sums reserved gallery heights', () => {
+    const search = {
+      path: '/office',
+      term: null,
+      sort: 'score_desc',
+      selectedFacets: [],
+      viewport: 'desktop',
+    }
+    const key0 = buildGalleryPageHeightKey(0, search)
+    const key1 = buildGalleryPageHeightKey(1, search)
+    sessionStorage.setItem(key0, '800')
+    sessionStorage.setItem(key1, '750')
+
+    expect(readGalleryPageHeight(key0)).toBe(800)
+    expect(readGalleryPageHeight('missing')).toBeNull()
+    expect(getReservedGalleryHeight([0, 1, 2], search)).toBe(1550)
+  })
+
+  it('ignores invalid stored heights', () => {
+    sessionStorage.setItem('bad-key', '0')
+    expect(readGalleryPageHeight('bad-key')).toBeNull()
+    sessionStorage.setItem('nan-key', 'nope')
+    expect(readGalleryPageHeight('nan-key')).toBeNull()
+  })
+
+  it('resolveReservedGalleryHeight is zero once products have loaded', () => {
+    const search = {
+      path: '/office',
+      term: null,
+      sort: 'score_desc',
+      selectedFacets: [],
+      viewport: 'desktop',
+    }
+    sessionStorage.setItem(buildGalleryPageHeightKey(0, search), '800')
+    expect(resolveReservedGalleryHeight(true, [0], search)).toBe(0)
+    expect(resolveReservedGalleryHeight(false, [0], search)).toBe(800)
+  })
+})
+
+describe('GalleryPageHeightLock', () => {
+  beforeEach(() => {
+    sessionStorage.clear()
+    Object.defineProperty(window, 'innerWidth', {
+      configurable: true,
+      value: 1440,
+    })
+  })
+
+  it('applies minHeight while skeleton is showing when a height was saved', async () => {
+    const key = buildGalleryPageHeightKey(0, {
+      path: '/',
+      term: null,
+      sort: 'score_desc',
+      selectedFacets: [],
+      viewport: 'desktop',
+    })
+    // Component uses window.location.pathname — jsdom default is "/"
+    sessionStorage.setItem(key, '640')
+
+    const { container } = render(
+      <GalleryPageHeightLock page={0}>
+        <div data-testid="skeleton">loading</div>
+      </GalleryPageHeightLock>
+    )
+
+    const lock = container.querySelector(
+      '[data-fs-gallery-page-height-lock]'
+    ) as HTMLElement
+
+    // Height is applied after mount (hydration-safe).
+    await act(async () => {
+      await Promise.resolve()
+    })
+
+    expect(lock.style.minHeight).toBe('640px')
+    expect(screen.getByTestId('skeleton')).toBeTruthy()
+  })
+
+  it('releases minHeight once product cards are mounted', async () => {
+    const key = buildGalleryPageHeightKey(0, {
+      path: '/',
+      term: null,
+      sort: 'score_desc',
+      selectedFacets: [],
+      viewport: 'desktop',
+    })
+    sessionStorage.setItem(key, '640')
+
+    const { container, rerender } = render(
+      <GalleryPageHeightLock page={0}>
+        <div data-testid="skeleton">loading</div>
+      </GalleryPageHeightLock>
+    )
+
+    await act(async () => {
+      await Promise.resolve()
+    })
+
+    const lock = container.querySelector(
+      '[data-fs-gallery-page-height-lock]'
+    ) as HTMLElement
+    expect(lock.style.minHeight).toBe('640px')
+
+    await act(async () => {
+      rerender(
+        <GalleryPageHeightLock page={0}>
+          <div data-fs-product-card data-testid="card">
+            Product
+          </div>
+        </GalleryPageHeightLock>
+      )
+    })
+
+    expect(lock.style.minHeight).toBe('')
+  })
+})