Tailwind Theme Service and test

tailwind-theme.service.spec.ts

import { waitForAsync } from '@angular/core/testing';
import { TailwindThemeService } from './tailwind-theme.service';
import { of, throwError } from 'rxjs';
import { TailwindThemeConfig } from '../tailwind-theme-config.class';
import * as mockTailwindUtilFunctions from '@workspace/shared/util';

describe('Shared Tailwind Theme Service', () => {
	let tailwindThemeService: TailwindThemeService;

  let mockConfig: TailwindThemeConfig = {
		configUrl: './test-config.json',
	};

  let mockDocument;

  let mockConfigData = {
		apiUrl: 'https://test-api.com',
	};
  
  let mockThemeData = {
		'primary-color': '#0000ff',
		'secondary-color': '#00ff00',
		'accent-color': '#ff0000',
	};

  let mockHttpService;

	beforeEach(() => {
		mockHttpService = { get: null };
		mockDocument = { documentElement: { style: { setProperty: jest.fn() } } };

		tailwindThemeService = new TailwindThemeService(mockHttpService, mockDocument, mockConfig);
	});

	it('should be created', () => {
		expect(tailwindThemeService).toBeTruthy();
	});

	// Doesn't work
	it(
		'should load the config object and update theme variables',
		waitForAsync(() => {
			mockHttpService.get = jest
				.fn()
				.mockReturnValueOnce(of(mockConfigData))
				.mockReturnValueOnce(of(mockThemeData));
			spyOn(mockTailwindUtilFunctions, 'updateThemeVariables');

			tailwindThemeService.loadConfig();

			expect(mockTailwindUtilFunctions.updateThemeVariables).toHaveBeenCalled();
		}),
	);
	
	// This one does work
	it('should load the config object and update theme variables', fakeAsync(() => {
		mockHttpService.get = jest.fn().mockReturnValueOnce(of(mockConfigData)).mockReturnValueOnce(of(mockThemeData));
		spyOn(mockTailwindUtilFunctions, 'updateThemeVariables');

		tailwindThemeService.loadConfig();
		tick();

		expect(mockTailwindUtilFunctions.updateThemeVariables).toHaveBeenCalled();
		expect(mockTailwindUtilFunctions.updateThemeVariables).toHaveBeenCalledTimes(1);
	}));


 	// this test works as expected
	it(
		'should handle an error when the config is loading',
		waitForAsync(() => {
			mockHttpService.get = jest
				.fn()
				.mockReturnValueOnce(throwError('there was an error loading the config data'));
			spyOn(console, 'error');

			tailwindThemeService.loadConfig();

			expect(console.error).toHaveBeenCalledTimes(1);
		}),
	);

	// this test works as expected
	it(
		'should handle an error when the theme is loading',
		waitForAsync(() => {
			mockHttpService.get = jest
				.fn()
				.mockReturnValueOnce(of(mockConfig))
				.mockReturnValueOnce(throwError('there was an error loading the theme data'));
			spyOn(console, 'error');

			tailwindThemeService.loadConfig();

			expect(console.error).toHaveBeenCalledTimes(1);
		}),
	);
});

tailwind-theme.service.ts

import { Inject, Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DOCUMENT } from '@angular/common';
import { TailwindTheme, updateThemeVariables } from '@workspace/shared/util';
import { TailwindThemeConfig } from '../tailwind-theme-config.class';
import { catchError, switchMap } from 'rxjs/operators';
import { throwError } from 'rxjs';

@Injectable()
export class TailwindThemeService {
	constructor(
		private _http: HttpClient,
		@Inject(DOCUMENT) private readonly document: Document,
		private config: TailwindThemeConfig,
	) {}

	loadConfig(): Promise<any> {
		const configUrl = this.config.configUrl || './assets/tailwind-theme.config.js';
		return this._http
			.get(`${configUrl}`)
			.pipe(
				switchMap((configObject: { themeUrl: string }) => {
					return this._http.get(configObject.themeUrl);
				}),
				catchError((err) => {
					console.error(err);
					return throwError(err);
				}),
			)
			.toPromise()
			.then((themeData: TailwindTheme) => {
				updateThemeVariables(themeData, this.document);
			})
			.catch((err: any) => {
				console.error(err);
				console.error('There was an error while loading the Tailwind Theme.');
			});
	}
}