Merge branch '10.0-release' into 99f2486-develop-into-10.0-release

packages/app/cypress/support/fixtures.ts

@@ -10,12 +10,13 @@ export const autSnapshot: AutSnapshot = {
     y: 0,
   },
   highlightAttr: '',
-  snapshots: [],
+  // @ts-ignore
+  snapshots: [{ name: 'Before' }, { name: 'After' }],
   htmlAttrs: {},
   viewportHeight: 500,
   viewportWidth: 500,
   url: 'http://localhost:3000',
   body: {
-    get: () => null,
+    get: () => {},
   },
 }

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

@@ -3,13 +3,17 @@ import { autSnapshot } from '../../cypress/support/fixtures'
 import { useSnapshotStore } from './snapshot-store'
 import { createEventManager, createTestAutIframe } from '../../cypress/component/support/ctSupport'
 
-// function createTestAutIframe () {
-//   return new class {
-//     removeHighlights () {}
-//   }
-// }
+const snapshotWithSnapshots = { ...autSnapshot }
+const snapshotPinned = { ...autSnapshot, snapshots: [] }
+
+const snapshotControlsSelector = '[data-testid=snapshot-controls]'
+const unpinButtonSelector = '[data-testid=unpin]'
+
+describe('SnapshotControls', { viewportHeight: 200, viewportWidth: 500 }, () => {
+  afterEach(() => {
+    cy.wait(100).percySnapshot()
+  })
 
-describe('SnapshotControls', () => {
   const mountSnapshotControls = (
     eventManager = createEventManager(),
     autIframe = createTestAutIframe(),
@@ -24,97 +28,92 @@ describe('SnapshotControls', () => {
 
   it('renders nothing when messageTitle is undefined', () => {
     mountSnapshotControls()
-    cy.get('[data-cy="snapshot-highlight-controls"]').should('not.exist')
-    cy.get('[data-cy="snapshot-message"]').should('not.exist')
-    cy.get('[data-cy="snapshot-change-state"]').should('not.exist')
+    cy.get(snapshotControlsSelector).should('not.exist')
   })
 
-  it('renders snapshot title when one is pinned', () => {
+  it('renders the "pinned" snapshot title', () => {
     mountSnapshotControls()
     const snapshotStore = useSnapshotStore()
 
-    snapshotStore.pinSnapshot(autSnapshot)
-    cy.get('[data-cy="snapshot-message"]').contains('DOM Snapshot')
-    cy.get('[data-cy="snapshot-message"]').contains('(pinned)')
+    snapshotStore.pinSnapshot(snapshotPinned)
+    cy.get('body')
+    .findByText('Pinned')
+    .should('be.visible')
   })
 
-  it('renders snapshot pinned status', () => {
+  it('pinned snapshots should not be dismissible', () => {
     mountSnapshotControls()
     const snapshotStore = useSnapshotStore()
 
-    snapshotStore.pinSnapshot(autSnapshot)
-    cy.get('[data-cy="snapshot-message"]').contains('DOM Snapshot')
-    cy.get('[data-cy="snapshot-message"]').contains('(pinned)')
-    .then(() => {
-      snapshotStore.unpinSnapshot()
-      cy.get('[data-cy="snapshot-message"]').should('not.contain', '(pinned)')
-    })
+    snapshotStore.pinSnapshot(snapshotPinned)
+    cy.get('body')
+    .findByText('Pinned')
+    .should('be.visible')
+    .get(unpinButtonSelector)
+    .should('not.exist')
   })
 
   it('clears snapshot message', () => {
     mountSnapshotControls()
     const snapshotStore = useSnapshotStore()
 
-    snapshotStore.pinSnapshot(autSnapshot)
-    cy.then(() => cy.get('[data-cy="snapshot-message"]').should('exist'))
-    .then(() => snapshotStore.clearMessage())
-    .get('[data-cy="snapshot-message"]').should('not.exist')
-  })
-
-  it('shows snapshot with custom message', () => {
-    mountSnapshotControls()
-    const message = 'This is a custom message'
-    const snapshotStore = useSnapshotStore()
-
-    snapshotStore.showSnapshot(message)
-    cy.get('[data-cy="snapshot-message"]').contains(message)
+    snapshotStore.pinSnapshot(snapshotWithSnapshots)
+    cy.get('body')
+    .findByText('Pinned')
+    .should('be.visible')
+    .get(unpinButtonSelector)
+    .click({ force: true })
+    .get('body')
+    .findByText('Pinned')
+    .should('not.exist')
   })
 
   it('does not show highlight controls if no element present on snapshot', () => {
     mountSnapshotControls()
     const snapshotStore = useSnapshotStore()
 
-    snapshotStore.pinSnapshot(autSnapshot)
-    cy.get('[data-cy="snapshot-highlight-controls"]').should('not.exist')
+    snapshotStore.pinSnapshot(snapshotWithSnapshots)
+    cy.get('body').findByText('Highlights').should('not.exist')
   })
 
   it('toggles highlight controls if snapshot has an element', () => {
     const snapshotStore = useSnapshotStore()
     const eventManager = createEventManager()
     const autIframe = createTestAutIframe()
-    const removeHighlights = cy.stub(autIframe, 'removeHighlights')
 
     // we don't have an iframe-model since this is a CT test, but we can
     // simulate it by registering the same unpin:snapshot event it does.
-    eventManager.on('unpin:snapshot', () => snapshotStore.unpinSnapshot())
-    snapshotStore.pinSnapshot({ ...autSnapshot, $el: 'some element' })
+    eventManager.on('unpin:snapshot', () => snapshotStore.$reset())
+
+    // debugger
+    // console.log('snapshotWithSnapshots', snapshotWithSnapshots)
+    snapshotStore.pinSnapshot({ ...snapshotWithSnapshots, $el: document.body })
 
     mountSnapshotControls(eventManager, autIframe)
-    cy.get('[data-cy="snapshot-highlight-controls"]').should('exist')
-    cy.get('[data-cy="toggle-snapshot-highlights"]').as('toggle')
-    cy.get('@toggle').should('have.attr', 'title', 'Hide highlights')
-    cy.get('@toggle').click().then(() => {
-      expect(removeHighlights).to.have.been.calledOnce
-    })
-
-    cy.get('@toggle').should('have.attr', 'title', 'Show highlights')
-    cy.get('[data-cy="unpin-snapshot"]').click()
-    cy.get('[data-cy="snapshot-highlight-controls"]').should('not.exist')
+    cy.get('body')
+    .findByText('Highlights')
+    .should('be.visible')
+    .findByLabelText('Toggle highlights')
+    .click({ force: true })
   })
 
   it('shows running test error', () => {
     mountSnapshotControls()
     const snapshotStore = useSnapshotStore()
 
     snapshotStore.setTestsRunningError()
-    cy.get('[data-cy="snapshot-message"]').contains('Cannot show Snapshot while tests are running')
+    cy.get('body')
+    .findByText('Cannot show Snapshot while tests are running')
+    .should('be.visible')
   })
 
   it('shows snapshot missing error', () => {
     mountSnapshotControls()
     const snapshotStore = useSnapshotStore()
 
     snapshotStore.setMissingSnapshotMessage()
-    cy.get('[data-cy="snapshot-message"]').contains('The snapshot is missing. Displaying current state of the DOM.')
+    cy.get('body')
+    .findByText('The snapshot is missing. Displaying current state of the DOM.')
+    .should('be.visible')
   })
 })

packages/app/src/runner/SnapshotControls.vue

@@ -1,35 +1,54 @@
 <template>
-  <div class="inset-x-0 bottom-24 absolute">
-    <div class="flex justify-center children:h-11">
-      <SnapshotMessage
-        v-if="snapshotStore.messageTitle"
-        :message-title="snapshotStore.messageTitle"
-        :message-description="snapshotStore.messageDescription"
-        :message-type="snapshotStore.messageType"
-      />
-
-      <SnapshotHighlightControls
-        v-if="snapshotStore.isSnapshotPinned && snapshotStore.snapshotProps?.$el"
-        :event-manager="props.eventManager"
-        :get-aut-iframe="props.getAutIframe"
-      />
-
-      <SnapshotChangeState
-        v-if="snapshotStore.isSnapshotPinned && shouldShowStateControls"
-        :get-aut-iframe="props.getAutIframe"
-      />
+  <div
+    v-if="renderSnapshotControls"
+    class="inset-x-0 bottom-24 absolute"
+    data-testid="snapshot-controls"
+  >
+    <div class="flex justify-center">
+      <div
+        class="rounded flex bg-gray-1000 shadow min-h-40px py-4px px-8px text-gray-600 gap-4px items-center"
+      >
+        <i-cy-object-pin_x16 class="icon-dark-purple-400 icon-light-purple-800" />
+        <span
+          v-if="snapshotStore.messageTitle"
+          class="rounded min-h-24px p-4px text-14px text-gray-600 capitalize block"
+        >{{ snapshotStore.messageTitle }}</span>
+
+        <SnapshotToggle
+          v-if="shouldShowStateControls"
+          :messages="snapshotMessages"
+          @select="changeState"
+        />
+
+        <SnapshotHighlightControls
+          v-if="shouldShowHighlightControls"
+          :value="snapshotStore.snapshot?.showingHighlights"
+          @update:value="toggleHighlights"
+        />
+
+        <button
+          v-if="shouldShowStateControls || shouldShowHighlightControls"
+          class="border-transparent rounded outline-none bg-gray-900 border-1 my-1 mr-2px transition duration-150 hocus:border-purple-300 "
+          style="padding: 3px"
+          @click="unpin"
+        >
+          <i-cy-delete_x16
+            class="icon-dark-gray-200"
+            data-testid="unpin"
+          />
+        </button>
+      </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { useSnapshotStore } from './snapshot-store'
-import SnapshotMessage from './SnapshotMessage.vue'
-import SnapshotChangeState from './SnapshotChangeState.vue'
 import SnapshotHighlightControls from './SnapshotHighlightControls.vue'
 import type { EventManager } from '../runner/event-manager'
 import type { AutIframe } from '../runner/aut-iframe'
+import SnapshotToggle from './SnapshotToggle.vue'
 
 const props = defineProps<{
   eventManager: EventManager
@@ -38,12 +57,43 @@ const props = defineProps<{
 
 const snapshotStore = useSnapshotStore()
 
+const snapshots = computed(() => snapshotStore.snapshotProps?.snapshots)
+
+const snapshotMessages = computed(() => {
+  if (!snapshots.value) return []
+
+  return snapshots.value.map(({ name }, idx) => {
+    if (!name) return { text: `${idx + 1}`, id: `${idx}` }
+
+    return { text: `${name}`, id: `${idx}` }
+  })
+})
+
 const shouldShowStateControls = computed(() => {
   // only show these controls if there is at least 2 different snapshots to compare.
   // usually an interaction, such a button was clicked, and we want to show
   // how the UI looked before and after the button click.
-  const snapshots = snapshotStore.snapshotProps?.snapshots
+  return snapshots.value && snapshots.value.length >= 2
+})
+
+const unpin = () => {
+  props.eventManager.snapshotUnpinned()
+  snapshotStore.$reset()
+}
+
+const toggleHighlights = () => {
+  snapshotStore.toggleHighlights(props.getAutIframe())
+}
 
-  return snapshots && snapshots.length >= 2
+const shouldShowHighlightControls = computed(() => {
+  return snapshotStore.isSnapshotPinned && snapshotStore.snapshotProps?.$el
 })
+
+const renderSnapshotControls = computed(() => {
+  return shouldShowStateControls.value || shouldShowHighlightControls.value || snapshotStore.messageTitle
+})
+
+const changeState = ({ idx }) => {
+  snapshotStore.changeState(idx, props.getAutIframe())
+}
 </script>