From 9a07d877677132bc7524eea57e84cdcdb0b976f7 Mon Sep 17 00:00:00 2001 From: Changhao Han Date: Wed, 15 Jan 2020 18:49:05 +0100 Subject: [PATCH] [karma-tests] add unit test for BezierUI Bug: chromium:1032561 Change-Id: I5648bef600a06286c067ccd8dcfffdc40b7ac51b Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2002597 Reviewed-by: Paul Lewis Commit-Queue: Changhao Han --- .../front_end/inline_editor/BezierUI.ts | 77 ++++++++++++++++++- 1 file changed, 74 insertions(+), 3 deletions(-) diff --git a/test/unittests/front_end/inline_editor/BezierUI.ts b/test/unittests/front_end/inline_editor/BezierUI.ts index 51a7818b35..d35adb4d94 100644 --- a/test/unittests/front_end/inline_editor/BezierUI.ts +++ b/test/unittests/front_end/inline_editor/BezierUI.ts @@ -1,10 +1,11 @@ -// Copyright 2019 The Chromium Authors. All rights reserved. +// Copyright 2020 The Chromium Authors. All rights reserved. // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. const {assert} = chai; -import {BezierUI} from '../../../../front_end/inline_editor/BezierUI.js'; +import { BezierUI } from '/front_end/inline_editor/BezierUI.js'; +import { Point, CubicBezier } from '/front_end/ui/Geometry.js'; describe('BezierUI', () => { it('can be instantiated successfully', () => { @@ -21,5 +22,75 @@ describe('BezierUI', () => { assert.equal(bezierUI.linearLine, testLinearLine, 'linear line value was not set or retrieved correctly'); }); - // TODO continue writing tests here or use another describe block + it('can draw velocity chart correctly', () => { + const bezier = new CubicBezier(new Point(1, 1), new Point(3, 4)); + const path = document.createElement('path'); + BezierUI.drawVelocityChart(bezier, path, 10); + assert.equal(path.outerHTML, '', 'velocity chart was not drawn correctly'); + }); + + it('calculates curve width correctly', () => { + const bezierUI = new BezierUI(10, 10, 1, 3, true); + assert.equal(bezierUI.curveWidth(), 4, 'curve width was not calculated correctly'); + }); + + it('calculates curve height correctly', () => { + const bezierUI = new BezierUI(10, 10, 1, 3, true); + assert.equal(bezierUI.curveHeight(), 2, 'curve height was not calculated correctly'); + }); + + it('draws a curve correctly', () => { + const bezierUI = new BezierUI(10, 10, 1, 3, true); + const bezier = new CubicBezier(new Point(1, 1), new Point(3, 4)); + const svg = document.createElement('svg'); + bezierUI.drawCurve(bezier, svg); + /* + + + + + + + + + + + */ + assert.equal(svg.getAttribute('width'), '10', 'curve SVG\'s width was not set up correctly'); + assert.equal(svg.getAttribute('height'), '10', 'curve SVG\'s height was not set up correctly'); + const linearLine = svg.querySelector('.linear-line'); + assert.exists(linearLine, 'Bezier curve\'s linear line did not exist'); + assert.equal(linearLine.getAttribute('x1'), '3', 'Bezier curve\'s linear line had wrong x1'); + assert.equal(linearLine.getAttribute('y1'), '6', 'Bezier curve\'s linear line had wrong y1'); + assert.equal(linearLine.getAttribute('x2'), '7', 'Bezier curve\'s linear line had wrong x2'); + assert.equal(linearLine.getAttribute('y2'), '4', 'Bezier curve\'s linear line had wrong y2'); + + const path = svg.querySelector('.bezier-path'); + assert.exists(path, 'Bezier curve\'s path did not exist'); + assert.equal(path.getAttribute('d'), 'M3,6 C7, 4 15, -2 7, 4', 'Bezier curve\'s path had wrong d'); + + const [ controlLine1, controlLine2 ] = Array.from(svg.querySelectorAll('.bezier-control-line')); + assert.exists(controlLine1, 'Bezier curve\'s control line 1 did not exist'); + assert.equal(controlLine1.getAttribute('x1'), '3', 'Bezier curve\'s control line 1 had wrong x1 value'); + assert.equal(controlLine1.getAttribute('y1'), '6', 'Bezier curve\'s control line 1 had wrong y1 value'); + assert.equal(controlLine1.getAttribute('x2'), '7', 'Bezier curve\'s control line 1 had wrong x2 value'); + assert.equal(controlLine1.getAttribute('y2'), '4', 'Bezier curve\'s control line 1 had wrong y2 value'); + + assert.exists(controlLine2, 'Bezier curve\'s control line 2 did not exist'); + assert.equal(controlLine2.getAttribute('x1'), '7', 'Bezier curve\'s control line 2 had wrong x1 value'); + assert.equal(controlLine2.getAttribute('y1'), '4', 'Bezier curve\'s control line 2 had wrong y1 value'); + assert.equal(controlLine2.getAttribute('x2'), '15', 'Bezier curve\'s control line 2 had wrong x2 value'); + assert.equal(controlLine2.getAttribute('y2'), '-2', 'Bezier curve\'s control line 2 had wrong y2 value'); + + const [ controlCircle1, controlCircle2 ] = Array.from(svg.querySelectorAll('.bezier-control-circle')); + assert.exists(controlCircle1, 'Bezier curve\'s control circle 1 did not exist'); + assert.equal(controlCircle1.getAttribute('cx'), '7', 'Bezier curve\'s control circle 1 had wrong cx value'); + assert.equal(controlCircle1.getAttribute('cy'), '4', 'Bezier curve\'s control circle 1 had wrong cy value'); + assert.equal(controlCircle1.getAttribute('r'), '3', 'Bezier curve\'s control circle 1 had wrong r value'); + + assert.exists(controlCircle2, 'Bezier curve\'s control circle 2 did not exist'); + assert.equal(controlCircle2.getAttribute('cx'), '15', 'Bezier curve\'s control circle 2 had wrong cx value'); + assert.equal(controlCircle2.getAttribute('cy'), '-2', 'Bezier curve\'s control circle 2 had wrong cy value'); + assert.equal(controlCircle2.getAttribute('r'), '3', 'Bezier curve\'s control circle 2 had wrong r value'); + }); });