fix(cypress): fixing AllowButton detachment from DOM (#3125)

kubeshop · Sep 6, 2023 · 1feaf9b · 1feaf9b
1 parent 2334662
commit 1feaf9b
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 8 deletions.
diff --git a/web/cypress/e2e/TestRunDetail/Outputs.spec.ts b/web/cypress/e2e/TestRunDetail/Outputs.spec.ts
@@ -14,7 +14,7 @@ describe('Outputs', () => {
 
     // Save output
     cy.wait('@getSelect');
-    cy.get('[data-cy=output-save-button]').click({force: true});
+    cy.get('[data-cy=output-save-button]').click();
     cy.get('[data-cy=output-pending-tag]').should('have.length', 1);
 
     // Add new output from scratch
@@ -27,7 +27,7 @@ describe('Outputs', () => {
       cy.get('[data-cy=expression-editor] [contenteditable=true]').type('attr:http.status_code');
     });
     cy.wait('@getSelect');
-    cy.get('[data-cy=output-save-button]').click({force: true});
+    cy.get('[data-cy=output-save-button]').click();
     cy.get('[data-cy=output-pending-tag]').should('have.length', 2);
 
     // Publish and run
@@ -53,7 +53,7 @@ describe('Outputs', () => {
 
     // Save output
     cy.wait('@getSelect');
-    cy.get('[data-cy=output-save-button]').click({force: true});
+    cy.get('[data-cy=output-save-button]').click();
     cy.get('[data-cy=output-pending-tag]').should('have.length', 1);
 
     // Add new output from scratch
@@ -66,7 +66,7 @@ describe('Outputs', () => {
       cy.get('[data-cy=expression-editor] [contenteditable=true]').type('attr:http.status_code');
     });
     cy.wait('@getSelect');
-    cy.get('[data-cy=output-save-button]').click({force: true});
+    cy.get('[data-cy=output-save-button]').click();
     cy.get('[data-cy=output-pending-tag]').should('have.length', 2);
 
     // Delete output
@@ -96,7 +96,7 @@ describe('Outputs', () => {
 
     // Save output
     cy.wait('@getSelect');
-    cy.get('[data-cy=output-save-button]').click({force: true});
+    cy.get('[data-cy=output-save-button]').click();
     cy.get('[data-cy=output-pending-tag]').should('have.length', 1);
 
     // Revert

diff --git a/web/src/components/AllowButton/AllowButton.tsx b/web/src/components/AllowButton/AllowButton.tsx
@@ -9,9 +9,12 @@ const AllowButton = ({operation, ...props}: IProps) => {
   const {getIsAllowed} = useCustomization();
   const isAllowed = getIsAllowed(operation);
 
-  return (
-    <Tooltip title={!isAllowed ? 'You are not allowed to perform this operation' : ''}>
-      <Button {...props} disabled={!isAllowed || props.disabled} />
+  // the tooltip unmounts and remounts the children, detaching it from the DOM
+  return isAllowed ? (
+    <Button {...props} disabled={props.disabled} />
+  ) : (
+    <Tooltip title="You are not allowed to perform this operation">
+      <Button {...props} disabled />
     </Tooltip>
   );
 };

diff --git a/web/src/components/TestSpecForm/TestSpecForm.tsx b/web/src/components/TestSpecForm/TestSpecForm.tsx
@@ -190,6 +190,7 @@ const TestSpecForm = ({
             type="primary"
             disabled={!isValid}
             onClick={form.submit}
+            htmlType="submit"
             data-cy="assertion-form-submit-button"
           >
             Save Test Spec