Enterprise UI Development: Testing & Code Quality

• Understanding Unit Testing: Learn to implement unit tests using Vitest and explore different testing types, including unit, component, integration, and end-to-end tests, to ensure code reliability.
• Continuous Integration with GitHub Actions: Set up a CI pipeline to automate testing and deployment processes, enhancing efficiency and reducing errors in large codebases.
• Component and Accessibility Testing: Use Axe for accessibility testing to ensure applications meet accessibility standards and create a seamless user experience.
• Mocking Techniques: Develop skills in creating mocks and spies to test components and third-party libraries without external dependencies.
• Integration Testing with Playwright: Gain expertise in using Playwright for comprehensive end-to-end testing across multiple browser environments.
• Code Standard Enforcement: Implement ESLint, Husky, and Lint-Staged to maintain high code quality standards and automate code formatting and linting processes.

This course, led by Steve Kinney, is designed for lead UI developers working with large applications, migrating codebases, or starting scalable projects. The course focuses on maintaining code quality through unit testing with Vitest, continuous integration using GitHub Actions, and component and accessibility testing with Axe. Additionally, it covers mocking techniques and code standard enforcement using ESLint and Husky. Participants will learn to guide their teams toward scalable coding practices.

• Lead UI developers managing large or complex codebases.
• Developers transitioning from small projects to enterprise-level applications.
• Software engineers interested in improving testing and code quality practices.
• Frontend developers aiming to implement robust testing frameworks and CI pipelines.

• Basic understanding of React and JavaScript.
• Familiarity with frontend development tools and practices.
• Experience with Git and version control systems.

Introduction

• Overview of the challenges in managing large codebases and the importance of infrastructure.

The Basics of Unit Testing

• Understanding different types of tests and setting up unit testing with Vitest.
• Exploring Vitest UI and practicing test implementation through exercises.

Building a CI Pipeline with GitHub Actions

• Introduction to GitHub Actions, UI, and branch protection rules.
• Implementing multiple jobs and caching dependencies for efficient CI processes.

Component Testing

• Configuring component tests and interacting with the DOM.
• Using Testing Library's user-event package to simulate user interactions.

Accessibility Testing & Code Coverage

• Automating accessibility tests with Axe and understanding code coverage reports.
• Configuring Vitest for comprehensive code coverage tracking.

Mocking & Spying

• Creating mocks and spies for testing code without external dependencies.
• Exploring the Mock Service Worker library for API request simulation.

Integration Testing with Playwright

• Setting up Playwright for end-to-end testing across browser environments.
• Recording tests and creating screenshots for visual regression testing.

Enforcing Standards

• Writing custom ESLint rules and using Husky and Lint-Staged for pre-commit checks.