fix(file-selector): fix upload with two way binding update (#115)

sbb-design-systems · Aug 16, 2019 · aa3ee8e · aa3ee8e
1 parent 29d1bcd
commit aa3ee8e
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 3 deletions.
diff --git a/...b-esta/angular-public/src/lib/file-selector/file-selector/file-selector.component.spec.ts b/...b-esta/angular-public/src/lib/file-selector/file-selector/file-selector.component.spec.ts
@@ -1,5 +1,6 @@
-import { Component } from '@angular/core';
+import { ChangeDetectorRef, Component } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { configureTestSuite } from 'ng-bullet';
 
@@ -84,7 +85,7 @@ const testFileList: File[] = [
 @Component({
   selector: 'sbb-file-test',
   template: `
-    <sbb-file-selector (fileChanged)="fileChanged($event)"></sbb-file-selector>
+      <sbb-file-selector (fileChanged)="fileChanged($event)"></sbb-file-selector>
   `
 })
 class FileSelectorTestComponent {
@@ -131,7 +132,6 @@ describe('FileSelectorComponent using mock component', () => {
     const fileComponent = fixture.debugElement.query(By.directive(FileSelectorComponent));
 
     fileComponent.componentInstance.applyChanges(testFileList);
-
     fixture.detectChanges();
 
     const filesItems = fileComponent.queryAll(By.css('.sbb-file-selector-list > li'));
@@ -203,3 +203,53 @@ describe('FileSelectorComponent using mock component', () => {
     expect(typeIconWrapper[9].query(By.css('sbb-icon-document-zip'))).toBeTruthy();
   });
 });
+
+@Component({
+  selector: 'sbb-file-selector-test2',
+  template: `
+    <sbb-file-selector (fileChanged)="onFileChange($event)" [(ngModel)]="files"></sbb-file-selector>
+  `
+})
+class FileSelectorTest2Component {
+  files: File[] = [];
+
+  onFileChange(files: File[]) {
+    if (!files[0]) {
+      return;
+    }
+    this.files = [];
+  }
+}
+
+describe('FileSelectorComponent using mock component and limited behaviour ', () => {
+  let fileSelectorTest2Component: FileSelectorTest2Component;
+  let fixtureFileSelectorTest2: ComponentFixture<FileSelectorTest2Component>;
+
+  configureTestSuite(() => {
+    TestBed.configureTestingModule({
+      imports: [FileSelectorModule, FormsModule],
+      declarations: [FileSelectorTest2Component]
+    });
+  });
+
+  beforeEach(() => {
+    fixtureFileSelectorTest2 = TestBed.createComponent(FileSelectorTest2Component);
+    fileSelectorTest2Component = fixtureFileSelectorTest2.componentInstance;
+    fixtureFileSelectorTest2.detectChanges();
+  });
+
+  it('component test is created', async () => {
+    expect(fileSelectorTest2Component).toBeTruthy();
+  });
+
+  it('should call onFileChanged event and have length of li elements equals to 0', () => {
+    const oneElement = testFileList.slice(0, 1);
+    const fileComponent = fixtureFileSelectorTest2.debugElement.query(
+      By.directive(FileSelectorComponent)
+    );
+    const cd: ChangeDetectorRef = fileComponent.componentInstance._changeDetector;
+    spyOn(cd, 'detectChanges');
+    fileComponent.componentInstance.applyChanges(oneElement);
+    expect(cd.detectChanges).toHaveBeenCalled();
+  });
+});
diff --git a/...ts/sbb-esta/angular-public/src/lib/file-selector/file-selector/file-selector.component.ts b/...ts/sbb-esta/angular-public/src/lib/file-selector/file-selector/file-selector.component.ts
@@ -110,6 +110,7 @@ export class FileSelectorComponent implements ControlValueAccessor, FileSelector
 
   writeValue(value: any) {
     this.filesList = value;
+    this._changeDetector.detectChanges();
   }
   registerOnChange(fn: any) {
     this.onChange = fn;