Merge branch 'feature/pwa-developer-agent-only' of https://github.com/SalesforceCommerceCloud/pwa-kit into feature/pwa-developer-agent-only

Author: wei-liu-sf

.cursor/rules/testing/unit-tests-generic.mdc

@@ -0,0 +1,36 @@
+---
+description: USE WHEN writing unit tests for components in template packages
+globs: ["packages/template-*/*/components/**/*.test.{js,jsx,ts,tsx}"]
+alwaysApply: false
+---
+
+# 🧪 Generic Component Test Rules
+
+## Structure & Best Practices
+- Use `describe` blocks to group tests, `test` for individual cases
+- Use `beforeEach` for setup, clear mocks after each test
+- **Arrange** → **Act** → **Assert** pattern
+- One behavior per test, clear descriptive names
+
+## Queries & Assertions
+- Prefer `getByRole`, `getByLabelText`, `getByTestId`
+- Use `expect().toBeInTheDocument()`, `.toHaveBeenCalledTimes()`, etc.
+- For async: `await waitFor(() => { ... })`
+
+## Mocking
+- `jest.fn()` for handlers, `jest.mock()` for modules
+- Clear mocks/storage after each test
+
+```js
+describe('MyComponent', () => {
+    beforeEach(() => jest.clearAllMocks())
+    
+    test('renders and handles interaction', async () => {
+        const mockHandler = jest.fn()
+        render(<MyComponent onClick={mockHandler} />)
+        
+        await userEvent.click(screen.getByRole('button'))
+        expect(mockHandler).toHaveBeenCalledTimes(1)
+    })
+})
+```

.cursor/rules/testing/unit-tests-template-retail-react-app.mdc

@@ -0,0 +1,32 @@
+---
+description: USE WHEN writing unit tests in template-retail-react-app components
+globs: ["packages/template-retail-react-app/app/components/**/*.test.{js,jsx,ts,tsx}"]
+alwaysApply: false
+---
+
+# 🛍️ Retail React App Test Rules
+
+## Package-Specific Requirements
+- **File naming**: `index.test.js` (colocated with component)
+- **Always use `renderWithProviders`** (provides Commerce SDK context)
+- **Get user events from return value**: `const {user} = renderWithProviders(...)`
+- **Do NOT import `userEvent` directly**
+
+## API Mocking
+- Use `prependHandlersToServer` or `msw` for API mocking
+
+```js
+import {screen} from '@testing-library/react'
+import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
+import MyComponent from '.'
+
+describe('MyComponent', () => {
+    beforeEach(() => jest.clearAllMocks())
+
+    test('handles user interaction', async () => {
+        const {user} = renderWithProviders(<MyComponent />)
+        await user.click(screen.getByText('Click Me'))
+        expect(screen.getByText('Expected')).toBeInTheDocument()
+    })
+})
+```