From 34be464cf8987d7afa8586c634b5f0f460552d72 Mon Sep 17 00:00:00 2001
From: Nikolaj Geisle <70372949+Zeegaan@users.noreply.github.com>
Date: Tue, 26 Oct 2021 15:01:14 +0200
Subject: [PATCH] v9: Fixing flaky cypress test "Macro in Grid" (#11485)

* fixed flaky macro test and updated cypress version

* fixed flaky macro test and updated cypress version

* Update package.json

* Fixed failing tabs test

* Amend magic numbers with actual wait

* Update tests/Umbraco.Tests.AcceptanceTest/cypress/integration/Content/content.ts

* Updated UI to click on button instead of icon

* Make macro test click bottom to ensure we're not clicking on icon

Co-authored-by: Nikolaj Geisle <niko737@edu.ucl.dk>
---
 .../views/common/infiniteeditors/macropicker/macropicker.html | 4 ++--
 .../cypress/integration/Content/content.ts                    | 3 ++-
 .../cypress/integration/Tabs/tabs.ts                          | 2 +-
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/macropicker/macropicker.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/macropicker/macropicker.html
index 49d40efffaa3..0e936e52c427 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/macropicker/macropicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/macropicker/macropicker.html
@@ -28,12 +28,12 @@
                             <p ng-bind="a11yInfo" role="alert"></p>
                             <ul class="umb-card-grid -three-in-row">
                                 <li ng-repeat="availableItem in macros | orderBy:'name' | filter:model.searchTerm">
-                                    <button class="btn-reset umb-card-grid-item" title="{{availableItem.name}}" ng-click="selectMacro(availableItem)">
+                                  <button class="btn-reset umb-card-grid-item" title="{{availableItem.name}}" ng-click="selectMacro(availableItem)">
                                         <span>
                                             <umb-icon icon="icon-settings-alt"></umb-icon>
                                             {{availableItem.name}}
                                         </span>
-                                    </button>
+                                  </button>
                                 </li>
                             </ul>
 
diff --git a/tests/Umbraco.Tests.AcceptanceTest/cypress/integration/Content/content.ts b/tests/Umbraco.Tests.AcceptanceTest/cypress/integration/Content/content.ts
index 6cd543af29c1..3b220fc2f0d0 100644
--- a/tests/Umbraco.Tests.AcceptanceTest/cypress/integration/Content/content.ts
+++ b/tests/Umbraco.Tests.AcceptanceTest/cypress/integration/Content/content.ts
@@ -759,7 +759,8 @@ context('Content', () => {
         // Click macro
         cy.get(':nth-child(4) > .umb-card-grid-item > :nth-child(1)').click();
         // Select the macro
-        cy.get('.umb-card-grid-item').contains(macroName).click();
+        cy.get(`.umb-card-grid-item[title='${macroName}']`).click('bottom');
+
 
         // Save and publish
         cy.umbracoButtonByLabelKey('buttons_saveAndPublish').click();
diff --git a/tests/Umbraco.Tests.AcceptanceTest/cypress/integration/Tabs/tabs.ts b/tests/Umbraco.Tests.AcceptanceTest/cypress/integration/Tabs/tabs.ts
index 5eee90cdad11..196a104518f7 100644
--- a/tests/Umbraco.Tests.AcceptanceTest/cypress/integration/Tabs/tabs.ts
+++ b/tests/Umbraco.Tests.AcceptanceTest/cypress/integration/Tabs/tabs.ts
@@ -93,7 +93,7 @@ import {
         //Check if tab is there, else if it wasnt created, this test would always pass
         cy.get('[title="aTab 1"]').should('be.visible');
         //Delete a tab
-        cy.get('.btn-reset > [icon="icon-trash"]').click();
+        cy.get('.btn-reset > [icon="icon-trash"]').first().click();
         cy.get('.umb-button > .btn').last().click();
         cy.umbracoButtonByLabelKey('buttons_save').click();
         //Assert