TDD with an AI Agent: Whisking Raw Ideas into Tidy Code скачать в хорошем качестве

TDD with an AI Agent: Whisking Raw Ideas into Tidy Code

In this #CodeTeppanyaki session, I introduce Charted Coding: a Test-Driven workflow where you guide the AI — not the other way around. AI code assistants are often used with code-and-fix workflows. Whether AI is involved or not, code-and-fix will produce unmaintainable code. These workflows also frustrate developers, especially due to code review fatigue. That is why we need a different approach for integrating AI in an efficient dev workflow. We will add pagination to an existing #Angular application using #Cursor IDE, and testing tools such as #Vitest and #Wallaby. In addition to some MCP servers that will enhance the agent. Starting from a lightweight design doc, we: • 🗺️ Chart our route with the AI agent. • 🧜‍♀️ Let mermaids draw the map. 😉 • 🪜 Drive the AI agent through baby steps that are quick to generate and easy to review. • ♻️ Let the AI agent #TDD until all the tests pass. • 🤖 Use a lightweight Charted Coding MCP Server to streamline the workflow. This is how we can use AI code assistants to amplify structured development workflows — not replace it with code-and-fix chaos. It’s not AI vs. TDD. It’s TDD with an AI agent. 🍴 Pull up a chair. Let’s cook. Chapters: 00:00 - 🤯 Code & Fix + Review Fatigue 01:39 - 🧭 Introducing Charted Coding 05:21 - 🪨🏄 Vibe-Coding Fail 09:37 - 📝 Design Doc 13:14 - 🗺️ Mermaid Diagram 18:50 - 🎯 The Testing Strategy 23:43 - 👀 Design Doc AI Review 27:15 - 🤖 The Charted Coding MCP Server 28:51 - 🏗️ Scaffolding 30:30 - 🚧 Generate WIP Code & Tests 33:12 - 🔴 Generate Failing Tests 36:28 - 🟢 Make The Tests Pass 43:21 - 🧹 Tidy Up Before Integrating the Paginator 46:02 - 🔌 Integrating the Paginator with Charted Coding 51:02 - 🧹 Tidy Up 52:27 - 🎨 Let AI Polish the UI 54:55 - 🎁 Key Takeaways 💻 Source code: https://github.com/yjaaidi/experiment... ✅ Pragmatic Angular Testing video course: https://marmico.de/test.ng 💬 Got questions? Drop a comment. #AI #ChartedCoding #DevWorkflow