add e2e tests

.gitignore

@@ -35,4 +35,8 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
-.env
+.env
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:20
+FROM node:20-bookworm
 
 WORKDIR /app
 
@@ -8,6 +8,8 @@ RUN npm install
 
 COPY . .
 
+RUN npx -y [email protected] install --with-deps
+
 RUN npm run build
 
 CMD ["npm", "run", "dev"]

docker-compose.yml

@@ -8,6 +8,22 @@ services:
     container_name: news-aggregator
     ports:
       - '3000:3000'
+    volumes:
+      - .:/app
+      - /app/node_modules
+
+  playwright:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    container_name: playwright-tests
+    ports:
+      - '3333:3333'
+    depends_on:
+      - app
+    command: npx playwright test --ui-port=3333 --ui-host=0.0.0.0
+    environment:
+      - NODE_ENV=test
     volumes:
       - .:/app
       - /app/node_modules

package.json

@@ -34,6 +34,7 @@
     "zod": "^3.23.8"
   },
   "devDependencies": {
+    "@playwright/test": "^1.46.0",
     "@rocketseat/eslint-config": "^2.2.2",
     "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "^16.0.0",

playwright.config.ts

@@ -0,0 +1,24 @@
+import { defineConfig, devices } from '@playwright/test'
+
+export default defineConfig({
+  testDir: './test',
+  testMatch: /.*\.e2e-spec\.ts$/,
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  use: {
+    baseURL: 'http://localhost:3000',
+  },
+  webServer: {
+    command: 'npm run dev',
+    url: 'http://localhost:3000',
+    reuseExistingServer: !process.env.CI,
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+})

src/components/news-feed/news-card.tsx

@@ -9,7 +9,10 @@ interface NewsCardProps {
 
 export function NewsCard({ article, number }: NewsCardProps) {
   return (
-    <article className="group flex cursor-pointer flex-row justify-start gap-2">
+    <article
+      className="group flex cursor-pointer flex-row justify-start gap-2"
+      data-testid="article-card"
+    >
       {number && (
         <div className="min-w-6">
           <span className="text-lg text-title">{number}.</span>

test/custom-news-feed.e2e-spec.ts

@@ -0,0 +1,48 @@
+import { test, expect } from '@playwright/test'
+
+test('Access the custom news feed page', async ({ page }) => {
+  await page.goto('/custom-news-feed', { waitUntil: 'networkidle' })
+  const header = page.getByRole('img', { name: 'News Aggregator' })
+  expect(header).toBeVisible()
+})
+
+test('Access preferences tab', async ({ page }) => {
+  await page.goto('/custom-news-feed', { waitUntil: 'networkidle' })
+  const prefTabBtn = page.getByRole('button', { name: 'Preferences' })
+  await prefTabBtn.click()
+
+  expect(
+    page.getByRole('heading', { name: 'Edit your article preferences' }),
+  ).toBeVisible()
+})
+
+test('Add author preference', async ({ page }) => {
+  await page.goto('/custom-news-feed', { waitUntil: 'networkidle' })
+  const prefTabBtn = page.getByRole('button', { name: 'Preferences' })
+  await prefTabBtn.click()
+  const authorInput = page.getByPlaceholder('Add your authors')
+  const addAuthorBtn = page.getByTestId('add-author')
+  await authorInput.fill('Test')
+  await addAuthorBtn.click()
+
+  const badger = page.getByTestId('author-badger')
+  badger.isVisible()
+  expect(await badger.isVisible()).toBe(true)
+})
+
+test('Change category and source preference', async ({ page }) => {
+  await page.goto('/custom-news-feed', { waitUntil: 'networkidle' })
+  const prefTabBtn = page.getByRole('button', { name: 'Preferences' })
+  await prefTabBtn.click()
+
+  const categoryChk = page.getByText('World')
+  const sourceChk = page.getByText('The Guardian')
+  let savePrefBtn = page.getByRole('button', { name: 'Save' })
+
+  await categoryChk.check()
+  await sourceChk.check()
+  expect(await savePrefBtn.isEnabled()).toBe(true)
+  await savePrefBtn.click()
+  savePrefBtn = page.getByRole('button', { name: 'Save' })
+  expect(await savePrefBtn.isDisabled()).toBe(true)
+})

test/home.e2e-spec.ts

@@ -0,0 +1,79 @@
+import { test, expect } from '@playwright/test'
+
+test('Access the home page', async ({ page }) => {
+  await page.goto('/', { waitUntil: 'networkidle' })
+  const header = page.getByRole('img', { name: 'News Aggregator' })
+  expect(header).toBeVisible()
+})
+
+test('Open search modal and search', async ({ page }) => {
+  await page.goto('/', { waitUntil: 'networkidle' })
+  const button = page.getByTestId('dialog-button')
+  await button.click()
+
+  const searchinput = page.getByPlaceholder('Search')
+  const submit = page.getByTestId('submit_btn')
+
+  await searchinput.fill('Brazil')
+  await submit.click()
+
+  await page.waitForTimeout(3000)
+  const list = page.getByRole('list').nth(1)
+
+  const article = await list.getByTestId('article-card').all()
+
+  await expect(article.length).toBeGreaterThan(1)
+})
+
+test('Open search modal and search with filters', async ({ page }) => {
+  await page.goto('/', { waitUntil: 'networkidle' })
+  const button = page.getByTestId('dialog-button')
+  await button.click()
+
+  const searchinput = page.getByPlaceholder('Search')
+  const submit = page.getByTestId('submit_btn')
+  const filterBtn = page.getByTestId('open_close_filters')
+  const categoryBtn = page
+    .locator('button')
+    .filter({ hasText: 'Select a category' })
+  const sourceFilter = page
+    .locator('button')
+    .filter({ hasText: 'Select a source' })
+  await searchinput.fill('Economy')
+  await filterBtn.click()
+  await categoryBtn.click()
+  const categoryBusiness = page.getByLabel('Business')
+
+  await categoryBusiness.click()
+  await sourceFilter.click()
+  const sourceTheGuardian = page.getByLabel('The Guardian')
+  await sourceTheGuardian.click()
+
+  await submit.click()
+
+  await page.waitForTimeout(3000)
+  const list = page.getByRole('list').nth(1)
+
+  const article = await list.getByTestId('article-card').all()
+
+  await expect(article.length).toBeGreaterThan(1)
+})
+
+test('Access news feed', async ({ page }) => {
+  await page.goto('/', { waitUntil: 'networkidle' })
+  const link = page.getByRole('link', { name: 'News feed' })
+  await link.click()
+  await page.waitForTimeout(1000)
+
+  expect(page.url()).toContain('/custom-news-feed')
+})
+
+test('Change to next page', async ({ page }) => {
+  await page.goto('/', { waitUntil: 'networkidle' })
+  const nextPageBtn = page.getByRole('button', { name: 'Next' })
+  await nextPageBtn.click()
+  await page.waitForTimeout(1000)
+  const previousBtn = page.getByRole('button', { name: 'Previous' })
+
+  expect(await previousBtn.isEnabled()).toBe(true)
+})