diff --git a/.github/workflows/testdriver.yml b/.github/workflows/testdriver.yml index a639b7d..b20b1c7 100644 --- a/.github/workflows/testdriver.yml +++ b/.github/workflows/testdriver.yml @@ -8,15 +8,21 @@ on: jobs: test: - name: "TestDriver" + name: "TestDriver E2E Tests" runs-on: ubuntu-latest steps: - - uses: testdriverai/action@yassine/set-agent-version + - uses: actions/checkout@v4 + + - name: Setup Node.js + uses: actions/setup-node@v4 with: - version: v4.0.10 - key: ${{secrets.TESTDRIVER_API_KEY}} - prompt: | - 1. /run /Users/ec2-user/actions-runner/_work/testdriver/testdriver/testdriver/test.yml + node-version: 20 + cache: "npm" + + - name: Install Dependencies + run: npm ci || npm install + + - name: Run TestDriver Tests + run: npx vitest run env: - GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} - FORCE_COLOR: "3" + TD_API_KEY: ${{ secrets.TD_API_KEY || secrets.TESTDRIVER_API_KEY }} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..9e67fc6 --- /dev/null +++ b/.gitignore @@ -0,0 +1,5 @@ +node_modules/ +.env +.testdriver/ +dist/ +coverage/ diff --git a/package.json b/package.json new file mode 100644 index 0000000..2e98e14 --- /dev/null +++ b/package.json @@ -0,0 +1,14 @@ +{ + "name": "todo-test-3", + "version": "1.0.0", + "description": "TestDriver automated tests for React Todo App", + "type": "module", + "scripts": { + "test": "vitest run" + }, + "devDependencies": { + "dotenv": "^16.4.7", + "testdriverai": "canary", + "vitest": "^2.1.8" + } +} diff --git a/tests/todo.test.mjs b/tests/todo.test.mjs new file mode 100644 index 0000000..88e73bc --- /dev/null +++ b/tests/todo.test.mjs @@ -0,0 +1,53 @@ +import { describe, expect, it } from "vitest"; +import { TestDriver } from "testdriverai/vitest/hooks"; + +const APP_URL = "https://javascriptbear.github.io/todo_react_app/"; + +describe("Todo React App", () => { + it("should create a new task and display it in the list", async (context) => { + const testdriver = TestDriver(context); + + // Launch Chrome browser navigating to the production Todo app + await testdriver.provision.chrome({ url: APP_URL }); + + // Verify application header loaded + const appHeader = await testdriver.find("My Tasks"); + expect(appHeader).toBeTruthy(); + + // Click "New Task" button to open the modal + const newTaskBtn = await testdriver.find("New Task"); + await newTaskBtn.click(); + + // Fill in Title + const titleInput = await testdriver.find("Title"); + await titleInput.click(); + await testdriver.type("Buy Groceries"); + + // Fill in Summary + const summaryInput = await testdriver.find("Summary"); + await summaryInput.click(); + await testdriver.type("Milk, eggs, bread, and coffee"); + + // Click "Create Task" button + const createTaskBtn = await testdriver.find("Create Task"); + await createTaskBtn.click(); + + // Assert the task was created and is visible in the list + const createdTask = await testdriver.assert("Buy Groceries task is visible in the task list"); + expect(createdTask).toBeTruthy(); + }); + + it("should toggle dark and light theme", async (context) => { + const testdriver = TestDriver(context); + + await testdriver.provision.chrome({ url: APP_URL }); + + // Click the theme toggle icon next to My Tasks + const themeToggle = await testdriver.find("theme toggle button near My Tasks"); + await themeToggle.click(); + + // Verify background/theme change + const themeAssert = await testdriver.assert("the app theme toggled color mode"); + expect(themeAssert).toBeTruthy(); + }); +}); diff --git a/vitest.config.mjs b/vitest.config.mjs new file mode 100644 index 0000000..df52f41 --- /dev/null +++ b/vitest.config.mjs @@ -0,0 +1,11 @@ +import { defineConfig } from "vitest/config"; +import { config } from "dotenv"; + +config(); + +export default defineConfig({ + test: { + testTimeout: 900000, + hookTimeout: 900000, + }, +});