chore: Migrate react Highlight component to Vue (#23973)

* add test.

* Add Highlight vue component + remove react component.

* Remove floating-ui dependency.

* fix test failure

Co-authored-by: Lachlan Miller <lachlan.miller.1990@outlook.com>

packages/app/cypress/component/support/ctSupport.ts

@@ -47,6 +47,5 @@ export const createTestAutIframe = (eventManager = createEventManager()) => {
     'Test Project',
     eventManager,
     null, // CypressJQuery, shouldn't be using driver in component tests anyway
-    window.top?.UnifiedRunner.highlight,
   )
 }

packages/app/cypress/e2e/runner/selector-playground.cy.ts

@@ -0,0 +1,71 @@
+function launchApp () {
+  cy.scaffoldProject('selector-playground')
+  cy.openProject('selector-playground')
+  cy.startAppServer('e2e')
+  cy.visitApp()
+  cy.get(`[data-cy-row="spec.cy.js"]`).click()
+
+  cy.waitForSpecToFinish()
+}
+
+describe('selector playground', () => {
+  it('highlight the element when hover over it.', () => {
+    launchApp()
+
+    cy.get('[data-cy="playground-activator"]').click()
+
+    const backgroundColor = 'rgba(159, 196, 231, 0.6)'
+
+    cy.getAutIframe().within(() => {
+      cy.get('h1').realHover()
+      cy.get('.__cypress-selector-playground').shadow().within(() => {
+        // Test highlight exists
+        cy.get('.highlight').should('exist')
+        cy.get('.highlight').should('have.css', 'background-color', backgroundColor)
+
+        // Test tooltip text is correct
+        cy.get('.tooltip').should('have.text', 'h1')
+
+        // Test placement of tooltip
+        let highlightTop: any
+        let tooltipTop: any
+
+        cy.get('.highlight').then(($el) => {
+          highlightTop = parseFloat($el.css('top'))
+        })
+
+        cy.get('.tooltip').then(($el) => {
+          tooltipTop = parseFloat($el.css('top'))
+
+          expect(tooltipTop).to.be.greaterThan(highlightTop)
+        })
+      })
+    })
+
+    cy.getAutIframe().within(() => {
+      cy.get('h2').realHover()
+      cy.get('.__cypress-selector-playground').shadow().within(() => {
+        // Test highlight exists
+        cy.get('.highlight').should('exist')
+        cy.get('.highlight').should('have.css', 'background-color', backgroundColor)
+
+        // Test tooltip text is correct
+        cy.get('.tooltip').should('have.text', '[data-cy="h2-contents"]')
+
+        // Test placement of tooltip
+        let highlightTop: any
+        let tooltipTop: any
+
+        cy.get('.highlight').then(($el) => {
+          highlightTop = parseFloat($el.css('top'))
+        })
+
+        cy.get('.tooltip').then(($el) => {
+          tooltipTop = parseFloat($el.css('top'))
+
+          expect(tooltipTop).to.be.lessThan(highlightTop)
+        })
+      })
+    })
+  })
+})

packages/app/src/runner/aut-iframe.ts

@@ -7,6 +7,8 @@ import type { DebouncedFunc } from 'lodash'
 import { useStudioStore } from '../store/studio-store'
 import { getElementDimensions, setOffset } from './dimensions'
 import { getOrCreateHelperDom, getSelectorHighlightStyles, getZIndex, INT32_MAX } from './dom'
+import highlightMounter from './selector-playground/highlight-mounter'
+import Highlight from './selector-playground/Highlight.ce.vue'
 
 // JQuery bundled w/ Cypress
 type $CypressJQuery = any
@@ -22,7 +24,6 @@ export class AutIframe {
     private projectName: string,
     private eventManager: any,
     private $: $CypressJQuery,
-    private highlight: any,
   ) {
     this.debouncedToggleSelectorPlayground = _.debounce(this.toggleSelectorPlayground, 300)
   }
@@ -758,10 +759,10 @@ export class AutIframe {
   private listeners: any[] = []
 
   private _addOrUpdateSelectorPlaygroundHighlight ({ $el, $body, selector, showTooltip, onClick }: any) {
-    const { container, shadowRoot, vueContainer } = getOrCreateHelperDom({
+    const { container, vueContainer } = getOrCreateHelperDom({
       body: $body?.get(0) || document.body,
       className: '__cypress-selector-playground',
-      css: this.highlight.css,
+      css: Highlight.styles[0],
     })
 
     const removeContainerClickListeners = () => {
@@ -773,7 +774,6 @@ export class AutIframe {
     }
 
     if (!$el) {
-      this.highlight.unmount(vueContainer)
       removeContainerClickListeners()
       container.remove()
 
@@ -792,11 +792,6 @@ export class AutIframe {
       }
     }
 
-    this.highlight.render(vueContainer, {
-      selector,
-      appendTo: shadowRoot,
-      showTooltip,
-      styles,
-    })
+    highlightMounter.mount(vueContainer, selector, styles)
   }
 }

packages/app/src/runner/index.ts

@@ -147,7 +147,6 @@ function setupRunner () {
     'Test Project',
     getEventManager(),
     window.UnifiedRunner.CypressJQuery,
-    window.UnifiedRunner.highlight,
   )
 
   createIframeModel()

packages/app/src/runner/selector-playground/Highlight.ce.vue

@@ -0,0 +1,81 @@
+<template>
+  <div
+    class="highlight"
+    :style="highlightStyle"
+  />
+  <div
+    class="tooltip"
+    :style="tooltipStyle"
+  >
+    <span>{{ selector }}</span>
+    <div
+      class="arrow"
+      :style="arrowStyle"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { StyleValue, CSSProperties } from 'vue'
+
+const props = defineProps <{
+  selector: string
+  style: StyleValue
+}>()
+
+const highlightStyle = props.style as CSSProperties || {}
+const highlightTop = parseFloat(highlightStyle.top as string)
+const highlightLeft = parseFloat(highlightStyle.left as string)
+const highlightHeight = parseFloat(highlightStyle.height as string)
+const placeOnBottom = highlightTop < 35
+
+const tooltipStyle =
+  placeOnBottom
+    ? {
+      top: `${highlightTop + highlightHeight + 10}px`,
+      left: `${highlightLeft}px`,
+    }
+    : {
+      top: `${highlightTop - 33}px`,
+      left: `${highlightLeft}px`,
+    }
+
+const arrowStyle =
+  placeOnBottom
+    ? {
+      left: `8px`,
+      top: `-6px`,
+      transform: 'rotate(0deg)',
+    }
+    : {
+      left: `8px`,
+      top: `24px`,
+      transform: 'rotate(180deg)',
+    }
+</script>
+
+<style>
+.highlight {
+  background: rgba(159, 196, 231, 0.6);
+  border: solid 2px #9FC4E7;
+  cursor: pointer;
+}
+.tooltip {
+  position: absolute;
+  background: #333;
+  border: solid 1px #333;
+  border-radius: 3px;
+  color: #e3e3e3;
+  font-size: 12px;
+  padding: 4px 6px;
+  text-align: center;
+}
+.arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 6px 6px 6px;
+  border-color: transparent transparent #333 transparent;
+}
+</style>

packages/app/src/runner/selector-playground/HighlightApp.ce.vue

@@ -0,0 +1,17 @@
+<template>
+  <Highlight
+    v-for="(style, i) in styles"
+    :key="i"
+    :selector="selector"
+    :style="style"
+  />
+</template>
+
+<script lang="ts" setup>
+import Highlight from './Highlight.ce.vue'
+
+defineProps <{
+  selector: string
+  styles: any[]
+}>()
+</script>

packages/app/src/runner/selector-playground/highlight-mounter.ts

@@ -0,0 +1,19 @@
+import { App, createApp } from 'vue'
+import HighlightApp from './HighlightApp.ce.vue'
+
+let app: App<Element> | null = null
+
+export default {
+  mount (container: Element, selector: string, styles: any[]) {
+    if (app) {
+      app.unmount()
+    }
+
+    app = createApp(HighlightApp, {
+      selector,
+      styles,
+    })
+
+    app.mount(container)
+  },
+}