I have a simple project to draw line in canvas html5 by Angular 2. How I can write script automation to test draw canvas in Angular 2 by Protractor. This code use angular 2 and I want to test automation it use Protractor. Full source code.
/// <reference path="../typings/globals/easeljs/easeljs.d.ts" />
import { Component, OnInit, OnDestroy } from '@angular/core';
@Component({
selector: 'my-app',
template: '<h1>My Draw Test Protractor Automation</h1><canvas id="testCanvas" width="800" height="600" style="background-color: #ccc"></canvas>'
})
export class AppComponent implements OnInit, OnDestroy {
constructor() { }
public lastPoint = new createjs.Point();
public drawing: any;
public stage: any;
public wrapper: any;
public canvas: any;
public ngOnInit() {
this.canvas = document.getElementById("testCanvas");
this.stage = new createjs.Stage(this.canvas);
createjs.Ticker.addEventListener("tick", this.stage);
this.stage.addChild(new createjs.Text("Click and Drag to Draw", "40px Arial", "#000000").set({ x: 200, y: 200 }));
this.wrapper = new createjs.Container();
this.wrapper.hitArea = new createjs.Shape(new createjs.Graphics().f("#000").dr(0, 0, 800, 600));
this.wrapper.cache(0, 0, 800, 600);
this.stage.addChild(this.wrapper);
this.drawing = new createjs.Shape();
this.wrapper.addChild(this.drawing);
this.wrapper.addEventListener("mousedown", this.handleMouseDown.bind(this));
}
public handleMouseDown(ev: any) {
this.lastPoint.x = ev.stageX;
this.lastPoint.y = ev.stageY;
this.wrapper.addEventListener("pressmove", this.handleMouseMove.bind(this));
}
public handleMouseMove(e: any) {
// Draw a round line from the last position to the current one.
this.drawing.graphics.ss(20, "round").s("#ff0000");
this.drawing.graphics.mt(this.lastPoint.x, this.lastPoint.y);
this.drawing.graphics.lt(e.stageX, e.stageY);
this.stage.addChild(this.drawing);
this.stage.update();
this.lastPoint.x = e.stageX;
this.lastPoint.y = e.stageY;
}
public ngOnDestroy() {
this.stage.removeAllEventListeners();
}
}