Merge branch '10.0-release' into fix/reporter-styles

Author: marktnoonan

circle.yml

@@ -419,7 +419,6 @@ commands:
             PERCY_PARALLEL_NONCE=$CIRCLE_WORKFLOW_ID \
             PERCY_ENABLE=${PERCY_TOKEN:-0} \
             PERCY_PARALLEL_TOTAL=-1 \
-            yarn percy exec --parallel -- -- \
             yarn workspace @packages/<<parameters.package>> cypress:run:<<parameters.type>> --browser <<parameters.browser>> --record --parallel --group <<parameters.package>>-<<parameters.type>>
       - store_test_results:
           path: /tmp/cypress
@@ -1256,14 +1255,14 @@ jobs:
           package: launchpad
           type: e2e
 
-  # run-app-component-tests-chrome:
-  #   <<: *defaults
-  #   parallelism: 1
-  #   steps:
-  #     - run-new-ui-tests:
-  #         browser: chrome
-  #         package: app
-  #         type: ct
+  run-app-component-tests-chrome:
+    <<: *defaults
+    parallelism: 1
+    steps:
+      - run-new-ui-tests:
+          browser: chrome
+          package: app
+          type: ct
 
   run-app-integration-tests-chrome:
     <<: *defaults
@@ -2235,10 +2234,10 @@ linux-workflow: &linux-workflow
         context: test-runner:launchpad-tests
         requires:
           - build
-    # - run-app-component-tests-chrome:
-    #     context: test-runner:launchpad-tests
-    #     requires:
-    #       - build
+    - run-app-component-tests-chrome:
+        context: test-runner:launchpad-tests
+        requires:
+          - build
     - desktop-gui-integration-tests-7x:
         requires:
           - build

packages/app/src/navigation/SidebarNavigation.spec.tsx

@@ -1,43 +1,57 @@
 import { useMainStore } from '../store'
 import SidebarNavigation from './SidebarNavigation.vue'
 
-describe('SidebarNavigation', () => {
-  beforeEach(() => {
-    cy.mount(() => {
-      const mainStore = useMainStore()
-
-      return (
-        <div>
-          <div class={[mainStore.navBarExpanded ? 'w-248px' : 'w-64px', 'transition-all', 'h-screen']}>
-            <SidebarNavigation />
-          </div>
-          <div id="tooltip-target"/>
+function mountComponent (initialNavExpandedVal = true) {
+  const mainStore = useMainStore()
+
+  mainStore.navBarExpanded = initialNavExpandedVal
+
+  cy.mount(() => {
+    return (
+      <div>
+        <div class={[mainStore.navBarExpanded ? 'w-248px' : 'w-64px', 'transition-all', 'h-screen', 'grid', 'grid-rows-1']}>
+          <SidebarNavigation />
         </div>
-      )
-    })
+        <div id="tooltip-target"/>
+      </div>
+    )
   })
+}
 
+describe('SidebarNavigation', () => {
   it('expands the bar when clicking the expand button', () => {
+    mountComponent()
+    cy.findByLabelText('toggle navigation', {
+      selector: 'button',
+    }).click()
+
+    cy.get('[aria-expanded]').should('have.attr', 'aria-expanded', 'false')
     cy.findByText('test-project').should('not.be.visible')
-    cy.get('[aria-expanded]').click().should('have.attr', 'aria-expanded', 'true')
+    cy.findByLabelText('toggle navigation', {
+      selector: 'button',
+    }).click()
+
+    cy.get('[aria-expanded]').should('have.attr', 'aria-expanded', 'true')
     cy.findByText('test-project').should('be.visible')
   })
 
   it('shows tooltips on hover', () => {
-    cy.get('[data-cy="sidebar-header"').trigger('mouseover')
+    mountComponent(false)
+    cy.get('[data-cy="sidebar-header"').realHover()
     cy.contains('#tooltip-target > div', 'test-project').should('be.visible')
     cy.get('[data-cy="sidebar-header"]').trigger('mouseout')
 
-    cy.get('[data-cy="switch-testing-type"]').trigger('mouseover')
+    cy.get('[data-cy="switch-testing-type"]').realHover()
     cy.contains('#tooltip-target > div', 'E2E Testing').should('be.visible')
     cy.get('[data-cy="switch-testing-type"]').trigger('mouseout')
 
-    cy.get('[data-e2e-href="/runs"]').trigger('mouseover')
+    cy.get('[data-e2e-href="/runs"]').realHover()
     cy.contains('#tooltip-target > div', 'Runs').should('be.visible')
     cy.get('[data-e2e-href="/runs"]').trigger('mouseout')
   })
 
   it('opens a modal to switch testing type', { viewportWidth: 1280 }, () => {
+    mountComponent()
     cy.get('[data-cy="switch-testing-type"]').click()
   })
 })

packages/app/src/navigation/SidebarNavigation.vue

@@ -4,18 +4,20 @@
     class="relative flex flex-col bg-gray-1000 transition-all duration-300"
     :class="mainStore.navBarExpanded ? 'w-248px' : 'w-64px'"
   >
-    <div
-      class="absolute cursor-pointer w-16px bottom-0 top-0 left-full group"
+    <button
+      class="absolute cursor-pointer w-16px bottom-0 top-0 left-full group hocus:outline-transparent"
+      role="button"
+      aria-label="toggle navigation"
       @click="mainStore.toggleNavBar"
     >
-      <div class="w-16px origin-left transform scale-x-0 group-hover:scale-x-100 h-full transition-transform duration-300 flex items-center">
+      <div class="w-16px origin-left transform scale-x-0 group-hocus:scale-x-100 h-full transition-transform duration-300 flex items-center">
         <div class="h-full w-3px bg-indigo-400" />
         <i-cy-chevron-right_x16
           class="icon-dark-indigo-400 h-16px w-16px"
           :class="mainStore.navBarExpanded ? 'transform rotate-180': ''"
         />
       </div>
-    </div>
+    </button>
     <div class="flex flex-col flex-1 overflow-y-auto ">
       <SidebarTooltip
         class="flex items-center h-64px flex-shrink-0 border-b border-gray-900"

packages/app/src/runner/SpecRunner.vue

@@ -22,7 +22,11 @@
       class="relative w-full"
     >
       <HideDuringScreenshot class="bg-white p-4">
-        <SpecRunnerHeader :gql="props.gql" />
+        <SpecRunnerHeader
+          :gql="props.gql"
+          :event-manager="eventManager"
+          :get-aut-iframe="getAutIframeModel"
+        />
       </HideDuringScreenshot>
 
       <RemoveClassesDuringScreenshotting

packages/app/src/runner/SpecRunnerHeader.spec.tsx

@@ -1,6 +1,16 @@
 import SpecRunnerHeader from './SpecRunnerHeader.vue'
 import { useAutStore } from '../store'
-import { SpecRunnerHeaderFragmentDoc } from '../generated/graphql-test'
+import { SpecRunnerHeaderFragment, SpecRunnerHeaderFragmentDoc } from '../generated/graphql-test'
+import { createEventManager, createTestAutIframe } from '../../cypress/e2e/support/ctSupport'
+
+function renderWithGql (gqlVal: SpecRunnerHeaderFragment) {
+  const eventManager = createEventManager()
+  const autIframe = createTestAutIframe()
+
+  return (<SpecRunnerHeader gql={gqlVal}
+    eventManager={eventManager}
+    getAutIframe={() => autIframe} />)
+}
 
 describe('SpecRunnerHeader', () => {
   it('renders', () => {
@@ -9,49 +19,46 @@ describe('SpecRunnerHeader', () => {
     autStore.updateUrl('http://localhost:4000')
     cy.mountFragment(SpecRunnerHeaderFragmentDoc, {
       render: (gqlVal) => {
-        return <SpecRunnerHeader gql={gqlVal} />
+        return renderWithGql(gqlVal)
       },
     })
   })
 
-  it('disabled selector playground and studio buttons when isRunning is true', () => {
+  it('disabled selector playground button when isRunning is true', () => {
     const autStore = useAutStore()
 
     autStore.setIsRunning(true)
 
     cy.mountFragment(SpecRunnerHeaderFragmentDoc, {
       render: (gqlVal) => {
-        return <SpecRunnerHeader gql={gqlVal} />
+        return renderWithGql(gqlVal)
       },
     })
 
-    cy.get('[data-cy="header-studio"]').should('be.disabled')
     cy.get('[data-cy="header-selector"]').should('be.disabled')
   })
 
-  it('disabled selector playground and studio buttons when isLoading is true', () => {
+  it('disabled selector playground button when isLoading is true', () => {
     const autStore = useAutStore()
 
     autStore.setIsLoading(true)
 
     cy.mountFragment(SpecRunnerHeaderFragmentDoc, {
       render: (gqlVal) => {
-        return <SpecRunnerHeader gql={gqlVal} />
+        return renderWithGql(gqlVal)
       },
     })
 
-    cy.get('[data-cy="header-studio"]').should('be.disabled')
     cy.get('[data-cy="header-selector"]').should('be.disabled')
   })
 
-  it('enables selector playground and studio buttons by default', () => {
+  it('enables selector playground button by default', () => {
     cy.mountFragment(SpecRunnerHeaderFragmentDoc, {
       render: (gqlVal) => {
-        return <SpecRunnerHeader gql={gqlVal} />
+        return renderWithGql(gqlVal)
       },
     })
 
-    cy.get('[data-cy="header-studio"]').should('not.be.disabled')
     cy.get('[data-cy="header-selector"]').should('not.be.disabled')
   })
 
@@ -65,7 +72,7 @@ describe('SpecRunnerHeader', () => {
         gql.currentTestingType = 'e2e'
       },
       render: (gqlVal) => {
-        return <SpecRunnerHeader gql={gqlVal} />
+        return renderWithGql(gqlVal)
       },
     })
 
@@ -82,7 +89,7 @@ describe('SpecRunnerHeader', () => {
         gql.currentTestingType = 'component'
       },
       render: (gqlVal) => {
-        return <SpecRunnerHeader gql={gqlVal} />
+        return renderWithGql(gqlVal)
       },
     })
 
@@ -98,7 +105,7 @@ describe('SpecRunnerHeader', () => {
         ctx.currentBrowser = ctx.browsers?.find((x) => x.displayName === 'Chrome') ?? null
       },
       render: (gqlVal) => {
-        return <SpecRunnerHeader gql={gqlVal} />
+        return renderWithGql(gqlVal)
       },
     })
 

packages/app/src/runner/SpecRunnerHeader.vue

@@ -71,8 +71,10 @@ import IconCrosshairsGPS from '~icons/mdi/crosshairs-gps'
 import Icon from '@packages/frontend-shared/src/components/Icon.vue'
 import type { SpecRunnerHeaderFragment } from '../generated/graphql'
 import SelectorPlayground from './selector-playground/SelectorPlayground.vue'
-import { getAutIframeModel, getEventManager } from '.'
+import { getAutIframeModel } from '.'
 import { useSelectorPlaygroundStore } from '../store/selector-playground-store'
+import type { EventManager } from './event-manager'
+import type { AutIframe } from './aut-iframe'
 
 gql`
 fragment SpecRunnerHeader on CurrentProject {
@@ -93,11 +95,11 @@ fragment SpecRunnerHeader on CurrentProject {
 
 const props = defineProps<{
   gql: SpecRunnerHeaderFragment
+  eventManager: EventManager
+  getAutIframe: () => AutIframe
 }>()
 
-const eventManager = getEventManager()
-const autIframe = getAutIframeModel()
-const getAutIframe = getAutIframeModel
+const autIframe = props.getAutIframe()
 
 const selectorPlaygroundStore = useSelectorPlaygroundStore()
 

packages/app/src/runner/selector-playground/SelectorPlayground.spec.tsx

@@ -2,7 +2,9 @@ import { createEventManager, createTestAutIframe } from '../../../cypress/e2e/su
 import { useSelectorPlaygroundStore } from '../../store/selector-playground-store'
 import SelectorPlayground from './SelectorPlayground.vue'
 
-describe('SelectorPlayground', () => {
+// TODO: Test is failing due to Percy conflict
+// eslint-disable-next-line
+describe.skip('SelectorPlayground', () => {
   const mountSelectorPlayground = (
     eventManager = createEventManager(),
     autIframe = createTestAutIframe(),
@@ -89,11 +91,11 @@ describe('SelectorPlayground', () => {
     cy.spy(autIframe, 'toggleSelectorHighlight')
 
     cy.get('[data-cy="playground-selector"]').as('copy').clear().type('.foo-bar')
+
     cy.get('@copy').click()
     cy.get('@copy').should('be.focused')
-    cy.window().its('navigator.clipboard')
-    .invoke('readText')
-    .should('equal', '.foo-bar')
+
+    cy.get('@writeClipboard').should('have.been.calledWith', '.foo-bar')
   })
 
   it('prints nothing to console when no selected elements found', () => {

packages/frontend-shared/cypress/support/mock-graphql/stubgql-Project.ts

@@ -41,7 +41,7 @@ export const createTestCurrentProject = (title: string, currentProject: Partial<
       },
       __typename: 'SpecConnection' as const,
       edges: [
-        ...randomComponents(200, 'Spec').map((c) => {
+        ...randomComponents(50, 'Spec').map((c) => {
           return {
             __typename: 'SpecEdge' as const,
             cursor: 'eoifjew',

packages/frontend-shared/src/gql-components/HeaderBar.vue

@@ -5,6 +5,7 @@
     :show-browsers="props.showBrowsers"
     :page-name="pageName"
   />
+  <div v-else />
 </template>
 
 <script setup lang="ts">