From e4c5a7877465d37ea80f2c2ffd1e305964d11883 Mon Sep 17 00:00:00 2001 From: DmitriyOparin <35344996+DmitriyOparin@users.noreply.github.com> Date: Wed, 30 Dec 2020 16:16:52 +0300 Subject: [PATCH] Upgrade cypress test. Add check filter history. (#2588) * add test * add cssSelector for elements and update cvat-ui versions * added step for verify select two filters * rework by comments * improved selection of two filters * improvements by comments Co-authored-by: Dmitriy Oparin --- .../annotations-filters-input.tsx | 2 +- .../case_18_filters_functionality.js | 67 ++++++++++++++----- tests/cypress/support/commands.js | 15 +++++ 3 files changed, 67 insertions(+), 17 deletions(-) diff --git a/cvat-ui/src/components/annotation-page/annotations-filters-input.tsx b/cvat-ui/src/components/annotation-page/annotations-filters-input.tsx index 6aea1abf..2bd2664c 100644 --- a/cvat-ui/src/components/annotation-page/annotations-filters-input.tsx +++ b/cvat-ui/src/components/annotation-page/annotations-filters-input.tsx @@ -158,7 +158,7 @@ function AnnotationsFiltersInput(props: StateToProps & DispatchToProps): JSX.Ele > {annotationsFiltersHistory.map( (element: string): JSX.Element => ( - + {element} ), diff --git a/tests/cypress/integration/actions_tasks_objects/case_18_filters_functionality.js b/tests/cypress/integration/actions_tasks_objects/case_18_filters_functionality.js index 5853dc12..203155ed 100644 --- a/tests/cypress/integration/actions_tasks_objects/case_18_filters_functionality.js +++ b/tests/cypress/integration/actions_tasks_objects/case_18_filters_functionality.js @@ -69,6 +69,7 @@ context('Filters functionality.', () => { }; let cvatCanvasShapeList = []; + let cvatFiltesList = []; function checkingFilterApplication(ids) { for (let i = 0; i < cvatCanvasShapeList.length; i++) { @@ -101,48 +102,82 @@ context('Filters functionality.', () => { } }); }); - it('Filter: shape=="polygon". Only the polygon exist.', () => { - cy.writeFilterValue(false, 'shape=="polygon"'); // #cvat_canvas_shape_1,4, #cvat-objects-sidebar-state-item-1,4 + 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.', () => { - cy.writeFilterValue(true, 'shape=="polygon" | shape=="rectangle"'); // #cvat_canvas_shape_1,2,3,4, #cvat-objects-sidebar-state-item-1,2,3,4 + 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.', () => { - cy.writeFilterValue(true, 'type=="shape"'); // #cvat_canvas_shape_1,3, #cvat-objects-sidebar-state-item-1,3 + 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.', () => { - cy.writeFilterValue(true, `label=="${labelTrack}"`); // #cvat_canvas_shape_2,4, #cvat-objects-sidebar-state-item-2,4 + 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.', () => { - cy.writeFilterValue(true, 'attr["count points"] == "4"'); // #cvat_canvas_shape_2,4, #cvat-objects-sidebar-state-item-2,4 + 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.', () => { - cy.writeFilterValue(true, 'width >= height'); // #cvat_canvas_shape_1,2,3,4, #cvat-objects-sidebar-state-item-1,2,3,4 + 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).', () => { - cy.writeFilterValue(true, 'clientID == 4'); // #cvat_canvas_shape_7, #cvat-objects-sidebar-state-item-4 + 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.', () => { - cy.writeFilterValue( - true, - '(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 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.', () => { - cy.writeFilterValue( - true, - '(( label==["points shape"]) | (attr["type"]=="shape" & width > 50)) & (height > 50 & (clientID == serverID)))', - ); + 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]); + }); }); }); diff --git a/tests/cypress/support/commands.js b/tests/cypress/support/commands.js index e063cc05..4e75bf1d 100644 --- a/tests/cypress/support/commands.js +++ b/tests/cypress/support/commands.js @@ -549,6 +549,21 @@ Cypress.Commands.add('writeFilterValue', (clear, filterValue) => { }); }); +Cypress.Commands.add('selectFilterValue', (clear, filterValue) => { + if (clear) { + cy.get('.cvat-annotations-filters-input').within(() => { + cy.get('.ant-select-selection-item-remove').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"]').clear().type(`${frameNum}{Enter}`).should('have.value', frameNum);