chore: fix some tests, minor refactor (#23545)

* fix test * fix test * add noHelp link to StandardModal
cypress-io · Aug 25, 2022 · 3f78379 · 3f78379
1 parent f060aa4
commit 3f78379
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 15 deletions.
diff --git a/packages/app/src/navigation/KeyboardBindingsModal.vue b/packages/app/src/navigation/KeyboardBindingsModal.vue
@@ -5,7 +5,7 @@
     :title="t('sidebar.keyboardShortcuts.title')"
     :model-value="show"
     data-cy="keyboard-modal"
-    help-link=""
+    :no-help="true"
     @update:model-value="emits('close')"
   >
     <ul class="m-24px w-384px">

diff --git a/packages/app/src/runner/studio/StudioSaveModal.vue b/packages/app/src/runner/studio/StudioSaveModal.vue
@@ -1,6 +1,7 @@
 <template>
   <StandardModal
     :model-value="props.open"
+    :no-help="true"
     variant="bare"
     data-cy="studio-save-modal"
     @update:model-value="emit('close')"

diff --git a/packages/frontend-shared/src/components/StandardModal.cy.tsx b/packages/frontend-shared/src/components/StandardModal.cy.tsx
@@ -35,6 +35,32 @@ describe('<StandardModal />', { viewportWidth: 800, viewportHeight: 400 }, () =>
       cy.percySnapshot()
     })
 
+    it('does not render helpLink when noHelp is true', () => {
+      cy.mount(
+        <StandardModal
+          class="w-400px"
+          modelValue={true}
+          noHelp={true}
+          title={title}
+        >
+          {body}
+        </StandardModal>,
+      )
+
+      cy.contains('a', defaultMessages.links.needHelp).should('not.exist')
+
+      cy.findByLabelText(defaultMessages.actions.close, {
+        selector: 'button',
+      })
+      .should('be.visible')
+      .and('not.be.disabled')
+
+      cy.contains('h2', title).should('be.visible')
+      cy.contains(body).should('be.visible')
+
+      cy.percySnapshot()
+    })
+
     it('bare variant renders without padding in body', () => {
       cy.mount(<StandardModal
         class="w-400px"

diff --git a/packages/frontend-shared/src/components/StandardModal.vue b/packages/frontend-shared/src/components/StandardModal.vue
@@ -17,6 +17,7 @@
         :class="props.class || ''"
       >
         <StandardModalHeader
+          :no-help="noHelp"
           :help-link="helpLink"
           :help-text="helpText"
           @close="closeModal"
@@ -72,12 +73,14 @@ const props = withDefaults(defineProps<{
   helpLink?: string
   helpText?: string
   variant?: 'bare'
+  noHelp?: boolean
   title?: string
   class?: string | string[] | Record<string, any>
 }>(), {
   modelValue: false,
   helpText: `${defaultMessages.links.needHelp}`,
-  helpLink: '',
+  noHelp: false,
+  helpLink: 'https://on.cypress.io',
   class: undefined,
   variant: undefined,
   title: '',

diff --git a/packages/frontend-shared/src/components/StandardModalHeader.vue b/packages/frontend-shared/src/components/StandardModalHeader.vue
@@ -6,18 +6,20 @@
       <DialogTitle class="text-gray-900 text-18px inline-block">
         <slot />
       </DialogTitle>
-      <span
-        v-if="helpLink.length"
-        class="border-t border-t-gray-100 h-6px mx-8px w-32px inline-block"
-      /> <ExternalLink
-        v-if="helpLink.length"
-        :href="helpLink"
-        class="outline-transparent text-indigo-500 text-16px group"
-      >
-        <span class="group-hocus:underline">{{ helpText }}</span>
+
+      <template v-if="!noHelp">
+        <span class="border-t border-t-gray-100 h-6px mx-8px w-32px inline-block" />
+        <ExternalLink
+          :href="helpLink"
+          class="outline-transparent text-indigo-500 text-16px group"
+        >
+          <span class="group-hocus:underline">{{ helpText }}</span>
+        </ExternalLink>
+
         <i-cy-circle-bg-question-mark_x16 class="ml-8px -top-2px relative inline-block icon-dark-indigo-500 icon-light-indigo-100" />
-      </ExternalLink>
+      </template>
     </div>
+
     <button
       :aria-label="t(`actions.close`)"
       class="border-transparent rounded-full outline-none border-1 group"
@@ -35,10 +37,13 @@ import { useI18n } from '@cy/i18n'
 
 const { t } = useI18n()
 
-defineProps<{
+withDefaults(defineProps<{
   helpLink: string
   helpText: string
-}>()
+  noHelp?: boolean
+}>(), {
+  noHelp: false,
+})
 
 defineEmits<{
   (eventName: 'close'): void

diff --git a/packages/frontend-shared/src/gql-components/topnav/UpdateCypressModal.vue b/packages/frontend-shared/src/gql-components/topnav/UpdateCypressModal.vue
@@ -4,7 +4,7 @@
     variant="bare"
     :title="title"
     :model-value="show"
-    help-link=""
+    :no-help="true"
     @update:model-value="emits('close')"
   >
     <div class="p-24px text-gray-700">

diff --git a/packages/reporter/cypress/e2e/tests.cy.ts b/packages/reporter/cypress/e2e/tests.cy.ts
@@ -199,6 +199,10 @@ describe('studio controls', () => {
   })
 
   describe('button', () => {
+    beforeEach(() => {
+      runner.emit('reporter:start', { studioActive: false })
+    })
+
     it('displays studio icon with half transparency when hovering over test title', { scrollBehavior: false }, () => {
       cy.contains('test 1')
       .closest('.runnable-wrapper')