Skip to content

Commit

Permalink
Tried to fix some tests (#3737)
Browse files Browse the repository at this point in the history 
* Tried to fix some tests

* Revert visibility class

* Fixed outdated code

* Fixed one code point

* Test.

* Fixed upload annotations tests

* Fixed upload tests

* Disable animation for popovers

* Removed extra class

* Removed strange check

* Pass overlayStyle from HOC to child Popover
  • Loading branch information
Boris Sekachev authored Sep 29, 2021
1 parent 2d75101 commit a9ce458
Show file tree
Hide file tree
Showing 12 changed files with 107 additions and 87 deletions.
28 changes: 12 additions & 16 deletions ...onents/annotation-page/standard-workspace/controls-side-bar/handle-popover-visibility.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,40 +4,36 @@

import React, { useState } from 'react';
import Popover, { PopoverProps } from 'antd/lib/popover';
import waitFor from 'utils/wait-for';

export default function withVisibilityHandling(WrappedComponent: typeof Popover, popoverType: string) {
return (props: PopoverProps): JSX.Element => {
const [visible, setVisible] = useState<boolean>(false);
const { overlayClassName, ...rest } = props;
const overlayClassNames = typeof overlayClassName === 'string' ? overlayClassName.split(/\s+/) : [];
const popoverClassName = `cvat-${popoverType}-popover`;
const visiblePopoverClassName = `cvat-${popoverType}-popover-visible`;
overlayClassNames.push(popoverClassName);
if (visible) {
overlayClassNames.push(visiblePopoverClassName);
}

const { overlayStyle } = props;
return (
<WrappedComponent
{...rest}
overlayStyle={{
...(typeof overlayStyle === 'object' ? overlayStyle : {}),
animationDuration: '0s',
animationDelay: '0s',
}}
trigger={visible ? 'click' : 'hover'}
overlayClassName={overlayClassNames.join(' ').trim()}
onVisibleChange={(_visible: boolean) => {
const [element] = window.document.getElementsByClassName(popoverClassName);
if (element) {
if (_visible) {
if (_visible) {
const [element] = window.document.getElementsByClassName(popoverClassName);
if (element) {
element.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
waitFor(60, () => {
const style = window.getComputedStyle(element);
return style.display !== 'none' && style.pointerEvents !== 'none';
}).then(() => {
setVisible(_visible);
});
} else {
setVisible(_visible);
(element as HTMLElement).style.pointerEvents = '';
(element as HTMLElement).style.opacity = '';
}
}
setVisible(_visible);
}}
/>
);
Expand Down
4 changes: 2 additions & 2 deletions tests/cypress/integration/actions_objects/case_60_autoborder_feature.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ context('Autoborder feature.', () => {
testCollectCxCircleCoord(rectangleSvgJsCircleIdSecond);

cy.interactControlButton('draw-polygon');
cy.get('.cvat-draw-polygon-popover-visible').find('[type="button"]').contains('Shape').click();
cy.get('.cvat-draw-polygon-popover').find('[type="button"]').contains('Shape').click();
cy.get('body').type('{Ctrl}'); // Autoborder activation
testAutoborderPointsCount(8); // 8 points at the rectangles
cy.get('.cvat-canvas-container').click(400, 350).click(450, 250).click(500, 350).click(500, 450);
Expand All @@ -91,7 +91,7 @@ context('Autoborder feature.', () => {

it('Start drawing a polyline with autobordering between the two shapes.', () => {
cy.interactControlButton('draw-polyline');
cy.get('.cvat-draw-polyline-popover-visible').find('[type="button"]').contains('Shape').click();
cy.get('.cvat-draw-polyline-popover').find('[type="button"]').contains('Shape').click();
testAutoborderPointsCount(12); // 8 points at the rectangles + 4 at the polygon
cy.get('.cvat-canvas-container') // Drawning
.click(600, 350)
Expand Down
12 changes: 10 additions & 2 deletions tests/cypress/integration/actions_objects2/case_14_appearance_features.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -169,9 +169,17 @@ context('Appearance features', () => {
});

it('"Selected opacity" slider now defines opacity level of shapes being drawn.', () => {
function testDrawShapeCheckOpacity({ shape, drawingMethod, shapeType, fillOpacityBefore, fillOpacityAfter, opacityBefore, opacityAfter }) {
function testDrawShapeCheckOpacity({
shape,
drawingMethod,
shapeType,
fillOpacityBefore,
fillOpacityAfter,
opacityBefore,
opacityAfter,
}) {
cy.interactControlButton(`draw-${shape}`);
cy.get(`.cvat-draw-${shape}-popover-visible`).within(() => {
cy.get(`.cvat-draw-${shape}-popover`).within(() => {
if (drawingMethod) {
cy.contains('.ant-radio-wrapper', drawingMethod).click();
}
Expand Down
54 changes: 33 additions & 21 deletions tests/cypress/integration/actions_tasks/case_72_hotkeys_change_labels.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ context('Hotkeys to change labels feature.', () => {
const archivePath = `cypress/fixtures/${archiveName}`;
const imagesFolder = `cypress/fixtures/${imageFileName}`;
const directoryToArchive = imagesFolder;
const secondLabel = `Case ${caseId} second`
const secondLabel = `Case ${caseId} second`;
const additionalAttrsSecondLabel = [
{ additionalAttrName: attrName, additionalValue: '0;3;1', typeAttribute: 'Number', mutable: false },
];
Expand Down Expand Up @@ -88,15 +88,19 @@ context('Hotkeys to change labels feature.', () => {
// Set settings "Always show object details" to check issue 3083
testCheckingAlwaysShowObjectDetails(true);
cy.createPolygon(createPolygonShape);
cy.get('#cvat-objects-sidebar-state-item-1').find('.cvat-objects-sidebar-state-item-label-selector').should('have.text', firstLabelCurrentVal);
cy.get('#cvat-objects-sidebar-state-item-1')
.find('.cvat-objects-sidebar-state-item-label-selector')
.should('have.text', firstLabelCurrentVal);
cy.get('.cvat-canvas-container').click(270, 260);
cy.get('#cvat_canvas_shape_1').should('have.class', 'cvat_canvas_shape_activated');
cy.contains('tspan', `${firstLabelCurrentVal} 1 (manual)`).should('be.visible');

// Check "Attribute keeping when changing label" feature
cy.get('#cvat-objects-sidebar-state-item-1').find('.cvat-objects-sidebar-state-item-collapse').click();
cy.get('body').type('{Ctrl}2')
cy.get('#cvat-objects-sidebar-state-item-1').find('.cvat-objects-sidebar-state-item-label-selector').should('have.text', secondLabelCurrentVal);
cy.get('body').type('{Ctrl}2');
cy.get('#cvat-objects-sidebar-state-item-1')
.find('.cvat-objects-sidebar-state-item-label-selector')
.should('have.text', secondLabelCurrentVal);
cy.contains('tspan', `${secondLabelCurrentVal} 1 (manual)`).should('be.visible');
// The value of the attribute of the 2nd label corresponds to the value of the attribute of the same name of the 1st label
cy.get('#cvat-objects-sidebar-state-item-1')
Expand All @@ -111,13 +115,15 @@ context('Hotkeys to change labels feature.', () => {
it('Changing default label before drawing a shape.', () => {
cy.interactControlButton('draw-rectangle');
cy.switchLabel(firstLabelCurrentVal, 'draw-rectangle');
cy.get('.cvat-draw-rectangle-popover-visible').within(() => {
cy.get('.cvat-draw-rectangle-popover').within(() => {
cy.contains('button', 'Shape').click();
});
cy.get('body').type('{Ctrl}2');
cy.contains(`Default label was changed to "${secondLabelCurrentVal}"`).should('exist');
cy.get('.cvat-canvas-container').click(500, 500).click(600, 600);
cy.get('#cvat-objects-sidebar-state-item-2').find('.cvat-objects-sidebar-state-item-label-selector').should('have.text', secondLabelCurrentVal);
cy.get('#cvat-objects-sidebar-state-item-2')
.find('.cvat-objects-sidebar-state-item-label-selector')
.should('have.text', secondLabelCurrentVal);
});

it('Check changing shortcut for a label.', () => {
Expand All @@ -126,22 +132,26 @@ context('Hotkeys to change labels feature.', () => {
cy.contains('[role="tab"]', 'Labels').click();
});
cy.contains('.cvat-label-item-setup-shortcut-button', '1').click();
cy.get('.cvat-label-item-setup-shortcut-popover').should('be.visible').within(() => {
cy.get('[type="button"]').then(($btn) => {
expect($btn[0].innerText).to.be.equal(`1:${firstLabelCurrentVal}`);
expect($btn[1].innerText).to.be.equal(`2:${secondLabelCurrentVal}`);
expect($btn[2].innerText).to.be.equal('3:None');
// Click to "3" button
cy.get($btn[2]).click();
cy.get('.cvat-label-item-setup-shortcut-popover')
.should('be.visible')
.within(() => {
cy.get('[type="button"]').then(($btn) => {
expect($btn[0].innerText).to.be.equal(`1:${firstLabelCurrentVal}`);
expect($btn[1].innerText).to.be.equal(`2:${secondLabelCurrentVal}`);
expect($btn[2].innerText).to.be.equal('3:None');
// Click to "3" button
cy.get($btn[2]).click();
});
});
});
cy.get('.cvat-label-item-setup-shortcut-popover').should('be.visible').within(() => {
cy.get('[type="button"]').then(($btn) => {
// Buttons 1 and 3 have changed values
expect($btn[0].innerText).to.be.equal('1:None');
expect($btn[2].innerText).to.be.equal(`3:${firstLabelCurrentVal}`);
cy.get('.cvat-label-item-setup-shortcut-popover')
.should('be.visible')
.within(() => {
cy.get('[type="button"]').then(($btn) => {
// Buttons 1 and 3 have changed values
expect($btn[0].innerText).to.be.equal('1:None');
expect($btn[2].innerText).to.be.equal(`3:${firstLabelCurrentVal}`);
});
});
});
cy.contains('.cvat-label-item-setup-shortcut-button', '3').should('exist');
cy.get('.cvat-canvas-container').click(); // Hide shortcut popover
// Go to "Objects" tab
Expand All @@ -153,7 +163,9 @@ context('Hotkeys to change labels feature.', () => {
cy.get('#cvat_canvas_shape_1').should('have.class', 'cvat_canvas_shape_activated');
cy.get('body').type('{Ctrl}3');
cy.contains('tspan', `${firstLabelCurrentVal} 1 (manual)`).should('be.visible');
cy.get('#cvat-objects-sidebar-state-item-1').find('.cvat-objects-sidebar-state-item-label-selector').should('have.text', firstLabelCurrentVal);
cy.get('#cvat-objects-sidebar-state-item-1')
.find('.cvat-objects-sidebar-state-item-label-selector')
.should('have.text', firstLabelCurrentVal);
});
});
});
33 changes: 20 additions & 13 deletions tests/cypress/integration/actions_tasks2/case_101_opencv_basic_actions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { generateString } from '../../support/utils';

context('OpenCV. Intelligent scissors. Histogram Equalization.', () => {
const caseId = '101';
const newLabel = `Case ${caseId}`
const newLabel = `Case ${caseId}`;
const createOpencvShape = {
labelName: labelName,
pointsMap: [
Expand Down Expand Up @@ -49,7 +49,7 @@ context('OpenCV. Intelligent scissors. Histogram Equalization.', () => {
describe(`Testing case "${caseId}"`, () => {
it('Load OpenCV.', () => {
cy.interactOpenCVControlButton();
cy.get('.cvat-opencv-control-popover-visible').find('.cvat-opencv-initialization-button').click();
cy.get('.cvat-opencv-control-popover').find('.cvat-opencv-initialization-button').click();
// Intelligent cissors button be visible
cy.get('.cvat-opencv-drawing-tool').should('exist').and('be.visible');
});
Expand Down Expand Up @@ -78,25 +78,33 @@ context('OpenCV. Intelligent scissors. Histogram Equalization.', () => {
// Get count of points againe
const intermediateShapeNumberPointsAfterChange = intermediateShape.attr('points').split(' ').length;
// expected 7 to be below 10
expect(intermediateShapeNumberPointsBeforeChange).to.be.lt(intermediateShapeNumberPointsAfterChange);
expect(intermediateShapeNumberPointsBeforeChange).to.be.lt(
intermediateShapeNumberPointsAfterChange,
);
});
});
cy.get('.cvat-appearance-selected-opacity-slider')
.click('left')
.find('[role="slider"]')
.then((sliderSelectedOpacityLeft) => {
const sliderSelectedOpacityValuenow = sliderSelectedOpacityLeft.attr('aria-valuenow');
cy.get('.cvat_canvas_interact_intermediate_shape')
.should('have.attr', 'fill-opacity', sliderSelectedOpacityValuenow / 100);
});
cy.get('.cvat_canvas_interact_intermediate_shape').should(
'have.attr',
'fill-opacity',
sliderSelectedOpacityValuenow / 100,
);
});
cy.get('.cvat-appearance-selected-opacity-slider')
.click('right')
.find('[role="slider"]')
.then((sliderSelectedOpacityRight) => {
const sliderSelectedOpacityValuenow = sliderSelectedOpacityRight.attr('aria-valuenow');
cy.get('.cvat_canvas_interact_intermediate_shape')
.should('have.attr', 'fill-opacity', sliderSelectedOpacityValuenow / 100);
});
cy.get('.cvat_canvas_interact_intermediate_shape').should(
'have.attr',
'fill-opacity',
sliderSelectedOpacityValuenow / 100,
);
});
cy.get('body').type('{Esc}'); // Cancel drawing
cy.get('.cvat_canvas_interact_intermediate_shape').should('not.exist');
cy.get('.cvat_canvas_shape').should('have.length', 2);
Expand All @@ -114,7 +122,7 @@ context('OpenCV. Intelligent scissors. Histogram Equalization.', () => {
// Get count of points
const intermediateShapeNumberPoints = intermediateShape.attr('points').split(' ').length;
// The last point on the crosshair
expect(intermediateShapeNumberPoints - 1).to.be.equal(pointsMap.length)
expect(intermediateShapeNumberPoints - 1).to.be.equal(pointsMap.length);
});
cy.get('body').type('{Ctrl}'); // Checking hotkey
cy.get('.cvat_canvas_threshold').should('exist');
Expand All @@ -124,7 +132,7 @@ context('OpenCV. Intelligent scissors. Histogram Equalization.', () => {
it('Check "Histogram Equalization" feature.', () => {
cy.checkPopoverHidden('opencv-control');
cy.interactOpenCVControlButton();
cy.get('.cvat-opencv-control-popover-visible')
cy.get('.cvat-opencv-control-popover')
.contains('[role="tab"]', 'Image')
.click()
.parents('.ant-tabs-tab')
Expand All @@ -147,8 +155,7 @@ context('OpenCV. Intelligent scissors. Histogram Equalization.', () => {
cy.get('body').trigger('keydown', { keyCode: keyCodeN, shiftKey: true }).trigger('keyup');
cy.get('.cvat-tools-control').should('have.attr', 'tabindex');
createOpencvShape.pointsMap.forEach((el) => {
cy.get('.cvat-canvas-container')
.click(el.x + 150, el.y + 50)
cy.get('.cvat-canvas-container').click(el.x + 150, el.y + 50);
});
cy.get('body').trigger('keydown', { keyCode: keyCodeN }).trigger('keyup');
});
Expand Down
2 changes: 1 addition & 1 deletion tests/cypress/integration/actions_tasks3/case_5_image_rotate.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ context('Check if the image is rotated', () => {
cy.get('.cvat-rotate-canvas-controls-left').click();
}
cy.get('.cvat-canvas-container').click(); // Hide popover
cy.get('.cvat-rotate-canvas-popover-visible').should('not.exist');
cy.get('.cvat-rotate-canvas-popover').should('be.hidden');
}

function scaleFitImage() {
Expand Down
4 changes: 2 additions & 2 deletions ...ntegration/canvas3d_functionality/case_85_canvas3d_functionality_cuboid_cancel_drawing.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,13 @@ context('Canvas 3D functionality. Cancel drawing.', () => {
describe(`Testing case "${caseId}"`, () => {
it('Cancel drawing.', () => {
cy.interactControlButton('draw-cuboid');
cy.get('.cvat-draw-cuboid-popover-visible').find('.ant-select-selection-item').click();
cy.get('.cvat-draw-cuboid-popover').find('.ant-select-selection-item').click();
cy.get('.ant-select-dropdown')
.not('.ant-select-dropdown-hidden')
.within(() => {
cy.contains(new RegExp(`^${labelName}$`)).click();
});
cy.get('.cvat-draw-cuboid-popover-visible').find('button').click();
cy.get('.cvat-draw-cuboid-popover').find('button').click();
cy.get('.cvat-canvas3d-perspective').trigger('mousemove');
cy.get('.cvat-canvas3d-perspective').screenshot('canvas3d_perspective_drawning');
cy.get('body').type('{Esc}');
Expand Down
6 changes: 3 additions & 3 deletions tests/cypress/integration/issues_prs/issue_2230_maintenance_popover_visibility.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,13 @@ context('Check maintenance of popups visibility.', () => {
describe(`Testing issue "${issueId}"`, () => {
it('Open a popover for draw an object and apply the "mouseout" event to it. The popover be visible.', () => {
cy.interactControlButton('draw-rectangle');
cy.get('.cvat-draw-rectangle-popover-visible').trigger('mouseout').wait(500);
cy.get('.cvat-draw-rectangle-popover-visible').should('be.visible');
cy.get('.cvat-draw-rectangle-popover').trigger('mouseout').wait(500);
cy.get('.cvat-draw-rectangle-popover').should('be.visible');
});

it('Click to another element. The popover hidden.', () => {
cy.get('.cvat-canvas-container').click();
cy.get('.cvat-draw-rectangle-popover-visible').should('not.exist');
cy.get('.cvat-draw-rectangle-popover').should('be.hidden');
});
});
});
2 changes: 1 addition & 1 deletion tests/cypress/integration/issues_prs/issue_2753_call_HOC_component_each_render.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ context('Call HOC component each render.', () => {

function checkNumberOfPointsValue(objectType, numberOfPoints) {
cy.interactControlButton(`draw-${objectType}`);
cy.get(`.cvat-draw-${objectType}-popover-visible`).within(() => {
cy.get(`.cvat-draw-${objectType}-popover`).within(() => {
cy.get('.cvat-draw-shape-popover-points-selector')
.find('input')
.should('have.attr', 'value', numberOfPoints);
Expand Down
Loading

0 comments on commit a9ce458

Please sign in to comment.