From 59d7b38157bb8df193cfc3c07421ad5b0cf588e3 Mon Sep 17 00:00:00 2001 From: Dmitry Kruchinin <33020454+dvkruchinin@users.noreply.github.com> Date: Wed, 31 Mar 2021 16:01:30 +0300 Subject: [PATCH] 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 --- .../annotation-page/top-bar/filters-modal.tsx | 2 +- .../case_18_filters_functionality.js | 456 +++++++++++------- .../issue_1444_filter_property_shape.js | 26 +- .../issue_2485_navigation_empty_frames.js | 67 +-- .../issue_2690_filters_help_window.js | 33 -- tests/cypress/support/commands.js | 28 -- .../support/commands_filters_feature.js | 139 ++++++ tests/cypress/support/index.js | 1 + 8 files changed, 472 insertions(+), 280 deletions(-) delete mode 100644 tests/cypress/integration/actions_tasks_objects/issue_2690_filters_help_window.js create mode 100644 tests/cypress/support/commands_filters_feature.js diff --git a/cvat-ui/src/components/annotation-page/top-bar/filters-modal.tsx b/cvat-ui/src/components/annotation-page/top-bar/filters-modal.tsx index 365c4c60..dbc43d52 100644 --- a/cvat-ui/src/components/annotation-page/top-bar/filters-modal.tsx +++ b/cvat-ui/src/components/annotation-page/top-bar/filters-modal.tsx @@ -251,7 +251,7 @@ export default function FiltersModalComponent(props: Props): JSX.Element { return ( -// 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]); + }); + }); +}); diff --git a/tests/cypress/integration/actions_tasks_objects/issue_1444_filter_property_shape.js b/tests/cypress/integration/actions_tasks_objects/issue_1444_filter_property_shape.js index 285981cc..427bc84d 100644 --- a/tests/cypress/integration/actions_tasks_objects/issue_1444_filter_property_shape.js +++ b/tests/cypress/integration/actions_tasks_objects/issue_1444_filter_property_shape.js @@ -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'); + }); }); }); diff --git a/tests/cypress/integration/actions_tasks_objects/issue_2485_navigation_empty_frames.js b/tests/cypress/integration/actions_tasks_objects/issue_2485_navigation_empty_frames.js index 0366764b..4aa7ab8e 100644 --- a/tests/cypress/integration/actions_tasks_objects/issue_2485_navigation_empty_frames.js +++ b/tests/cypress/integration/actions_tasks_objects/issue_2485_navigation_empty_frames.js @@ -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'); + }); }); }); diff --git a/tests/cypress/integration/actions_tasks_objects/issue_2690_filters_help_window.js b/tests/cypress/integration/actions_tasks_objects/issue_2690_filters_help_window.js deleted file mode 100644 index 408ee24b..00000000 --- a/tests/cypress/integration/actions_tasks_objects/issue_2690_filters_help_window.js +++ /dev/null @@ -1,33 +0,0 @@ -// Copyright (C) 2021 Intel Corporation -// -// SPDX-License-Identifier: MIT - -/// - -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'); - // }); - }); -}); diff --git a/tests/cypress/support/commands.js b/tests/cypress/support/commands.js index fbb896c1..373fff9b 100644 --- a/tests/cypress/support/commands.js +++ b/tests/cypress/support/commands.js @@ -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"]') diff --git a/tests/cypress/support/commands_filters_feature.js b/tests/cypress/support/commands_filters_feature.js new file mode 100644 index 00000000..eefd0449 --- /dev/null +++ b/tests/cypress/support/commands_filters_feature.js @@ -0,0 +1,139 @@ +// Copyright (C) 2021 Intel Corporation +// +// SPDX-License-Identifier: MIT + +/// + +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(); + }); +}); diff --git a/tests/cypress/support/index.js b/tests/cypress/support/index.js index 91de8794..2a064b04 100644 --- a/tests/cypress/support/index.js +++ b/tests/cypress/support/index.js @@ -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');