Cypress test. Ellipse actions. (#4215)

* Update the commands, utils. Case 108 adaptation

* Added/updated tests for ellipse
main
Dmitry Kruchinin 4 years ago committed by GitHub
parent 3c750d4efc
commit 211ae2a789
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -1,4 +1,4 @@
// Copyright (C) 2020-2021 Intel Corporation
// Copyright (C) 2020-2022 Intel Corporation
//
// SPDX-License-Identifier: MIT
@ -56,7 +56,15 @@ context('Object make a copy.', () => {
complete: true,
numberOfPoints: null,
};
const countObject = 5;
const createEllipseShape = {
type: 'Shape',
labelName,
cx: 550,
cy: 100,
rightX: 600,
topY: 150,
};
const countObject = 6;
function checkObjectArrSize(expectedValueShape, expectedValueSidebar) {
cy.get('.cvat_canvas_shape').then(($cvatCanvasShape) => {
@ -79,6 +87,9 @@ context('Object make a copy.', () => {
function compareObjectsSidebarAttr(objectSidebar1, objectSidebar2) {
cy.get(objectSidebar1).then(($cvatObjectsSidebarStateItem1) => {
cy.get(objectSidebar2).then(($cvatObjectsSidebarStateItem2) => {
// Check type of a shape
expect($cvatObjectsSidebarStateItem1.text().match(/[a-zA-Z]+/)[0])
.be.eq($cvatObjectsSidebarStateItem2.text().match(/[a-zA-Z]+/)[0]);
expect($cvatObjectsSidebarStateItem1.attr('style')).be.eq($cvatObjectsSidebarStateItem2.attr('style'));
});
});
@ -90,6 +101,7 @@ context('Object make a copy.', () => {
cy.createCuboid(createCuboidShape2Points);
cy.createPolygon(createPolygonShape);
cy.createPolyline(createPolylinesShape);
cy.createEllipse(createEllipseShape);
cy.createPoint(createPointsShape);
cy.createTag(labelName);
});
@ -102,7 +114,8 @@ context('Object make a copy.', () => {
cy.get(`#cvat-objects-sidebar-state-item-${id}`).within(() => {
cy.get('[aria-label="more"]').trigger('mouseover').wait(300); // Wait dropdown menu transition
});
cy.get('.cvat-object-item-menu').last().should('be.visible').contains('button', 'Make a copy').click(); // Get the last element from cvat-object-item-menu array
// Get the last element from cvat-object-item-menu array
cy.get('.cvat-object-item-menu').last().should('be.visible').contains('button', 'Make a copy').click();
cy.get('.cvat-canvas-container').click(coordX, coordY);
cy.get('.cvat-canvas-container').click();
coordX += 100;
@ -110,16 +123,16 @@ context('Object make a copy.', () => {
});
it('After copying via sidebar, the attributes of the objects are the same.', () => {
checkObjectArrSize(10, 12);
checkObjectArrSize(12, 14);
for (let id = 1; id < countObject; id++) {
// Parameters id 1 equal patameters id 7, 2 to 8, etc.
// Parameters id 1 equal patameters id 8, 2 to 9, etc.
compareObjectsAttr(`#cvat_canvas_shape_${id}`, `#cvat_canvas_shape_${id + countObject + 1}`);
}
for (let idSidebar = 1; idSidebar < 7; idSidebar++) {
compareObjectsSidebarAttr(
`#cvat-objects-sidebar-state-item-${idSidebar}`,
`#cvat-objects-sidebar-state-item-${idSidebar + countObject + 1}`,
); // Parameters sidebar id 1 equal patameters sidebar id 7, 2 to 8, etc.
); // Parameters sidebar id 1 equal patameters sidebar id 8, 2 to 9, etc.
}
});
@ -140,7 +153,8 @@ context('Object make a copy.', () => {
.find('[aria-label="more"]')
.trigger('mouseover')
.wait(300); // Wait dropdown menu transition;
cy.get('.cvat-object-item-menu').last().should('be.visible').contains('button', 'Make a copy').click(); // Get the last element from cvat-object-item-menu array
// Get the last element from cvat-object-item-menu array
cy.get('.cvat-object-item-menu').last().should('be.visible').contains('button', 'Make a copy').click();
cy.get('.cvat-canvas-container').click(coordX, coordY);
cy.get('.cvat-canvas-container').click(); // Deactivate all objects and hide context menu
coordX += 100;
@ -151,16 +165,16 @@ context('Object make a copy.', () => {
'After copying via object context menu, the attributes of the objects are the same.',
{ browser: '!firefox' },
() => {
checkObjectArrSize(14, 16); // The point and tag was not copied via the object's context menu
checkObjectArrSize(17, 19); // The point and tag was not copied via the object's context menu
for (let id = 1; id < countObject; id++) {
// Parameters id 1 equal patameters id 13, 2 to 14, etc.
compareObjectsAttr(`#cvat_canvas_shape_${id}`, `#cvat_canvas_shape_${id + countObject + 7}`);
compareObjectsAttr(`#cvat_canvas_shape_${id}`, `#cvat_canvas_shape_${id + countObject + 8}`);
}
for (let idSidebar = 1; idSidebar < 6; idSidebar++) {
compareObjectsSidebarAttr(
`#cvat-objects-sidebar-state-item-${idSidebar}`,
`#cvat-objects-sidebar-state-item-${idSidebar + countObject + 6}`,
); // Parameters sidebar id 1 equal patameters sidebar id 13, 2 to 14, etc.
`#cvat-objects-sidebar-state-item-${idSidebar + countObject + 8}`,
); // Parameters sidebar id 1 equal patameters sidebar id 15, 2 to 16, etc.
}
},
);

@ -1,10 +1,11 @@
// Copyright (C) 2021 Intel Corporation
// Copyright (C) 2021-2022 Intel Corporation
//
// SPDX-License-Identifier: MIT
/// <reference types="cypress" />
import { labelName, taskName } from '../../support/const';
import { decomposeMatrix } from '../../support/utils';
context('Rotated bounding boxes.', () => {
const caseId = '108';
@ -27,42 +28,6 @@ context('Rotated bounding boxes.', () => {
secondY: createRectangleShape2Points.secondY - 150,
};
function deltaTransformPoint(matrix, point) {
const dx = point.x * matrix.a + point.y * matrix.c;
const dy = point.x * matrix.b + point.y * matrix.d;
return { x: dx, y: dy };
}
function decomposeMatrix(matrix) {
const px = deltaTransformPoint(matrix, { x: 0, y: 1 });
const skewX = ((180 / Math.PI) * Math.atan2(px.y, px.x) - 90).toFixed(1);
return skewX;
}
function testShapeRotate(shape, x, y, expectedRotateDeg, pressShift) {
cy.get(shape)
.trigger('mousemove')
.trigger('mouseover')
.should('have.class', 'cvat_canvas_shape_activated');
cy.get('.cvat-canvas-container')
.trigger('mousemove', x, y)
.trigger('mouseenter', x, y);
cy.get('.svg_select_points_rot').should('have.class', 'cvat_canvas_selected_point');
cy.get('.cvat-canvas-container').trigger('mousedown', x, y, { button: 0 });
if (pressShift) {
cy.get('body').type('{shift}', { release: false });
}
cy.get('.cvat-canvas-container').trigger('mousemove', x + 20, y);
cy.get(shape).should('have.attr', 'transform');
cy.document().then((doc) => {
const modShapeIDString = shape.substring(1); // Remove "#" from the shape id string
const shapeTranformMatrix = decomposeMatrix(doc.getElementById(modShapeIDString).getCTM());
cy.get('#cvat_canvas_text_content').should('contain.text', `${shapeTranformMatrix}°`);
expect(`${expectedRotateDeg}°`).to.be.equal(`${shapeTranformMatrix}°`);
});
cy.get('.cvat-canvas-container').trigger('mouseup');
}
function testCompareRotate(shape, toFrame) {
for (let frame = 8; frame >= toFrame; frame--) {
cy.document().then((doc) => {
@ -101,13 +66,13 @@ context('Rotated bounding boxes.', () => {
describe(`Testing case "${caseId}"`, () => {
it('Check that bounding boxes can be rotated.', () => {
testShapeRotate(
cy.shapeRotate(
'#cvat_canvas_shape_1',
(createRectangleShape2Points.firstX + createRectangleShape2Points.secondX) / 2,
createRectangleShape2Points.firstY + 20,
'33.7',
);
testShapeRotate(
cy.shapeRotate(
'#cvat_canvas_shape_2',
(createRectangleTrack2Points.firstX + createRectangleTrack2Points.secondX) / 2,
createRectangleTrack2Points.firstY + 20,
@ -130,7 +95,7 @@ context('Rotated bounding boxes.', () => {
}
});
testShapeRotate('#cvat_canvas_shape_2', 320, 225, '53.0');
cy.shapeRotate('#cvat_canvas_shape_2', 320, 225, '53.0');
// Comparison of the values of the shape attribute of the current frame with the previous frame
testCompareRotate('cvat_canvas_shape_2', 0);
@ -155,7 +120,7 @@ context('Rotated bounding boxes.', () => {
cy.get('#cvat_canvas_shape_4').should('be.visible');
cy.goCheckFrameNumber(9);
testShapeRotate(
cy.shapeRotate(
'#cvat_canvas_shape_4',
(createRectangleShape2Points.firstX + createRectangleShape2Points.secondX) / 2,
createRectangleShape2Points.firstY + 20,
@ -182,8 +147,8 @@ context('Rotated bounding boxes.', () => {
it('Check rotation with hold Shift button.', () => {
cy.goCheckFrameNumber(0);
testShapeRotate('#cvat_canvas_shape_4', 320, 375, '60.0', true);
testShapeRotate('#cvat_canvas_shape_4', 325, 385, '75.0', true);
cy.shapeRotate('#cvat_canvas_shape_4', 320, 375, '60.0', true);
cy.shapeRotate('#cvat_canvas_shape_4', 325, 385, '75.0', true);
});
it('Copy/paste a rotated shape.', () => {

@ -0,0 +1,96 @@
// Copyright (C) 2022 Intel Corporation
//
// SPDX-License-Identifier: MIT
/// <reference types="cypress" />
import { taskName, labelName } from '../../support/const';
import { decomposeMatrix } from '../../support/utils';
context('Actions on ellipse.', () => {
const caseId = '115';
const newLabelName = `Case ${caseId}`;
const createEllipseShape = {
type: 'Shape',
labelName,
cx: 250,
cy: 350,
rightX: 450,
topY: 280,
};
const createEllipseTrack = {
type: 'Track',
labelName,
cx: createEllipseShape.cx,
cy: createEllipseShape.cy - 150,
rightX: createEllipseShape.rightX,
topY: createEllipseShape.topY - 150,
};
const createEllipseShapeSwitchLabel = {
type: 'Shape',
labelName: newLabelName,
cx: createEllipseShape.cx + 250,
cy: createEllipseShape.cy,
rightX: createEllipseShape.rightX + 250,
topY: createEllipseShape.topY,
};
const createEllipseTrackSwitchLabel = {
type: 'Track',
labelName: newLabelName,
cx: createEllipseShape.cx + 250,
cy: createEllipseShape.cy - 150,
rightX: createEllipseShape.rightX + 250,
topY: createEllipseShape.topY - 150,
};
function testCompareRotate(shape, toFrame) {
for (let frame = 8; frame >= toFrame; frame--) {
cy.document().then((doc) => {
const shapeTranformMatrix = decomposeMatrix(doc.getElementById(shape).getCTM());
cy.goToPreviousFrame(frame);
cy.document().then((doc2) => {
const shapeTranformMatrix2 = decomposeMatrix(doc2.getElementById(shape).getCTM());
expect(shapeTranformMatrix).not.deep.eq(shapeTranformMatrix2);
});
});
}
}
before(() => {
cy.openTask(taskName);
cy.addNewLabel(newLabelName);
cy.openJob();
});
describe(`Testing case "${caseId}"`, () => {
it('Draw a ellipse shape, track, second label.', () => {
cy.createEllipse(createEllipseShape);
cy.createEllipse(createEllipseTrack);
cy.createEllipse(createEllipseShapeSwitchLabel);
cy.createEllipse(createEllipseTrackSwitchLabel);
});
it('Ellipse rotation/interpolation.', () => {
Cypress.config('scrollBehavior', false);
cy.get('.cvat-player-last-button').click();
cy.shapeRotate(
'#cvat_canvas_shape_4',
(createEllipseTrackSwitchLabel.rightX + createEllipseTrackSwitchLabel.cx) / 2,
createEllipseTrackSwitchLabel.topY + 20,
'53.1',
false,
false,
);
testCompareRotate('cvat_canvas_shape_4', 0);
// Rotation with shift
cy.shapeRotate(
'#cvat_canvas_shape_4',
(createEllipseTrackSwitchLabel.rightX + createEllipseTrackSwitchLabel.cx) / 2,
createEllipseTrackSwitchLabel.topY + 20,
'60.0',
true,
false,
);
});
});
});

@ -1,4 +1,4 @@
// Copyright (C) 2020-2021 Intel Corporation
// Copyright (C) 2020-2022 Intel Corporation
//
// SPDX-License-Identifier: MIT
@ -67,6 +67,14 @@ context('Filters functionality.', () => {
],
numberOfPoints: 4,
};
const createEllipseTrack = {
type: 'Track',
labelName: labelTrack,
cx: 250,
cy: 350,
rightX: 450,
topY: 280,
};
const cvatCanvasShapeList = [];
const cvatFiltesList = [];
@ -101,6 +109,7 @@ context('Filters functionality.', () => {
cvatCanvasShapeList.push(Number($cvatCanvasShapeList[i].id.match(/\d+$/)));
}
});
cy.createEllipse(createEllipseTrack);
});
it('Filter: shape == "polygon". Only the polygon exist.', () => {
@ -164,7 +173,7 @@ context('Filters functionality.', () => {
value: labelTrack,
submit: true,
});
checkingFilterApplication([2, 4]); // #cvat_canvas_shape_2,4, #cvat-objects-sidebar-state-item-2,4
checkingFilterApplication([2, 4, 5]); // #cvat_canvas_shape_2,4,5, #cvat-objects-sidebar-state-item-2,4,5
cy.clearFilters(); // Clear filters
});
@ -182,8 +191,8 @@ context('Filters functionality.', () => {
labelAttr: 'count points',
submit: true,
});
// #cvat_canvas_shape_2,4, #cvat-objects-sidebar-state-item-2,4
checkingFilterApplication([2, 4]);
// #cvat_canvas_shape_2,4,5, #cvat-objects-sidebar-state-item-2,4,5
checkingFilterApplication([2, 4, 5]);
cy.clearFilters(); // Clear filters
});
@ -200,8 +209,8 @@ context('Filters functionality.', () => {
value: 'Height',
submit: true,
});
// #cvat_canvas_shape_1,2,3,4, #cvat-objects-sidebar-state-item-1,2,3,4
checkingFilterApplication([1, 2, 3, 4]);
// #cvat_canvas_shape_1,2,3,4,5, #cvat-objects-sidebar-state-item-1,2,3,4,5
checkingFilterApplication([1, 2, 3, 4, 5]);
cy.clearFilters(); // Clear filters
});
@ -244,7 +253,7 @@ context('Filters functionality.', () => {
cy.setFilter({
groupIndex: 2, ruleIndex: 3, field: 'Width', operator: '>', value: '60', submit: true,
});
checkingFilterApplication([2, 4]); // #cvat_canvas_shape_2,4, #cvat-objects-sidebar-state-item-2,4
checkingFilterApplication([2, 4, 5]); // #cvat_canvas_shape_2,4,5, #cvat-objects-sidebar-state-item-2,4,5
cy.clearFilters(); // Clear filters
});
@ -280,6 +289,22 @@ context('Filters functionality.', () => {
cy.clearFilters(); // Clear filters
});
it('Filter: shape == "ellipse". Only the ellipse exist.', () => {
const textFilter = 'shape == "ellipse"';
cvatFiltesList.push(textFilter);
cy.addFiltersRule(0);
cy.setFilter({
groupIndex: 0,
ruleIndex: 0,
field: 'Shape',
operator: '==',
value: 'ellipse',
submit: true,
});
checkingFilterApplication([5]); // #cvat_canvas_shape_5, #cvat-objects-sidebar-state-item-5
cy.clearFilters(); // Clear filters
});
it('Verify to show all filters', () => {
cy.сheckFiltersModalOpened();
cy.get('.recently-used-wrapper').trigger('mouseover');

@ -1,9 +1,11 @@
// Copyright (C) 2020-2021 Intel Corporation
// Copyright (C) 2020-2022 Intel Corporation
//
// SPDX-License-Identifier: MIT
/// <reference types="cypress" />
import { decomposeMatrix } from './utils';
require('cypress-file-upload');
require('../plugins/imageGenerator/imageGeneratorCommand');
require('../plugins/createZipArchive/createZipArchiveCommand');
@ -799,3 +801,30 @@ Cypress.Commands.add('exportTask', ({
cy.get('.cvat-notification-notice-export-task-start').should('be.visible');
cy.closeNotification('.cvat-notification-notice-export-task-start');
});
// FIXME: remove "checkText" after implementstion for ellipse
Cypress.Commands.add('shapeRotate', (shape, x, y, expectedRotateDeg, pressShift, checkText = true) => {
cy.get(shape)
.trigger('mousemove')
.trigger('mouseover')
.should('have.class', 'cvat_canvas_shape_activated');
cy.get('.cvat-canvas-container')
.trigger('mousemove', x, y)
.trigger('mouseenter', x, y);
cy.get('.svg_select_points_rot').should('have.class', 'cvat_canvas_selected_point');
cy.get('.cvat-canvas-container').trigger('mousedown', x, y, { button: 0 });
if (pressShift) {
cy.get('body').type('{shift}', { release: false });
}
cy.get('.cvat-canvas-container').trigger('mousemove', x + 20, y);
cy.get(shape).should('have.attr', 'transform');
cy.document().then((doc) => {
const modShapeIDString = shape.substring(1); // Remove "#" from the shape id string
const shapeTranformMatrix = decomposeMatrix(doc.getElementById(modShapeIDString).getCTM());
if (checkText) {
cy.get('#cvat_canvas_text_content').should('contain.text', `${shapeTranformMatrix}°`);
}
expect(`${expectedRotateDeg}°`).to.be.equal(`${shapeTranformMatrix}°`);
});
cy.get('.cvat-canvas-container').trigger('mouseup');
});

@ -1,4 +1,4 @@
// Copyright (C) 2021 Intel Corporation
// Copyright (C) 2021-2022 Intel Corporation
//
// SPDX-License-Identifier: MIT
@ -9,3 +9,15 @@ export function generateString(countPointsToMove, arrow) {
}
return action;
}
function deltaTransformPoint(matrix, point) {
const dx = point.x * matrix.a + point.y * matrix.c;
const dy = point.x * matrix.b + point.y * matrix.d;
return { x: dx, y: dy };
}
export function decomposeMatrix(matrix) {
const px = deltaTransformPoint(matrix, { x: 0, y: 1 });
const skewX = ((180 / Math.PI) * Math.atan2(px.y, px.x) - 90).toFixed(1);
return skewX;
}

Loading…
Cancel
Save