[Chakra V3 Upgrade] @W-18672916 refactor Wishlist page buttons

packages/extension-chakra-storefront/jest.config.js

@@ -56,6 +56,8 @@ module.exports = {
         createTestGlob('pages/login-redirect'),
         createTestGlob('pages/social-login-redirect'),
         // createTestGlob('pages/registration'), // TODO: enable after Account page has been migrated
+        '<rootDir>/src/pages/account/wishlist/partials/wishlist-secondary-button-group.test.js',
+        '<rootDir>/src/pages/account/wishlist/partials/wishlist-primary-action.test.js',
         '<rootDir>/src/pages/checkout/partials/contact-info.test.js',
         '<rootDir>/src/pages/checkout/partials/login-state.test.js',
         '<rootDir>/src/utils/responsive-image.test.js',

packages/extension-chakra-storefront/src/pages/account/wishlist/partials/wishlist-primary-action.jsx

@@ -103,10 +103,10 @@ const WishlistPrimaryAction = () => {
         if (variant.setProducts?.every((child) => !hasVariants(child))) {
             return (
                 <Button
-                    variant={'solid'}
+                    variant="solid"
                     onClick={() => handleAddToCart(variant, variant.quantity)}
-                    w={'full'}
-                    isLoading={isLoading}
+                    size="md"
+                    loading={isLoading}
                     aria-label={formatMessage(
                         {
                             id: 'wishlist_primary_action.button.addSetToCart.label',
@@ -121,11 +121,9 @@ const WishlistPrimaryAction = () => {
         } else {
             return (
                 <Button
-                    as={Link}
-                    href={`/product/${variant.id}`}
-                    w={'full'}
-                    variant={'solid'}
-                    _hover={{textDecoration: 'none'}}
+                    asChild
+                    size="md"
+                    variant="solid"
                     aria-label={formatMessage(
                         {
                             id: 'wishlist_primary_action.button.viewFullDetails.label',
@@ -134,18 +132,16 @@ const WishlistPrimaryAction = () => {
                         {productName: variant.name}
                     )}
                 >
-                    {buttonText.viewFullDetails}
+                    <Link href={`/product/${variant.id}`}>{buttonText.viewFullDetails}</Link>
                 </Button>
             )
         }
     } else if (isProductABundle) {
         return (
             <Button
-                as={Link}
-                href={`/product/${variant.id}`}
-                w={'full'}
-                variant={'solid'}
-                _hover={{textDecoration: 'none'}}
+                asChild
+                size="md"
+                variant="solid"
                 aria-label={formatMessage(
                     {
                         id: 'wishlist_primary_action.button.viewFullDetails.label',
@@ -154,7 +150,7 @@ const WishlistPrimaryAction = () => {
                     {productName: variant.name}
                 )}
             >
-                {buttonText.viewFullDetails}
+                <Link href={`/product/${variant.id}`}>{buttonText.viewFullDetails}</Link>
             </Button>
         )
     } else {
@@ -169,9 +165,11 @@ const WishlistPrimaryAction = () => {
                             },
                             {productName: variant.name}
                         )}
-                        w={'full'}
-                        variant={'solid'}
-                        onClick={onOpen}
+                        size="md"
+                        variant="solid"
+                        onClick={() => {
+                            onOpen()
+                        }}
                     >
                         {buttonText.viewOptions}
                     </Button>
@@ -189,10 +187,10 @@ const WishlistPrimaryAction = () => {
         } else {
             return (
                 <Button
-                    variant={'solid'}
+                    variant="solid"
                     onClick={() => handleAddToCart(variant, variant.quantity)}
-                    w={'full'}
-                    isLoading={isLoading}
+                    size="md"
+                    loading={isLoading}
                     aria-label={formatMessage(
                         {
                             id: 'wishlist_primary_action.button.addToCart.label',

packages/extension-chakra-storefront/src/pages/account/wishlist/partials/wishlist-primary-action.test.js

@@ -9,7 +9,7 @@ import {mockWishListDetails} from './wishlist-primary-action.mock'
 import ItemVariantProvider from '../../../../components/item-variant'
 import {renderWithProviders} from '../../../../utils/test-utils'
 import WishlistPrimaryAction from './wishlist-primary-action'
-import {screen, waitFor} from '@testing-library/react'
+import {screen, waitFor, act} from '@testing-library/react'
 import PropTypes from 'prop-types'
 import {rest} from 'msw'
 import {basketWithProductSet} from '../../../product-detail/index.mock'
@@ -50,12 +50,15 @@ beforeEach(() => {
 
 test('the Add To Cart button', async () => {
     const variant = mockWishListDetails.data[3]
+
     const {user} = renderWithProviders(<MockedComponent variant={variant} />)
 
     const addToCartButton = await screen.findByRole('button', {
         name: new RegExp(`Add ${variant.name} to cart`, 'i')
     })
-    await user.click(addToCartButton)
+    await act(async () => {
+        await user.click(addToCartButton)
+    })
 
     await waitFor(() => {
         expect(screen.getByText(/1 item added to cart/i)).toBeInTheDocument()
@@ -65,10 +68,12 @@ test('the Add To Cart button', async () => {
 test('the Add Set To Cart button', async () => {
     const productSetWithoutVariants = mockWishListDetails.data[1]
     const {user} = renderWithProviders(<MockedComponent variant={productSetWithoutVariants} />)
-    const button = await screen.findByRole('button', {
+    const addSetToCartButton = await screen.findByRole('button', {
         name: new RegExp(`Add ${productSetWithoutVariants.name} set to cart`, 'i')
     })
-    await user.click(button)
+    await act(async () => {
+        await user.click(addSetToCartButton)
+    })
 
     await waitFor(() => {
         expect(screen.getByText(/2 items added to cart/i)).toBeInTheDocument()
@@ -87,8 +92,10 @@ test('the View Options button', async () => {
     const masterProduct = mockWishListDetails.data[2]
     const {user} = renderWithProviders(<MockedComponent variant={masterProduct} />)
 
-    const button = await screen.findByRole('button', {name: /view options/i})
-    await user.click(button)
+    const viewOptionsButton = await screen.findByRole('button', {name: /view options/i})
+    await act(async () => {
+        await user.click(viewOptionsButton)
+    })
 
     await waitFor(
         () => {

packages/extension-chakra-storefront/src/pages/account/wishlist/partials/wishlist-secondary-button-group.jsx

@@ -105,7 +105,7 @@ const WishlistSecondaryButtonGroup = ({
         <>
             <ButtonGroup spacing="6">
                 <Button
-                    variant="link"
+                    variant="link-blue"
                     size="sm"
                     onClick={showRemoveItemConfirmation}
                     data-testid={`sf-wishlist-remove-${productListItemId}`}

packages/extension-chakra-storefront/src/pages/account/wishlist/partials/wishlist-secondary-button-group.test.js

@@ -386,3 +386,30 @@ test('can remove item', async () => {
         expect(mockedHandler).toHaveBeenCalled()
     })
 })
+
+test('shows error toast when remove item fails', async () => {
+    // Need to throw an error in the API call to show the error toast
+    global.server.use(
+        rest.delete(
+            '*/customers/:customerId/product-lists/:listId/items/:itemId',
+            (req, res, ctx) => {
+                return res(ctx.delay(0), ctx.status(500), ctx.json({error: 'Server error'}))
+            }
+        )
+    )
+
+    const mockedHandler = jest.fn()
+    renderWithProviders(<MockedComponent onClick={mockedHandler} />)
+
+    const removeButton = await screen.findByRole('button', {
+        name: /remove/i
+    })
+    user.click(removeButton)
+
+    const confirmButton = await screen.findByRole('button', {name: /yes, remove item/i})
+    user.click(confirmButton)
+
+    await waitFor(() => {
+        expect(mockedHandler).toHaveBeenCalled()
+    })
+})