misc: Assertion dropdown UI update (#31598)

* Refactor existing mounter of assertions - make a CT test for it

* update more styles + add a11y features

* bump vue-icons

* Finish last styles and icons

* Fix logic

* bump shared package icons

* fix test

* update css to be scoped + set all css to initial to clear AUT styles

* add test for getOrCreateHelperDom function

* update tabbing test

* add changelog

* update changelog to include addressed in

Author: jennifer-shehane

cli/CHANGELOG.md

@@ -14,6 +14,7 @@ _Released 5/6/2025 (PENDING)_
 
 **Misc:**
 
+- The Assertions menu when you right click in `experimentalStudio` tests now displays in dark mode. Addresses [#10621](https://github.com/cypress-io/cypress-services/issues/10621). Addressed in [#31598](https://github.com/cypress-io/cypress/pull/31598).
 - The URL in the Cypress App no longer displays a white background when the URL is loading. Fixes [#31556](https://github.com/cypress-io/cypress/issues/31556).
 
 ## 14.3.2

packages/app/package.json

@@ -24,7 +24,7 @@
   "devDependencies": {
     "@cypress-design/icon-registry": "^1.5.1",
     "@cypress-design/vue-button": "^1.6.0",
-    "@cypress-design/vue-icon": "^1.6.0",
+    "@cypress-design/vue-icon": "^1.18.0",
     "@cypress-design/vue-spinner": "^1.0.0",
     "@cypress-design/vue-statusicon": "^1.0.0",
     "@cypress-design/vue-tabs": "^1.2.2",

packages/app/src/runner/dom.cy.tsx

@@ -0,0 +1,58 @@
+import { getOrCreateHelperDom } from './dom'
+
+describe('dom utilities', () => {
+  describe('getOrCreateHelperDom', () => {
+    let body: HTMLBodyElement
+    const className = 'test-helper'
+    const css = 'test-css'
+
+    beforeEach(() => {
+      // Create a fresh body element for each test
+      body = document.createElement('body')
+      document.body = body
+    })
+
+    afterEach(() => {
+      // Clean up after each test
+      const containers = body.querySelectorAll(`.${className}`)
+
+      containers.forEach((container) => container.remove())
+    })
+
+    it('should create new helper DOM elements when none exist', () => {
+      const result = getOrCreateHelperDom({ body, className, css })
+
+      // Verify container was created
+      expect(result.container).to.exist
+      expect(result.container.classList.contains(className)).to.be.true
+      expect(result.container.style.all).to.equal('initial')
+      expect(result.container.style.position).to.equal('static')
+
+      // Verify shadow root was created
+      expect(result.shadowRoot).to.exist
+      expect(result.shadowRoot!.mode).to.equal('open')
+
+      // Verify vue container was created
+      expect(result.vueContainer).to.exist
+      expect(result.vueContainer.classList.contains('vue-container')).to.be.true
+
+      // Verify style was added
+      const style = result.shadowRoot!.querySelector('style')
+
+      expect(style).to.exist
+      expect(style!.innerHTML).to.equal(css)
+    })
+
+    it('should return existing helper DOM elements when they exist', () => {
+      // First call to create elements
+      const firstResult = getOrCreateHelperDom({ body, className, css })
+
+      // Second call to get existing elements
+      const secondResult = getOrCreateHelperDom({ body, className, css })
+
+      // Verify we got the same elements back
+      expect(secondResult.container).to.equal(firstResult.container)
+      expect(secondResult.vueContainer).to.equal(firstResult.vueContainer)
+    })
+  })
+})

packages/app/src/runner/dom.ts

@@ -30,6 +30,8 @@ export function getOrCreateHelperDom ({ body, className, css }) {
 
   container.classList.add(className)
 
+  // NOTE: This is needed to prevent the container from inheriting styles from the body of the AUT
+  container.style.all = 'initial'
   container.style.position = 'static'
 
   body.appendChild(container)

packages/app/src/runner/studio/AssertionOptions.ce.vue

@@ -2,24 +2,32 @@
   <div
     ref="popper"
     class="assertion-options"
+    data-cy="assertion-options"
   >
     <div
-      v-for="{ name, value } in options"
-      :key="`${name}${value}`"
+      v-for="option in options"
+      :key="getOptionKey(option)"
       class="assertion-option"
-      @click.stop="() => onClick(name, value)"
+      data-cy="assertion-option"
+      tabindex="0"
+      role="button"
+      @keydown.enter="handleOptionClick(option)"
+      @keydown.space="handleOptionClick(option)"
+      @click.stop="handleOptionClick(option)"
     >
       <span
-        v-if="name"
+        v-if="option.name"
         class="assertion-option-name"
+        data-cy="assertion-option-name"
       >
-        {{ truncate(name) }}:{{ ' ' }}
+        {{ truncate(option.name) }}:{{ ' ' }}
       </span>
       <span
         v-else
         class="assertion-option-value"
+        data-cy="assertion-option-value"
       >
-        {{ typeof value === 'string' && truncate(value) }}
+        {{ typeof option.value === 'string' && truncate(option.value) }}
       </span>
     </div>
   </div>
@@ -30,45 +38,60 @@ import { createPopper } from '@popperjs/core'
 import { onMounted, ref, nextTick, Ref } from 'vue'
 import type { AssertionOption } from './types'
 
-const props = defineProps<{
+interface Props {
   type: string
   options: AssertionOption[]
-}>()
+}
+
+const props = defineProps<Props>()
 
 const emit = defineEmits<{
   (eventName: 'addAssertion', value: { type: string, name: string, value: string })
   (eventName: 'setPopperElement', value: HTMLElement)
 }>()
 
-const truncate = (str: string) => {
-  if (str && str.length > 80) {
-    return `${str.substr(0, 77)}...`
+const popper: Ref<HTMLElement | null> = ref(null)
+
+const TRUNCATE_LENGTH = 80
+const TRUNCATE_SUFFIX = '...'
+
+const truncate = (str: string): string => {
+  if (!str || str.length <= TRUNCATE_LENGTH) {
+    return str
   }
 
-  return str
+  return `${str.substring(0, TRUNCATE_LENGTH - TRUNCATE_SUFFIX.length)}${TRUNCATE_SUFFIX}`
 }
 
-const popper: Ref<HTMLElement | null> = ref(null)
+const getOptionKey = (option: AssertionOption): string => {
+  return `${option.name}${option.value}`
+}
 
-onMounted(() => {
-  nextTick(() => {
-    const popperEl = popper.value as HTMLElement
-    const reference = popperEl.parentElement as HTMLElement
+const handleOptionClick = (option: AssertionOption): void => {
+  emit('addAssertion', {
+    type: props.type,
+    name: option.name || '',
+    value: String(option.value || ''),
+  })
+}
 
-    createPopper(reference, popperEl, {
-      placement: 'right-start',
-    })
+const initializePopper = (): void => {
+  const popperEl = popper.value as HTMLElement
+  const reference = popperEl.parentElement as HTMLElement
 
-    emit('setPopperElement', popperEl)
+  createPopper(reference, popperEl, {
+    placement: 'right-start',
   })
-})
 
-const onClick = (name, value) => {
-  emit('addAssertion', { type: props.type, name, value })
+  emit('setPopperElement', popperEl)
 }
+
+onMounted(() => {
+  nextTick(initializePopper)
+})
 </script>
 
-<style lang="scss">
+<style scoped lang="scss">
 @import './assertions-style.scss';
 
 .assertion-options {
@@ -79,17 +102,35 @@ const onClick = (name, value) => {
   overflow: hidden;
   overflow-wrap: break-word;
   position: absolute;
+  right: 8px;
+  border-radius: 4px;
 
   .assertion-option {
+    font-size: 14px;
     cursor: pointer;
     padding: 0.4rem 0.6rem;
+    border: 1px solid transparent;
+
+    &:first-of-type {
+      border-top-left-radius: 4px;
+      border-top-right-radius: 4px;
+    }
+
+    &:last-of-type {
+      border-bottom-left-radius: 4px;
+      border-bottom-right-radius: 4px;
+    }
 
     &:hover {
-      background-color: #e9ecef;
+      background-color: $gray-1000;
+      border: 1px solid $gray-950;
     }
 
-    .assertion-option-value {
-      font-weight: 600;
+    &:focus {
+      background-color: $gray-950;
+      color: $indigo-300;
+      outline: none;
+      @include box-shadow;
     }
   }
 }

packages/app/src/runner/studio/AssertionType.ce.vue

@@ -1,9 +1,17 @@
 <template>
   <div
     :class="['assertion-type', { 'single-assertion': !hasOptions }]"
+    tabindex="0"
+    role="button"
+    :aria-expanded="isOpen"
+    :aria-haspopup="hasOptions"
     @click.stop="onClick"
     @mouseover.stop="onOpen"
     @mouseout.stop="onClose"
+    @focus="onOpen"
+    @blur="onClose"
+    @keydown.enter="onClick"
+    @keydown.space="onClick"
   >
     <div class="assertion-type-text">
       <span>
@@ -13,24 +21,13 @@
         v-if="hasOptions"
         class="dropdown-arrow"
       >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="12"
-          height="12"
-          fill="currentColor"
-          viewBox="0 0 16 16"
-        >
-          <path
-            fillRule="evenodd"
-            d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
-          />
-        </svg>
+        <IconChevronRightMedium />
       </span>
     </div>
     <AssertionOptions
       v-if="hasOptions && isOpen"
       :type="type"
-      :options="options"
+      :options="options || []"
       @set-popper-element="setPopperElement"
       @add-assertion="addAssertion"
     />
@@ -40,10 +37,12 @@
 <script lang="ts" setup>
 import { Ref, ref } from 'vue'
 import AssertionOptions from './AssertionOptions.ce.vue'
+import { IconChevronRightMedium } from '@cypress-design/vue-icon'
+import type { AssertionType } from './types'
 
 const props = defineProps<{
-  type: string
-  options: any
+  type: AssertionType['type']
+  options: AssertionType['options']
 }>()
 
 const emit = defineEmits<{
@@ -58,7 +57,7 @@ const onOpen = () => {
   isOpen.value = true
 }
 
-const onClose = (e: MouseEvent) => {
+const onClose = (e: MouseEvent | FocusEvent) => {
   if (e.relatedTarget instanceof Element &&
     popperElement.value && popperElement.value.contains(e.relatedTarget)) {
     return
@@ -82,38 +81,47 @@ const addAssertion = ({ type, name, value }) => {
 }
 </script>
 
-<style lang="scss">
+<style scoped lang="scss">
 @import './assertions-style.scss';
 
 .assertion-type {
-  color: #202020;
   cursor: default;
   font-size: 14px;
   padding: 0.4rem 0.4rem 0.4rem 0.7rem;
   position: static;
+  outline: none;
+  border-radius: 4px;
+  border: 1px solid transparent;
 
   &:first-of-type {
     padding-top: 0.5rem;
   }
 
   &:last-of-type {
-    border-bottom-left-radius: $border-radius;
-    border-bottom-right-radius: $border-radius;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
     padding-bottom: 0.5rem;
   }
 
   &:hover {
-    background-color: #e9ecef;
+    background-color: $gray-1000;
+    border: 1px solid $gray-950;
+  }
+
+  &:focus {
+    color: $indigo-300;
+    outline: none;
+    @include box-shadow;
   }
 
   &.single-assertion {
     cursor: pointer;
-    font-weight: 600;
   }
 
   .assertion-type-text {
     align-items: center;
     display: flex;
+    cursor: pointer;
 
     .dropdown-arrow {
       margin-left: auto;