Aacebo/file upload button on push (#343)

* remove console logs from spec file

* move button markup to html files

* fix typings and markup

* make on-push

* unit test file-button

* remove unused var

projects/swimlane/ngx-ui/src/lib/components/button/button.component.html

@@ -0,0 +1,8 @@
+<button [disabled]="disabled">
+  <span class="content"><ng-content></ng-content></span>
+  <span class="state-icon">
+    <span *ngIf="inProgress$ | async" class="icon icon-loading"></span>
+    <span *ngIf="success$ | async" class="icon icon-check"></span>
+    <span *ngIf="fail$ | async" class="icon icon-x"></span>
+  </span>
+</button>

projects/swimlane/ngx-ui/src/lib/components/button/button.component.ts

@@ -7,8 +7,7 @@ import { ButtonState } from './button-state.enum';
 @Component({
   selector: 'ngx-button',
   exportAs: 'ngxButton',
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: './button.component.html',
   styleUrls: ['./button.component.scss'],
   host: {
     class: 'ngx-button',
@@ -18,16 +17,8 @@ import { ButtonState } from './button-state.enum';
     '[class.fail]': 'fail$.value',
     '[class.disabled-button]': 'disabled'
   },
-  template: `
-    <button [disabled]="disabled">
-      <span class="content"><ng-content></ng-content></span>
-      <span class="state-icon">
-        <span *ngIf="inProgress$ | async" class="icon icon-loading"></span>
-        <span *ngIf="success$ | async" class="icon icon-check"></span>
-        <span *ngIf="fail$ | async" class="icon icon-x"></span>
-      </span>
-    </button>
-  `
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ButtonComponent implements OnInit, OnChanges {
   @Input() promise?: Promise<any>;

projects/swimlane/ngx-ui/src/lib/components/button/file-button.component.html

@@ -0,0 +1,43 @@
+<div
+  *ngIf="dropzoneTemplate"
+  ng2FileDrop
+  [class.file-over]="fileOverDropzone"
+  [uploader]="uploader"
+  (fileOver)="fileOverBase($event)"
+>
+  <ng-template
+    ng2FileDrop
+    [ngTemplateOutlet]="dropzoneTemplate"
+    [ngTemplateOutletContext]="{ $implicit: uploader }"
+  >
+  </ng-template>
+</div>
+
+<div *ngIf="!dropzoneTemplate" [ngClass]="cssClasses">
+  <div class="ngx-file-button-button">
+    <input
+      #fileInput
+      ng2FileSelect
+      type="file"
+      class="ngx-file-button-input"
+      [disabled]="isDisabled"
+      [multiple]="multiple"
+      [id]="id + '-input'"
+      [name]="name + '-input'"
+      [uploader]="uploader"
+    />
+    <label
+      [class.disabled]="isDisabled"
+      [class.btn]="styleType === FileButtonStyleType.standard"
+      [attr.for]="id + '-input'"
+      class="ngx-file-button-label"
+    >
+      <ng-content></ng-content>
+    </label>
+    <span class="ngx-file-button-text" *ngIf="fileName">
+      {{ fileName }}
+    </span>
+  </div>
+  <div class="ngx-file-button-fill" [style.width.%]="progress"></div>
+  <span class="icon-check"></span>
+</div>

projects/swimlane/ngx-ui/src/lib/components/button/file-button.component.spec.ts

@@ -1,31 +1,112 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { NO_ERRORS_SCHEMA, NgZone } from '@angular/core';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { FileUploader } from '@swimlane/ng2-file-upload';
+
 import { FileButtonComponent } from './file-button.component';
-import { FileButtonStyleType } from './file-button-style.type';
+
 describe('FileButtonComponent', () => {
   let component: FileButtonComponent;
   let fixture: ComponentFixture<FileButtonComponent>;
+
   beforeEach(() => {
     TestBed.configureTestingModule({
       schemas: [NO_ERRORS_SCHEMA],
       declarations: [FileButtonComponent]
     });
+  });
+
+  beforeEach(() => {
     fixture = TestBed.createComponent(FileButtonComponent);
     component = fixture.componentInstance;
+    component.uploader = new FileUploader({ });
+    component.disabled = false;
+    component.multiple = false;
+    fixture.detectChanges();
   });
+
   it('can load instance', () => {
     expect(component).toBeTruthy();
   });
-  it('styleType defaults to: FileButtonStyleType.standard', () => {
-    expect(component.styleType).toEqual(FileButtonStyleType.standard);
+
+  describe('ngOnInit', () => {
+    beforeEach(() => {
+      fixture = TestBed.createComponent(FileButtonComponent);
+      component = fixture.componentInstance;
+    });
+
+    it('should throw error if !uploader and !options', () => {
+      let err: Error;
+
+      try {
+        fixture.detectChanges()
+      } catch (ex) {
+        err = ex;
+      }
+
+      expect(err).toBeDefined();
+    });
+
+    it('should create new uploader if !uploader and options', () => {
+      component.options = { };
+      fixture.detectChanges();
+      expect(component.uploader).toBeDefined();
+    });
+  });
+
+  describe('onAfterAddingFile', () => {
+    it('should set filename and emit event', () => {
+      const spy = spyOn(component.afterAddingFile, 'emit');
+      component.onAfterAddingFile({ file: { name: 'test' } } as any);
+      expect(spy).toHaveBeenCalled();
+    });
+  });
+
+  describe('onBeforeUploadItem', () => {
+    it('should emit event', () => {
+      const spy = spyOn(component.beforeUploadItem, 'emit');
+      component.onBeforeUploadItem({  } as any);
+      expect(spy).toHaveBeenCalled();
+    });
+  });
+
+  describe('onErrorItem', () => {
+    it('should emit event', () => {
+      const spy = spyOn(component.errorItem, 'emit');
+      component.onErrorItem('test', 500, { });
+      expect(spy).toHaveBeenCalled();
+    });
+  });
+
+  describe('onProgressAll', () => {
+    it('should change progress and emit event', () => {
+      const spy = spyOn(component.progressAll, 'emit');
+      component.onProgressAll(100);
+      expect(component.progress).toEqual(100);
+      expect(spy).toHaveBeenCalled();
+    });
   });
-  it('isItemSuccessful defaults to: false', () => {
-    expect(component.isItemSuccessful).toEqual(false);
+
+  describe('onSuccessItem', () => {
+    it('should emit event', () => {
+      const spy = spyOn(component.successItem, 'emit');
+      component.onSuccessItem({ }, 'test', 200, { });
+      expect(spy).toHaveBeenCalled();
+    });
   });
-  it('progress defaults to: 0%', () => {
-    expect(component.progress).toEqual('0%');
+
+  describe('fileOverBase', () => {
+    it('should set dropzone state', () => {
+      component.fileOverBase(true);
+      expect(component.fileOverDropzone).toBeTruthy();
+      component.fileOverBase(false);
+      expect(component.fileOverDropzone).toBeFalsy();
+    });
   });
-  it('fileOverDropzone defaults to: false', () => {
-    expect(component.fileOverDropzone).toEqual(false);
+
+  describe('clearInput', () => {
+    it('should clear input value', () => {
+      component.clearInput();
+      expect(component.fileInput.nativeElement.value).toBe('');
+    });
   });
 });