Add cypress-real-events to simulate hover and update cy.get for statu…

…s tooltip

Signed-off-by: Gavin Reynolds <[email protected]>

cypress/e2e/app.spec.js

@@ -52,9 +52,9 @@ describe('PagerDuty Live', () => {
   });
 
   it('Application indicates when the required ability is available on the account', () => {
-    cy.get('.status-beacon-ctr').trigger('mouseover');
-    cy.get('.status-beacon-connection').should('be.visible');
-    cy.get('.status-beacon-connection').contains('Connected', { timeout: 30000 });
+    cy.get('.status-beacon-ctr').realHover();
+    cy.get('[data-popper-placement="bottom"]').should('be.visible');
+    cy.get('[data-popper-placement="bottom"]').contains('Connected', { timeout: 30000 });
   });
 
   it('Application indicates when the required ability is missing/disabled on the account', () => {
@@ -67,9 +67,9 @@ describe('PagerDuty Live', () => {
     cy.wait('@getAbilities', { timeout: 30000 });
 
     // The mock response will render an error in the application
-    cy.get('.status-beacon-ctr').trigger('mouseover');
-    cy.get('.status-beacon-connection').should('be.visible');
-    cy.get('.status-beacon-connection').contains(
+    cy.get('.status-beacon-ctr').realHover();
+    cy.get('[data-popper-placement="bottom"]').should('be.visible');
+    cy.get('[data-popper-placement="bottom"]').contains(
       'Current subdomain does not have the correct ability to use PagerDuty Live',
     );
   });
@@ -81,9 +81,9 @@ describe('PagerDuty Live', () => {
     cy.get('#disclaimer-agree-checkbox').click({ force: true });
     cy.get('#disclaimer-accept-button').click({ force: true });
 
-    cy.get('.status-beacon-ctr').trigger('mouseover');
-    cy.get('.status-beacon-connection').should('be.visible');
-    cy.get('.status-beacon-connection').contains('Live updates disabled');
+    cy.get('.status-beacon-ctr').realHover();
+    cy.get('[data-popper-placement="bottom"]').should('be.visible');
+    cy.get('[data-popper-placement="bottom"]').contains('Live updates disabled');
   });
 
   it('Application correctly uses url parameters since & until to query PD API', () => {

cypress/support/e2e.js

@@ -21,3 +21,4 @@ import './commands';
 
 import 'cypress-fail-fast';
 import '@4tw/cypress-drag-drop';
+import "cypress-real-events";

package.json

@@ -19,8 +19,8 @@
     "@pagerduty/pdjs": "^2.2.3",
     "@types/jest": "^29.5.1",
     "@types/node": "^20.3.2",
-    "@types/react-dom": "^18.2.6",
     "@types/react": "^18.2.14",
+    "@types/react-dom": "^18.2.6",
     "autoprefixer": "^10.4.13",
     "axios": "^1.2.4",
     "bootstrap": "^4.6.2",
@@ -31,20 +31,21 @@
     "font-awesome": "^4.7.0",
     "framer-motion": "^10.12.7",
     "fuse.js": "^6.6.2",
-    "i18next-browser-languagedetector": "^7.0.1",
     "i18next": "^22.4.8",
+    "i18next-browser-languagedetector": "^7.0.1",
     "immer": "^10.0.2",
     "jsonpath-plus": "^7.2.0",
     "lodash": "^4.17.21",
     "mezr": "^0.6.2",
     "moment": "^2.29.4",
     "node-sass": "^7.0.3",
     "pretty-print-error": "^1.1.1",
+    "react": "^18",
     "react-bootstrap": "^2.8.0",
     "react-contextmenu": "^2.14.0",
     "react-datepicker": "^4.14.1",
-    "react-dnd-html5-backend": "^16.0.1",
     "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18",
     "react-i18next": "^12.1.5",
     "react-icons": "^4.8.0",
@@ -57,10 +58,9 @@
     "react-table": "^7.8.0",
     "react-test-renderer": "^18.2.0",
     "react-window": "^1.8.8",
-    "react": "^18",
+    "redux": "^4.2.1",
     "redux-persist": "^6.0.0",
     "redux-saga": "^1.2.1",
-    "redux": "^4.2.1",
     "styled-components": "^6.0.1",
     "typescript": "^5.0.4",
     "use-debounce": "^9.0.3",
@@ -117,35 +117,36 @@
     "@faker-js/faker": "^8.0.2",
     "@testing-library/dom": "^9.3.0",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/react": "^14.0.0",
+    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.4.3",
     "@welldone-software/why-did-you-render": "^7.0.1",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
     "cy2": "^3.4.3",
-    "cypress-fail-fast": "^7.0.0",
     "cypress": "^10.10.0",
+    "cypress-fail-fast": "^7.0.0",
+    "cypress-real-events": "^1.8.1",
+    "eslint": "^8.43.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-prettier": "^8.8.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-cypress": "^2.13.3",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-styled-components-a11y": "^2.1.0",
-    "eslint": "^8.43.0",
     "genversion": "^3.1.1",
     "gh-pages": "^4.0.0",
     "html-webpack-plugin": "^5",
     "i18next-parser": "^8.0.0",
     "identity-obj-proxy": "^3.0.0",
     "jest-canvas-mock": "^2.4.0",
     "jest-location-mock": "^1.0.9",
-    "prettier-eslint-cli": "^7.1.0",
-    "prettier-eslint": "^15.0.1",
     "prettier": "^2.8.0",
+    "prettier-eslint": "^15.0.1",
+    "prettier-eslint-cli": "^7.1.0",
     "redux-mock-store": "^1.5.4",
     "redux-saga-test-plan": "^4.0.6",
     "resolve-url-loader": "^5.0.0",

src/components/NavigationBar/StatusBeaconComponent.js

@@ -20,6 +20,7 @@ const StatusBeaconComponent = ({
   return (
 
     <Tooltip
+      aria-label="status-beacon-connection"
       label={(
         <>
           {i18next.t('Status')}

yarn.lock

@@ -3269,6 +3269,7 @@
   integrity sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==
 
 "@prettier/eslint@npm:prettier-eslint@^15.0.1", prettier-eslint@^15.0.1:
+  name "@prettier/eslint"
   version "15.0.1"
   resolved "https://registry.yarnpkg.com/prettier-eslint/-/prettier-eslint-15.0.1.tgz#2543a43e9acec2a9767ad6458165ce81f353db9c"
   integrity sha512-mGOWVHixSvpZWARqSDXbdtTL54mMBxc5oQYQ6RAqy8jecuNJBgN3t9E5a81G66F8x8fsKNiR1HWaBV66MJDOpg==
@@ -6260,6 +6261,11 @@ cypress-fail-fast@^7.0.0:
   dependencies:
     chalk "4.1.2"
 
+cypress-real-events@^1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/cypress-real-events/-/cypress-real-events-1.8.1.tgz#d00c7fe93124bbe7c0f27296684838614d24a840"
+  integrity sha512-8fFnA8EzS3EVbAmpSEUf3A8yZCmfU3IPOSGUDVFCdE1ke1gYL1A+gvXXV6HKUbTPRuvKKt2vpaMbUwYLpDRswQ==
+
 cypress@^10.10.0:
   version "10.11.0"
   resolved "https://registry.yarnpkg.com/cypress/-/cypress-10.11.0.tgz#e9fbdd7638bae3d8fb7619fd75a6330d11ebb4e8"