From a643326a23f6c0323eddd3ba5ef922ccb550a098 Mon Sep 17 00:00:00 2001
From: Alexander Lyapko <sunsay@maprox.net>
Date: Wed, 6 Jun 2018 00:09:20 +0400
Subject: [PATCH] #3 Increase test coverage

* #3 Cover PasswordGeneratorService
* #3 Cover StorageApiService
* #3 Cover EditFormComponent
---
 package.json                                  |  28 ++--
 src/app/auth/auth.module.ts                   |   2 +
 src/app/auth/auth.service.ts                  |   1 +
 src/app/auth/login/login.component.html       |   1 +
 src/app/auth/login/login.component.spec.ts    |   7 +
 src/app/fork-me/fork-me.component.html        |  32 ++++
 src/app/fork-me/fork-me.component.scss        |  24 +++
 src/app/fork-me/fork-me.component.spec.ts     |  25 +++
 src/app/fork-me/fork-me.component.ts          |  11 ++
 src/app/fork-me/index.ts                      |   1 +
 src/app/navigation/navigation.component.html  |   4 -
 .../password-generator.service.spec.ts        |  68 +++++++-
 .../password-generator.service.ts             |   2 +-
 .../edit-form-folder.component.spec.ts        |  97 +++++++++++
 .../edit-form-secret.component.spec.ts        | 139 ++++++++++++++++
 .../edit-form/edit-form.component.spec.ts     | 150 ++++++++++++++++++
 .../edit-form/edit-form.component.ts          |   2 +-
 .../edit-form/edit-form.service.spec.ts       |  64 ++++++++
 .../storage-actions.component.spec.ts         |  18 ++-
 src/app/storage/storage-api.service.spec.ts   | 142 +++++++++++++++++
 src/app/storage/storage-api.service.ts        |  10 +-
 21 files changed, 795 insertions(+), 33 deletions(-)
 create mode 100644 src/app/fork-me/fork-me.component.html
 create mode 100644 src/app/fork-me/fork-me.component.scss
 create mode 100644 src/app/fork-me/fork-me.component.spec.ts
 create mode 100644 src/app/fork-me/fork-me.component.ts
 create mode 100644 src/app/fork-me/index.ts
 create mode 100644 src/app/storage/storage-actions/edit-form-folder/edit-form-folder.component.spec.ts
 create mode 100644 src/app/storage/storage-actions/edit-form-secret/edit-form-secret.component.spec.ts
 create mode 100644 src/app/storage/storage-actions/edit-form/edit-form.component.spec.ts
 create mode 100644 src/app/storage/storage-actions/edit-form/edit-form.service.spec.ts
 create mode 100644 src/app/storage/storage-api.service.spec.ts

diff --git a/package.json b/package.json
index 0568017..00e2a95 100644
--- a/package.json
+++ b/package.json
@@ -13,15 +13,15 @@
   "private": true,
   "dependencies": {
     "@angular-devkit/build-angular": "^0.6.1",
-    "@angular/animations": "6.0.0",
-    "@angular/common": "6.0.0",
-    "@angular/compiler": "6.0.0",
-    "@angular/core": "6.0.0",
-    "@angular/forms": "6.0.0",
-    "@angular/http": "6.0.0",
-    "@angular/platform-browser": "6.0.0",
-    "@angular/platform-browser-dynamic": "6.0.0",
-    "@angular/router": "6.0.0",
+    "@angular/animations": "6.0.2",
+    "@angular/common": "6.0.2",
+    "@angular/compiler": "6.0.2",
+    "@angular/core": "6.0.2",
+    "@angular/forms": "6.0.2",
+    "@angular/http": "6.0.2",
+    "@angular/platform-browser": "6.0.2",
+    "@angular/platform-browser-dynamic": "6.0.2",
+    "@angular/router": "6.0.2",
     "@types/crypto-js": "^3.1.39",
     "@types/jasmine": "^2.8.7",
     "bootstrap": "^3.3.7",
@@ -37,9 +37,9 @@
     "zone.js": "^0.8.26"
   },
   "devDependencies": {
-    "@angular/cli": "6.0.1",
-    "@angular/compiler-cli": "6.0.0",
-    "@angular/language-service": "6.0.0",
+    "@angular/cli": "6.0.3",
+    "@angular/compiler-cli": "6.0.2",
+    "@angular/language-service": "6.0.2",
     "@types/crypto-js": "^3.1.37",
     "@types/jasmine": "~2.8.2",
     "@types/jasminewd2": "~2.0.2",
@@ -54,10 +54,10 @@
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
     "karma-phantomjs-launcher": "^1.0.4",
-    "phantomjs": "^2.1.7",
+    "phantomjs-prebuilt": "^2.1.7",
     "protractor": "~5.2.0",
     "ts-node": "~3.3.0",
     "tslint": "~5.8.0",
     "typescript": "2.7.2"
   }
-}
+}
\ No newline at end of file
diff --git a/src/app/auth/auth.module.ts b/src/app/auth/auth.module.ts
index d1b66a3..6cdb551 100644
--- a/src/app/auth/auth.module.ts
+++ b/src/app/auth/auth.module.ts
@@ -7,6 +7,7 @@ import { AuthRoutingModule } from './auth-routing.module';
 import { AuthGuard } from './auth.guard';
 import { AuthInterceptor } from './auth.interceptor';
 import { AuthService } from './auth.service';
+import { ForkMeComponent } from '../fork-me';
 import { LoginComponent, RegexpErrorComponent } from './login';
 import { LogoutComponent } from './logout';
 
@@ -27,6 +28,7 @@ import { LogoutComponent } from './logout';
         }
     ],
     declarations: [
+        ForkMeComponent,
         LoginComponent,
         LogoutComponent,
         RegexpErrorComponent
diff --git a/src/app/auth/auth.service.ts b/src/app/auth/auth.service.ts
index 40616a1..83c2176 100644
--- a/src/app/auth/auth.service.ts
+++ b/src/app/auth/auth.service.ts
@@ -74,6 +74,7 @@ export class AuthService {
     logOut() {
         this.encrypting.setUser(null);
         this.session = null;
+        sessionStorage.removeItem('session');
         this.subject.next();
     }
 
diff --git a/src/app/auth/login/login.component.html b/src/app/auth/login/login.component.html
index bd17d83..f2b727e 100644
--- a/src/app/auth/login/login.component.html
+++ b/src/app/auth/login/login.component.html
@@ -1,3 +1,4 @@
+<app-fork-me url="https://github.com/maprox/keyholder-angular"></app-fork-me>
 <div class="container">
     <div class="row">
         <div class="col-md-8 col-md-offset-2">
diff --git a/src/app/auth/login/login.component.spec.ts b/src/app/auth/login/login.component.spec.ts
index 74b3858..d4abb86 100644
--- a/src/app/auth/login/login.component.spec.ts
+++ b/src/app/auth/login/login.component.spec.ts
@@ -47,6 +47,12 @@ describe('LoginComponent', () => {
 
     @Component({ template: '' }) class DummyComponent {}
 
+    @Component({
+        selector: 'app-fork-me',
+        template: '<div>Fake fork me component</div>'
+    })
+    class FakeForkMeComponent {}
+
     beforeEach(async(() => {
         authSubject = new Subject<Object>();
         authServiceStub = {
@@ -70,6 +76,7 @@ describe('LoginComponent', () => {
                 ])
             ],
             declarations: [
+                FakeForkMeComponent,
                 LoginComponent,
                 DummyComponent,
                 RegexpErrorComponent
diff --git a/src/app/fork-me/fork-me.component.html b/src/app/fork-me/fork-me.component.html
new file mode 100644
index 0000000..d4c9ba5
--- /dev/null
+++ b/src/app/fork-me/fork-me.component.html
@@ -0,0 +1,32 @@
+<a [href]="url"
+   class="github-corner"
+   aria-label="View source on Github">
+  <svg width="80"
+       height="80"
+       viewBox="0 0 250 250"
+       style="
+            fill:#70B7FD;
+            color:#fff;
+            position: absolute;
+            top: 0;
+            border: 0;
+            right: 0;"
+       aria-hidden="true">
+    <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
+    <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,
+                 78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,
+                 97.6 130.6,101.9 134.4,103.2"
+          fill="currentColor"
+          style="transform-origin: 130px 106px;"
+          class="octo-arm"></path>
+    <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,
+                 99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,
+                 51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,
+                 56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,
+                 80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,
+                 107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,
+                 120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
+          fill="currentColor"
+          class="octo-body"></path>
+  </svg>
+</a>
\ No newline at end of file
diff --git a/src/app/fork-me/fork-me.component.scss b/src/app/fork-me/fork-me.component.scss
new file mode 100644
index 0000000..49fce8f
--- /dev/null
+++ b/src/app/fork-me/fork-me.component.scss
@@ -0,0 +1,24 @@
+.github-corner:hover .octo-arm {
+    animation: octocat-wave 560ms ease-in-out;
+}
+
+@keyframes octocat-wave {
+    0%, 100% {
+        transform: rotate(0);
+    }
+    20%, 60% {
+        transform: rotate(-25deg);
+    }
+    40%, 80% {
+        transform: rotate(10deg);
+    }
+}
+
+@media (max-width: 500px) {
+    .github-corner:hover .octo-arm {
+        animation: none;
+    }
+    .github-corner .octo-arm {
+        animation: octocat-wave 560ms ease-in-out;
+    }
+}
\ No newline at end of file
diff --git a/src/app/fork-me/fork-me.component.spec.ts b/src/app/fork-me/fork-me.component.spec.ts
new file mode 100644
index 0000000..53ea752
--- /dev/null
+++ b/src/app/fork-me/fork-me.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ForkMeComponent } from './fork-me.component';
+
+describe('ForkMeComponent', () => {
+    let component: ForkMeComponent;
+    let fixture: ComponentFixture<ForkMeComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [ ForkMeComponent ]
+        })
+        .compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(ForkMeComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});
diff --git a/src/app/fork-me/fork-me.component.ts b/src/app/fork-me/fork-me.component.ts
new file mode 100644
index 0000000..705e0f4
--- /dev/null
+++ b/src/app/fork-me/fork-me.component.ts
@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+    selector: 'app-fork-me',
+    templateUrl: './fork-me.component.html',
+    styleUrls: ['./fork-me.component.scss']
+})
+export class ForkMeComponent {
+    @Input() public url;
+    constructor() { }
+}
diff --git a/src/app/fork-me/index.ts b/src/app/fork-me/index.ts
new file mode 100644
index 0000000..cdd0cae
--- /dev/null
+++ b/src/app/fork-me/index.ts
@@ -0,0 +1 @@
+export * from './fork-me.component';
diff --git a/src/app/navigation/navigation.component.html b/src/app/navigation/navigation.component.html
index 9607eec..73f813b 100644
--- a/src/app/navigation/navigation.component.html
+++ b/src/app/navigation/navigation.component.html
@@ -12,10 +12,6 @@
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
-      <a class="navbar-brand" href="#">
-        <i class="fa fa-user-secret fa-lg"></i>&nbsp;
-        Key Holder
-      </a>
     </div><!-- Collect the nav links, forms, and other content for toggling -->
     <div class="collapse navbar-collapse" id="navbar">
       <ul class="nav navbar-nav">
diff --git a/src/app/password-generator/password-generator.service.spec.ts b/src/app/password-generator/password-generator.service.spec.ts
index 55638ed..473ea9a 100644
--- a/src/app/password-generator/password-generator.service.spec.ts
+++ b/src/app/password-generator/password-generator.service.spec.ts
@@ -1,15 +1,69 @@
 import { TestBed, inject } from '@angular/core/testing';
 
+import { Options } from './model';
 import { PasswordGeneratorService } from './password-generator.service';
 
 describe('PasswordGeneratorService', () => {
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      providers: [PasswordGeneratorService]
+    let service: PasswordGeneratorService;
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            providers: [PasswordGeneratorService]
+        });
     });
-  });
 
-  it('should be created', inject([PasswordGeneratorService], (service: PasswordGeneratorService) => {
-    expect(service).toBeTruthy();
-  }));
+    beforeEach(inject([PasswordGeneratorService], (_service: PasswordGeneratorService) => {
+        service = _service;
+    }));
+
+    it('should be created', () => {
+        expect(service).toBeTruthy();
+    });
+
+    it('should generate passwords with default options', () => {
+        const options = new Options();
+        expect(options.length).toEqual(20);
+        expect(service.generate().length).toEqual(options.length);
+    });
+
+    it('should raise error with wrong options', () => {
+        const options = new Options(10, false, false, false, false);
+        expect(options.length).toEqual(10);
+        const expectedError = new Error('Invalid options for the password generator');
+        expect(() => service.generate(options)).toThrow(expectedError);
+    });
+
+    it('should raise error when length is 0', () => {
+        const options = new Options(0);
+        expect(options.length).toEqual(0);
+        const expectedError = new Error('Invalid options for the password generator');
+        expect(() => service.generate(options)).toThrow(expectedError);
+    });
+
+    it('should generate numeric passwords', () => {
+        const options = new Options(10, true, false, false, false);
+        const secret = service.generate(options);
+        expect(secret.length).toEqual(options.length);
+        expect((/^\d+$/).test(secret)).toBeTruthy();
+    });
+
+    it('should generate symbols passwords', () => {
+        const options = new Options(20, false, true, false, false);
+        const secret = service.generate(options);
+        expect(secret.length).toEqual(options.length);
+        expect((/^[\D\W]+$/).test(secret)).toBeTruthy();
+    });
+
+    it('should generate lowercase passwords', () => {
+        const options = new Options(20, false, false, true, false);
+        const secret = service.generate(options);
+        expect(secret.length).toEqual(options.length);
+        expect((/^[a-z]+$/).test(secret)).toBeTruthy();
+    });
+
+    it('should generate uppercase passwords', () => {
+        const options = new Options(20, false, false, false, true);
+        const secret = service.generate(options);
+        expect(secret.length).toEqual(options.length);
+        expect((/^[A-Z]+$/).test(secret)).toBeTruthy();
+    });
 });
diff --git a/src/app/password-generator/password-generator.service.ts b/src/app/password-generator/password-generator.service.ts
index b94d1ec..940599b 100644
--- a/src/app/password-generator/password-generator.service.ts
+++ b/src/app/password-generator/password-generator.service.ts
@@ -35,7 +35,7 @@ export class PasswordGeneratorService {
 
         // Generate character pool
         const availableCharacters = this.getAvailableCharacters(options);
-        if (!availableCharacters) {
+        if (!availableCharacters || (options.length <= 0)) {
             throw new Error('Invalid options for the password generator');
         }
 
diff --git a/src/app/storage/storage-actions/edit-form-folder/edit-form-folder.component.spec.ts b/src/app/storage/storage-actions/edit-form-folder/edit-form-folder.component.spec.ts
new file mode 100644
index 0000000..9ea97b5
--- /dev/null
+++ b/src/app/storage/storage-actions/edit-form-folder/edit-form-folder.component.spec.ts
@@ -0,0 +1,97 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
+import { Subject } from 'rxjs/index';
+
+import { Folder } from '../../model';
+import { StorageService } from '../../storage.service';
+import { EditFormFolderComponent } from './edit-form-folder.component';
+import { EditFormFolderService } from './edit-form-folder.service';
+
+describe('EditFormFolderComponent', () => {
+    let component: EditFormFolderComponent,
+        fixture: ComponentFixture<EditFormFolderComponent>,
+        storageCurrent: Folder,
+        storageServiceMock,
+        editEventSubject,
+        editFormFolderService;
+
+    beforeEach(async(() => {
+        storageCurrent = new Folder('current');
+        storageServiceMock = {
+            getCurrent: jasmine.createSpy().and.returnValue(storageCurrent),
+            openFolder: jasmine.createSpy(),
+            save: jasmine.createSpy()
+        };
+        editEventSubject = new Subject<Object>();
+        editFormFolderService = {
+            getEditEvent: jasmine.createSpy().and.returnValue(editEventSubject)
+        };
+
+        TestBed.configureTestingModule({
+            imports: [
+                FormsModule
+            ],
+            declarations: [
+                EditFormFolderComponent
+            ],
+            providers: [
+                {
+                    provide: StorageService,
+                    useValue: storageServiceMock
+                },
+                {
+                    provide: EditFormFolderService,
+                    useValue: editFormFolderService
+                }
+            ]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(EditFormFolderComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should be created', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('should save in edit mode', () => {
+        expect(component.isEditMode()).toBeFalsy();
+        expect(component.isActive).toBeFalsy();
+
+        editEventSubject.next(new Folder('test'));
+
+        expect(component.isEditMode()).toBeTruthy();
+        expect(component.isActive).toBeTruthy();
+
+        component.itemName = 'hello virtual world!';
+        component.submit();
+
+        expect(component.itemSource.getName()).toEqual('hello virtual world!');
+        expect(storageServiceMock.save).toHaveBeenCalled();
+        expect(component.isActive).toBeFalsy();
+    });
+
+    it('should add in create mode', () => {
+        expect(component.isEditMode()).toBeFalsy();
+        expect(component.isActive).toBeFalsy();
+
+        editEventSubject.next();
+
+        expect(component.isEditMode()).toBeFalsy();
+        expect(component.isActive).toBeTruthy();
+
+        const msg = 'hello virtual world!';
+        component.itemName = msg;
+        component.submit();
+
+        expect(component.itemSource).toBeUndefined();
+        expect(storageServiceMock.getCurrent).toHaveBeenCalled();
+        expect(storageServiceMock.save).toHaveBeenCalled();
+        expect(storageServiceMock.openFolder).toHaveBeenCalled();
+        expect(storageCurrent.getFolderByName(msg)).toEqual(new Folder(msg));
+        expect(component.isActive).toBeFalsy();
+    });
+});
diff --git a/src/app/storage/storage-actions/edit-form-secret/edit-form-secret.component.spec.ts b/src/app/storage/storage-actions/edit-form-secret/edit-form-secret.component.spec.ts
new file mode 100644
index 0000000..7d0337a
--- /dev/null
+++ b/src/app/storage/storage-actions/edit-form-secret/edit-form-secret.component.spec.ts
@@ -0,0 +1,139 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
+import { Subject } from 'rxjs/index';
+import { PasswordGeneratorService } from '../../../password-generator';
+
+import { Folder, Secret } from '../../model';
+import { StorageService } from '../../storage.service';
+import { EditFormSecretComponent } from './edit-form-secret.component';
+import { EditFormSecretService } from './edit-form-secret.service';
+
+describe('EditFormSecretComponent', () => {
+    const password = 'super-secret!11!';
+    let component: EditFormSecretComponent,
+        fixture: ComponentFixture<EditFormSecretComponent>,
+        storageCurrent: Folder,
+        storageServiceMock,
+        passwordGeneratorService,
+        editEventSubject,
+        editFormSecretService;
+
+    beforeEach(async(() => {
+        storageCurrent = new Folder('current');
+        storageServiceMock = {
+            getCurrent: jasmine.createSpy().and.returnValue(storageCurrent),
+            openFolder: jasmine.createSpy(),
+            save: jasmine.createSpy()
+        };
+        editEventSubject = new Subject<Object>();
+        editFormSecretService = {
+            getEditEvent: jasmine.createSpy().and.returnValue(editEventSubject)
+        };
+        passwordGeneratorService = {
+            generate: jasmine.createSpy().and.returnValue(password)
+        };
+
+        TestBed.configureTestingModule({
+            imports: [
+                FormsModule
+            ],
+            declarations: [
+                EditFormSecretComponent
+            ],
+            providers: [
+                {
+                    provide: StorageService,
+                    useValue: storageServiceMock
+                },
+                {
+                    provide: PasswordGeneratorService,
+                    useValue: passwordGeneratorService
+                },
+                {
+                    provide: EditFormSecretService,
+                    useValue: editFormSecretService
+                }
+            ]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(EditFormSecretComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should be created', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('should generate password', () => {
+        expect(component.itemSecret).toEqual(undefined);
+        expect(component.itemContent).toEqual(undefined);
+
+        component.generate();
+
+        expect(component.itemSecret).toEqual(password);
+    });
+
+    it('should create a secret', () => {
+        expect(component.itemSecret).toEqual(undefined);
+        expect(component.itemContent).toEqual(undefined);
+
+        editEventSubject.next();
+
+        expect(component.isEditMode()).toBeFalsy();
+        expect(component.detailsShown).toBeFalsy();
+        expect(component.itemSecret).toEqual(password);
+        expect(component.itemContent).toEqual('');
+    });
+
+    it('should open a secret', () => {
+        expect(component.itemSecret).toEqual(undefined);
+        expect(component.itemContent).toEqual(undefined);
+
+        const secret = new Secret('test');
+        editEventSubject.next(secret);
+
+        expect(component.isEditMode()).toBeTruthy();
+        expect(component.detailsShown).toBeTruthy();
+        expect(component.itemSecret).toEqual('');
+        expect(component.itemContent).toEqual('');
+    });
+
+    it('should save in edit mode', () => {
+        expect(component.isEditMode()).toBeFalsy();
+        expect(component.isActive).toBeFalsy();
+
+        editEventSubject.next(new Secret('test'));
+
+        expect(component.isEditMode()).toBeTruthy();
+        expect(component.isActive).toBeTruthy();
+
+        component.itemName = 'hello virtual world!';
+        component.submit();
+
+        expect(component.itemSource.getName()).toEqual('hello virtual world!');
+        expect(storageServiceMock.save).toHaveBeenCalled();
+        expect(component.isActive).toBeFalsy();
+    });
+
+    it('should add in create mode', () => {
+        expect(component.isEditMode()).toBeFalsy();
+        expect(component.isActive).toBeFalsy();
+
+        editEventSubject.next();
+
+        expect(component.isEditMode()).toBeFalsy();
+        expect(component.isActive).toBeTruthy();
+
+        component.itemName = 'hello virtual world!';
+        component.submit();
+
+        expect(component.itemSource).toBeUndefined();
+        expect(storageServiceMock.getCurrent).toHaveBeenCalled();
+        expect(storageServiceMock.save).toHaveBeenCalled();
+        expect(storageCurrent.getItems().length).toEqual(1);
+        expect(component.isActive).toBeFalsy();
+    });
+});
diff --git a/src/app/storage/storage-actions/edit-form/edit-form.component.spec.ts b/src/app/storage/storage-actions/edit-form/edit-form.component.spec.ts
new file mode 100644
index 0000000..bb8b4ba
--- /dev/null
+++ b/src/app/storage/storage-actions/edit-form/edit-form.component.spec.ts
@@ -0,0 +1,150 @@
+import { Component, OnInit } from '@angular/core';
+import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { Subject } from 'rxjs/index';
+
+import { EditFormComponent } from './edit-form.component';
+import { EditFormService } from './edit-form.service';
+import { Folder, Secret } from '../../model';
+import { StorageService } from '../../storage.service';
+
+@Component({
+    template: '<input name="fieldName" #fieldName>'
+})
+class EditFormTestComponent extends EditFormComponent implements OnInit {
+    constructor(
+        protected storage: StorageService,
+        protected editFormService: EditFormService
+    ) {
+        super(storage, editFormService);
+    }
+}
+
+describe('EditFormComponent', () => {
+    let component: EditFormTestComponent,
+        fixture: ComponentFixture<EditFormTestComponent>,
+        storageCurrent: Folder,
+        storageServiceMock,
+        editEventSubject,
+        editFormServiceMock;
+
+    beforeEach(async(() => {
+        storageCurrent = new Folder('current');
+        storageServiceMock = {
+            getCurrent: jasmine.createSpy().and.returnValue(storageCurrent),
+            save: jasmine.createSpy()
+        };
+        editEventSubject = new Subject<Object>();
+        editFormServiceMock = {
+            getEditEvent: jasmine.createSpy().and.returnValue(editEventSubject)
+        };
+
+        TestBed.configureTestingModule({
+            declarations: [
+                EditFormTestComponent
+            ],
+            providers: [
+                {
+                    provide: StorageService,
+                    useValue: storageServiceMock
+                },
+                {
+                    provide: EditFormService,
+                    useValue: editFormServiceMock
+                }
+            ]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(EditFormTestComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should be created', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('should listen for edit event', () => {
+        expect(component.isEditMode()).toBeFalsy();
+        expect(component.isActive).toBeFalsy();
+
+        editEventSubject.next(new Secret('test'));
+
+        expect(component.isEditMode()).toBeTruthy();
+        expect(component.isActive).toBeTruthy();
+
+        editEventSubject.next(null);
+
+        expect(component.isEditMode()).toBeTruthy();
+        expect(component.isActive).toBeFalsy();
+    });
+
+    it('should check edit mode', () => {
+        expect(component.isEditMode()).toBeFalsy();
+        component.open(new Secret('example'));
+        expect(component.isEditMode()).toBeTruthy();
+    });
+
+    it('should focus input field when opened', fakeAsync(() => {
+        expect(component.isEditMode()).toBeFalsy();
+        component.open(null as Secret);
+        expect(component.isEditMode()).toBeFalsy();
+
+        const compiled = fixture.debugElement.nativeElement.querySelector('input');
+        spyOn(compiled, 'focus');
+
+
+        tick();
+
+        fixture.detectChanges();
+        expect(compiled.focus).toHaveBeenCalled();
+        expect(component.isActive).toBeTruthy();
+    }));
+
+    it('should change active status when closed or submitted', () => {
+        component.open(null as Secret);
+        expect(component.isActive).toBeTruthy();
+
+        component.close();
+        expect(component.isActive).toBeFalsy();
+
+        component.open(new Secret('test'));
+        expect(component.isActive).toBeTruthy();
+
+        component.submit();
+        expect(component.isActive).toBeFalsy();
+    });
+
+    it('should add item', () => {
+        expect(storageCurrent.toJSON().items.length).toEqual(0);
+
+        component.add(new Secret('test'));
+
+        expect(storageServiceMock.getCurrent).toHaveBeenCalled();
+        expect(storageServiceMock.save).toHaveBeenCalled();
+        expect(storageCurrent.toJSON().items.length).toEqual(1);
+    });
+
+    it('should remove item', () => {
+        const secret = storageCurrent.add(new Secret('test'));
+        expect(storageCurrent.toJSON().items.length).toEqual(1);
+
+        component.remove(secret);
+
+        expect(storageServiceMock.getCurrent).toHaveBeenCalled();
+        expect(storageServiceMock.save).toHaveBeenCalled();
+        expect(storageCurrent.toJSON().items.length).toEqual(0);
+    });
+
+    it('should save item', () => {
+        const secret = new Secret('test');
+        expect(secret.getName()).toEqual('test');
+
+        component.itemName = 'something new';
+        component.save(secret);
+
+        expect(secret.getName()).toEqual('something new');
+        expect(storageServiceMock.save).toHaveBeenCalled();
+    });
+});
diff --git a/src/app/storage/storage-actions/edit-form/edit-form.component.ts b/src/app/storage/storage-actions/edit-form/edit-form.component.ts
index f89bb2d..ffd27bd 100644
--- a/src/app/storage/storage-actions/edit-form/edit-form.component.ts
+++ b/src/app/storage/storage-actions/edit-form/edit-form.component.ts
@@ -1,6 +1,6 @@
 import { ElementRef, OnInit, ViewChild } from '@angular/core';
 
-import { Item, Secret } from '../../model';
+import { Item } from '../../model';
 import { StorageService } from '../../storage.service';
 import { EditFormService } from './edit-form.service';
 
diff --git a/src/app/storage/storage-actions/edit-form/edit-form.service.spec.ts b/src/app/storage/storage-actions/edit-form/edit-form.service.spec.ts
new file mode 100644
index 0000000..c6c8b0c
--- /dev/null
+++ b/src/app/storage/storage-actions/edit-form/edit-form.service.spec.ts
@@ -0,0 +1,64 @@
+import { inject, TestBed } from '@angular/core/testing';
+import { Secret } from '../../model';
+
+import { EditFormService } from './edit-form.service';
+
+describe('EditFormService', () => {
+    let service: EditFormService;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            providers: [
+                EditFormService
+            ]
+        });
+    });
+
+    beforeEach(inject([EditFormService], (editFormService: EditFormService) => {
+        service = editFormService;
+    }));
+
+    it('should be created', () => {
+        expect(service).toBeTruthy();
+    });
+
+    it('should edit item', () => {
+        let expectedItem = null;
+        service.getEditEvent().subscribe((item) => {
+            expectedItem = item;
+        });
+
+        expect(expectedItem).toBeNull();
+
+        const secret = new Secret('hello');
+        service.edit(secret);
+
+        expect(expectedItem).toEqual(secret);
+    });
+
+    it('should create item', () => {
+        let expectedItem = null;
+        service.getEditEvent().subscribe((item) => {
+            expectedItem = item;
+        });
+
+        expect(expectedItem).toBeNull();
+
+        service.create();
+
+        expect(expectedItem).toEqual(undefined);
+    });
+
+    it('should close edit form', () => {
+        let expectedItem = 'test';
+        service.getEditEvent().subscribe((item) => {
+            expectedItem = item;
+        });
+
+        expect(expectedItem).toEqual('test');
+
+        service.close();
+
+        expect(expectedItem).toBeNull();
+    });
+});
diff --git a/src/app/storage/storage-actions/storage-actions.component.spec.ts b/src/app/storage/storage-actions/storage-actions.component.spec.ts
index 8c09263..7de41ba 100644
--- a/src/app/storage/storage-actions/storage-actions.component.spec.ts
+++ b/src/app/storage/storage-actions/storage-actions.component.spec.ts
@@ -25,10 +25,12 @@ describe('StorageActionsComponent', () => {
 
     beforeEach(async(() => {
         editFormSecretServiceMock = {
-            //
+            create: jasmine.createSpy(),
+            close: jasmine.createSpy()
         };
         editFormFolderServiceMock = {
-            //
+            create: jasmine.createSpy(),
+            close: jasmine.createSpy()
         };
 
         TestBed.configureTestingModule({
@@ -59,4 +61,16 @@ describe('StorageActionsComponent', () => {
     it('should be created', () => {
         expect(component).toBeTruthy();
     });
+
+    it('should show add folder panel', () => {
+        component.showAddFolder();
+        expect(editFormFolderServiceMock.create).toHaveBeenCalled();
+        expect(editFormSecretServiceMock.close).toHaveBeenCalled();
+    });
+
+    it('should show add secret panel', () => {
+        component.showAddSecret();
+        expect(editFormSecretServiceMock.create).toHaveBeenCalled();
+        expect(editFormFolderServiceMock.close).toHaveBeenCalled();
+    });
 });
diff --git a/src/app/storage/storage-api.service.spec.ts b/src/app/storage/storage-api.service.spec.ts
new file mode 100644
index 0000000..77313ba
--- /dev/null
+++ b/src/app/storage/storage-api.service.spec.ts
@@ -0,0 +1,142 @@
+import { inject, TestBed } from '@angular/core/testing';
+import { Subject } from 'rxjs/index';
+
+import { EncryptingService } from '../encrypting';
+import { Folder, Secret } from './model';
+import { HttpService } from '../http';
+import { StorageApiService } from './storage-api.service';
+
+describe('StorageApiService', () => {
+    let service: StorageApiService,
+        httpService,
+        encryptingService,
+        httpClientSubject,
+        httpSpy;
+
+    beforeEach(() => {
+        localStorage.clear();
+
+        httpClientSubject = new Subject<Object>();
+        httpSpy = jasmine.createSpy().and.returnValue(httpClientSubject);
+        httpService = {
+            get: httpSpy,
+            put: httpSpy
+        };
+        encryptingService = {
+            encrypt: jasmine.createSpy(),
+            decrypt: jasmine.createSpy()
+        };
+
+        TestBed.configureTestingModule({
+            providers: [
+                StorageApiService,
+                {
+                    provide: HttpService,
+                    useValue: httpService
+                },
+                {
+                    provide: EncryptingService,
+                    useValue: encryptingService
+                }
+            ]
+        });
+    });
+
+    beforeEach(inject([StorageApiService], (storageApiService: StorageApiService) => {
+        service = storageApiService;
+    }));
+
+    it('should be created', () => {
+        expect(service).toBeTruthy();
+    });
+
+    it('should save storage to localStorage', () => {
+        const root = getRoot();
+        const encryptedRoot = 'EnCr YPt=eeed!';
+        encryptingService.encrypt.and.returnValue(encryptedRoot);
+
+        service.save(root);
+
+        expect(encryptingService.encrypt).toHaveBeenCalledWith(JSON.stringify(root));
+        expect(httpService.put).toHaveBeenCalledWith('/storage', {
+            data: encodeURIComponent(encryptedRoot)
+        });
+
+        expect(localStorage.getItem('storage')).toEqual(null);
+
+        httpClientSubject.next();
+
+        expect(localStorage.getItem('storage')).toEqual(encodeURIComponent(encryptedRoot));
+        localStorage.clear();
+        expect(localStorage.getItem('storage')).toEqual(null);
+
+        httpClientSubject.error();
+
+        expect(localStorage.getItem('storage')).toEqual(encodeURIComponent(encryptedRoot));
+    });
+
+    it('should load data from server when failed to decrypt', () => {
+        const onSuccess = jasmine.createSpy();
+        const onFailure = jasmine.createSpy();
+        const encryptedRoot = 'EnCr YPt=eeed!';
+        const encodedEncryptedRoot = encodeURIComponent(encryptedRoot);
+
+        service.load().subscribe(onSuccess, onFailure);
+
+        expect(httpService.get).toHaveBeenCalledWith('/storage', {responseType: 'text'});
+        expect(onSuccess).toHaveBeenCalledTimes(0);
+        expect(onFailure).toHaveBeenCalledTimes(0);
+
+        httpClientSubject.next(encodedEncryptedRoot);
+        expect(encryptingService.decrypt).toHaveBeenCalledWith(encryptedRoot);
+        expect(onSuccess).toHaveBeenCalledTimes(0);
+        expect(onFailure).toHaveBeenCalledTimes(0);
+    });
+
+    it('should load data from server when successfully decrypted', () => {
+        const onSuccess = jasmine.createSpy();
+        const onFailure = jasmine.createSpy();
+        const encryptedRoot = 'EnCr YPt=eeed!';
+        const root = getRoot();
+        const data = JSON.stringify(root);
+
+        service.load().subscribe(onSuccess, onFailure);
+
+        encryptingService.decrypt.and.returnValue(data);
+        httpClientSubject.next(encryptedRoot);
+        expect(encryptingService.decrypt).toHaveBeenCalledWith(encryptedRoot);
+        expect(onSuccess).toHaveBeenCalledTimes(1);
+        expect(onSuccess).toHaveBeenCalledWith(root);
+        expect(onFailure).toHaveBeenCalledTimes(0);
+    });
+
+    it('should load data from localStorage', () => {
+        const onSuccess = jasmine.createSpy();
+        const onFailure = jasmine.createSpy();
+        const encryptedRoot = 'EnCr YPt=eeed!';
+        const root = getRoot();
+        const data = JSON.stringify(root);
+
+        service.load().subscribe(onSuccess, onFailure);
+
+        localStorage.setItem('storage', encryptedRoot);
+        encryptingService.decrypt.and.returnValue(data);
+        httpClientSubject.error();
+        expect(encryptingService.decrypt).toHaveBeenCalledWith(encryptedRoot);
+        expect(onSuccess).toHaveBeenCalledTimes(1);
+        expect(onSuccess).toHaveBeenCalledWith(root);
+    });
+
+    /**
+     * @return {Folder}
+     */
+    function getRoot() {
+        const root = new Folder();
+        (root.add(new Folder('test')) as Folder).add(new Secret(
+            'secret',
+            'super-secret!11'
+        ));
+
+        return root;
+    }
+});
diff --git a/src/app/storage/storage-api.service.ts b/src/app/storage/storage-api.service.ts
index 7c4bf87..b6772cc 100644
--- a/src/app/storage/storage-api.service.ts
+++ b/src/app/storage/storage-api.service.ts
@@ -1,7 +1,6 @@
 import { Injectable } from '@angular/core';
 import { Observable ,  Subject } from 'rxjs';
 
-import { AlertService } from '../alert';
 import { EncryptingService } from '../encrypting';
 import { HttpService } from '../http';
 import { SerializerService } from '../serializer';
@@ -14,7 +13,6 @@ export class StorageApiService {
 
     constructor(
         private http: HttpService,
-        private alert: AlertService,
         private encrypting: EncryptingService
     ) { }
 
@@ -23,9 +21,13 @@ export class StorageApiService {
             data: encodeURIComponent(this.encrypting.encrypt(JSON.stringify(root)))
         };
 
+        const copyToLocalStorage = () => {
+            localStorage.setItem(this.storageKey, input.data);
+        };
+
         this.http.put('/storage', input).subscribe(
-            () => {},
-            () => localStorage.setItem(this.storageKey, input.data)
+            copyToLocalStorage,
+            copyToLocalStorage
         );
     }