Enterprise UI Development: Testing & Code Quality

Steve Kinney

Steve Kinney

Temporal
8 hours, 25 minutes CC
Enterprise UI Development: Testing & Code Quality

Course Description

Perfect for lead UI developers managing large apps, migrating codebases, or starting scalable projects while maintaining code quality. Learn unit testing with Vitest, continuous integration via GitHub Actions, component and accessibility testing with Axe, mocking techniques, and code standard enforcement using ESLint and Husky & Lint-Staged. Guide your team toward coding scalability!

This course and others like it are available as part of our Frontend Masters video subscription.

Preview
Close

Course Details

Published: May 26, 2023

Learn Straight from the Experts Who Shape the Modern Web

Your Path to Senior Developer and Beyond
  • 200+ In-depth courses
  • 18 Learning Paths
  • Industry Leading Experts
  • Live Interactive Workshops
Get Unlimited Access Now

Table of Contents

Introduction

Section Duration: 32 minutes

The Basics of Unit Testing

Section Duration: 1 hour, 24 minutes

Building a CI Pipeline with Github Actions

Section Duration: 1 hour, 14 minutes

Component Testing

Section Duration: 1 hour, 59 minutes

Accessibility Testing & Code Coverage

Section Duration: 49 minutes

Mocking & Spying

Section Duration: 48 minutes
  • Creating Mocks
    Steve demonstrates how mocks allow developers to test code they don't control without requiring the necessary functions or APIs to be called. This is useful when the external function or API isn't available or would result in increased fees for usage. Mocks can be passed a custom implementation so mocked return values can be used later in the test.
  • Spying on Methods
    Steve explains that spies are similar to mocks except they watch a single method of an object. An alias can be used to call the underlying method. The method can also be added to tests to ensure it's called correctly.
  • Mocking Third-Party Libraries
    Steve shares a use case for mocking and creating custom implementations for third-party libraries. Questions about mocking server-side APIs are also discussed in this lesson.
  • Mocking Time
    Steve uses the useFakeTimers and setSystemTime methods to mock the system time for a test. These methods freeze the system time and allow it to be set to any date-based value to make testing easier and more predictable.
  • Mocking API Requests
    Steve introduces the Mock Service Worker library, which allows developers to mock API requests by intercepting requests on the network level with a service worker. The mock definitions can be seamlessly reused for testing, development, and debugging.

Integration Testing with Playwright

Section Duration: 54 minutes

Enforcing Standards

Section Duration: 33 minutes

Wrapping Up

Section Duration: 9 minutes
Steve's Enterprise UI Development course on Frontend Masters covers maintaining large codebases while maintaining code quality.

It's an amazing course I will recommend for anyone managing medium to large frontend codebase!
Mubarak Alhazan

Mubarak Alhazan

React Frontend Engineer

I just completed "Enterprise UI Development: Testing & Code Quality" by Steve Kinney on Frontend Masters! It was great to learn more about Playwright and the philosophies to follow when inheriting a codebase.
Jorge Mendoza

Jorge Mendoza

JorgeMIIDev

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now