Skip to content
This repository has been archived by the owner on Nov 14, 2023. It is now read-only.

Commit

Permalink
Add test for mouseover mask/skeleton (cvat-ai#6828)
Browse files Browse the repository at this point in the history 
<!-- Raise an issue to propose your change
(https://github.com/opencv/cvat/issues).
It helps to avoid duplication of efforts from multiple independent
contributors.
Discuss your ideas with maintainers to be sure that changes will be
approved and merged.
Read the [Contribution
guide](https://opencv.github.io/cvat/docs/contributing/). -->

<!-- Provide a general summary of your changes in the Title above -->

### Motivation and context
<!-- Why is this change required? What problem does it solve? If it
fixes an open
issue, please link to the issue here. Describe your changes in detail,
add
screenshots. -->
Test for cvat-ai#6743, cvat-ai#6753

### How has this been tested?
<!-- Please describe in detail how you tested your changes.
Include details of your testing environment, and the tests you ran to
see how your change affects other areas of the code, etc. -->

### Checklist
<!-- Go over all the following points, and put an `x` in all the boxes
that apply.
If an item isn't applicable for some reason, then ~~explicitly
strikethrough~~ the whole
line. If you don't do that, GitHub will show incorrect progress for the
pull request.
If you're unsure about any of these, don't hesitate to ask. We're here
to help! -->
- [ ] I submit my changes into the `develop` branch
- [ ] I have added a description of my changes into the
[CHANGELOG](https://github.com/opencv/cvat/blob/develop/CHANGELOG.md)
file
- [ ] I have updated the documentation accordingly
- [ ] I have added tests to cover my changes
- [ ] I have linked related issues (see [GitHub docs](

https://help.github.com/en/github/managing-your-work-on-github/linking-a-pull-request-to-an-issue#linking-a-pull-request-to-an-issue-using-a-keyword))
- [ ] I have increased versions of npm packages if it is necessary

([cvat-canvas](https://github.com/opencv/cvat/tree/develop/cvat-canvas#versioning),

[cvat-core](https://github.com/opencv/cvat/tree/develop/cvat-core#versioning),

[cvat-data](https://github.com/opencv/cvat/tree/develop/cvat-data#versioning)
and

[cvat-ui](https://github.com/opencv/cvat/tree/develop/cvat-ui#versioning))

### License

- [ ] I submit _my code changes_ under the same [MIT License](
https://github.com/opencv/cvat/blob/develop/LICENSE) that covers the
project.
  Feel free to contact the maintainers if that's a concern.
  • Loading branch information
@klakhov @mikhail-treskin
klakhov authored and mikhail-treskin committed Oct 25, 2023
1 parent fe4037c commit a4cbb2d
Show file tree
Hide file tree
Showing 3 changed files with 223 additions and 129 deletions.
198 changes: 146 additions & 52 deletions tests/cypress/e2e/actions_tasks2/case_111_settings_text_size_position_label_content.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,106 +5,196 @@

/// <reference types="cypress" />

import {
taskName,
labelName,
attrName,
textDefaultValue,
} from '../../support/const';

context('Settings. Text size/position. Text labels content.', () => {
const caseId = '111';
const taskName = 'Test text size/position task';
const labelName = 'Test label';
const serverFiles = ['images/image_1.jpg', 'images/image_2.jpg', 'images/image_3.jpg'];
const attrName = 'Attr for test label';
const textDefaultValue = 'Default attr for test label';
let taskID = null;
let jobID = null;

const skeletonLabel = {
name: 'skeleton',
attributes: [],
type: 'skeleton',
svg: '<line x1="41.89224624633789" y1="49.40426254272461" x2="22.661476135253906" y2="39.20359420776367" ' +
'stroke="black" data-type="edge" data-node-from="3" stroke-width="0.5" data-node-to="4"></line>' +
'<line x1="73.49759674072266" y1="36.36078643798828" x2="41.89224624633789" y2="49.40426254272461"' +
' stroke="black" data-type="edge" data-node-from="2" stroke-width="0.5" data-node-to="3"></line>' +
'<line x1="28.34709358215332" y1="17.2972412109375" x2="73.49759674072266" y2="36.36078643798828"' +
' stroke="black" data-type="edge" data-node-from="1" stroke-width="0.5" data-node-to="2"></line>' +
'<circle r="1.5" stroke="black" fill="#b3b3b3" cx="28.34709358215332" cy="17.2972412109375" ' +
'stroke-width="0.1" data-type="element node" data-element-id="1" data-node-id="1" data-label-name="1">' +
'</circle><circle r="1.5" stroke="black" fill="#b3b3b3" cx="73.49759674072266" cy="36.36078643798828"' +
' stroke-width="0.1" data-type="element node" data-element-id="2" data-node-id="2" data-label-name="2">' +
'</circle><circle r="1.5" stroke="black" fill="#b3b3b3" cx="41.89224624633789" cy="49.40426254272461"' +
' stroke-width="0.1" data-type="element node" data-element-id="3" data-node-id="3" data-label-name="3">' +
'</circle><circle r="1.5" stroke="black" fill="#b3b3b3" cx="22.661476135253906" cy="39.20359420776367" ' +
'stroke-width="0.1" data-type="element node" data-element-id="4" data-node-id="4" ' +
'data-label-name="4"></circle>',
sublabels: [
{
name: '1',
attributes: [],
type: 'points',
},
{
name: '2',
attributes: [],
type: 'points',
},
{
name: '3',
attributes: [],
type: 'points',
},
{
name: '4',
attributes: [],
type: 'points',
},
],
};
const rectangleShape2Points = {
points: 'By 2 Points',
type: 'Shape',
labelName,
firstX: 100,
firstY: 100,
secondX: 500,
secondY: 300,
secondY: 200,
};
const polygonTrack = {
reDraw: false,
type: 'Track',
labelName,
pointsMap: [
{ x: 100, y: 400 },
{ x: 100, y: 210 },
{ x: 550, y: 210 },
{ x: 550, y: 400 },
{ x: 550, y: 700 },
{ x: 100, y: 700 },
{ x: 100, y: 400 },
],
complete: true,
numberOfPoints: null,
};

const maskDrawingActions = [{
method: 'brush',
coordinates: [[150, 600], [500, 600], [500, 800], [150, 800]],
}];

const skeletonType = 'Shape';
const skeletonPosition = {
xtl: 600,
ytl: 600,
xbr: 700,
ybr: 700,
};

function testTextPosition(shape, expectedPosition) {
let shapeLeftPosition = 0;
let shapeTopPosition = 0;
let shapeWidth = 0;
let shapeHeight = 0;
let textLeftPosition = 0;
let textTopPosition = 0;
let getText;

cy.get(shape).trigger('mouseover');
cy.get(shape).then(([shapeObj]) => {
const shapeBBox = shapeObj.getBoundingClientRect();
shapeLeftPosition = shapeBBox.left;
shapeTopPosition = shapeBBox.top;
shapeWidth = shapeBBox.width;
shapeHeight = shapeBBox.height;

if (shape === '#cvat_canvas_shape_1') {
getText = cy.get('.cvat_canvas_text').first();
} else {
getText = cy.get('.cvat_canvas_text').last();
}

getText.then(([textObj]) => {
const textBBox = textObj.getBoundingClientRect();
textLeftPosition = textBBox.left;
textTopPosition = textBBox.top;

if (expectedPosition === 'outside') {
// Text outside the shape of the right. Slightly below the shape upper edge.
expect(+shapeLeftPosition + +shapeWidth).lessThan(+textLeftPosition);
expect(+textTopPosition).to.be.within(+shapeTopPosition, +shapeTopPosition + 15);
} else {
// Text inside the shape
expect(+shapeLeftPosition + +shapeWidth / 2).greaterThan(+textLeftPosition);
expect(+shapeTopPosition + +shapeHeight / 2).greaterThan(+textTopPosition);
}
});
const id = shape[shape.length - 1];
cy.get(`.cvat_canvas_text[data-client-id="${id}"]`)
.then(([textObj]) => {
const textBBox = textObj.getBoundingClientRect();
textLeftPosition = textBBox.left;
textTopPosition = textBBox.top;

if (expectedPosition === 'outside') {
// Text outside the shape of the right. Slightly below the shape upper edge.
expect(+shapeLeftPosition + +shapeWidth).lessThan(+textLeftPosition);
expect(+textTopPosition).to.be.within(+shapeTopPosition, +shapeTopPosition + 15);
} else {
// Text inside the shape
expect(+shapeLeftPosition + +shapeWidth / 2).greaterThan(+textLeftPosition);
expect(+shapeTopPosition + +shapeHeight / 2).greaterThan(+textTopPosition);
}
});
});
}

function testLabelTextContent(id) {
let getTextContent;
if (id === 1) {
getTextContent = cy.get('.cvat_canvas_text').first();
} else {
getTextContent = cy.get('.cvat_canvas_text').last();
}
getTextContent.then(($labelText) => {
cy.get(`.cvat_canvas_text[data-client-id="${id}"]`).then(($labelText) => {
const labelText = $labelText.text();
expect(labelText).include(`${labelName} ${id} (manual)`);
expect(labelText).include(`${attrName}: ${textDefaultValue}`);
});
}

before(() => {
cy.openTaskJob(taskName);
cy.createRectangle(rectangleShape2Points);
cy.createPolygon(polygonTrack);

// Always show object details
cy.openSettings();
cy.get('.cvat-settings-modal').within(() => {
cy.contains('Workspace').click();
cy.get('.cvat-workspace-settings-show-text-always').within(() => {
cy.get('[type="checkbox"]').check();
cy.visit('auth/login');
cy.login();
cy.get('.cvat-tasks-page').should('exist').and('be.visible');

cy.headlessCreateTask({
labels: [
{
name: labelName,
attributes: [{
name: attrName,
mutable: false,
input_type: 'text',
default_value: textDefaultValue,
values: [],
}],
type: 'any',
},
skeletonLabel,
],
name: taskName,
project_id: null,
source_storage: { location: 'local' },
target_storage: { location: 'local' },
}, {
server_files: serverFiles,
image_quality: 70,
use_zip_chunks: true,
use_cache: true,
sorting_method: 'lexicographical',
}).then((response) => {
taskID = response.taskID;
[jobID] = response.jobID;
}).then(() => {
cy.visit(`/tasks/${taskID}/jobs/${jobID}`);
cy.get('.cvat-canvas-container').should('exist').and('be.visible');

cy.createRectangle(rectangleShape2Points);
cy.createPolygon(polygonTrack);
cy.startMaskDrawing();
cy.drawMask(maskDrawingActions);
cy.finishMaskDrawing();
cy.createSkeleton({
...skeletonPosition,
labelName: skeletonLabel.name,
type: skeletonType,
});

// Always show object details
cy.openSettings();
cy.get('.cvat-settings-modal').within(() => {
cy.contains('Workspace').click();
cy.get('.cvat-workspace-settings-show-text-always').within(() => {
cy.get('[type="checkbox"]').check();
});
});
cy.closeSettings();
});
cy.closeSettings();
});

describe(`Testing case "${caseId}"`, () => {
Expand All @@ -124,6 +214,8 @@ context('Settings. Text size/position. Text labels content.', () => {
it('Text position.', () => {
testTextPosition('#cvat_canvas_shape_1', 'outside');
testTextPosition('#cvat_canvas_shape_2', 'outside');
testTextPosition('#cvat_canvas_shape_3', 'outside');
testTextPosition('#cvat_canvas_shape_4', 'outside');

// Change the text position
cy.openSettings();
Expand All @@ -138,6 +230,8 @@ context('Settings. Text size/position. Text labels content.', () => {

testTextPosition('#cvat_canvas_shape_1', 'inside');
testTextPosition('#cvat_canvas_shape_2', 'inside');
testTextPosition('#cvat_canvas_shape_3', 'inside');
testTextPosition('#cvat_canvas_shape_4', 'inside');
});

it('Text labels content.', () => {
Expand Down Expand Up @@ -173,7 +267,7 @@ context('Settings. Text size/position. Text labels content.', () => {

testLabelTextContent(1);
testLabelTextContent(2);
cy.get('.cvat_canvas_text_attribute').should('have.length', 4);
cy.get('.cvat_canvas_text_attribute').should('have.length', 3);
cy.get('.cvat_canvas_text_description').should('not.exist');
});
});
Expand Down

0 comments on commit a4cbb2d

Please sign in to comment.