From 8ce30c0ccc51c2fdd4f8653ca1b790365f4e9717 Mon Sep 17 00:00:00 2001 From: Martin Stone Date: Thu, 29 Jun 2023 22:15:57 -0400 Subject: [PATCH 1/2] show the status beacon tooltip in the right place --- .../NavigationBar/StatusBeaconComponent.js | 37 +++++++++---------- 1 file changed, 17 insertions(+), 20 deletions(-) diff --git a/src/components/NavigationBar/StatusBeaconComponent.js b/src/components/NavigationBar/StatusBeaconComponent.js index ee4d59e1..1456269b 100644 --- a/src/components/NavigationBar/StatusBeaconComponent.js +++ b/src/components/NavigationBar/StatusBeaconComponent.js @@ -3,8 +3,8 @@ import { } from 'react-redux'; import { - OverlayTrigger, Tooltip, -} from 'react-bootstrap'; + Tooltip, +} from '@chakra-ui/react'; import i18next from 'i18n'; @@ -18,25 +18,22 @@ const StatusBeaconComponent = ({ const queueStatsStr = `${waiting} ${i18next.t('waiting')}, ${running} ${i18next.t('running')}`; return ( -
- - <> - {i18next.t('Status')} - : - {connectionStatusMessage} -
- {queueStatsStr} - - - )} - > + + + {i18next.t('Status')} + : + {connectionStatusMessage} +
+ {queueStatsStr} + + )} + > +
- -
+
+ ); }; From 0f6f8e454101b6d1af7a9ebfb38221cfdf5d00c1 Mon Sep 17 00:00:00 2001 From: Gavin Reynolds Date: Fri, 30 Jun 2023 11:43:43 +0100 Subject: [PATCH 2/2] Add cypress-real-events to simulate hover and update cy.get for status tooltip Signed-off-by: Gavin Reynolds --- cypress/e2e/app.spec.js | 18 +++++++-------- cypress/support/e2e.js | 1 + package.json | 23 ++++++++++--------- .../NavigationBar/StatusBeaconComponent.js | 1 + yarn.lock | 5 ++++ 5 files changed, 28 insertions(+), 20 deletions(-) diff --git a/cypress/e2e/app.spec.js b/cypress/e2e/app.spec.js index 4f9072dc..35d683d8 100644 --- a/cypress/e2e/app.spec.js +++ b/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', () => { diff --git a/cypress/support/e2e.js b/cypress/support/e2e.js index 57941495..545a0e88 100644 --- a/cypress/support/e2e.js +++ b/cypress/support/e2e.js @@ -21,3 +21,4 @@ import './commands'; import 'cypress-fail-fast'; import '@4tw/cypress-drag-drop'; +import "cypress-real-events"; diff --git a/package.json b/package.json index 2dce296e..1bcc3993 100644 --- a/package.json +++ b/package.json @@ -19,8 +19,8 @@ "@pagerduty/pdjs": "^2.2.3", "@types/jest": "^29.5.2", "@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,8 +31,8 @@ "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", @@ -40,11 +40,12 @@ "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,14 +117,16 @@ "@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", @@ -132,10 +134,9 @@ "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", @@ -143,9 +144,9 @@ "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", diff --git a/src/components/NavigationBar/StatusBeaconComponent.js b/src/components/NavigationBar/StatusBeaconComponent.js index 1456269b..fd3cde18 100644 --- a/src/components/NavigationBar/StatusBeaconComponent.js +++ b/src/components/NavigationBar/StatusBeaconComponent.js @@ -20,6 +20,7 @@ const StatusBeaconComponent = ({ return ( {i18next.t('Status')} diff --git a/yarn.lock b/yarn.lock index b20eb873..f5ed6d81 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6262,6 +6262,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"