test: rename AO-title to titlebar (DHIS2-15063) (#2435)

cypress/elements/chart.js

@@ -18,8 +18,8 @@ const highchartsSubtitleEl = '.highcharts-subtitle'
 const highchartsSeriesKeyItemEl = '.highcharts-legend-item'
 const highchartsChartItemEl = '.highcharts-series'
 const unsavedVisualizationTitleText = 'Unsaved visualization'
-const AOTitleEl = 'AO-title'
-const AOTitleDirtyEl = 'AO-title-dirty'
+const AOTitleEl = 'titlebar'
+const AOTitleDirtyEl = 'titlebar-dirty'
 const timeout = {
     timeout: 40000,
 }

cypress/support/index.js

@@ -3,3 +3,17 @@ import { enableAutoLogin } from '@dhis2/cypress-commands'
 import './commands.js'
 
 enableAutoLogin()
+
+const resizeObserverLoopErrRe = /^[^(ResizeObserver loop limit exceeded)]/
+Cypress.on('uncaught:exception', (err) => {
+    // This prevents a benign error:
+    //   This error means that ResizeObserver was not able to deliver all
+    //   observations within a single animation frame. It is benign (your site
+    //   will not break).
+    //
+    // Source: https://stackoverflow.com/a/50387233/1319140
+    if (resizeObserverLoopErrRe.test(err.message)) {
+        // returning false here prevents Cypress from failing the test
+        return false
+    }
+})

src/components/TitleBar/TitleBar.js

@@ -50,7 +50,7 @@ const getSuffix = (titleState) => {
                         ...styles.suffix,
                         ...styles.titleDirty,
                     }}
-                    data-test="AO-title-dirty"
+                    data-test="titlebar-dirty"
                 >{`- ${getTitleDirty()}`}</div>
             )
         default:
@@ -65,7 +65,7 @@ export const UnconnectedTitleBar = ({ titleState, titleText }) => {
     }
 
     return titleText ? (
-        <div data-test="AO-title" style={styles.titleBar}>
+        <div data-test="titlebar" style={styles.titleBar}>
             <div style={titleStyle}>
                 {titleText}
                 {getSuffix(titleState)}