fix: selector playground copy full command (#22097)

cypress-io · Jun 6, 2022 · e58ec7a · e58ec7a · cypress-bot · Jun 6, 2022
1 parent e35b3b0
commit e58ec7a
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 8 deletions.
diff --git a/packages/app/src/runner/SpecRunnerHeaderOpenMode.cy.tsx b/packages/app/src/runner/SpecRunnerHeaderOpenMode.cy.tsx
@@ -208,4 +208,20 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => {
     cy.get('[data-cy="select-browser"] > button').should('be.disabled')
     cy.percySnapshot()
   })
+
+  it('opens and closes selector playground', () => {
+    cy.mountFragment(SpecRunnerHeaderFragmentDoc, {
+      render: (gqlVal) => {
+        return renderWithGql(gqlVal)
+      },
+    })
+
+    cy.get('[data-cy="playground-activator"]').click()
+    cy.get('#selector-playground').should('be.visible')
+
+    cy.percySnapshot()
+
+    cy.get('[data-cy="playground-activator"]').click()
+    cy.get('#selector-playground').should('not.exist')
+  })
 })
diff --git a/packages/app/src/runner/SpecRunnerHeaderOpenMode.vue b/packages/app/src/runner/SpecRunnerHeaderOpenMode.vue
@@ -21,7 +21,7 @@
           :aria-label="t('runner.selectorPlayground.toggle')"
           @click="togglePlayground"
         >
-          <i-cy-crosshairs_x16 class="icon-dark-gray-600" />
+          <i-cy-crosshairs_x16 :class="[selectorPlaygroundStore.show ? 'icon-dark-indigo-500' : 'icon-dark-gray-500']" />
         </Button>
         <div class="mr-12px max-w-100% grid text-gray-600 items-center truncate">
           {{ autStore.url }}
@@ -34,12 +34,12 @@
         <Button
           data-cy="playground-activator"
           :disabled="isDisabled"
-          class="border-gray-100  mr-12px"
+          class="border-gray-100 mr-12px"
           variant="outline"
           :aria-label="t('runner.selectorPlayground.toggle')"
           @click="togglePlayground"
         >
-          <i-cy-crosshairs_x16 class="icon-dark-gray-600" />
+          <i-cy-crosshairs_x16 :class="[selectorPlaygroundStore.show ? 'icon-dark-indigo-500' : 'icon-dark-gray-500']" />
         </Button>
       </div>
       <SpecRunnerDropdown

diff --git a/packages/app/src/runner/aut-iframe.ts b/packages/app/src/runner/aut-iframe.ts
@@ -462,17 +462,16 @@ export class AutIframe {
     const $el = this.getElements(Cypress.dom)
 
     const selectorPlaygroundStore = useSelectorPlaygroundStore()
-    const command = `cy.${selectorPlaygroundStore.method}('${selectorPlaygroundStore.selector}')`
 
     if (!$el) {
       return logger.logFormatted({
-        Command: command,
+        Command: selectorPlaygroundStore.command,
         Yielded: 'Nothing',
       })
     }
 
     logger.logFormatted({
-      Command: command,
+      Command: selectorPlaygroundStore.command,
       Elements: $el.length,
       Yielded: Cypress.dom.getElements($el),
     })

diff --git a/packages/app/src/runner/selector-playground/SelectorPlayground.cy.tsx b/packages/app/src/runner/selector-playground/SelectorPlayground.cy.tsx
@@ -117,7 +117,7 @@ describe('SelectorPlayground', () => {
     cy.get('[data-cy="selector-playground-tooltip"]').should('be.visible').contains('Copied!')
     cy.percySnapshot('Copy to clipboard click tooltip')
 
-    cy.wrap(copyStub).should('have.been.calledWith', '.foo-bar')
+    cy.wrap(copyStub).should('have.been.calledWith', 'cy.get(\'.foo-bar\')')
   })
 
   it('prints elements when selected elements found', () => {

diff --git a/packages/app/src/runner/selector-playground/SelectorPlayground.vue b/packages/app/src/runner/selector-playground/SelectorPlayground.vue
@@ -223,7 +223,7 @@ function printSelected () {
 
 const { copy } = useClipboard({ copiedDuring: 2000 })
 const copyToClipboard = () => {
-  copy(selector.value)
+  copy(selectorPlaygroundStore.command)
 }
 </script>
 

diff --git a/packages/app/src/store/selector-playground-store.ts b/packages/app/src/store/selector-playground-store.ts
@@ -99,5 +99,9 @@ export const useSelectorPlaygroundStore = defineStore({
 
       return state.numElements === 1 ? '1 matched element' : `${state.numElements} matched elements`
     },
+
+    command (state): string {
+      return `cy.${state.method}('${this.selector}')`
+    },
   },
 })