Imports

You still have errors remaining. Let's start by fixing the errors with the WeatherService error first, since it's a dependency of other components. The test is reporting a missing provider for HttpClient. However, we don't want our unit test to make calls over HTTP, so we shouldn't provide the HttpClient, like we did in the previous section. Angular provides a test double for HttpClient named HttpClientTestingModule. In order to leverage it, you must import it, and it will then be automatically provided to the service for you.

Import HttpClientTestingModule below the providers:

src/app/weather/weather.service.spec.ts
import { HttpClientTestingModule } from '@angular/common/http/testing' 
...
describe('WeatherService', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
        imports: [HttpClientTestingModule],
        ...

Similar to HttpClientTestingModule, there's also a RouterTestingModule and a NoopAnimationsModule that are mock versions of the real services, so the unit tests can focus on only testing the component or service code that you write. In the later chapters, we will also cover how you can write your own mocks.

Now you should only see errors related to AppComponent and CurrentWeatherComponent. These components are failing even though you have provided their dependencies. To understand why this happens and how you can resolve it, you must also understand how to work with test doubles.