list.component.spec.ts

import { OverlayContainer } from '@angular/cdk/overlay';
import { HarnessLoader } from '@angular/cdk/testing';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { Component, CUSTOM_ELEMENTS_SCHEMA, ViewChild } from '@angular/core';
import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
import { ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonHarness } from '@angular/material/button/testing';
import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { MatDialogHarness } from '@angular/material/dialog/testing';
import { MatIconModule } from '@angular/material/icon';
import { MatSelectModule } from '@angular/material/select';
import { MatSelectHarness } from '@angular/material/select/testing';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ActivatedRoute, Router } from '@angular/router';
import { ApiResponseData, DeleteListResponse, ListNodeInfo, ListsEndpointAdmin, ListsResponse, MockProjects, ProjectResponse, ProjectsEndpointAdmin, ReadProject } from '@dasch-swiss/dsp-js';
import {
    DspActionModule,
    DspApiConnectionToken,
    DspCoreModule,
    Session,
    SessionService
} from '@dasch-swiss/dsp-ui';
import { TranslateModule } from '@ngx-translate/core';
import { of } from 'rxjs';
import { AjaxResponse } from 'rxjs/ajax';
import { CacheService } from 'src/app/main/cache/cache.service';
import { DialogHeaderComponent } from 'src/app/main/dialog/dialog-header/dialog-header.component';
import { DialogComponent } from 'src/app/main/dialog/dialog.component';
import { TestConfig } from 'test.config';
import { ListComponent } from './list.component';

/**
 * test Host Component
 */
@Component({
    template: '<app-list #listComponent></app-list>'
})
class TestHostComponent {
    @ViewChild('listComponent') listComponent: ListComponent;
}

/**
 * mock ListItem.
 */
@Component({
    template: '<app-list-item></app-list-item>'
})
class MockListItemComponent { }

/**
 * mock ListItemForm.
 */
@Component({
    template: '<app-list-item-form></app-list-item-form>'
})
class MockListItemFormComponent { }

describe('ListComponent', () => {
    let testHostComponent: TestHostComponent;
    let testHostFixture: ComponentFixture<TestHostComponent>;
    let rootLoader: HarnessLoader;
    let overlayContainer: OverlayContainer;

    beforeEach(waitForAsync(() => {

        const dspConnSpyObj = {
            admin: {
                listsEndpoint: jasmine.createSpyObj('listsEndpoint', ['getListsInProject', 'deleteListNode']),
                projectsEndpoint: jasmine.createSpyObj('projectsEndpoint', ['getProjectByShortcode'])
            }
        };

        const sessionServiceSpy = jasmine.createSpyObj('SessionService', ['getSession']);

        const cacheServiceSpy = jasmine.createSpyObj('CacheService', ['get']);

        const routerSpy = jasmine.createSpyObj('Router', ['navigate', 'navigateByUrl']);

        TestBed.configureTestingModule({
            declarations: [
                ListComponent,
                TestHostComponent,
                MockListItemComponent,
                MockListItemFormComponent,
                DialogComponent,
                DialogHeaderComponent
            ],
            imports: [
                BrowserAnimationsModule,
                DspActionModule,
                DspCoreModule,
                MatButtonModule,
                MatDialogModule,
                MatIconModule,
                MatSelectModule,
                MatToolbarModule,
                MatTooltipModule,
                ReactiveFormsModule,
                TranslateModule.forRoot()
            ],
            providers: [
                {
                    provide: ActivatedRoute,
                    useValue: {
                        parent: {
                            paramMap: of({
                                get: (param: string) => {
                                    if (param === 'shortcode') {
                                        return TestConfig.ProjectCode;
                                    }
                                }
                            })
                        }
                    }
                },
                {
                    provide: DspApiConnectionToken,
                    useValue: dspConnSpyObj
                },
                {
                    provide: SessionService,
                    useValue: sessionServiceSpy
                },
                {
                    provide: CacheService,
                    useValue: cacheServiceSpy
                },
                {
                    provide: Router,
                    useValue: routerSpy
                },
                {
                    provide: MAT_DIALOG_DATA,
                    useValue: {}
                },
                {
                    provide: MatDialogRef,
                    useValue: {}
                }
            ],
            schemas: [CUSTOM_ELEMENTS_SCHEMA]
        }).compileComponents();
    }));

    beforeEach(() => {

        // mock session service
        const sessionSpy = TestBed.inject(SessionService);

        (sessionSpy as jasmine.SpyObj<SessionService>).getSession.and.callFake(
            () => {
                const session: Session = {
                    id: 12345,
                    user: {
                        name: 'username',
                        jwt: 'myToken',
                        lang: 'en',
                        sysAdmin: true,
                        projectAdmin: []
                    }
                };

                return session;
            }
        );

        // mock cache service
        const cacheSpy = TestBed.inject(CacheService);

        (cacheSpy as jasmine.SpyObj<CacheService>).get.and.callFake(
            () => {
                const response: ProjectResponse = new ProjectResponse();

                const mockProjects = MockProjects.mockProjects();

                response.project = mockProjects.body.projects[0];

                return of(response.project as ReadProject);
            }
        );

        // mock router
        const routerSpy = TestBed.inject(Router);

        (routerSpy as jasmine.SpyObj<Router>).navigate.and.stub();
        (routerSpy as jasmine.SpyObj<Router>).navigateByUrl.and.stub();

        // mock lists endpoint
        const dspConnSpy = TestBed.inject(DspApiConnectionToken);

        (dspConnSpy.admin.listsEndpoint as jasmine.SpyObj<ListsEndpointAdmin>).getListsInProject.and.callFake(
            () => {
                const response = new ListsResponse();

                response.lists = new Array<ListNodeInfo>();

                const mockList1 = new ListNodeInfo();
                mockList1.comments = [];
                mockList1.id = 'http://rdfh.ch/lists/0001/mockList01';
                mockList1.isRootNode = true;
                mockList1.labels = [{ language: 'en', value: 'Mock List 01' }];
                mockList1.projectIri = 'http://rdfh.ch/projects/myProjectIri';

                const mockList2 = new ListNodeInfo();
                mockList2.comments = [];
                mockList2.id = 'http://rdfh.ch/lists/0001/mockList02';
                mockList2.isRootNode = true;
                mockList2.labels = [{ language: 'en', value: 'Mock List 02' }];
                mockList2.projectIri = 'http://rdfh.ch/projects/myProjectIri';

                response.lists.push(mockList1, mockList2);

                return of(ApiResponseData.fromAjaxResponse({ response } as AjaxResponse));
            }
        );

        testHostFixture = TestBed.createComponent(TestHostComponent);
        testHostComponent = testHostFixture.componentInstance;
        testHostFixture.detectChanges();

        overlayContainer = TestBed.inject(OverlayContainer);
        rootLoader = TestbedHarnessEnvironment.documentRootLoader(testHostFixture);

        // mock projects endpoint
        (dspConnSpy.admin.projectsEndpoint as jasmine.SpyObj<ProjectsEndpointAdmin>).getProjectByShortcode.and.callFake(
            () => {
                const response = new ProjectResponse();

                const mockProjects = MockProjects.mockProjects();

                response.project = mockProjects.body.projects[0];

                return of(ApiResponseData.fromAjaxResponse({ response } as AjaxResponse));
            }
        );

        expect(testHostComponent.listComponent.session).toBeTruthy();
        expect(testHostComponent).toBeTruthy();
    });

    afterEach(async () => {
        const dialogs = await rootLoader.getAllHarnesses(MatDialogHarness);
        await Promise.all(dialogs.map(async d => await d.close()));

        // angular won't call this for us so we need to do it ourselves to avoid leaks.
        overlayContainer.ngOnDestroy();
    });

    it('should get the project', () => {
        const mockProject = MockProjects.mockProjects().body.projects[0];

        expect(testHostComponent.listComponent.project).toEqual(mockProject);
    });

    it('should initialize the list of lists', () => {
        const listOfLists = new Array<ListNodeInfo>();

        const list1 = new ListNodeInfo();
        list1.comments = [];
        list1.id = 'http://rdfh.ch/lists/0001/mockList01';
        list1.isRootNode = true;
        list1.labels = [{ language: 'en', value: 'Mock List 01' }];
        list1.projectIri = 'http://rdfh.ch/projects/myProjectIri';

        const list2 = new ListNodeInfo();
        list2.comments = [];
        list2.id = 'http://rdfh.ch/lists/0001/mockList02';
        list2.isRootNode = true;
        list2.labels = [{ language: 'en', value: 'Mock List 02' }];
        list2.projectIri = 'http://rdfh.ch/projects/myProjectIri';

        listOfLists.push(list1, list2);

        expect(testHostComponent.listComponent.lists).toEqual(listOfLists);
    });

    it('should open a list', async () => {
        const select = await rootLoader.getHarness(MatSelectHarness);

        await select.open();

        const options = await select.getOptions({ text: 'Mock List 01 (en)' });

        expect(options.length).toEqual(1);

        await options[0].click();

        expect(testHostComponent.listComponent.list.id).toEqual('http://rdfh.ch/lists/0001/mockList01');
    });

    it('should delete a root node', async () => {
        const deleteListResponse: DeleteListResponse = new DeleteListResponse();
        deleteListResponse.deleted = true;
        deleteListResponse.iri = 'http://rdfh.ch/lists/0001/mockList01';

        const listSpy = TestBed.inject(DspApiConnectionToken);

        // mock delete list root node response
        (listSpy.admin.listsEndpoint as jasmine.SpyObj<ListsEndpointAdmin>).deleteListNode.and.callFake(
            () => {
                const response = deleteListResponse;

                return of(ApiResponseData.fromAjaxResponse({ response } as AjaxResponse));
            }
        );

        // mock the call to the API again because we call the API again after deletion to get the lists
        // therefore the mock call in the BeforeEach method above will not work since it returns two lists
        // after deletion, we should only have one list
        (listSpy.admin.listsEndpoint as jasmine.SpyObj<ListsEndpointAdmin>).getListsInProject.and.callFake(
            () => {
                const response = new ListsResponse();

                response.lists = new Array<ListNodeInfo>();

                const mockList2 = new ListNodeInfo();
                mockList2.comments = [];
                mockList2.id = 'http://rdfh.ch/lists/0001/mockList02';
                mockList2.isRootNode = true;
                mockList2.labels = [{ language: 'en', value: 'Mock List 02' }];
                mockList2.projectIri = 'http://rdfh.ch/projects/myProjectIri';

                response.lists.push(mockList2);

                return of(ApiResponseData.fromAjaxResponse({ response } as AjaxResponse));
            }
        );

        // open first list among lists
        const select = await rootLoader.getHarness(MatSelectHarness);

        await select.open();

        const options = await select.getOptions({ text: 'Mock List 01 (en)' });

        expect(options.length).toEqual(1);

        await options[0].click();

        // click delete button
        const deleteButton = await rootLoader.getHarness(MatButtonHarness.with({ selector: '.delete' }));
        await deleteButton.click();

        // get dialog harness
        const dialogHarnesses = await rootLoader.getAllHarnesses(MatDialogHarness);

        expect(dialogHarnesses.length).toEqual(1);

        // click confirm button
        const confirmButton = await rootLoader.getHarness(MatButtonHarness.with({ selector: '.confirm-button' }));

        await confirmButton.click();

        testHostFixture.whenStable().then(() => {
            expect(listSpy.admin.listsEndpoint.deleteListNode).toHaveBeenCalledWith('http://rdfh.ch/lists/0001/mockList01');
            expect(listSpy.admin.listsEndpoint.deleteListNode).toHaveBeenCalledTimes(1);

            expect(testHostComponent.listComponent.lists.length).toEqual(1);
            expect(testHostComponent.listComponent.lists[0].id).toEqual('http://rdfh.ch/lists/0001/mockList02');

            expect(testHostComponent.listComponent.listIri).toEqual(testHostComponent.listComponent.lists[0].id);
        });
    });
});