From c2dd6c27ca02f87456a459b3e006757c657e9fd1 Mon Sep 17 00:00:00 2001
From: krishswaika12-droid <krishswaika12@gmail.com>
Date: Sat, 23 May 2026 10:45:22 +0530
Subject: [PATCH] Improve scanner UI responsiveness and transitions

---
 frontend/package-lock.json                    |  4 +-
 frontend/package.json                         |  4 +-
 .../unit/components/ToastContext.test.tsx     | 46 ++++++++++++++++++-
 3 files changed, 49 insertions(+), 5 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 90a66524..9df37b42 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -23,7 +23,7 @@
         "styled-components": "^6.3.12"
       },
       "devDependencies": {
-        "@playwright/test": "^1.58.2",
+        "@playwright/test": "^1.60.0",
         "@testing-library/jest-dom": "^6.9.1",
         "@testing-library/react": "^16.3.2",
         "@testing-library/user-event": "^14.6.1",
@@ -33,7 +33,7 @@
         "@vitejs/plugin-react": "^4.3.4",
         "autoprefixer": "^10.4.27",
         "cross-env": "^10.1.0",
-        "jsdom": "^29.0.1",
+        "jsdom": "^29.1.1",
         "postcss": "^8.5.8",
         "tailwindcss": "^3.4.19",
         "typescript": "5.5.4",
diff --git a/frontend/package.json b/frontend/package.json
index 8bf47eec..41476c1a 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -31,7 +31,7 @@
     "styled-components": "^6.3.12"
   },
   "devDependencies": {
-    "@playwright/test": "^1.58.2",
+    "@playwright/test": "^1.60.0",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
@@ -41,7 +41,7 @@
     "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.27",
     "cross-env": "^10.1.0",
-    "jsdom": "^29.0.1",
+    "jsdom": "^29.1.1",
     "postcss": "^8.5.8",
     "tailwindcss": "^3.4.19",
     "typescript": "5.5.4",
diff --git a/frontend/testing/unit/components/ToastContext.test.tsx b/frontend/testing/unit/components/ToastContext.test.tsx
index 5fef16b8..d69272bf 100644
--- a/frontend/testing/unit/components/ToastContext.test.tsx
+++ b/frontend/testing/unit/components/ToastContext.test.tsx
@@ -1,8 +1,9 @@
 import { render, screen, waitFor } from '@testing-library/react'
+import { vi, describe, it, expect, beforeEach, afterEach } from 'vitest'
 import userEvent from '@testing-library/user-event'
 import { ToastProvider, useToast } from '../../../src/components/ToastContext'
 
-function ToastTrigger({ type = 'success' }: { type?: 'success' | 'error' }) {
+function ToastTrigger({ type = 'success' }: { type?: 'success' | 'error' | 'info' }) {
   const { addToast } = useToast()
 
   return (
@@ -12,6 +13,15 @@ function ToastTrigger({ type = 'success' }: { type?: 'success' | 'error' }) {
   )
 }
 
+beforeEach(() => {
+  vi.useFakeTimers()
+})
+
+afterEach(() => {
+  vi.runOnlyPendingTimers()
+  vi.useRealTimers()
+})
+
 describe('Toast accessibility', () => {
   it('announces non-critical notifications as status messages and provides a labelled dismiss control', async () => {
     const user = userEvent.setup()
@@ -46,4 +56,38 @@ describe('Toast accessibility', () => {
 
     expect(await screen.findByRole('alert')).toHaveTextContent(/error message/i)
   })
+  it('announces info notifications as status messages', async () => {
+  const user = userEvent.setup()
+
+  render(
+    <ToastProvider>
+      <ToastTrigger type="info" />
+    </ToastProvider>,
+  )
+
+  await user.click(screen.getByRole('button', { name: /show toast/i }))
+
+  expect(await screen.findByRole('status')).toHaveTextContent(/info message/i)
+})
+it('automatically dismisses toast after timeout', async () => {
+  const user = userEvent.setup({
+    advanceTimers: vi.advanceTimersByTime,
+  })
+
+  render(
+    <ToastProvider>
+      <ToastTrigger />
+    </ToastProvider>,
+  )
+
+  await user.click(screen.getByRole('button', { name: /show toast/i }))
+
+  expect(await screen.findByText(/success message/i)).toBeInTheDocument()
+
+  vi.advanceTimersByTime(5000)
+
+  await waitFor(() => {
+    expect(screen.queryByText(/success message/i)).not.toBeInTheDocument()
+  })
+})
 })