feat: smoke test, e2e config (#472)

* feat: smoke test, e2e config

* feat: more tests

* fix: deps

* fix: timeout

* fix: test

* fix: tests

Author: hmbanan666

.github/workflows/ci.yml

@@ -21,7 +21,7 @@ on:
 jobs:
  build:
  runs-on: ubuntu-latest
- timeout-minutes: 10
+ timeout-minutes: 15
  permissions:
  contents: read
 
@@ -55,5 +55,11 @@ jobs:
       - name: Test
  run: pnpm run test
 
+      - name: Install Playwright browsers
+ run: pnpm playwright install --with-deps chromium
+
+      - name: E2E tests
+ run: pnpm run test:e2e
+
       - name: Build
  run: pnpm run build

.gitignore

@@ -42,6 +42,9 @@ vite.config.*.timestamp-*
 
 ### Tests ###
 /coverage/
+/test-results/
+/playwright-report/
+/blob-report/
 
 ### IDE ###
 .vscode/*

apps/essence/server/services/channel.ts

@@ -772,7 +772,7 @@ const links: Channel['links'] = {
  value: 'Software para comércio eletrónico',
  },
  ],
- to: 'https://nextorders.ru/',
+ to: 'https://startodel.ru/',
  target: '_blank',
  },
  ],

e2e/cart.test.ts

@@ -0,0 +1,93 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('Cart', () => {
+ test('add product to cart from product page', async ({ page }) => {
+ await page.goto('/')
+
+ // Click on a product card to navigate to product detail
+ const productCard = page.locator('main a').filter({ has: page.locator('img') }).first()
+ await productCard.click()
+
+ // Should be on product detail page
+ await expect(page.locator('h1')).toBeVisible()
+
+ // Click "Add to cart" button
+ const addButton = page.getByRole('button', { name: /add to cart/i })
+ await expect(addButton).toBeVisible({ timeout: 10_000 })
+ await addButton.click()
+
+ // Cart aside (xl viewport) should now show cart content
+ const cartTitle = page.locator('aside').getByText('Cart')
+ await expect(cartTitle).toBeVisible()
+ })
+
+ test('increment and decrement product quantity', async ({ page }) => {
+ await page.goto('/')
+
+ // Navigate to product and add it
+ const productCard = page.locator('main a').filter({ has: page.locator('img') }).first()
+ await productCard.click()
+ await page.getByRole('button', { name: /add to cart/i }).click()
+
+ // After adding, +/- buttons should replace "Add to cart"
+ const plusButton = page.locator('main').getByRole('button', { name: 'Plus' })
+ const minusButton = page.locator('main').getByRole('button', { name: 'Minus' })
+
+ await expect(plusButton).toBeVisible()
+ await expect(minusButton).toBeVisible()
+
+ // Increment
+ await plusButton.click()
+
+ // Decrement twice to remove
+ await minusButton.click()
+ await minusButton.click()
+
+ // "Add to cart" button should reappear
+ await expect(page.getByRole('button', { name: /add to cart/i })).toBeVisible()
+ })
+
+ test('cart aside is visible on desktop', async ({ page }) => {
+ await page.goto('/')
+
+ // On xl viewport, aside is always visible
+ const aside = page.locator('aside')
+ await expect(aside).toBeVisible()
+ })
+
+ test('navigate to checkout from cart', async ({ page }) => {
+ await page.goto('/')
+
+ // Add a product
+ const productCard = page.locator('main a').filter({ has: page.locator('img') }).first()
+ await productCard.click()
+ await page.getByRole('button', { name: /add to cart/i }).click()
+
+ // Click "Okay, next" link in cart aside
+ const nextButton = page.locator('aside a[href="/checkout"]')
+ await expect(nextButton).toBeVisible()
+ await nextButton.click()
+
+ await page.waitForURL('**/checkout')
+ })
+
+ test('delivery method tabs are available in cart', async ({ page }) => {
+ await page.goto('/')
+
+ // Add a product
+ const productCard = page.locator('main a').filter({ has: page.locator('img') }).first()
+ await productCard.click()
+ await page.getByRole('button', { name: /add to cart/i }).click()
+
+ // Delivery method tabs should be visible in cart aside
+ const deliveryTab = page.locator('aside').getByRole('tab', { name: /delivery/i })
+ const pickupTab = page.locator('aside').getByRole('tab', { name: /pickup/i })
+
+ await expect(deliveryTab).toBeVisible()
+ await expect(pickupTab).toBeVisible()
+
+ // Switch to pickup
+ await pickupTab.click()
+ await expect(pickupTab).toHaveAttribute('aria-selected', 'true')
+ })
+})

e2e/checkout.test.ts

@@ -0,0 +1,38 @@
+import { expect, test } from '@playwright/test'
+
+async function addProductToCart(page: import('@playwright/test').Page) {
+ await page.goto('/')
+ const productCard = page.locator('main a').filter({ has: page.locator('img') }).first()
+ await productCard.click()
+ await page.getByRole('button', { name: /add to cart/i }).click()
+ // Wait for cart aside to show the item
+ await expect(page.locator('aside').getByText('Cart')).toBeVisible()
+}
+
+test.describe('Checkout', () => {
+ test('checkout page has contact form', async ({ page }) => {
+ await addProductToCart(page)
+ await page.goto('/checkout')
+
+ // Contact form with phone input
+ await expect(page.locator('input[type="tel"]')).toBeVisible()
+ })
+
+ test('submit button is disabled without required fields', async ({ page }) => {
+ await addProductToCart(page)
+ await page.goto('/checkout')
+
+ // Create order button should be disabled when fields are empty
+ const submitButton = page.getByRole('button', { name: /create order/i })
+ await expect(submitButton).toBeDisabled()
+ })
+
+ test('checkout shows info messages', async ({ page }) => {
+ await addProductToCart(page)
+ await page.goto('/checkout')
+
+ // Should show some info/warning about filling fields
+ const infoMessage = page.locator('main').getByText(/fill in|required|fields/i)
+ await expect(infoMessage).toBeVisible()
+ })
+})

e2e/localization.test.ts

@@ -0,0 +1,59 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('Localization', () => {
+ test('content renders in Russian locale', async ({ browser }) => {
+ const context = await browser.newContext({ locale: 'ru-RU' })
+ const page = await context.newPage()
+
+ await page.goto('/')
+
+ await expect(page.locator('html')).toHaveAttribute('lang', 'ru')
+ await expect(page).toHaveTitle(/Москв/)
+
+ await context.close()
+ })
+
+ test('content renders in English locale', async ({ browser }) => {
+ const context = await browser.newContext({ locale: 'en-US' })
+ const page = await context.newPage()
+
+ await page.goto('/')
+
+ await expect(page.locator('html')).toHaveAttribute('lang', 'en')
+ await expect(page).toHaveTitle(/Moscow/)
+
+ await context.close()
+ })
+
+ test('content renders in Spanish locale', async ({ browser }) => {
+ const context = await browser.newContext({ locale: 'es-ES' })
+ const page = await context.newPage()
+
+ await page.goto('/')
+
+ await expect(page.locator('html')).toHaveAttribute('lang', 'es')
+
+ await context.close()
+ })
+
+ test('switching locale changes content', async ({ browser }) => {
+ const context = await browser.newContext({ locale: 'ru-RU' })
+ const page = await context.newPage()
+
+ await page.goto('/')
+ const ruTitle = await page.title()
+
+ await context.close()
+
+ const context2 = await browser.newContext({ locale: 'en-US' })
+ const page2 = await context2.newPage()
+
+ await page2.goto('/')
+ const enTitle = await page2.title()
+
+ await context2.close()
+
+ // Titles should differ between locales
+ expect(ruTitle).not.toBe(enTitle)
+ })
+})

e2e/navigation.test.ts

@@ -0,0 +1,77 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('Navigation', () => {
+ test('sidebar category link navigates to category page', async ({ page }) => {
+ await page.goto('/')
+
+ const categoryLink = page.locator('nav a[href^="/"]').first()
+ const href = await categoryLink.getAttribute('href')
+
+ await categoryLink.click()
+
+ if (href) {
+ await page.waitForURL(`**${href}`)
+ }
+ await expect(page.locator('h1')).toBeVisible()
+ })
+
+ test('category page has content', async ({ page }) => {
+ await page.goto('/')
+
+ const categoryLink = page.locator('nav a[href^="/"]').first()
+ await categoryLink.click()
+
+ // Category page should have heading and some content
+ await expect(page.locator('h1')).toBeVisible()
+ await expect(page.locator('main')).toBeVisible()
+ })
+
+ test('product detail page has title and add button', async ({ page }) => {
+ await page.goto('/')
+
+ const productLink = page.locator('main a').filter({ has: page.locator('img') }).first()
+ await productLink.click()
+
+ await expect(page.locator('h1')).toBeVisible()
+ await expect(page.getByRole('button', { name: /add to cart/i })).toBeVisible()
+ })
+
+ test('mobile menu opens and closes', async ({ browser }) => {
+ const context = await browser.newContext({
+ viewport: { width: 375, height: 812 },
+ })
+ const page = await context.newPage()
+ await page.goto('/')
+
+ // Wait for Nuxt hydration before interacting
+ await page.waitForLoadState('networkidle')
+
+ // Menu button is visible on mobile (hidden at lg+)
+ const menuButton = page.locator('header button').first()
+ await expect(menuButton).toBeVisible()
+ await menuButton.click()
+
+ // Slideover dialog should appear
+ const dialog = page.getByRole('dialog')
+ await expect(dialog).toBeVisible({ timeout: 5000 })
+
+ // Close via Escape
+ await page.keyboard.press('Escape')
+
+ // Dialog should disappear
+ await expect(dialog).not.toBeVisible({ timeout: 5000 })
+
+ await context.close()
+ })
+
+ test('breadcrumb on product page', async ({ page }) => {
+ await page.goto('/')
+
+ const productLink = page.locator('main a').filter({ has: page.locator('img') }).first()
+ await productLink.click()
+
+ // Breadcrumbs should contain home link
+ const homeLink = page.getByRole('link', { name: /home/i })
+ await expect(homeLink).toBeVisible()
+ })
+})

e2e/playwright.config.ts

@@ -0,0 +1,46 @@
+import process from 'node:process'
+import { defineConfig, devices } from '@playwright/test'
+
+const CI = !!process.env.CI
+const ESSENCE_PORT = 3603
+const WEB_APP_PORT = 3602
+
+export default defineConfig({
+ testDir: '.',
+ fullyParallel: true,
+ forbidOnly: CI,
+ retries: CI ? 2 : 0,
+ workers: CI ? 1 : undefined,
+ reporter: 'html',
+ use: {
+ baseURL: `http://localhost:${WEB_APP_PORT}`,
+ trace: 'on-first-retry',
+ },
+ projects: [
+ {
+ name: 'chromium',
+ use: { ...devices['Desktop Chrome'] },
+ },
+ ],
+ webServer: [
+ {
+ command: `pnpm nuxt dev --port ${ESSENCE_PORT} --cwd apps/essence`,
+ port: ESSENCE_PORT,
+ timeout: 120_000,
+ reuseExistingServer: !CI,
+ cwd: '..',
+ },
+ {
+ command: `pnpm nuxt dev --port ${WEB_APP_PORT} --cwd apps/web-app`,
+ port: WEB_APP_PORT,
+ timeout: 120_000,
+ reuseExistingServer: !CI,
+ cwd: '..',
+ env: {
+ NUXT_API_URL: `http://localhost:${ESSENCE_PORT}/api/storefront/gateway`,
+ NUXT_API_TOKEN: 'test-token',
+ NUXT_PUBLIC_CHANNEL_ID: 'moscow',
+ },
+ },
+ ],
+})