date-string-interceptor.spec.ts

import {
  HTTP_INTERCEPTORS,
  HttpClient,
  HttpParams,
} from '@angular/common/http';
import {
  HttpClientTestingModule,
  HttpTestingController,
} from '@angular/common/http/testing';

import { DateStringInterceptor } from './date-string-interceptor';
import { TestBed } from '@angular/core/testing';
import { format } from 'date-fns';

describe('DateStringInterceptor', () => {
  let http: HttpClient;
  let httpMock: HttpTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [
        {
          provide: HTTP_INTERCEPTORS,
          useClass: DateStringInterceptor,
          multi: true,
        },
      ],
    });
    http = TestBed.get(HttpClient);
    httpMock = TestBed.get(HttpTestingController);
  });

  function sendRequest(params: any) {
    http
      .post('/data', '', { params: new HttpParams({ fromObject: params }) })
      .subscribe(response => expect(response).toBeTruthy());
  }

  it('should change Date Object to string', () => {
    const now = new Date();
    sendRequest({
      date: now,
    });

    httpMock.expectOne(
      r =>
        r.params
          .getAll('date')
          .filter(
            dateString => dateString === format(now, 'yyyy-MM-dd HH:mm:ss'),
          ).length === 1,
    );

    httpMock.verify();
  });

  it('should change Date Objects to string array', () => {
    const now = new Date();
    sendRequest({
      date: [now, now],
    });

    httpMock.expectOne(
      r =>
        r.params
          .getAll('date')
          .filter(
            dateString => dateString === format(now, 'yyyy-MM-dd HH:mm:ss'),
          ).length === 2,
    );

    httpMock.verify();
  });
});

date-string-interceptor.ts

import {
  HttpEvent,
  HttpHandler,
  HttpInterceptor,
  HttpParams,
  HttpRequest,
} from '@angular/common/http';
import { Observable, from } from 'rxjs';
import { map, mergeMap, reduce, tap } from 'rxjs/operators';

import { Injectable } from '@angular/core';
import { format } from 'date-fns';

@Injectable()
export class DateStringInterceptor implements HttpInterceptor {
  intercept(
    req: HttpRequest<any>,
    next: HttpHandler,
  ): Observable<HttpEvent<any>> {
    const parseDate = DateStringInterceptor.parseDate;

    return from(req.params.keys()).pipe(
      map(key => ({ [key]: parseDate(req.params.getAll(key)) })),
      reduce((acc, cur) => Object.assign(acc, cur), {}),
      map(params => new HttpParams({ fromObject: params })),
      mergeMap(params => next.handle(req.clone({ params: params }))),
    );
  }

  private static parseDate(values: any[]) {
    return values.map((value: any) =>
      value instanceof Date ? format(value, 'yyyy-MM-dd HH:mm:ss') : value,
    );
  }
}