fix and add tests

graycoreio · Dec 14, 2023 · 492c732 · 492c732
1 parent 263376b
commit 492c732
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 3 deletions.
diff --git a/libs/design/src/molecules/sidebar/sidebar-viewport/sidebar-viewport.component.spec.ts b/libs/design/src/molecules/sidebar/sidebar-viewport/sidebar-viewport.component.spec.ts
@@ -1,6 +1,7 @@
 import { CommonModule } from '@angular/common';
 import {
   Component,
+  DebugElement,
   Input,
 } from '@angular/core';
 import {
@@ -11,6 +12,7 @@ import {
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
+import { DaffNavPlacement } from './nav-placement';
 import { DaffSidebarViewportComponent } from './sidebar-viewport.component';
 import {
   DaffBackdropComponent,
@@ -20,7 +22,7 @@ import { DaffSidebarComponent } from '../sidebar/sidebar.component';
 
 @Component({ template: `
   <div class="sidebar-content-wrapper">
-    <daff-sidebar-viewport (backdropClicked)="incrementBackdropClicked()">
+    <daff-sidebar-viewport (backdropClicked)="incrementBackdropClicked()" [navPlacement]="navPlacement">
     </daff-sidebar-viewport>
   </div>
 ` })
@@ -34,13 +36,15 @@ class WrapperComponent {
   reset() {
     this.backdropClickedCounter = 0;
   }
+  navPlacement: DaffNavPlacement = 'above';
 }
 
 describe('DaffSidebarViewportComponent | Usage', () => {
   let wrapper: WrapperComponent;
   let fixture: ComponentFixture<WrapperComponent>;
   let component: DaffSidebarViewportComponent;
   let backdrop: DaffBackdropComponent;
+  let de: DebugElement;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
@@ -61,7 +65,9 @@ describe('DaffSidebarViewportComponent | Usage', () => {
     fixture = TestBed.createComponent(WrapperComponent);
     wrapper = fixture.componentInstance;
 
-    component = fixture.debugElement.query(By.css('daff-sidebar-viewport')).componentInstance;
+    de = fixture.debugElement.query(By.css('daff-sidebar-viewport'));
+
+    component = de.componentInstance;
 
     fixture.detectChanges();
   });
@@ -70,6 +76,29 @@ describe('DaffSidebarViewportComponent | Usage', () => {
     expect(wrapper).toBeTruthy();
   });
 
+  describe('<daff-sidebar-viewport>', () => {
+    it('should add a class of "daff-sidebar-viewport" to the host element', () => {
+      expect(de.nativeElement.classList.contains('daff-sidebar-viewport')).toBeTruthy();
+    });
+  });
+
+  describe('navPlacement', () => {
+    it('should be able to take `navPlacement` as an input', () => {
+      expect(component.navPlacement).toEqual(wrapper.navPlacement);
+    });
+
+    it('should set the default navPlacement to above', () => {
+      expect(component.navPlacement).toEqual('above');
+    });
+
+    it('should add a class of `.nav-on-side` if navPlacement="beside"', () => {
+      wrapper.navPlacement = 'beside';
+      fixture.detectChanges();
+
+      expect(de.nativeElement.classList.contains('nav-on-side')).toBeTruthy();
+    });
+  });
+
   describe('when <backdrop> emits backdropClicked', () => {
     beforeEach(() => {
       fixture.detectChanges();

diff --git a/libs/design/src/molecules/sidebar/sidebar-viewport/specs/defaults.spec.ts b/libs/design/src/molecules/sidebar/sidebar-viewport/specs/defaults.spec.ts
@@ -8,6 +8,7 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 import { DaffSidebarViewportComponent } from './../sidebar-viewport.component';
 import { DaffBackdropModule } from '../../../backdrop/public_api';
+import { DaffSidebarAnimationStates } from '../../animation/sidebar-animation';
 import { DaffSidebarComponent } from '../../sidebar/sidebar.component';
 
 describe('DaffSidebarViewportComponent | Defaults', () => {
@@ -43,6 +44,6 @@ describe('DaffSidebarViewportComponent | Defaults', () => {
   });
 
   it('should have the _animationState should be `open` by default', () => {
-    expect(component._animationState).toEqual({ value: 'closed', params: { shift: '0px' }});
+    expect(component._animationState).toEqual({ value: DaffSidebarAnimationStates.CLOSED, params: { shift: '0px' }});
   });
 });