diff --git a/src/app/auth/_directives/password-toggle.directive.spec.ts b/src/app/auth/_directives/password-toggle.directive.spec.ts
index 0d0270e..d2d23ed 100644
--- a/src/app/auth/_directives/password-toggle.directive.spec.ts
+++ b/src/app/auth/_directives/password-toggle.directive.spec.ts
@@ -1,17 +1,33 @@
 // Core imports
-import { ElementRef, Renderer2 } from '@angular/core';
+import { Component, DebugElement } from '@angular/core';
 
 // Application imports
 import { PasswordToggleDirective } from '@app/auth/_directives/password-toggle.directive';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
 
-// tslint:disable-next-line:prefer-const
-let elementRef: ElementRef;
-// tslint:disable-next-line:prefer-const
-let renderer: Renderer2;
+@Component({
+  template: ` <div>
+    <input type="password" id="password" />
+    <span id="icon" class="fa fa-eye" appPasswordToggle [id]="'password'" [iconId]="'icon'"></span>
+  </div>`,
+})
+class TestComponent {}
 
 describe('PasswordToggleDirective', () => {
-  it('should create an instance', () => {
-    const directive = new PasswordToggleDirective(elementRef, renderer);
-    expect(directive).toBeTruthy();
+  let fixture: ComponentFixture<TestComponent>;
+  let des: DebugElement[];
+
+  beforeEach(() => {
+    fixture = TestBed.configureTestingModule({
+      declarations: [PasswordToggleDirective, TestComponent],
+    }).createComponent(TestComponent);
+    fixture.detectChanges();
+
+    des = fixture.debugElement.queryAll(By.directive(PasswordToggleDirective));
+  });
+
+  it('should have one element with menu-toggle directive', () => {
+    expect(des.length).toBe(1);
   });
 });
diff --git a/src/app/shared/_directives/menu-selection.directive.spec.ts b/src/app/shared/_directives/menu-selection.directive.spec.ts
index 24ae097..3cc3a94 100644
--- a/src/app/shared/_directives/menu-selection.directive.spec.ts
+++ b/src/app/shared/_directives/menu-selection.directive.spec.ts
@@ -1,21 +1,34 @@
 // Core imports
-import { ElementRef, Renderer2 } from '@angular/core';
+import { Component, DebugElement } from '@angular/core';
 
 // Application imports
 import { MenuSelectionDirective } from '@app/shared/_directives/menu-selection.directive';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+
+@Component({
+  template: ` <div appMenuSelection>
+    <div id="sidebar"></div>
+    <div id="content"></div>
+    <div id="sidebarCollapse"></div>
+  </div>`,
+})
+class TestComponent {}
 
 describe('MenuSelectionDirective', () => {
-  // tslint:disable-next-line:prefer-const
-  let elementRef: ElementRef;
-  // tslint:disable-next-line:prefer-const
-  let renderer: Renderer2;
+  let fixture: ComponentFixture<TestComponent>;
+  let des: DebugElement[];
 
   beforeEach(() => {
-    // renderer = new
+    fixture = TestBed.configureTestingModule({
+      declarations: [MenuSelectionDirective, TestComponent],
+    }).createComponent(TestComponent);
+    fixture.detectChanges();
+
+    des = fixture.debugElement.queryAll(By.directive(MenuSelectionDirective));
   });
 
-  it('should create an instance', () => {
-    const directive = new MenuSelectionDirective(elementRef, renderer);
-    expect(directive).toBeTruthy();
+  it('should have one element with menu-selection directive', () => {
+    expect(des.length).toBe(1);
   });
 });
diff --git a/src/app/shared/_directives/menu-toggle.directive.spec.ts b/src/app/shared/_directives/menu-toggle.directive.spec.ts
index 34b3946..793db28 100644
--- a/src/app/shared/_directives/menu-toggle.directive.spec.ts
+++ b/src/app/shared/_directives/menu-toggle.directive.spec.ts
@@ -1,18 +1,32 @@
 // Application imports
 import { MenuToggleDirective } from '@app/shared/_directives/menu-toggle.directive';
-import { TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Component, DebugElement } from '@angular/core';
+import { By } from '@angular/platform-browser';
+
+@Component({
+  template: ` <div appMenuToggle>
+    <div id="sidebar"></div>
+    <div id="content"></div>
+    <div id="sidebarCollapse"></div>
+  </div>`,
+})
+class TestComponent {}
 
 describe('MenuToggleDirective', () => {
-  let directive: MenuToggleDirective;
+  let fixture: ComponentFixture<TestComponent>;
+  let des: DebugElement[];
 
   beforeEach(() => {
-    TestBed.configureTestingModule({
-      providers: [MenuToggleDirective],
-    });
-    directive = TestBed.inject(MenuToggleDirective);
+    fixture = TestBed.configureTestingModule({
+      declarations: [MenuToggleDirective, TestComponent],
+    }).createComponent(TestComponent);
+    fixture.detectChanges();
+
+    des = fixture.debugElement.queryAll(By.directive(MenuToggleDirective));
   });
 
-  it('should create an instance', () => {
-    expect(directive).toBeTruthy();
+  it('should have one element with menu-toggle directive', () => {
+    expect(des.length).toBe(1);
   });
 });