fixed #7501 ColorPicker Unit Test

primefaces · Apr 4, 2019 · 2ba7988 · 2ba7988
1 parent 926b031
commit 2ba7988
Showing 1 changed file with 156 additions and 16 deletions.
diff --git a/src/app/components/colorpicker/colorpicker.spec.ts b/src/app/components/colorpicker/colorpicker.spec.ts
@@ -2,23 +2,163 @@ import { TestBed, ComponentFixture } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { ColorPicker } from './colorpicker';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+        template: `
+            <p-colorPicker [(ngModel)]="color1"></p-colorPicker>
+        `
+    })
+    class TestColorPickerComponent {
+        color1:string = '#1976D2';
+    }
 
 describe('ColorPicker', () => {
+
+    let colorpicker: ColorPicker;
+    let testComponent: TestColorPickerComponent;
+    let fixture: ComponentFixture<TestColorPickerComponent>;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                NoopAnimationsModule,
+                FormsModule
+            ],
+            declarations: [
+                ColorPicker,
+                TestColorPickerComponent
+            ]
+        });
+
+        fixture = TestBed.createComponent(TestColorPickerComponent);
+        colorpicker = fixture.debugElement.children[0].componentInstance;
+        testComponent = fixture.componentInstance;
+    });
+
+    it('should created by default', () => {
+        fixture.detectChanges();
+
+        const colorPickerEl = fixture.debugElement.query(By.css('.ui-colorpicker'));
+        expect(colorPickerEl.nativeElement).toBeTruthy();
+    });
+
+    it('should inline', () => {
+        colorpicker.inline = true;
+        fixture.detectChanges();
+
+        const overlayEl = fixture.debugElement.query(By.css('.ui-colorpicker-overlay'));
+        expect(overlayEl).toBeFalsy();
+    });
+
+    it('should select color', () => {
+        colorpicker.inline = true;
+        fixture.detectChanges();
+
+        const pickColorSpy = spyOn(colorpicker,"pickColor").and.callThrough();
+        const colorSelectorEl = fixture.debugElement.query(By.css('.ui-colorpicker-color-selector'));
+        colorSelectorEl.triggerEventHandler("mousedown",{pageX:100,pageY:120});
+        fixture.detectChanges();
+
+        document.dispatchEvent(new Event("mouseup"));
+        fixture.detectChanges();
+
+        expect(testComponent.color1).not.toEqual("#1976D2");
+        expect(pickColorSpy).toHaveBeenCalled();
+    });
+
+    it('should select hue', () => {
+        colorpicker.inline = true;
+        fixture.detectChanges();
 
-  let colorpicker: ColorPicker;
-  let fixture: ComponentFixture<ColorPicker>;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      imports: [
-        NoopAnimationsModule
-      ],
-      declarations: [
-        ColorPicker
-      ]
-    });
-
-    fixture = TestBed.createComponent(ColorPicker);
-    colorpicker = fixture.componentInstance;
-  });
+        const pickHueSpy = spyOn(colorpicker,"pickHue").and.callThrough();
+        const hueSelectorEl = fixture.debugElement.query(By.css('.ui-colorpicker-hue'));
+        hueSelectorEl.triggerEventHandler("mousedown",{pageX:20,pageY:25});
+        fixture.detectChanges();
+
+        expect(testComponent.color1).not.toEqual("#1976D2");
+        expect(pickHueSpy).toHaveBeenCalled();
+    });
+
+    it('should call togglePanel when click on input', () => {
+        fixture.detectChanges();
+
+        const inputEl = fixture.debugElement.query(By.css('.ui-inputtext'));
+        const toggleSpy = spyOn(colorpicker,"togglePanel").and.callThrough();
+        inputEl.nativeElement.dispatchEvent(new Event("focus"));
+        inputEl.nativeElement.click();
+        fixture.detectChanges();
+
+        const selectorEl = fixture.debugElement.query(By.css(".ui-colorpicker-panel"));
+        expect(toggleSpy).toHaveBeenCalled();
+        expect(selectorEl).toBeTruthy();
+    });
+
+    it('should select color (overlay)', () => {
+        colorpicker.appendTo = "body";
+        fixture.detectChanges();
+
+        const inputEl = fixture.debugElement.query(By.css('.ui-inputtext'));
+        inputEl.nativeElement.dispatchEvent(new Event("focus"));
+        inputEl.nativeElement.click();
+        fixture.detectChanges();
+
+        const pickColorSpy = spyOn(colorpicker,"pickColor").and.callThrough();
+        const colorSelectorEl = fixture.debugElement.query(By.css('.ui-colorpicker-color-selector'));
+        colorSelectorEl.nativeElement.click();
+        colorSelectorEl.triggerEventHandler("mousedown",{pageX:100,pageY:120});
+        const mouseMoveEvent: any = document.createEvent('CustomEvent');
+        mouseMoveEvent.pageX = 101;
+        mouseMoveEvent.pageY = 121;
+        mouseMoveEvent.initEvent('mousemove', true, true);
+        document.dispatchEvent(mouseMoveEvent);
+        document.dispatchEvent(mouseMoveEvent as MouseEvent);
+        fixture.detectChanges();
+
+        document.dispatchEvent(new Event("mouseup"));
+        fixture.detectChanges();
+
+        expect(testComponent.color1).not.toEqual("#1976D2");
+        expect(pickColorSpy).toHaveBeenCalled();
+    });
+
+    it('should close when inputclick', () => {
+        fixture.detectChanges();
+
+        const inputEl = fixture.debugElement.query(By.css('.ui-inputtext'));
+        inputEl.nativeElement.dispatchEvent(new Event("focus"));
+        inputEl.nativeElement.click();
+        fixture.detectChanges();
+
+        let selectorEl = fixture.debugElement.query(By.css(".ui-colorpicker-panel"));
+        expect(selectorEl).toBeTruthy();
+        inputEl.nativeElement.click();
+        fixture.detectChanges();
+
+        selectorEl = fixture.debugElement.query(By.css(".ui-colorpicker-panel"));
+        expect(selectorEl).toBeFalsy();
+    });
+
+    it('should open space keydown and close esc keydown', () => {
+        fixture.detectChanges();
+
+        const inputEl = fixture.debugElement.query(By.css('.ui-inputtext'));
+        const openEvent: any = document.createEvent('CustomEvent');
+        openEvent.which = 32;
+        openEvent.initEvent('keydown', true, true);
+        inputEl.nativeElement.dispatchEvent(openEvent);
+        fixture.detectChanges();
+
+        let selectorEl = fixture.debugElement.query(By.css(".ui-colorpicker-panel"));
+        expect(selectorEl).toBeTruthy();
+        const escapeEvent: any = document.createEvent('CustomEvent');
+        escapeEvent.which = 27;
+        escapeEvent.initEvent('keydown', true, true);
+        inputEl.nativeElement.dispatchEvent(escapeEvent);
+        fixture.detectChanges();
+
+        selectorEl = fixture.debugElement.query(By.css(".ui-colorpicker-panel"));
+        expect(selectorEl).toBeFalsy();
+    });
 });