chore: Migrate AssertionsOptions menu to Vue. (cypress-io#24286)

* React to vue * Goodbye dom. * Use event modifier. * Remove leading underscore in names * Use modifier. * Add flip, shift options. * Use createPopper instead of floating-ui. * Remove unnecessary dependencies. * addAssertion to event. * setPopperElement to event. * Strong types. * clarify test. Co-authored-by: Blue F <[email protected]>
mirobo · Dec 23, 2022 · af0da61 · af0da61
1 parent 51f30a2
commit af0da61
Show file tree

Hide file tree

Showing 19 changed files with 574 additions and 543 deletions.
diff --git a/packages/app/cypress/e2e/studio/studio.cy.ts b/packages/app/cypress/e2e/studio/studio.cy.ts
@@ -255,4 +255,27 @@ it('visits a basic html page', () => {
     // Cypress in Cypress, it redirects us the the spec page, which is not what normally
     // would happen in production.
   })
+
+  it('shows menu and submenu correctly', () => {
+    launchStudio()
+
+    cy.getAutIframe().within(() => {
+      // Show menu
+      cy.get('h1').realClick({
+        button: 'right',
+      })
+
+      cy.get('.__cypress-studio-assertions-menu').shadow()
+      .find('.assertions-menu').should('be.visible')
+
+      // Show submenu
+      cy.get('.__cypress-studio-assertions-menu').shadow()
+      .find('.assertion-type-text:first').realHover()
+
+      cy.get('.__cypress-studio-assertions-menu').shadow()
+      .find('.assertion-option')
+      .should('have.text', 'Hello, Studio!')
+      .should('be.visible')
+    })
+  })
 })
diff --git a/packages/app/package.json b/packages/app/package.json
@@ -29,6 +29,7 @@
     "@intlify/vite-plugin-vue-i18n": "2.4.0",
     "@packages/frontend-shared": "0.0.0-development",
     "@percy/cypress": "^3.1.0",
+    "@popperjs/core": "2.11.6",
     "@testing-library/cypress": "BlueWinds/cypress-testing-library#119054b5963b0d2e064b13c5cc6fc9db32c8b7b5",
     "@types/faker": "5.5.8",
     "@urql/core": "2.4.4",

diff --git a/packages/app/src/runner/studio/AssertionOptions.ce.vue b/packages/app/src/runner/studio/AssertionOptions.ce.vue
@@ -0,0 +1,96 @@
+<template>
+  <div
+    ref="popper"
+    class="assertion-options"
+  >
+    <div
+      v-for="{ name, value } in options"
+      :key="`${name}${value}`"
+      class="assertion-option"
+      @click.stop="() => onClick(name, value)"
+    >
+      <span
+        v-if="name"
+        class="assertion-option-name"
+      >
+        {{ truncate(name) }}:{{ ' ' }}
+      </span>
+      <span
+        v-else
+        class="assertion-option-value"
+      >
+        {{ typeof value === 'string' && truncate(value) }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { createPopper } from '@popperjs/core'
+import { onMounted, ref, nextTick, Ref } from 'vue'
+import type { AssertionOption } from './types'
+
+const props = defineProps<{
+  type: string
+  options: AssertionOption[]
+}>()
+
+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)}...`
+  }
+
+  return str
+}
+
+const popper: Ref<HTMLElement | null> = ref(null)
+
+onMounted(() => {
+  nextTick(() => {
+    const popperEl = popper.value as HTMLElement
+    const reference = popperEl.parentElement as HTMLElement
+
+    createPopper(reference, popperEl, {
+      placement: 'right-start',
+    })
+
+    emit('setPopperElement', popperEl)
+  })
+})
+
+const onClick = (name, value) => {
+  emit('addAssertion', { type: props.type, name, value })
+}
+</script>
+
+<style lang="scss">
+@import './assertions-style.scss';
+
+.assertion-options {
+  @include menu-style;
+
+  font-size: 14px;
+  max-width: 150px;
+  overflow: hidden;
+  overflow-wrap: break-word;
+  position: absolute;
+
+  .assertion-option {
+    cursor: pointer;
+    padding: 0.4rem 0.6rem;
+
+    &:hover {
+      background-color: #e9ecef;
+    }
+
+    .assertion-option-value {
+      font-weight: 600;
+    }
+  }
+}
+</style>
diff --git a/packages/app/src/runner/studio/AssertionType.ce.vue b/packages/app/src/runner/studio/AssertionType.ce.vue
@@ -0,0 +1,123 @@
+<template>
+  <div
+    :class="['assertion-type', { 'single-assertion': !hasOptions }]"
+    @click.stop="onClick"
+    @mouseover.stop="onOpen"
+    @mouseout.stop="onClose"
+  >
+    <div class="assertion-type-text">
+      <span>
+        {{ type.replace(/\./g, ' ') }}
+      </span>
+      <span
+        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>
+      </span>
+    </div>
+    <AssertionOptions
+      v-if="hasOptions && isOpen"
+      :type="type"
+      :options="options"
+      @set-popper-element="setPopperElement"
+      @add-assertion="addAssertion"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Ref, ref } from 'vue'
+import AssertionOptions from './AssertionOptions.ce.vue'
+
+const props = defineProps<{
+  type: string
+  options: any
+}>()
+
+const emit = defineEmits<{
+  (eventName: 'addAssertion', value: { type: string, name?: string, value?: string })
+}>()
+
+const isOpen = ref(false)
+const hasOptions = props.options && !!props.options.length
+const popperElement: Ref<HTMLElement | null> = ref(null)
+
+const onOpen = () => {
+  isOpen.value = true
+}
+
+const onClose = (e: MouseEvent) => {
+  if (e.relatedTarget instanceof Element &&
+    popperElement.value && popperElement.value.contains(e.relatedTarget)) {
+    return
+  }
+
+  isOpen.value = false
+}
+
+const onClick = () => {
+  if (!hasOptions) {
+    emit('addAssertion', { type: props.type })
+  }
+}
+
+const setPopperElement = (el: HTMLElement) => {
+  popperElement.value = el
+}
+
+const addAssertion = ({ type, name, value }) => {
+  emit('addAssertion', { type, name, value })
+}
+</script>
+
+<style 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;
+
+  &:first-of-type {
+    padding-top: 0.5rem;
+  }
+
+  &:last-of-type {
+    border-bottom-left-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
+    padding-bottom: 0.5rem;
+  }
+
+  &:hover {
+    background-color: #e9ecef;
+  }
+
+  &.single-assertion {
+    cursor: pointer;
+    font-weight: 600;
+  }
+
+  .assertion-type-text {
+    align-items: center;
+    display: flex;
+
+    .dropdown-arrow {
+      margin-left: auto;
+    }
+  }
+}
+</style>