From e3ce6d85ef48f69c7c7b73cab56abd42e5fdd98a Mon Sep 17 00:00:00 2001 From: Clemente Raposo Date: Tue, 4 Feb 2020 00:38:51 +0000 Subject: [PATCH] Retrieve Navigation Menu data from API - Add Navigation Api Service - Add Metadata Facade Service - Build Navigation menu using fetched menu items - Fix submenu item link on template - Cleanup code warnings - Remove get method from RecordGQL -- we won't be using GraphQL cache for the moment - Fix classic view karma tests - Fix Filter karma tests - Add set of base jasmine tests for: -- navbar component -- metadata service -- navigation metadata service --- core/app/karma.conf.js | 2 +- .../classic-view.component.spec.ts | 20 +- .../classic-view/classic-view.component.ts | 2 +- .../filter/filter.component.spec.ts | 12 +- .../list-view/list-view.component.spec.ts | 2 - .../app/src/components/navbar/navbar-model.ts | 1 + .../src/components/navbar/navbar.abstract.ts | 342 ++++-------------- .../components/navbar/navbar.component.html | 5 +- .../navbar/navbar.component.spec.ts | 87 ++++- .../src/components/navbar/navbar.component.ts | 27 +- .../api/graphql-api/api.record.get.ts | 36 +- .../src/services/metadata/metadata.service.ts | 18 + .../src/services/metadata/metadata.spec.ts | 74 ++++ .../navigation/navigation.metadata.service.ts | 30 ++ .../navigation/navigation.metadata.spec.ts | 88 +++++ 15 files changed, 413 insertions(+), 333 deletions(-) create mode 100644 core/app/src/services/metadata/metadata.service.ts create mode 100644 core/app/src/services/metadata/metadata.spec.ts create mode 100644 core/app/src/services/metadata/navigation/navigation.metadata.service.ts create mode 100644 core/app/src/services/metadata/navigation/navigation.metadata.spec.ts diff --git a/core/app/karma.conf.js b/core/app/karma.conf.js index 717a3991e..8d7de2f71 100644 --- a/core/app/karma.conf.js +++ b/core/app/karma.conf.js @@ -25,7 +25,7 @@ module.exports = function (config) { colors: true, logLevel: config.LOG_INFO, autoWatch: true, - browsers: ['Chrome'], + browsers: ['Chrome', 'Chromium'], singleRun: false, restartOnFileChange: true }); diff --git a/core/app/src/components/classic-view/classic-view.component.spec.ts b/core/app/src/components/classic-view/classic-view.component.spec.ts index 48be71d74..70ed0c738 100644 --- a/core/app/src/components/classic-view/classic-view.component.spec.ts +++ b/core/app/src/components/classic-view/classic-view.component.spec.ts @@ -5,16 +5,25 @@ import {RouterTestingModule} from '@angular/router/testing'; import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing'; import {ClassicViewUiComponent} from './classic-view.component'; -import {ApiService} from '../../services/api/api.service'; +import {ApiService} from '@services/api/api.service'; +import {ActivatedRoute} from '@angular/router'; +import {of} from 'rxjs'; describe('ClassicViewUiComponent', () => { let component: ClassicViewUiComponent; let fixture: ComponentFixture; + const route = ({ + data: { view: { html: '

haha

' }}, + snapshot: { + data: { view: { html: '

haha

' }} + } + } as any) as ActivatedRoute; beforeEach(async(() => { TestBed.configureTestingModule({ schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [RouterTestingModule, HttpClientTestingModule, FormsModule], + providers: [{ provide: ActivatedRoute, useValue: route }], declarations: [ClassicViewUiComponent] }) .compileComponents(); @@ -28,6 +37,15 @@ describe('ClassicViewUiComponent', () => { it(`should create`, async(inject([HttpTestingController], (router: RouterTestingModule, http: HttpTestingController, api: ApiService) => { + expect(component).toBeTruthy(); + expect(component.data.view.html).toEqual('

haha

'); + }))); + + it(`should display provided html`, async(inject([HttpTestingController], + (router: RouterTestingModule, http: HttpTestingController, api: ApiService) => { + + const classicElement: HTMLElement = fixture.nativeElement; + expect(classicElement.innerHTML).toContain('

haha

'); }))); }); diff --git a/core/app/src/components/classic-view/classic-view.component.ts b/core/app/src/components/classic-view/classic-view.component.ts index 154698781..369499d80 100644 --- a/core/app/src/components/classic-view/classic-view.component.ts +++ b/core/app/src/components/classic-view/classic-view.component.ts @@ -9,7 +9,7 @@ import {ActivatedRoute} from '@angular/router'; export class ClassicViewUiComponent { data: any; - @ViewChild('dataContainer', {static:true}) dataContainer: ElementRef; + @ViewChild('dataContainer', {static: true}) dataContainer: ElementRef; public element: any; renderHtml(data) { diff --git a/core/app/src/components/filter/filter.component.spec.ts b/core/app/src/components/filter/filter.component.spec.ts index 27c651031..b3021f815 100644 --- a/core/app/src/components/filter/filter.component.spec.ts +++ b/core/app/src/components/filter/filter.component.spec.ts @@ -1,20 +1,20 @@ import {async, ComponentFixture, TestBed} from '@angular/core/testing'; -import {FilterViewUiComponent} from './filter-view.component'; +import {FilterUiComponent} from './filter.component'; -describe('FilterViewUiComponent', () => { - let component: FilterViewUiComponent; - let fixture: ComponentFixture; +describe('FilterUiComponent', () => { + let component: FilterUiComponent; + let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [FilterViewUiComponent] + declarations: [FilterUiComponent] }) .compileComponents(); })); beforeEach(() => { - fixture = TestBed.createComponent(FilterViewUiComponent); + fixture = TestBed.createComponent(FilterUiComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/core/app/src/components/list-view/list-view.component.spec.ts b/core/app/src/components/list-view/list-view.component.spec.ts index 0946b0779..743048278 100644 --- a/core/app/src/components/list-view/list-view.component.spec.ts +++ b/core/app/src/components/list-view/list-view.component.spec.ts @@ -14,8 +14,6 @@ import {HttpClientModule} from '@angular/common/http'; import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; import {ListViewUiComponent} from './list-view.component'; -import {SvgIconUiComponent} from '../svg-icon/svg-icon.component'; -import {ModalViewUiComponent} from '../modal-view/modal-view.component'; let mockRouter: any; diff --git a/core/app/src/components/navbar/navbar-model.ts b/core/app/src/components/navbar/navbar-model.ts index afeba18b8..b822cfcf5 100644 --- a/core/app/src/components/navbar/navbar-model.ts +++ b/core/app/src/components/navbar/navbar-model.ts @@ -11,4 +11,5 @@ export interface NavbarModel { currentUser: CurrentUserModel; all: AllMenuModel; menu: any; + buildMenu(items: any, menuItemThreshold: number): void; } diff --git a/core/app/src/components/navbar/navbar.abstract.ts b/core/app/src/components/navbar/navbar.abstract.ts index fdd2c69d3..db6ea0296 100644 --- a/core/app/src/components/navbar/navbar.abstract.ts +++ b/core/app/src/components/navbar/navbar.abstract.ts @@ -7,27 +7,27 @@ export class NavbarAbstract implements NavbarModel { useGroupTabs = true; globalActions = [ { - 'link': { - 'url': '', - 'label': 'Employees' + link: { + url: '', + label: 'Employees' } }, { - 'link': { - 'url': '', - 'label': 'Admin' + link: { + url: '', + label: 'Admin' } }, { - 'link': { - 'url': '', - 'label': 'Support Forums' + link: { + url: '', + label: 'Support Forums' } }, { - 'link': { - 'url': '', - 'label': 'About' + link: { + url: '', + label: 'About' } } ]; @@ -39,263 +39,65 @@ export class NavbarAbstract implements NavbarModel { modules: [], extra: [], }; - menu = [ - { - "link": { - "label": "Accounts", - "url": '' - }, - "submenu": - [ - { - "link": { - "label": "Create Account", - "url": "", - "iconRef": {"resolved": "home_page"} - }, - "icon": "plus", - "submenu": [], + menu = []; - }, - { - "link": { - "label": "View Account", "url": "/#/Accounts/index" - }, - "icon": "plus", - "submenu": [] - }, - { - "link": { - "label": "Import Accounts", "url": "" - }, - "icon": "plus", - "submenu": [] - }, - ] - }, - { - "link": { "label": "Contacts", "url": '' }, "icon": "home_page", - "submenu": - [ - { - "link": { - "label": "Create Contact", - "url": "" - }, - "icon": "plus", - "submenu": [] - }, - { - "link": { - "label": "View Contact", "url": "" - }, - "icon": "plus", - "submenu": [] - }, - { - "link": { - "label": "Import Contacts", "url": "" - }, - "icon": "plus", - "submenu": [] - }, - ] - }, - { - "link": { "label": "Opportunities", "url": '' }, "icon": "home_page", - "submenu": - [ - { - "link": { - "label": "Create Opportunity", - "url": "" - }, - "icon": "plus", - "submenu": [] - }, - { - "link": { - "label": "View Opportunity", "url": "" - }, - "icon": "plus", - "submenu": [] - }, - { - "link": { - "label": "Import Opportunities", "url": "" - }, - "icon": "plus", - "submenu": [] - }, - ] - }, - { - "link": { "label": "Leads", "url": '' }, "icon": "home_page", - "submenu": - [ - { - "link": { - "label": "Create Lead", - "url": "" - }, - "icon": "plus", - "submenu": [] - }, - { - "link": { - "label": "View Lead", "url": "" - }, - "icon": "plus", - "submenu": [] - }, - { - "link": { - "label": "Import Leads", "url": "" - }, - "icon": "plus", - "submenu": [] - }, - ] - }, - { - "link": { "label": "Quotes", "url": '' }, "icon": "home_page", - "submenu": - [ - { - "link": { - "label": "Create Quote", - "url": "" - }, - "icon": "plus", - "submenu": [] - }, - { - "link": { - "label": "View Quote", "url": "" - }, - "icon": "plus", - "submenu": [] - }, - { - "link": { - "label": "Import Quotes", "url": "" - }, - "icon": "plus", - "submenu": [] - }, - ] - }, - { - "link": { "label": "Calendar", "url": '' }, "icon": "home_page", - "submenu": - [ - { - "link": { - "label": "Create Calendar", - "url": "" - }, - "icon": "plus", - "submenu": [] - }, - { - "link": { - "label": "View Calendar", "url": "" - }, - "icon": "plus", - "submenu": [] - }, - { - "link": { - "label": "Import Calendars", "url": "" - }, - "icon": "plus", - "submenu": [] - }, - ] - }, - { - "link": { "label": "Documents", "url": '' }, "icon": "home_page", - "submenu": - [ - { - "link": { - "label": "Create Document", - "url": "" - }, - "icon": "plus", - "submenu": [] - }, - { - "link": { - "label": "View Document", "url": "" - }, - "icon": "plus", - "submenu": [] - }, - { - "link": { - "label": "Import Documents", "url": "" - }, - "icon": "plus", - "submenu": [] - }, - ] - }, - { - "link": { "label": "Emails", "url": '' }, "icon": "home_page", - "submenu": - [ - { - "link": { - "label": "Create Email", - "url": "" - }, - "icon": "plus", - "submenu": [] - }, - { - "link": { - "label": "View Email", "url": "" - }, - "icon": "plus", - "submenu": [] - }, - { - "link": { - "label": "Import Emails", "url": "" - }, - "icon": "plus", - "submenu": [] - }, - ] - }, - { - "link": { "label": "Spots", "url": '' }, "icon": "home_page", - "submenu": - [ - { - "link": { - "label": "Create Spot", - "url": "" - }, - "icon": "plus", - "submenu": [] - }, - { - "link": { - "label": "View Spot", "url": "" - }, - "icon": "plus", - "submenu": [] - }, - { - "link": { - "label": "Import Spots", "url": "" - }, - "icon": "plus", - "submenu": [] - }, - ] + public buildMenu(items: {}, threshold: number): void { + const navItems = []; + const moreItems = []; + + if (!items || Object.keys(items).length === 0) { + this.menu = navItems; + this.all.extra = moreItems; } - ]; -} \ No newline at end of file + + let count = 0; + Object.keys(items).forEach(module => { + + if (count <= threshold) { + navItems.push(this.buildMenuItem(module, items[module])); + } else { + moreItems.push(this.buildMenuItem(module, items[module])); + } + + count++; + }); + + this.menu = navItems; + this.all.modules = moreItems; + } + + public buildMenuItem(module: string, label: string): any { + + return { + link: { label, url: `/#/${module}/index` }, icon: 'home_page', + submenu: + [ + { + link: { + label: `Create ${label}`, + url: `/#/${module}/edit` + }, + icon: 'plus', + submenu: [] + }, + { + link: { + label: `View ${label}`, + url: `/#/${module}/list` + }, + icon: 'view', + submenu: [] + }, + { + link: { + label: `Import ${label}`, + url: `/#/${module}/import` + }, + icon: 'upload', + submenu: [] + }, + ] + }; + } + +} diff --git a/core/app/src/components/navbar/navbar.component.html b/core/app/src/components/navbar/navbar.component.html index 4489e8aeb..0c82fdf2e 100644 --- a/core/app/src/components/navbar/navbar.component.html +++ b/core/app/src/components/navbar/navbar.component.html @@ -137,7 +137,10 @@
  • - + {{ sub.link.label }} + + {{ sub.link.label }} diff --git a/core/app/src/components/navbar/navbar.component.spec.ts b/core/app/src/components/navbar/navbar.component.spec.ts index fd8acd2ac..d718677c7 100644 --- a/core/app/src/components/navbar/navbar.component.spec.ts +++ b/core/app/src/components/navbar/navbar.component.spec.ts @@ -1,4 +1,4 @@ -import {async, ComponentFixture, TestBed, inject} from '@angular/core/testing'; +import {async, ComponentFixture, TestBed, inject, fakeAsync, tick} from '@angular/core/testing'; import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; import {RouterTestingModule} from '@angular/router/testing'; import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing'; @@ -6,28 +6,77 @@ import {HttpClientTestingModule, HttpTestingController} from '@angular/common/ht import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; import {NavbarUiComponent} from './navbar.component'; +import {of} from 'rxjs'; +import {Metadata} from '@services/metadata/metadata.service'; describe('NavbarUiComponent', () => { - let component: NavbarUiComponent; - let fixture: ComponentFixture; - beforeEach(async(() => { - TestBed.configureTestingModule({ - schemas: [CUSTOM_ELEMENTS_SCHEMA], - imports: [RouterTestingModule, HttpClientTestingModule, NgbModule], - declarations: [NavbarUiComponent] - }) - .compileComponents(); - })); - beforeEach(() => { - fixture = TestBed.createComponent(NavbarUiComponent); - component = fixture.componentInstance; - fixture.detectChanges(); + + describe('Test with mock service', () => { + let component: NavbarUiComponent; + let fixture: ComponentFixture; + let service: Metadata; + + const navigationMockData = { + navbar: { + NonGroupedTabs: { + contacts: 'Contacts', + }, + groupedTabs: { + Sales: { + modules: { + Accounts: 'Accounts', + } + }, + }, + userActionMenu: [ + { + label: 'Profile', + url: 'index.php?module=Users&action=EditView&record=1', + submenu: [] + }, + { + label: 'Employees', + url: 'index.php?module=Employees&action=index', + submenu: [] + }, + ], + } + }; + + // Create a fake TwainService object with a 'getQuote()' spy + const metadata = jasmine.createSpyObj('Metadata', ['getNavigation']); + // Make the spy return a synchronous Observable with the test data + const getMetadata = metadata.getNavigation.and.returnValue(of(navigationMockData.navbar)); + + + beforeEach(() => { + TestBed.configureTestingModule({ + schemas: [CUSTOM_ELEMENTS_SCHEMA], + imports: [RouterTestingModule, HttpClientTestingModule, NgbModule], + providers: [{provide: Metadata, useValue: metadata}], + declarations: [NavbarUiComponent] + }).compileComponents(); + service = TestBed.get(Metadata); + fixture = TestBed.createComponent(NavbarUiComponent); + component = fixture.componentInstance; + }); + + it('should create', () => { + fixture.detectChanges(); // onInit() + expect(component).toBeTruthy(); + }); + + it('should get metadata', async (() => { + fixture.detectChanges(); // onInit() + + fixture.whenStable().then(() => { + expect(component.navigationMetadata).toEqual(jasmine.objectContaining(navigationMockData.navbar)); + }); + + component.ngOnInit(); + })); }); - it(`should create`, async(inject([HttpTestingController], - (httpClient: HttpTestingController) => { - expect(component).toBeTruthy(); - }))); }); diff --git a/core/app/src/components/navbar/navbar.component.ts b/core/app/src/components/navbar/navbar.component.ts index 16e730b40..2f0ebcafc 100644 --- a/core/app/src/components/navbar/navbar.component.ts +++ b/core/app/src/components/navbar/navbar.component.ts @@ -3,6 +3,9 @@ import {Router, NavigationEnd} from '@angular/router'; import {ApiService} from '../../services/api/api.service'; import {NavbarModel} from './navbar-model'; import {NavbarAbstract} from './navbar.abstract'; +import { Subscription } from 'rxjs'; + +import { Metadata } from '../../services/metadata/metadata.service'; @Component({ selector: 'scrm-navbar-ui', @@ -10,7 +13,10 @@ import {NavbarAbstract} from './navbar.abstract'; styleUrls: [] }) export class NavbarUiComponent implements OnInit { - constructor(protected api: ApiService, protected router: Router) { + private navbarSubscription: Subscription; + public navigationMetadata: any; + + constructor(protected metadata: Metadata, protected api: ApiService, protected router: Router) { NavbarUiComponent.instances.push(this); } @@ -70,8 +76,23 @@ export class NavbarUiComponent implements OnInit { } ngOnInit(): void { - let navbar = new NavbarAbstract(); + + const menuItemThreshold = 5; + /* + * TODO : this call should be moved elsewhere once + * we have the final structure using cache + */ + this.navbarSubscription = this.metadata + .getNavigation() + .subscribe((data) => { + this.navigationMetadata = data; + if (data && data.NonGroupedTabs) { + this.navbar.buildMenu(data.NonGroupedTabs, menuItemThreshold); + } + }); + + const navbar = new NavbarAbstract(); this.setNavbar(navbar); - window.dispatchEvent(new Event("resize")); + window.dispatchEvent(new Event('resize')); } } diff --git a/core/app/src/services/api/graphql-api/api.record.get.ts b/core/app/src/services/api/graphql-api/api.record.get.ts index 391283507..3bbbe8bdd 100644 --- a/core/app/src/services/api/graphql-api/api.record.get.ts +++ b/core/app/src/services/api/graphql-api/api.record.get.ts @@ -3,7 +3,7 @@ import {Apollo, QueryRef} from 'apollo-angular'; import gql from 'graphql-tag'; @Injectable({ - providedIn: 'root', + providedIn: 'root' }) export class RecordGQL { @@ -12,15 +12,15 @@ export class RecordGQL { /** * Fetch data either from backend or cache - * @param module - * @param id - * @param metadata + * @param module to get from + * @param id of the record + * @param metadata with the fields to ask for */ public fetch(module: string, id: string, metadata: { fields: string[] }): QueryRef { const fields = metadata.fields; const iriId = this.formatId(module, id); - let queryOptions = { + const queryOptions = { query: gql` query ${module}($id: ID!) { ${module}(id: $id) { @@ -36,32 +36,10 @@ export class RecordGQL { return this.apollo.watchQuery(queryOptions); } - /** - * Get in memory cache data - * @param module - * @param id - * @param metadata - */ - public get(module: string, id: string, metadata: { fields: string[] }): any { - const fields = metadata.fields; - const iriId = this.formatId(module, id); - - let queryOptions = { - id: iriId, - fragment: gql` - fragment my${module} on ${module} { - ${fields.join('\n')} - } - ` - }; - - return this.apollo.getClient().readFragment(queryOptions); - } - /** * Format id - * @param module - * @param id + * @param module name + * @param id of the record */ protected formatId(module: string, id: string) { return `/api/${module}s/${id}`; diff --git a/core/app/src/services/metadata/metadata.service.ts b/core/app/src/services/metadata/metadata.service.ts new file mode 100644 index 000000000..429afb355 --- /dev/null +++ b/core/app/src/services/metadata/metadata.service.ts @@ -0,0 +1,18 @@ +import {Injectable} from '@angular/core'; + +import { NavigationMetadata } from './navigation/navigation.metadata.service'; + + +/** + * Facade like service to retrieve metadata + */ +@Injectable({ + providedIn: 'root', +}) +export class Metadata { + constructor(private navigationMetadata: NavigationMetadata) {} + + public getNavigation() { + return this.navigationMetadata.fetch(); + } +} \ No newline at end of file diff --git a/core/app/src/services/metadata/metadata.spec.ts b/core/app/src/services/metadata/metadata.spec.ts new file mode 100644 index 000000000..e2b686db3 --- /dev/null +++ b/core/app/src/services/metadata/metadata.spec.ts @@ -0,0 +1,74 @@ +import {async, ComponentFixture, getTestBed, inject, TestBed} from '@angular/core/testing'; +import {Metadata} from '@services/metadata/metadata.service'; +import {NavigationMetadata} from '@services/metadata/navigation/navigation.metadata.service'; +import {of} from 'rxjs'; + +describe('Metadata Service', () => { + let injector: TestBed; + let service: Metadata; + + describe('Navigation Metadata', () => { + + const navigationMockData = { + navbar: { + NonGroupedTabs: { + Contacts: 'Contacts', + Accounts: 'Accounts' + }, + groupedTabs: { + Sales: { + modules: { + Accounts: 'Accounts', + Contacts: 'Contacts', + } + }, + }, + userActionMenu: [ + { + label: 'Profile', + url: 'index.php?module=Users&action=EditView&record=1', + submenu: [] + }, + { + label: 'Employees', + url: 'index.php?module=Employees&action=index', + submenu: [] + }, + ], + } + }; + + /* + const navigationMetadata = ({ + fetch() { + return of(navigationMockData.navbar); + } + } as any) as NavigationMetadata; + */ + + // Create a fake TwainService object with a `getQuote()` spy + const navigationMetadata = jasmine.createSpyObj('NavigationMetadata', ['fetch']); + // Make the spy return a synchronous Observable with the test data + navigationMetadata.fetch.and.returnValue( of(navigationMockData.navbar) ); + + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [{provide: NavigationMetadata, useValue: navigationMetadata}], + }); + + injector = getTestBed(); + service = injector.get(Metadata); + }); + + + it('#getNavigation', (done: DoneFn) => { + service.getNavigation().subscribe(data => { + expect(data).toEqual(jasmine.objectContaining(navigationMockData.navbar)); + done(); + }); + }); + + }); + +}); + diff --git a/core/app/src/services/metadata/navigation/navigation.metadata.service.ts b/core/app/src/services/metadata/navigation/navigation.metadata.service.ts new file mode 100644 index 000000000..5bb0faaea --- /dev/null +++ b/core/app/src/services/metadata/navigation/navigation.metadata.service.ts @@ -0,0 +1,30 @@ +import {Injectable} from '@angular/core'; +import {map} from 'rxjs/operators'; +import {Observable} from 'rxjs'; + +import { RecordGQL } from '../../api/graphql-api/api.record.get'; + + +@Injectable({ + providedIn: 'root', +}) +export class NavigationMetadata { + protected resourceName = 'navbar'; + protected fieldsMetadata = { + fields: [ + 'NonGroupedTabs', + 'groupedTabs', + 'userActionMenu' + ] + }; + + constructor(private recordGQL: RecordGQL) {} + + public fetch(): Observable { + const id = '1'; + + return this.recordGQL + .fetch(this.resourceName, id, this.fieldsMetadata) + .valueChanges.pipe(map(({data}) => data.navbar)); + } +} \ No newline at end of file diff --git a/core/app/src/services/metadata/navigation/navigation.metadata.spec.ts b/core/app/src/services/metadata/navigation/navigation.metadata.spec.ts new file mode 100644 index 000000000..9ced0fc84 --- /dev/null +++ b/core/app/src/services/metadata/navigation/navigation.metadata.spec.ts @@ -0,0 +1,88 @@ +import {getTestBed, TestBed} from '@angular/core/testing'; +import { + ApolloTestingModule, + ApolloTestingController, +} from 'apollo-angular/testing'; +import gql from 'graphql-tag'; +import {NavigationMetadata} from '@services/metadata/navigation/navigation.metadata.service'; + +describe('Navigation Metadata Service', () => { + let injector: TestBed; + let service: NavigationMetadata; + let controller: ApolloTestingController; + + beforeEach(() => { + TestBed.configureTestingModule({ + imports: [ApolloTestingModule], + }); + + injector = getTestBed(); + controller = injector.get(ApolloTestingController); + service = injector.get(NavigationMetadata); + }); + + afterEach(() => { + controller.verify(); + }); + + it('#fetch', + (done: DoneFn) => { + + const navigationMockData = { + navbar: { + NonGroupedTabs: { + Contacts: 'Contacts', + Accounts: 'Accounts' + }, + groupedTabs: { + Sales: { + modules: { + Accounts: 'Accounts', + Contacts: 'Contacts', + } + }, + }, + userActionMenu: [ + { + label: 'Profile', + url: 'index.php?module=Users&action=EditView&record=1', + submenu: [] + }, + { + label: 'Employees', + url: 'index.php?module=Employees&action=index', + submenu: [] + }, + ], + } + }; + + service.fetch().subscribe(data => { + expect(data).toEqual(jasmine.objectContaining(navigationMockData.navbar)); + done(); + + }); + + const op = controller.expectOne(gql` + query navbar($id: ID!) { + navbar(id: $id) { + NonGroupedTabs + groupedTabs + userActionMenu + } + } + `); + + // Assert that one of variables is Mr Apollo. + expect(op.operation.variables.id).toEqual('/api/navbars/1'); + + // Respond with mock data, causing Observable to resolve. + op.flush({ + data: navigationMockData + }); + + // Finally, assert that there are no outstanding operations. + controller.verify(); + }); +}); +