2

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();
 }
}
Billal Begueradj
  • 20,717
  • 43
  • 112
  • 130
Tam Vo
  • 301
  • 4
  • 13

0 Answers0