Environment Setup

Step 1

⏱ 15 min🟢 Beginner

In this step you will confirm that GitHub Copilot is active in VS Code, clone the starter repository, open the workspace, and trigger your first Copilot inline suggestion — all before writing a single test.

Workshop exercise repositorySetup

Work from master in copilot-testing-workshop. Use the solution checkpoints only if you need to catch up or compare your result after the exercise.

Participant goalClone the exercises repo, install dependencies, activate Copilot, and tour the checkout pipeline (User → Cart → Discount → Fraud → Payment → Notification).

Run commandnpm install && npm run dev

Primary files

• workshop-exercises/src/app.ts
• workshop-exercises/src/services/calculateDiscount.ts
• workshop-exercises/README.md

Open repositoryTrack setup issues

Your Setup

💻VS Code

runs▸

🤖Copilot Extension

📦Starter Repo

Step 1 — Clone the Starter Repository

git clone https://github.com/moatazeldebsy/copilot-testing-workshop.git
    cd copilot-testing-workshop
npm install

Expected output

added 412 packages in 8s

Step 2 — Open in VS Code

code .

VS Code opens the workspace. You should see a src/ folder containing a small Express REST API, a minimal UI flow for the later Playwright and RTL exercises, and a tests/ folder with workshop scaffolding.

Step 3 — Verify Copilot Is Active

Look at the VS Code status bar (bottom). The Copilot icon should appear with no warning. If it shows a warning, click it and sign in to GitHub.

# Confirm Copilot is available in VS Code
code --list-extensions | grep copilot

Expected output

GitHub.copilot
# GitHub.copilot-chat may also appear on some installs.
# Chat is available automatically in current VS Code Copilot setup.

💡 Current setup note

GitHub's current VS Code setup flow installs the required Copilot pieces automatically. Do not treat the old separate GitHub.copilot-chat install as a workshop prerequisite.

Step 1 — Your First Copilot Suggestion

Create a new file tests/smoke.test.ts and start typing. Copilot will suggest a completion — press Tab to accept it.

// tests/smoke.test.ts
// Type the line below slowly and watch Copilot suggest the rest:
describe('smoke', () => {
  it('should pass', () => {
    // Copilot will suggest: expect(true).toBe(true);
  });
});

💡 Keyboard shortcuts

Action	macOS	Windows / Linux
Accept suggestion	Tab	Tab
Dismiss suggestion	Esc	Esc
Next suggestion	Option+]	Alt+]
Open Copilot Chat	Cmd+I	Ctrl+I

Step 2 — Run the Existing Tests

npm test

Expected output

Test Suites: 0 passed, 0 total
Tests:       0 passed, 0 total

    # This is expected — main starts with incomplete or empty tests.
    # We will build the suites incrementally during the workshop.

🏋️ Hands-on Challenge

Explore the starter repo structure. Find the main service file in src/. Open Copilot Chat (Cmd+I) and ask: "What test cases should I write for this file?"

HintWhat to look for

Look for a file like src/services/userService.ts or src/controllers/productController.ts. Select the entire file content, open Copilot Chat, and type your question. Copilot will suggest relevant test cases based on the code.

BonusGenerate a Jest config

Open a new file jest.config.ts and ask Copilot to generate a Jest configuration for a TypeScript project. Compare the suggestion to the existing config in the starter repo.

Key Takeaways

• Copilot works inline — start typing and it suggests; press Tab to accept
• Copilot Chat lets you ask questions about code in natural language
• The starter repo has intentionally incomplete tests — we generate them together
• Always verify Copilot is signed in before the session starts