Cypress. Adapting tests to the new filter functionality. (#3026)

* adapting 1444

* Add cypress command

* Tests adaptations.

Removed test or issue 2690.

* Add the css class if filter modal visible

* Move cypress command for filters to diff file

* Tests adaptations

* Applying comments.

* Moving comments

* Prettier formatting.

* Fix another tests
main
Dmitry Kruchinin 5 years ago committed by GitHub
parent 56bba8ec93
commit 59d7b38157
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -251,7 +251,7 @@ export default function FiltersModalComponent(props: Props): JSX.Element {
return (
<Modal
className='cvat-filters-modal'
className={visible ? 'cvat-filters-modal cvat-filters-modal-visible' : 'cvat-filters-modal'}
visible={visible}
closable={false}
width={800}

@ -4,182 +4,280 @@
// /// <reference types="cypress" />
// import { taskName } from '../../support/const';
// TODO: Update with new filters UI
// context('Filters functionality.', () => {
// const caseId = '18';
// const labelShape = 'shape 3 points';
// const additionalAttrsLabelShape = [
// { additionalAttrName: 'type', additionalValue: 'shape', typeAttribute: 'Text' },
// { additionalAttrName: 'count points', additionalValue: '3', typeAttribute: 'Text' },
// { additionalAttrName: 'polygon', additionalValue: 'True', typeAttribute: 'Checkbox' },
// ];
// const labelTrack = 'track 4 points';
// const additionalAttrsLabelTrack = [
// { additionalAttrName: 'type', additionalValue: 'track', typeAttribute: 'Text' },
// { additionalAttrName: 'polygon', additionalValue: 'True', typeAttribute: 'Checkbox' },
// { additionalAttrName: 'count points', additionalValue: '4', typeAttribute: 'Text' },
// ];
// const createPolygonShape = {
// reDraw: false,
// type: 'Shape',
// labelName: labelShape,
// pointsMap: [
// { x: 200, y: 200 },
// { x: 250, y: 200 },
// { x: 250, y: 240 },
// ],
// complete: true,
// numberOfPoints: null,
// };
// const createRectangleTrack2Points = {
// points: 'By 2 Points',
// type: 'Track',
// labelName: labelTrack,
// firstX: 260,
// firstY: 200,
// secondX: 360,
// secondY: 250,
// };
// const createRectangleShape4Points = {
// points: 'By 4 Points',
// type: 'Shape',
// labelName: labelShape,
// firstX: 550,
// firstY: 350,
// secondX: 650,
// secondY: 350,
// thirdX: 650,
// thirdY: 450,
// fourthX: 550,
// fourthY: 450,
// };
// const createPolygonTrack = {
// reDraw: false,
// type: 'Track',
// labelName: labelTrack,
// pointsMap: [
// { x: 700, y: 350 },
// { x: 850, y: 350 },
// { x: 850, y: 450 },
// { x: 700, y: 450 },
// ],
// numberOfPoints: 4,
// };
// let cvatCanvasShapeList = [];
// let cvatFiltesList = [];
// function checkingFilterApplication(ids) {
// for (let i = 0; i < cvatCanvasShapeList.length; i++) {
// if (ids.indexOf(cvatCanvasShapeList[i]) > -1) {
// cy.get(`#cvat_canvas_shape_${cvatCanvasShapeList[i]}`).should('exist');
// cy.get(`#cvat-objects-sidebar-state-item-${cvatCanvasShapeList[i]}`).should('exist');
// } else {
// cy.get(`#cvat_canvas_shape_${cvatCanvasShapeList[i]}`).should('not.exist');
// cy.get(`#cvat-objects-sidebar-state-item-${cvatCanvasShapeList[i]}`).should('not.exist');
// }
// }
// }
// before(() => {
// cy.openTask(taskName);
// cy.addNewLabel(labelShape, additionalAttrsLabelShape);
// cy.addNewLabel(labelTrack, additionalAttrsLabelTrack);
// cy.openJob();
// });
// describe(`Testing case "${caseId}"`, () => {
// it('Draw several objects (different shapes, tracks, labels)', () => {
// cy.createPolygon(createPolygonShape);
// cy.createRectangle(createRectangleTrack2Points);
// cy.createRectangle(createRectangleShape4Points);
// cy.createPolygon(createPolygonTrack);
// cy.get('.cvat_canvas_shape').then(($cvatCanvasShapeList) => {
// for (let i = 0; i < $cvatCanvasShapeList.length; i++) {
// cvatCanvasShapeList.push(Number($cvatCanvasShapeList[i].id.match(/\d+$/)));
// }
// });
// });
// it('Filter: shape=="polygon". Only the polygon exist.', () => {
// const textFilter = 'shape=="polygon"';
// cvatFiltesList.push(textFilter);
// cy.writeFilterValue(false, textFilter); // #cvat_canvas_shape_1,4, #cvat-objects-sidebar-state-item-1,4
// checkingFilterApplication([1, 4]);
// });
// it('Filter: shape=="polygon" | shape=="rectangle". Only the rectangle and polygon exist.', () => {
// const textFilter = 'shape=="polygon" | shape=="rectangle"';
// cvatFiltesList.push(textFilter);
// cy.writeFilterValue(true, textFilter); // #cvat_canvas_shape_1,2,3,4, #cvat-objects-sidebar-state-item-1,2,3,4
// checkingFilterApplication([1, 2, 3, 4]);
// });
// it('Filter: type=="shape". Only the objects with shape type exist.', () => {
// const textFilter = 'type=="shape"';
// cvatFiltesList.push(textFilter);
// cy.writeFilterValue(true, textFilter); // #cvat_canvas_shape_1,3, #cvat-objects-sidebar-state-item-1,3
// checkingFilterApplication([1, 3]);
// });
// it('Filter: label=="track 4 points". Only the polygon exist.', () => {
// const textFilter = `label=="${labelTrack}"`;
// cvatFiltesList.push(textFilter);
// cy.writeFilterValue(true, textFilter); // #cvat_canvas_shape_2,4, #cvat-objects-sidebar-state-item-2,4
// checkingFilterApplication([2, 4]);
// });
// it('Filter: attr["count points"] == "4". Only the objects with same attr exist.', () => {
// const textFilter = 'attr["count points"] == "4"';
// cvatFiltesList.push(textFilter);
// cy.writeFilterValue(true, textFilter); // #cvat_canvas_shape_2,4, #cvat-objects-sidebar-state-item-2,4
// checkingFilterApplication([2, 4]);
// });
// it('Filter: width >= height. All objects exist.', () => {
// const textFilter = 'width >= height';
// cvatFiltesList.push(textFilter);
// cy.writeFilterValue(true, textFilter); // #cvat_canvas_shape_1,2,3,4, #cvat-objects-sidebar-state-item-1,2,3,4
// checkingFilterApplication([1, 2, 3, 4]);
// });
// it('Filter: clientID == 4. Only the objects with same id exist (polygon track).', () => {
// const textFilter = 'clientID == 4';
// cvatFiltesList.push(textFilter);
// cy.writeFilterValue(true, textFilter); // #cvat_canvas_shape_7, #cvat-objects-sidebar-state-item-4
// checkingFilterApplication([4]);
// });
// it('Filter: (label=="shape 3 points" & attr["polylines"]==true) | (label=="track 4 points" & width > 60). Only the objects polygon and rectangle exist.', () => {
// const textFilter =
// '(label=="shape 3 points" & attr["polylines"]==true) | (label=="track 4 points" & width > 60)';
// cvatFiltesList.push(textFilter);
// cy.writeFilterValue(true, textFilter); // #cvat_canvas_shape_2,4, #cvat-objects-sidebar-state-item-2,4
// checkingFilterApplication([2, 4]);
// });
// it('Filter: (( label==["shape 3 points"]) | (attr["type"]=="shape" & width > 50)) & (height > 50 & (clientID == serverID))). All objects not exist.', () => {
// const textFilter =
// '(( label==["points shape"]) | (attr["type"]=="shape" & width > 50)) & (height > 50 & (clientID == serverID)))';
// cvatFiltesList.push(textFilter);
// cy.writeFilterValue(true, textFilter);
// checkingFilterApplication([]);
// });
// it('Verify to show all filters', () => {
// cvatFiltesList.forEach(function (filterValue) {
// cy.contains('.cvat-annotations-filters-input-history-element', filterValue);
// });
// });
// it('Select filter: type=="shape"', () => {
// cy.selectFilterValue(true, 'type=="shape"'); // #cvat_canvas_shape_1,3, #cvat-objects-sidebar-state-item-1,3
// checkingFilterApplication([1, 3]);
// });
// it('Select filter: clientID == 4', () => {
// cy.selectFilterValue(true, 'clientID == 4'); // #cvat_canvas_shape_7, #cvat-objects-sidebar-state-item-4
// checkingFilterApplication([4]);
// });
// it('Select two filters', () => {
// const textFirstFilter =
// '(label=="shape 3 points" & attr["polylines"]==true) | (label=="track 4 points" & width > 60)'; // #cvat_canvas_shape_2,4, #cvat-objects-sidebar-state-item-2,4
// const textSecondFilter = 'shape=="polygon"'; // #cvat_canvas_shape_1,4, #cvat-objects-sidebar-state-item-1,4
// cy.selectFilterValue(true, textFirstFilter);
// cy.selectFilterValue(false, textSecondFilter);
// checkingFilterApplication([1, 2, 4]);
// });
// });
// });
import { taskName } from '../../support/const';
context('Filters functionality.', () => {
const caseId = '18';
const labelShape = 'shape 3 points';
const additionalAttrsLabelShape = [
{ additionalAttrName: 'type', additionalValue: 'shape', typeAttribute: 'Text' },
{ additionalAttrName: 'count points', additionalValue: '3', typeAttribute: 'Text' },
{ additionalAttrName: 'polygon', additionalValue: 'True', typeAttribute: 'Checkbox' },
];
const labelTrack = 'track 4 points';
const additionalAttrsLabelTrack = [
{ additionalAttrName: 'type', additionalValue: 'track', typeAttribute: 'Text' },
{ additionalAttrName: 'polygon', additionalValue: 'True', typeAttribute: 'Checkbox' },
{ additionalAttrName: 'count points', additionalValue: '4', typeAttribute: 'Text' },
];
const createPolygonShape = {
reDraw: false,
type: 'Shape',
labelName: labelShape,
pointsMap: [
{ x: 200, y: 200 },
{ x: 250, y: 200 },
{ x: 250, y: 240 },
],
complete: true,
numberOfPoints: null,
};
const createRectangleTrack2Points = {
points: 'By 2 Points',
type: 'Track',
labelName: labelTrack,
firstX: 260,
firstY: 200,
secondX: 360,
secondY: 250,
};
const createRectangleShape4Points = {
points: 'By 4 Points',
type: 'Shape',
labelName: labelShape,
firstX: 550,
firstY: 350,
secondX: 650,
secondY: 350,
thirdX: 650,
thirdY: 450,
fourthX: 550,
fourthY: 450,
};
const createPolygonTrack = {
reDraw: false,
type: 'Track',
labelName: labelTrack,
pointsMap: [
{ x: 700, y: 350 },
{ x: 850, y: 350 },
{ x: 850, y: 450 },
{ x: 700, y: 450 },
],
numberOfPoints: 4,
};
let cvatCanvasShapeList = [];
let cvatFiltesList = [];
function checkingFilterApplication(ids) {
for (let i = 0; i < cvatCanvasShapeList.length; i++) {
if (ids.indexOf(cvatCanvasShapeList[i]) > -1) {
cy.get(`#cvat_canvas_shape_${cvatCanvasShapeList[i]}`).should('exist');
cy.get(`#cvat-objects-sidebar-state-item-${cvatCanvasShapeList[i]}`).should('exist');
} else {
cy.get(`#cvat_canvas_shape_${cvatCanvasShapeList[i]}`).should('not.exist');
cy.get(`#cvat-objects-sidebar-state-item-${cvatCanvasShapeList[i]}`).should('not.exist');
}
}
}
before(() => {
cy.openTask(taskName);
cy.addNewLabel(labelShape, additionalAttrsLabelShape);
cy.addNewLabel(labelTrack, additionalAttrsLabelTrack);
cy.openJob();
});
describe(`Testing case "${caseId}"`, () => {
it('Draw several objects (different shapes, tracks, labels)', () => {
cy.createPolygon(createPolygonShape);
cy.createRectangle(createRectangleTrack2Points);
cy.createRectangle(createRectangleShape4Points);
cy.createPolygon(createPolygonTrack);
cy.get('.cvat_canvas_shape').then(($cvatCanvasShapeList) => {
for (let i = 0; i < $cvatCanvasShapeList.length; i++) {
cvatCanvasShapeList.push(Number($cvatCanvasShapeList[i].id.match(/\d+$/)));
}
});
});
it('Filter: shape == "polygon". Only the polygon exist.', () => {
const textFilter = 'shape == "polygon"';
cvatFiltesList.push(textFilter);
cy.addFiltersRule(0);
cy.setFilter({
groupIndex: 0,
ruleIndex: 0,
field: 'Shape',
operator: '==',
value: 'polygon',
submit: true,
});
checkingFilterApplication([1, 4]); // #cvat_canvas_shape_1,4, #cvat-objects-sidebar-state-item-1,4
cy.clearFilters(); // Clear filters
});
it('Filter: (shape == "polygon" || shape == "rectangle"). Only the rectangle and polygon exist.', () => {
const textFilter = '(shape == "polygon" || shape == "rectangle")';
cvatFiltesList.push(textFilter);
cy.addFiltersRule(0);
cy.setFilter({ groupIndex: 0, ruleIndex: 0, field: 'Shape', operator: '==', value: 'polygon' });
cy.addFiltersRule(0);
cy.setGroupCondition(0, 'Or');
cy.setFilter({
groupIndex: 0,
ruleIndex: 1,
field: 'Shape',
operator: '==',
value: 'rectangle',
submit: true,
});
checkingFilterApplication([1, 2, 3, 4]); // #cvat_canvas_shape_1,2,3,4, #cvat-objects-sidebar-state-item-1,2,3,4
cy.clearFilters(); // Clear filters
});
it('Filter: type == "shape". Only the objects with shape type exist.', () => {
const textFilter = 'type == "shape"';
cvatFiltesList.push(textFilter);
cy.addFiltersRule(0);
cy.setFilter({ groupIndex: 0, ruleIndex: 0, field: 'Type', operator: '==', value: 'shape', submit: true });
checkingFilterApplication([1, 3]); // #cvat_canvas_shape_1,3, #cvat-objects-sidebar-state-item-1,3
cy.clearFilters(); // Clear filters
});
it('Filter: label == "track 4 points". Only the polygon exist.', () => {
const textFilter = 'label == "track 4 points"';
cvatFiltesList.push(textFilter);
cy.addFiltersRule(0);
cy.setFilter({
groupIndex: 0,
ruleIndex: 0,
field: 'Label',
operator: '==',
value: labelTrack,
submit: true,
});
checkingFilterApplication([2, 4]); // #cvat_canvas_shape_2,4, #cvat-objects-sidebar-state-item-2,4
cy.clearFilters(); // Clear filters
});
it('Filter: Attributes count points 4. Only the objects with same attr exist.', () => {
const textFilter = 'attr.track 4 points.count points == "4"';
cvatFiltesList.push(textFilter);
cy.addFiltersRule(0);
cy.setFilter({
groupIndex: 0,
ruleIndex: 0,
field: 'Attributes',
operator: '==',
value: 4,
label: labelTrack,
labelAttr: 'count points',
submit: true,
});
checkingFilterApplication([2, 4]); // #cvat_canvas_shape_2,4, #cvat-objects-sidebar-state-item-2,4
cy.clearFilters(); // Clear filters
});
it('Filter: width >= height. All objects exist.', () => {
const textFilter = 'width >= height';
cvatFiltesList.push(textFilter);
cy.addFiltersRule(0);
cy.setFilter({
groupIndex: 0,
ruleIndex: 0,
field: 'Width',
operator: '>=',
valueSource: 'Field',
value: 'Height',
submit: true,
});
checkingFilterApplication([1, 2, 3, 4]); // #cvat_canvas_shape_1,2,3,4, #cvat-objects-sidebar-state-item-1,2,3,4
cy.clearFilters(); // Clear filters
});
it('Filter: objectID == 4. Only the objects with same id exist (polygon track).', () => {
const textFilter = 'objectID == 4';
cvatFiltesList.push(textFilter);
cy.addFiltersRule(0);
cy.setFilter({ groupIndex: 0, ruleIndex: 0, field: 'ObjectID', operator: '==', value: 4, submit: true });
checkingFilterApplication([4]); // #cvat_canvas_shape_4, #cvat-objects-sidebar-state-item-4
cy.clearFilters(); // Clear filters
});
it('Filter: ((label == "shape 3 points" && attr.track 4 points.type == "polylines") || (label == "track 4 points" && width > 60)). Only the objects polygon and rectangle exist.', () => {
const textFilter =
'((label == "shape 3 points" && attr.track 4 points.type == "polylines") || (label == "track 4 points" && width > 60))';
cvatFiltesList.push(textFilter);
cy.addFiltersGroup(0);
cy.addFiltersGroup(0);
cy.setFilter({ groupIndex: 1, ruleIndex: 0, field: 'Label', operator: '==', value: labelShape });
cy.addFiltersRule(1);
cy.setFilter({
groupIndex: 1,
ruleIndex: 1,
field: 'Attributes',
operator: '==',
value: 'polylines',
label: labelTrack,
labelAttr: 'type',
});
cy.setFilter({ groupIndex: 2, ruleIndex: 2, field: 'Label', operator: '==', value: labelTrack });
cy.addFiltersRule(2);
cy.setGroupCondition(0, 'Or');
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
cy.clearFilters(); // Clear filters
});
it('Filter: ((label == "shape 3 points" || (attr.shape 3 points.type == "shape" && width > 50)) && height > 50). Only the rectangle shape exist.', () => {
const textFilter =
'((label == "shape 3 points" || (attr.shape 3 points.type == "shape" && width > 50)) && height > 50)';
cvatFiltesList.push(textFilter);
cy.addFiltersGroup(0);
cy.setFilter({ groupIndex: 1, ruleIndex: 0, field: 'Label', operator: '==', value: labelShape });
cy.addFiltersGroup(1);
cy.setGroupCondition(1, 'Or');
cy.setFilter({
groupIndex: 2,
ruleIndex: 1,
field: 'Attributes',
operator: '==',
value: 'shape',
label: labelShape,
labelAttr: 'type',
});
cy.addFiltersRule(2);
cy.setFilter({ groupIndex: 2, ruleIndex: 2, field: 'Width', operator: '>', value: 50 });
cy.addFiltersGroup(0);
cy.setGroupCondition(0, 'And');
cy.setFilter({ groupIndex: 3, ruleIndex: 3, field: 'Height', operator: '>', value: 50, submit: true });
checkingFilterApplication([3]); // #cvat_canvas_shape_3, #cvat-objects-sidebar-state-item-3
cy.clearFilters(); // Clear filters
});
it('Verify to show all filters', () => {
cy.сheckFiltersModalOpened();
cy.get('.recently-used-wrapper').trigger('mouseover');
cy.get('.ant-dropdown')
.not('.ant-dropdown-hidden')
.within(() => {
cvatFiltesList.forEach(function (filterValue) {
cy.contains('[role="menuitem"]', filterValue);
});
});
});
it('Select filter: type == "shape"', () => {
cy.selectFilterValue('type == "shape"'); // #cvat_canvas_shape_1,3, #cvat-objects-sidebar-state-item-1,3
checkingFilterApplication([1, 3]);
});
it('Select filter: objectID == 4', () => {
cy.selectFilterValue('objectID == 4'); // #cvat_canvas_shape_4, #cvat-objects-sidebar-state-item-4
checkingFilterApplication([4]);
});
});
});

@ -39,17 +39,27 @@ context('Filter property "shape" work correctly', () => {
cy.createRectangle(createRectangleShape2Points);
cy.get('#cvat-objects-sidebar-state-item-1').should('contain', '1').and('contain', 'RECTANGLE SHAPE');
});
it('Create a polygon', () => {
cy.createPolygon(createPolygonShape);
cy.get('#cvat-objects-sidebar-state-item-2').should('contain', '2').and('contain', 'POLYGON SHAPE');
});
// TODO: Update with new filters UI
// it('Input filter "shape == "polygon""', () => {
// cy.get('.cvat-annotations-filters-input').type('shape == "polygon"{Enter}');
// });
// it('Only polygon is visible', () => {
// cy.get('#cvat_canvas_shape_2').should('exist');
// cy.get('#cvat_canvas_shape_1').should('not.exist');
// });
it('Set a filter: "shape == "polygon""', () => {
cy.addFiltersRule(0);
cy.setFilter({
groupIndex: 0,
ruleIndex: 0,
field: 'Shape',
operator: '==',
value: 'polygon',
submit: true,
});
});
it('Only polygon is visible', () => {
cy.get('#cvat_canvas_shape_2').should('exist');
cy.get('#cvat_canvas_shape_1').should('not.exist');
});
});
});

@ -33,11 +33,18 @@ context('Navigation to empty frames', () => {
cy.createRectangle(createRectangleShape2Points);
});
// TODO: Update with new filters UI
// it('Input a filter to see the created objects.', () => {
// cy.writeFilterValue(false, 'shape=="rectangle"');
// cy.get('#cvat_canvas_shape_2').should('exist');
// });
it('Set a filter to see the created objects.', () => {
cy.addFiltersRule(0);
cy.setFilter({
groupIndex: 0,
ruleIndex: 0,
field: 'Shape',
operator: '==',
value: 'rectangle',
submit: true,
});
cy.get('#cvat_canvas_shape_2').should('exist');
});
it('Go to 3rd frame.', () => {
cy.goCheckFrameNumber(3);
@ -51,22 +58,21 @@ context('Navigation to empty frames', () => {
}
});
// TODO: Update with new filters UI
// it("Press go previous with a filter. CVAT get 2nd frame. Press again. Frame wasn't changed.", () => {
// for (let i = 1; i <= 2; i++) {
// cy.get('.cvat-player-previous-button-filtered').click({ force: true });
// cy.checkFrameNum(2);
// cy.get('#cvat_canvas_shape_1').should('exist');
// }
// });
it("Press go previous with a filter. CVAT get 2nd frame. Press again. Frame wasn't changed.", () => {
for (let i = 1; i <= 2; i++) {
cy.get('.cvat-player-previous-button-filtered').click({ force: true });
cy.checkFrameNum(2);
cy.get('#cvat_canvas_shape_1').should('exist');
}
});
// it("Press go next with a filter. CVAT get 4th frame. Press again. Frame wasn't changed.", () => {
// for (let i = 1; i <= 2; i++) {
// cy.get('.cvat-player-next-button-filtered').click({ force: true });
// cy.checkFrameNum(4);
// cy.get('#cvat_canvas_shape_2').should('exist');
// }
// });
it("Press go next with a filter. CVAT get 4th frame. Press again. Frame wasn't changed.", () => {
for (let i = 1; i <= 2; i++) {
cy.get('.cvat-player-next-button-filtered').click({ force: true });
cy.checkFrameNum(4);
cy.get('#cvat_canvas_shape_2').should('exist');
}
});
it('Change navigation buttons mode to "Go next/previous to an empty frame".', () => {
for (const i of ['previous', 'next']) {
@ -75,17 +81,16 @@ context('Navigation to empty frames', () => {
}
});
// TODO: Update with new filters UI
// it('Go previous to an empty frame. CVAT get 3rd frame.', () => {
// cy.get('.cvat-player-previous-button-empty').click({ force: true });
// cy.checkFrameNum(3);
// cy.get('.cvat_canvas_shape').should('not.exist');
// });
it('Go previous to an empty frame. CVAT get 3rd frame.', () => {
cy.get('.cvat-player-previous-button-empty').click({ force: true });
cy.checkFrameNum(3);
cy.get('.cvat_canvas_shape').should('not.exist');
});
// it('Go next to an empty frame. CVAT get 5th frame.', () => {
// cy.get('.cvat-player-next-button-empty').click({ force: true });
// cy.checkFrameNum(5);
// cy.get('.cvat_canvas_shape').should('not.exist');
// });
it('Go next to an empty frame. CVAT get 5th frame.', () => {
cy.get('.cvat-player-next-button-empty').click({ force: true });
cy.checkFrameNum(5);
cy.get('.cvat_canvas_shape').should('not.exist');
});
});
});

@ -1,33 +0,0 @@
// Copyright (C) 2021 Intel Corporation
//
// SPDX-License-Identifier: MIT
/// <reference types="cypress" />
import { taskName } from '../../support/const';
context('Annotation filter help dialog window.', () => {
const issueId = '2690';
before(() => {
cy.openTaskJob(taskName);
});
describe(`Testing issue "${issueId}"`, () => {
// TODO: Update with new filters UI
// it('Open annotation filters help dialog window. The window is visible.', () => {
// cy.get('.cvat-annotations-filters-input').within(() => {
// // class="ant-select-selection-placeholder" has CSS pointer-events: none
// cy.get('.ant-select-selection-placeholder').invoke('css', 'pointer-events', 'auto'); // Replace CSS "pointer-events" to auto
// cy.get('[aria-label="filter"]').click();
// });
// cy.get('.cvat-annotations-filters-help-modal-window').should('exist').and('be.visible');
// });
// it('Close annotation filters help dialog window. The window is closed.', () => {
// cy.get('.cvat-annotations-filters-help-modal-window').within(() => {
// cy.contains('button', 'OK').click();
// });
// cy.get('.cvat-annotations-filters-help-modal-window').should('not.exist');
// });
});
});

@ -572,34 +572,6 @@ Cypress.Commands.add('getScaleValue', () => {
});
});
Cypress.Commands.add('writeFilterValue', (clear, filterValue) => {
if (clear) {
cy.get('.cvat-annotations-filters-input').within(() => {
cy.get('[aria-label="close-circle"]').click();
});
}
cy.get('.cvat-annotations-filters-input')
.type(`${filterValue}{Enter}`)
.within(() => {
cy.get('.ant-select-selection-item-content').should('have.text', filterValue);
});
});
Cypress.Commands.add('selectFilterValue', (clear, filterValue) => {
if (clear) {
cy.get('.cvat-annotations-filters-input').within(() => {
cy.get('[aria-label="close-circle"]').click();
});
}
cy.get('body').click();
cy.get('.cvat-annotations-filters-input').click();
cy.contains('.cvat-annotations-filters-input-history-element', filterValue).scrollIntoView().click();
cy.get('body').click();
cy.get('.cvat-annotations-filters-input').within(() => {
cy.contains('.ant-select-selection-item-content', filterValue);
});
});
Cypress.Commands.add('goCheckFrameNumber', (frameNum) => {
cy.get('.cvat-player-frame-selector').within(() => {
cy.get('input[role="spinbutton"]')

@ -0,0 +1,139 @@
// Copyright (C) 2021 Intel Corporation
//
// SPDX-License-Identifier: MIT
/// <reference types="cypress" />
Cypress.Commands.add('сheckFiltersModalOpened', () => {
cy.document().then((doc) => {
const filterModal = Array.from(doc.querySelectorAll('.cvat-filters-modal-visible'));
if (filterModal.length === 0) {
cy.contains('.cvat-annotation-header-button', 'Filters').click();
}
});
});
Cypress.Commands.add('collectGroupID', () => {
let groupDataID = [];
cy.get('.group').then(($group) => {
for (let i = 0; i < $group.length; i++) {
groupDataID.push($group[i].dataset.id);
}
return groupDataID;
});
});
Cypress.Commands.add('collectRuleID', () => {
let ruleDataID = [];
cy.get('.rule').then(($rule) => {
for (let i = 0; i < $rule.length; i++) {
ruleDataID.push($rule[i].dataset.id);
}
return ruleDataID;
});
});
Cypress.Commands.add('clearFilters', () => {
cy.сheckFiltersModalOpened();
cy.contains('button', 'Clear filters').click();
});
Cypress.Commands.add('addFiltersGroup', (groupIndex) => {
cy.сheckFiltersModalOpened();
cy.collectGroupID().then((groupIdIndex) => {
cy.get(`[data-id="${groupIdIndex[groupIndex]}"]`).contains('button', 'Add group').first().click();
});
});
Cypress.Commands.add('addFiltersRule', (groupIndex) => {
cy.сheckFiltersModalOpened();
cy.collectGroupID().then((groupIdIndex) => {
cy.get(`[data-id="${groupIdIndex[groupIndex]}"]`).contains('button', 'Add rule').click();
});
});
Cypress.Commands.add('setGroupCondition', (groupIndex, condition) => {
cy.сheckFiltersModalOpened();
cy.collectGroupID().then((groupIdIndex) => {
cy.get(`[data-id="${groupIdIndex[groupIndex]}"]`).within(() => {
cy.get('.group--header').first().trigger('mouseover');
cy.contains('button', condition).click({ force: true });
});
});
});
Cypress.Commands.add(
'setFilter',
({groupIndex, ruleIndex, field, operator, valueSource, value, label, labelAttr, submit}) => {
cy.сheckFiltersModalOpened();
cy.collectGroupID().then((groupIdIndex) => {
cy.collectRuleID().then((ruleIdIndex) => {
cy.get(`[data-id="${groupIdIndex[groupIndex]}"]`)
.find(`[data-id="${ruleIdIndex[ruleIndex]}"]`)
.within(() => {
cy.contains('button', 'Select field').click();
});
if (field === 'Attributes') {
cy.get('.ant-dropdown')
.not('.ant-dropdown-hidden')
.contains('[role="menuitem"]', field)
.trigger('mouseover');
cy.get('.ant-dropdown-menu-sub').contains(label).trigger('mouseover', { force: true });
cy.contains('.ant-dropdown-menu-item-only-child', labelAttr).click();
} else {
cy.get('.ant-dropdown').not('.ant-dropdown-hidden').contains('[role="menuitem"]', field).click();
}
cy.get(`[data-id="${groupIdIndex[groupIndex]}"]`)
.find(`[data-id="${ruleIdIndex[ruleIndex]}"]`)
.within(() => {
cy.get('[type="search"]').first().click({ force: true });
});
cy.get(`[label="${operator}"]`).last().click();
if (valueSource) {
cy.get(`[data-id="${groupIdIndex[groupIndex]}"]`)
.find(`[data-id="${ruleIdIndex[ruleIndex]}"]`)
.within(() => {
cy.get('[aria-label="ellipsis"]').trigger('mouseover');
});
cy.contains('Select value source').parents('[role="tooltip"]').contains(valueSource).click();
}
cy.get(`[data-id="${groupIdIndex[groupIndex]}"]`)
.find(`[data-id="${ruleIdIndex[ruleIndex]}"]`)
.within(() => {
if (field === 'Attributes') {
cy.get('[placeholder="Enter string"]').last().type(`${value}{Enter}`);
} else {
if (!valueSource) {
if (field === 'ObjectID' || field === 'Width' || field === 'Height') {
cy.get('[placeholder="Enter number"]').type(`${value}{Enter}`);
} else {
cy.get('[type="search"]').last().type(`${value}{Enter}`);
}
} else {
cy.contains('[type="button"]', 'Select field ').click();
}
}
});
if (valueSource) {
cy.get('.ant-dropdown').not('.ant-dropdown-hidden').contains('[role="menuitem"]', value).click();
}
cy.get('.cvat-filters-modal').within(() => {
submit ? cy.contains('button', 'Submit').click() : null;
});
});
});
},
);
Cypress.Commands.add('selectFilterValue', (filterValue) => {
cy.сheckFiltersModalOpened();
cy.get('.recently-used-wrapper').trigger('mouseover');
cy.get('.ant-dropdown')
.not('.ant-dropdown-hidden')
.within(() => {
cy.contains('[role="menuitem"]', new RegExp(`^${filterValue}$`)).click();
});
cy.get('.cvat-filters-modal').within(() => {
cy.contains('button', 'Submit').click();
});
});

@ -6,6 +6,7 @@ require('./commands');
require('./commands_projects');
require('./commands_review_pipeline');
require('./commands_canvas3d');
require('./commands_filters_feature');
require('@cypress/code-coverage/support');
require('cypress-plugin-tab');

Loading…
Cancel
Save