feat: add CartSnackbar component with tests

This commit is contained in:
Kirill
2026-05-25 17:26:54 +05:00
parent 4aba164c78
commit ddae0e8583
2 changed files with 101 additions and 0 deletions
+46
View File
@@ -0,0 +1,46 @@
import { useEffect } from 'react'
import Alert from '@mui/material/Alert'
import Button from '@mui/material/Button'
import Snackbar from '@mui/material/Snackbar'
import { useNavigate } from 'react-router-dom'
import { useUnit } from 'effector-react'
import { $cartSnackOpen, cartDismissed } from '@/shared/model/cart-notifications'
export function CartSnackbar() {
const open = useUnit($cartSnackOpen)
const navigate = useNavigate()
useEffect(() => {
if (!open) return
const timer = setTimeout(() => cartDismissed(), 4000)
return () => clearTimeout(timer)
}, [open])
const handleClose = () => cartDismissed()
const handleGoToCart = () => {
cartDismissed()
navigate('/cart')
}
return (
<Snackbar
open={open}
onClose={handleClose}
anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
autoHideDuration={4000}
>
<Alert
severity="success"
onClose={handleClose}
action={
<Button color="success" size="small" onClick={handleGoToCart}>
Перейти в корзину
</Button>
}
>
Товар добавлен в корзину
</Alert>
</Snackbar>
)
}
@@ -0,0 +1,55 @@
import { render, screen, fireEvent, act } from '@testing-library/react'
import { describe, it, expect, vi } from 'vitest'
import { MemoryRouter } from 'react-router-dom'
import { cartAdded, cartDismissed } from '@/shared/model/cart-notifications'
import { CartSnackbar } from '@/shared/ui/CartSnackbar'
function renderWithRouter() {
render(
<MemoryRouter>
<CartSnackbar />
</MemoryRouter>,
)
}
describe('CartSnackbar', () => {
it('is hidden when store is false', () => {
cartDismissed()
renderWithRouter()
expect(screen.queryByText(/товар добавлен/i)).not.toBeInTheDocument()
})
it('shows snackbar when cartAdded is fired', () => {
renderWithRouter()
cartAdded()
expect(screen.getByText(/товар добавлен/i)).toBeInTheDocument()
expect(screen.getByRole('button', { name: /перейти в корзину/i })).toBeInTheDocument()
})
it('closes on dismiss button click', () => {
renderWithRouter()
cartAdded()
const closeBtn = screen.getByLabelText(/закрыть/i)
fireEvent.click(closeBtn)
expect(screen.queryByText(/товар добавлен/i)).not.toBeInTheDocument()
})
it('auto-closes after 4 seconds', () => {
vi.useFakeTimers()
renderWithRouter()
cartAdded()
act(() => {
vi.advanceTimersByTime(4000)
})
expect(screen.queryByText(/товар добавлен/i)).not.toBeInTheDocument()
vi.useRealTimers()
})
it('navigates to /cart and closes on "Перейти в корзину" click', () => {
renderWithRouter()
cartAdded()
const goBtn = screen.getByRole('button', { name: /перейти в корзину/i })
fireEvent.click(goBtn)
expect(screen.queryByText(/товар добавлен/i)).not.toBeInTheDocument()
})
})