Section 1.1: Project Initialization

We will begin by creating a new Angular application from the ground up, including test configurations. To initiate this process, run the following commands:

$ ng new testing-demo

? Strict type checking? yes

? Angular routing? no

? Which stylesheet? Less

$ ng generate component dashboard

Next, open the testing-demo project in your preferred code editor. Clear the content of app.component.html and replace it with <router-outlet></router-outlet>. Additionally, remove the should render title test from app.component.spec.ts.

Now, let’s focus on the component itself!

dashboard.component.ts

Our component will contain basic logic to modify text based on button interactions, using two variables: title and userFeedback for our tests.

dashboard.component.html

The component's view will feature a few div elements, simulating a user dashboard that serves as a foundation for basic UI testing, demonstrating the information held within class and ID attributes. We will also connect the sayYes() and sayNo() functions to their respective buttons.

Section 1.2: Testing HTML Elements

First, we need to update our imported libraries to include fakeAsync and tick, allowing our asynchronous code to function as if it were synchronous. We will also utilize the By library to interact with the HTML properties of our component.

Defining a Contract Between Tests and Components

We will establish a contract between our test suite and the component's view by defining constants for verification. This ensures our tests represent the expected state of the application.

Next, incorporate the following constants into dashboard.component.spec.ts within the 'DashboardComponent' suite.

Our Initial HTML Verification Test

We can now create our first test to confirm that the HTML displays the correct title. The initial line checks if our component's title matches our test suite's expected value. We will also employ the By library to access the h1 tag within our view.

Verifying Button Click Behavior

It's advisable to use fakeAsync() and tick() for testing asynchronous operations, allowing us to verify that clicking buttons updates the HTML in the #user-feedback ID without any issues.

The first video titled "Testing Angular - How to Start Loving Writing Tests Again" provides insights into improving your testing process and techniques.

Section 1.3: Creating a Mock Login Component

To enhance our app's functionality for further testing, we'll implement a simplified login form. This portion is not about developing a service in Angular, so we'll keep it straightforward.

First, generate a new login component:

$ ng generate component login

We also need to include the necessary form libraries in app.module.ts.

login.component.html

This form will comprise two fields: name and address. Upon clicking "Login," the form will invoke the onSubmit() method in login.component.ts, displaying a boolean value indicating if the user is logged in.

login.component.ts

The component will create a checkoutForm using the injected _formBuilder. The onSubmit() method will simulate the login process.

Section 1.4: Testing with Spies

The term "spies" refers to a technique for monitoring whether specific functions are invoked. In login.component.spec.ts, we can add code to implement this feature.

The crucial test starts on line 31, where we utilize the spyOn method to observe the onSubmit function within our component. By employing fakeAsync() and tick(), we can simulate a click event on the login button and verify that the onSubmit() method was executed.

Spies can be utilized flexibly, allowing for extensive test coverage by observing various code segments.

The second video, "Techniques and Practices for Testing Angular," elaborates on various testing methods and practices.

Section 1.5: Testing with Mocks

Mocks serve a similar purpose in isolating tests from external dependencies. For example, if our login component relies on an API to verify user accounts, we want our tests to remain independent from external factors like service downtime or latency.

To achieve this, we will create a helper class called FakeLoginVerificationService, designed to simulate user verification. This class will contain a method verifyLogin, which accepts a name and address.

Then, we will implement a mock service, MockLoginVerificationService, that mirrors the functionality of our fake service but with controlled outcomes.

By replacing the original service with our mock in the test setup, we can ensure that tests are unaffected by external dependencies, thus maintaining their integrity.