Skip to content

Commit 5504966

Browse files
griest024griest024
authored
feat(daffio): implement service-based sidebar (#3030)
1 parent 3e1c93f commit 5504966

File tree

47 files changed

+402
-1020
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+402
-1020
lines changed

‎apps/daffio/src/app/app-routing.module.ts

+7-13
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,10 @@ import {
66

77
import { DaffioMarketingFooterComponent } from './core/footer/marketing-footer/marketing-footer.component';
88
import { DaffioNavHeaderContainer } from './core/nav/header/header.component';
9+
import { DAFF_NAV_SIDEBAR_REGISTRATION } from './core/nav/sidebar.provider';
10+
import { DaffioRouterNamedViewsEnum } from './core/router/named-views/models/named-views.enum';
911
import { DaffioRoute } from './core/router/route.type';
10-
import { DaffioMarketingSidebarContentComponent } from './core/sidebar/components/marketing-sidebar-content/marketing-sidebar-content.component';
11-
import { DaffioSidebarFooterComponent } from './core/sidebar/components/sidebar-footer/sidebar-footer.component';
12-
import { DaffioSidebarHeaderComponent } from './core/sidebar/components/sidebar-header/sidebar-header.component';
1312
import { TemplateComponent } from './core/template/template.component';
14-
import { DaffioRouterNamedViewsEnum } from './named-views/models/named-views.enum';
15-
16-
1713

1814
export const appRoutes: Routes = [
1915
<DaffioRoute>{
@@ -22,8 +18,9 @@ export const appRoutes: Routes = [
2218
data: {
2319
daffNamedViews: {
2420
[DaffioRouterNamedViewsEnum.NAV]: DaffioNavHeaderContainer,
25-
[DaffioRouterNamedViewsEnum.SIDEBARHEADER]: DaffioSidebarHeaderComponent,
26-
[DaffioRouterNamedViewsEnum.SIDEBARFOOTER]: DaffioSidebarFooterComponent,
21+
},
22+
daffioSidebars: {
23+
[DAFF_NAV_SIDEBAR_REGISTRATION.id]: DAFF_NAV_SIDEBAR_REGISTRATION,
2724
},
2825
daffioNavLinks: [
2926
{ url: '/why-pwa', title: 'Why PWA' },
@@ -42,16 +39,13 @@ export const appRoutes: Routes = [
4239
],
4340
data: {
4441
daffNamedViews: {
45-
[DaffioRouterNamedViewsEnum.SIDEBARCONTENT]: DaffioMarketingSidebarContentComponent,
4642
[DaffioRouterNamedViewsEnum.FOOTER]: DaffioMarketingFooterComponent,
4743
},
4844
},
4945
},
5046
{
51-
path: '',
52-
children: [
53-
{ path: 'docs', loadChildren: () => import('./docs/docs.module').then(m => m.DaffioDocsModule) },
54-
],
47+
path: 'docs',
48+
loadChildren: () => import('./docs/docs.module').then(m => m.DaffioDocsModule),
5549
},
5650
{
5751
path: 'packages/*',

‎apps/daffio/src/app/app.module.ts

-4
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,6 @@ import { AppRoutingModule } from './app-routing.module';
2121
import { DaffioAppComponent } from './app.component';
2222
import { DaffioMarketingFooterComponentModule } from './core/footer/marketing-footer/marketing-footer.module';
2323
import { DaffioSimpleFooterComponentModule } from './core/footer/simple-footer/simple-footer.module';
24-
import { DaffioDocsSidebarContentComponentModule } from './core/sidebar/components/docs-sidebar-content/docs-sidebar-content.module';
25-
import { DaffioMarketingSidebarContentComponentModule } from './core/sidebar/components/marketing-sidebar-content/marketing-sidebar-content.module';
2624
import { DaffioSidebarFooterComponentModule } from './core/sidebar/components/sidebar-footer/sidebar-footer.module';
2725
import { DaffioSidebarHeaderComponentModule } from './core/sidebar/components/sidebar-header/sidebar-header.module';
2826
import { TemplateModule } from './core/template/template.module';
@@ -38,8 +36,6 @@ import { environment } from '../environments/environment';
3836
HttpClientModule,
3937

4038
AppRoutingModule,
41-
DaffioMarketingSidebarContentComponentModule,
42-
DaffioDocsSidebarContentComponentModule,
4339
DaffioSidebarHeaderComponentModule,
4440
DaffioSidebarFooterComponentModule,
4541
DaffioSimpleFooterComponentModule,

‎apps/daffio/src/app/core/nav/header/header.component.spec.ts

+40-20
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,20 @@
1-
import {
2-
CUSTOM_ELEMENTS_SCHEMA,
3-
Component,
4-
} from '@angular/core';
1+
import { Component } from '@angular/core';
52
import {
63
ComponentFixture,
74
TestBed,
85
waitForAsync,
96
} from '@angular/core/testing';
107
import { By } from '@angular/platform-browser';
118
import { RouterTestingModule } from '@angular/router/testing';
12-
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
13-
import {
14-
StoreModule,
15-
Store,
16-
} from '@ngrx/store';
9+
import { BehaviorSubject } from 'rxjs';
10+
11+
import { DaffRouterDataService } from '@daffodil/router';
1712

1813
import { DaffioNavHeaderContainer } from './header.component';
19-
import { ToggleSidebar } from '../../sidebar/actions/sidebar.actions';
20-
import * as fromSidebar from '../../sidebar/reducers/index';
14+
import { DAFFIO_NAV_SIDEBAR_ID } from './sidebar-id';
15+
import { DaffioRoute } from '../../router/route.type';
16+
import { DaffioSidebarService } from '../../sidebar/services/sidebar.service';
17+
import { DaffioNavLink } from '../link/type';
2118

2219
@Component({
2320
template: '<daffio-nav-header-container></daffio-nav-header-container>',
@@ -32,28 +29,44 @@ describe('DaffioNavHeaderContainer', () => {
3229
let component: WrapperComponent;
3330
let fixture: ComponentFixture<WrapperComponent>;
3431
let daffioHeaderContainer: DaffioNavHeaderContainer;
35-
36-
let store: Store<fromSidebar.State>;
32+
let dataSpy: BehaviorSubject<DaffioRoute['data']>;
33+
let sidebarServiceSpy: jasmine.SpyObj<DaffioSidebarService>;
34+
let links: Array<DaffioNavLink>;
3735

3836
beforeEach(waitForAsync(() => {
37+
dataSpy = new BehaviorSubject({});
38+
sidebarServiceSpy = jasmine.createSpyObj('DaffioSidebarService', ['open']);
39+
3940
TestBed.configureTestingModule({
4041
imports: [
41-
StoreModule.forRoot({}),
4242
RouterTestingModule,
4343
WrapperComponent,
4444
],
45-
schemas: [
46-
CUSTOM_ELEMENTS_SCHEMA,
45+
providers: [
46+
{
47+
provide: DaffRouterDataService,
48+
useValue: jasmine.createSpyObj('DaffRouterDataService', [], { data$: dataSpy }),
49+
},
50+
{
51+
provide: DaffioSidebarService,
52+
useValue: sidebarServiceSpy,
53+
},
4754
],
4855
})
4956
.compileComponents();
57+
58+
links = [
59+
{ title: 'title1', url: 'url1' },
60+
{ title: 'title2', url: 'url2' },
61+
];
62+
dataSpy.next({
63+
daffioNavLinks: links,
64+
});
5065
}));
5166

5267
beforeEach(() => {
5368
fixture = TestBed.createComponent(WrapperComponent);
5469
component = fixture.componentInstance;
55-
store = TestBed.inject(Store);
56-
spyOn(store, 'dispatch');
5770
fixture.detectChanges();
5871

5972
daffioHeaderContainer = fixture.debugElement.query(By.css('daffio-nav-header-container')).componentInstance;
@@ -63,12 +76,19 @@ describe('DaffioNavHeaderContainer', () => {
6376
expect(component).toBeTruthy();
6477
});
6578

79+
it('should render the links', () => {
80+
fixture.debugElement.queryAll(By.css('a[daffioHeaderItem]')).forEach((de, i) => {
81+
expect(de.attributes['ng-reflect-router-link']).toEqual(links[i].url);
82+
expect(de.nativeElement.innerText).toEqual(links[i].title);
83+
});
84+
});
85+
6686
describe('when [sidebar-button] is clicked', () => {
67-
it('should call store.dispatch with a ToggleSidebar action', () => {
87+
it('should open the nav sidebar', () => {
6888
const sidebarButton = fixture.debugElement.query(By.css('[sidebar-button]')).nativeElement;
6989
sidebarButton.click();
7090

71-
expect(store.dispatch).toHaveBeenCalledWith(new ToggleSidebar());
91+
expect(sidebarServiceSpy.open).toHaveBeenCalledWith(DAFFIO_NAV_SIDEBAR_ID);
7292
});
7393
});
7494
});

‎apps/daffio/src/app/core/nav/header/header.component.ts

+6-7
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import {
1010
import { RouterLink } from '@angular/router';
1111
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
1212
import { faBars } from '@fortawesome/free-solid-svg-icons';
13-
import { Store } from '@ngrx/store';
1413
import {
1514
Observable,
1615
map,
@@ -21,9 +20,10 @@ import { DaffButtonModule } from '@daffodil/design/button';
2120
import { DaffRouterDataService } from '@daffodil/router';
2221
import { DaffThemeSwitchButtonModule } from '@daffodil/theme-switch';
2322

23+
import { DAFFIO_NAV_SIDEBAR_ID } from './sidebar-id';
2424
import { DaffioHeaderComponentModule } from '../../header/components/header.module';
25-
import { ToggleSidebar } from '../../sidebar/actions/sidebar.actions';
26-
import { DaffioRouteWithNavLinks } from '../link/route.type';
25+
import { DaffioRoute } from '../../router/route.type';
26+
import { DaffioSidebarService } from '../../sidebar/services/sidebar.service';
2727
import { DaffioNavLink } from '../link/type';
2828

2929
@Component({
@@ -49,9 +49,8 @@ export class DaffioNavHeaderContainer implements OnInit {
4949
links$: Observable<Array<DaffioNavLink>>;
5050

5151
constructor(
52-
private routerData: DaffRouterDataService<DaffioRouteWithNavLinks['data']>,
53-
// TODO: don't keep me in rebase
54-
private store: Store,
52+
private routerData: DaffRouterDataService<DaffioRoute['data']>,
53+
private sidebarService: DaffioSidebarService,
5554
) {}
5655

5756
ngOnInit(): void {
@@ -61,6 +60,6 @@ export class DaffioNavHeaderContainer implements OnInit {
6160
}
6261

6362
openSidebar() {
64-
this.store.dispatch(new ToggleSidebar());
63+
this.sidebarService.open(DAFFIO_NAV_SIDEBAR_ID);
6564
}
6665
}

‎apps/daffio/src/app/core/nav/header/sidebar-id.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const DAFFIO_NAV_SIDEBAR_ID = 'daffioNavSidebar';

‎apps/daffio/src/app/core/nav/sidebar-body/component.spec.ts

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import { Component } from '@angular/core';
2+
import {
3+
ComponentFixture,
4+
TestBed,
5+
waitForAsync,
6+
} from '@angular/core/testing';
7+
import { By } from '@angular/platform-browser';
8+
import { RouterTestingModule } from '@angular/router/testing';
9+
10+
import { DaffioNavSidebarBodyComponent } from './component';
11+
import { DaffioSidebarService } from '../../sidebar/services/sidebar.service';
12+
import { DaffioNavLink } from '../link/type';
13+
14+
@Component({
15+
template: '<daffio-nav-header-container></daffio-nav-header-container>',
16+
standalone: true,
17+
imports: [
18+
DaffioNavSidebarBodyComponent,
19+
],
20+
})
21+
class WrapperComponent {}
22+
23+
describe('DaffioNavSidebarBodyComponent', () => {
24+
let component: WrapperComponent;
25+
let fixture: ComponentFixture<WrapperComponent>;
26+
let sidebarServiceSpy: jasmine.SpyObj<DaffioSidebarService>;
27+
let links: Array<DaffioNavLink>;
28+
29+
beforeEach(waitForAsync(() => {
30+
sidebarServiceSpy = jasmine.createSpyObj('DaffioSidebarService', ['open']);
31+
32+
TestBed.configureTestingModule({
33+
imports: [
34+
RouterTestingModule,
35+
WrapperComponent,
36+
],
37+
providers: [
38+
{
39+
provide: DaffioSidebarService,
40+
useValue: sidebarServiceSpy,
41+
},
42+
],
43+
})
44+
.compileComponents();
45+
46+
links = [
47+
{ title: 'title1', url: 'url1' },
48+
{ title: 'title2', url: 'url2' },
49+
];
50+
}));
51+
52+
beforeEach(() => {
53+
fixture = TestBed.createComponent(WrapperComponent);
54+
component = fixture.componentInstance;
55+
fixture.detectChanges();
56+
});
57+
58+
it('should create', () => {
59+
expect(component).toBeTruthy();
60+
});
61+
62+
it('should render the links', () => {
63+
fixture.debugElement.queryAll(By.css('a[daffioHeaderItem]')).forEach((de, i) => {
64+
expect(de.attributes['ng-reflect-router-link']).toEqual(links[i].url);
65+
expect(de.nativeElement.innerText).toEqual(links[i].title);
66+
});
67+
});
68+
});

‎apps/daffio/src/app/core/nav/sidebar-body/component.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ import { DaffioNavLink } from '../link/type';
2828
RouterLink,
2929
],
3030
})
31-
export class DaffioNavLinksSidebarBodyComponent implements OnInit {
31+
export class DaffioNavSidebarBodyComponent implements OnInit {
3232
links$: Observable<Array<DaffioNavLink>>;
3333

3434
constructor(

‎apps/daffio/src/app/core/nav/sidebar.provider.ts

+5-6
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
import { DaffSidebarRegistration } from '@daffodil/design/sidebar';
22

3-
import { DaffioNavLinksSidebarBodyComponent } from './sidebar-body/component';
3+
import { DAFFIO_NAV_SIDEBAR_ID } from './header/sidebar-id';
4+
import { DaffioNavSidebarBodyComponent } from './sidebar-body/component';
45
import { DaffioSidebarFooterComponent } from '../sidebar/components/sidebar-footer/sidebar-footer.component';
56
import { DaffioSidebarHeaderComponent } from '../sidebar/components/sidebar-header/sidebar-header.component';
67

7-
export const DAFFIO_NAV_LINKS_SIDEBAR_ID = 'daffioNavLinks';
8-
9-
export const DAFF_NAV_LINKS_SIDEBAR_REGISTRATION: DaffSidebarRegistration = {
10-
id: DAFFIO_NAV_LINKS_SIDEBAR_ID,
8+
export const DAFF_NAV_SIDEBAR_REGISTRATION: DaffSidebarRegistration = {
9+
id: DAFFIO_NAV_SIDEBAR_ID,
1110
header: DaffioSidebarHeaderComponent,
12-
body: DaffioNavLinksSidebarBodyComponent,
11+
body: DaffioNavSidebarBodyComponent,
1312
footer: DaffioSidebarFooterComponent,
1413
};

‎apps/daffio/src/app/core/router/named-views/models/named-views.enum.ts

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export enum DaffioRouterNamedViewsEnum {
2+
// TODO: should nav be removed?
3+
NAV = 'nav',
4+
FOOTER = 'footer',
5+
}

‎apps/daffio/src/app/core/sidebar/actions/sidebar.actions.ts

-60
This file was deleted.

‎apps/daffio/src/app/core/sidebar/components/docs-sidebar-content/docs-sidebar-content.component.html

-3
This file was deleted.

‎apps/daffio/src/app/core/sidebar/components/docs-sidebar-content/docs-sidebar-content.component.scss

-4
This file was deleted.

0 commit comments

Comments
 (0)