test: final ct-audit tests and component tweaks

packages/app/cypress/e2e/index.cy.ts

@@ -12,22 +12,22 @@ describe('App: Index', () => {
         // With no specs present, the page renders two cards, one for scaffolding example specs,
         // another for creating a new blank spec.
         cy.findAllByTestId('card').eq(0).as('ScaffoldCard')
-        .should('have.attr', 'tabindex', '0')
         .within(() => {
-          cy.findByRole('heading', {
-            level: 2, name: defaultMessages.createSpec.e2e.importFromScaffold.header,
+          cy.findByRole('button', {
+            name: defaultMessages.createSpec.e2e.importFromScaffold.header,
           }).should('be.visible')
+          .and('not.be.disabled')
 
           cy.contains(defaultMessages.createSpec.e2e.importFromScaffold.description)
           .should('be.visible')
         })
 
         cy.findAllByTestId('card').eq(1).as('EmptySpecCard')
-        .should('have.attr', 'tabindex', '0')
         .within(() => {
-          cy.findByRole('heading', {
-            level: 2, name: defaultMessages.createSpec.e2e.importEmptySpec.header,
+          cy.findByRole('button', {
+            name: defaultMessages.createSpec.e2e.importEmptySpec.header,
           }).should('be.visible')
+          .and('not.be.disabled')
 
           cy.contains(defaultMessages.createSpec.e2e.importEmptySpec.description)
           .should('be.visible')
@@ -259,11 +259,9 @@ describe('App: Index', () => {
 
         cy.findByRole('dialog', { name: defaultMessages.createSpec.newSpecModalTitle }).within(() => {
           cy.findAllByTestId('card').eq(0)
-          .should('have.attr', 'tabindex', '0')
           .and('contain', defaultMessages.createSpec.e2e.importFromScaffold.header)
 
           cy.findAllByTestId('card').eq(1)
-          .should('have.attr', 'tabindex', '0')
           .and('contain', defaultMessages.createSpec.e2e.importEmptySpec.header)
         })
       })
@@ -305,24 +303,22 @@ describe('App: Index', () => {
         // With no specs present, the page renders two cards, one for creating from found components,
         // another for creating from found stories.
         cy.findAllByTestId('card').eq(0).as('ComponentCard')
-        .should('have.attr', 'tabindex', '0')
         .within(() => {
-          cy.findByRole('heading', {
-            level: 2,
+          cy.findByRole('button', {
             name: defaultMessages.createSpec.component.importFromComponent.header,
           }).should('be.visible')
+          .and('not.be.disabled')
 
           cy.contains(defaultMessages.createSpec.component.importFromComponent.description)
           .should('be.visible')
         })
 
         cy.findAllByTestId('card').eq(1).as('StoryCard')
-        .should('have.attr', 'tabindex', '0')
         .within(() => {
-          cy.findByRole('heading', {
-            level: 2,
+          cy.findByRole('button', {
             name: defaultMessages.createSpec.component.importFromStory.header,
           }).should('be.visible')
+          .and('not.be.disabled')
 
           cy.contains(defaultMessages.createSpec.component.importFromStory.description)
           .should('be.visible')
@@ -458,11 +454,10 @@ describe('App: Index', () => {
             name: defaultMessages.createSpec.newSpecModalTitle,
           }).within(() => {
             cy.findAllByTestId('card').eq(0)
-            .should('have.attr', 'tabindex', '0')
 
             // the storybook card remains enabled here
-            cy.findAllByTestId('card').eq(1)
-            .should('have.attr', 'tabindex', '0')
+            cy.contains('button', defaultMessages.createSpec.component.importFromStory.header)
+            .should('not.be.disabled')
           })
         })
       })
@@ -479,22 +474,22 @@ describe('App: Index', () => {
         // another for creating from found stories. The story card is disabled due to storybook not
         // being configured for the scaffolded project.
         cy.findAllByTestId('card').eq(0).as('ComponentCard')
-        .should('have.attr', 'tabindex', '0')
         .within(() => {
-          cy.findByRole('heading', {
-            level: 2, name: defaultMessages.createSpec.component.importFromComponent.header,
+          cy.findByRole('button', {
+            name: defaultMessages.createSpec.component.importFromComponent.header,
           }).should('be.visible')
+          .and('not.be.disabled')
 
           cy.contains(defaultMessages.createSpec.component.importFromComponent.description)
           .should('be.visible')
         })
 
         cy.findAllByTestId('card').eq(1).as('StoryCard')
-        .should('have.attr', 'tabindex', '-1')
         .within(() => {
-          cy.findByRole('heading', {
-            level: 2, name: defaultMessages.createSpec.component.importFromStory.header,
+          cy.findByRole('button', {
+            name: defaultMessages.createSpec.component.importFromStory.header,
           }).should('be.visible')
+          .and('be.disabled')
 
           cy.contains(defaultMessages.createSpec.component.importFromStory.notSetupDescription)
           .should('be.visible')
@@ -614,11 +609,10 @@ describe('App: Index', () => {
           // another spec.
           cy.findByRole('dialog', { name: defaultMessages.createSpec.newSpecModalTitle }).within(() => {
             cy.findAllByTestId('card').eq(0)
-            .should('have.attr', 'tabindex', '0')
 
             // the storybook card remains disabled here
-            cy.findAllByTestId('card').eq(1)
-            .should('have.attr', 'tabindex', '-1')
+            cy.contains('button', defaultMessages.createSpec.component.importFromStory.header)
+            .should('be.disabled')
           })
         })
 
@@ -702,11 +696,9 @@ describe('App: Index', () => {
 
         cy.findByRole('dialog', { name: defaultMessages.createSpec.newSpecModalTitle }).within(() => {
           cy.findAllByTestId('card').eq(0)
-          .should('have.attr', 'tabindex', '0')
           .and('contain', defaultMessages.createSpec.component.importFromComponent.description)
 
           cy.findAllByTestId('card').eq(1)
-          .should('have.attr', 'tabindex', '0')
           .and('contain', defaultMessages.createSpec.component.importFromStory.description)
         })
       })
@@ -716,7 +708,6 @@ describe('App: Index', () => {
 
         cy.findByRole('dialog', { name: defaultMessages.createSpec.newSpecModalTitle }).within(() => {
           cy.findAllByTestId('card').eq(0)
-          .should('have.attr', 'tabindex', '0')
           .and('contain', defaultMessages.createSpec.component.importFromComponent.description).click()
         })
 
@@ -735,7 +726,6 @@ describe('App: Index', () => {
 
         cy.findByRole('dialog', { name: defaultMessages.createSpec.newSpecModalTitle }).within(() => {
           cy.findAllByTestId('card').eq(0)
-          .should('have.attr', 'tabindex', '0')
           .and('contain', defaultMessages.createSpec.component.importFromComponent.description).click()
         })
 
@@ -766,7 +756,6 @@ describe('App: Index', () => {
 
         cy.findByRole('dialog', { name: defaultMessages.createSpec.newSpecModalTitle }).within(() => {
           cy.findAllByTestId('card').eq(1)
-          .should('have.attr', 'tabindex', '0')
           .and('contain', defaultMessages.createSpec.component.importFromStory.description).click()
         })
 

packages/app/src/settings/project/RecordKey.cy.tsx

@@ -47,6 +47,6 @@ describe('<RecordKey />', () => {
     .should('be.visible')
     .and('not.be.disabled')
 
-    cy.percySnapshot('RecordKey appearance')
+    cy.percySnapshot()
   })
 })

packages/app/src/specs/RowDirectory.vue

@@ -1,7 +1,8 @@
 <template>
-  <div
-    class="h-full grid gap-8px grid-cols-[14px,16px,auto] items-center"
+  <button
+    class="h-full grid gap-8px grid-cols-[14px,16px,auto] items-center focus:outline-transparent"
     :data-cy="`row-directory-depth-${depth}`"
+    :aria-expanded="expanded"
   >
     <i-cy-chevron-down-small_x16
       class="
@@ -20,7 +21,8 @@
       class="font-medium text-gray-600"
       highlight-classes="text-gray-1000"
     />
-  </div>
+    <span class="sr-only">{{ expanded ? 'collapse' : 'expand' }}</span>
+  </button>
 </template>
 
 <script lang="ts" setup>

packages/app/src/specs/SpecsList.cy.tsx

@@ -24,19 +24,25 @@ let specs: Array<SpecsListFragment> = []
 describe('<SpecsList />', { keystrokeDelay: 0 }, () => {
   context('when testingType is unset', () => {
     beforeEach(() => {
+      const showCreateSpecModalSpy = cy.spy().as('showCreateSpecModalSpy')
+
       cy.mountFragment(Specs_SpecsListFragmentDoc, {
         onResult: (ctx) => {
           specs = ctx.currentProject?.specs || []
 
           return ctx
         },
         render: (gqlVal) => {
-          return <SpecsList gql={gqlVal} />
+          return <SpecsList gql={gqlVal} onShowCreateSpecModal={showCreateSpecModalSpy} />
         },
       })
     })
 
     it('should filter specs', () => {
+      // make sure things have rendered for snapshot
+      cy.get('[data-cy="specs-list-row"]').should('have.length.above', 2)
+      cy.percySnapshot()
+
       const longestSpec = specs.reduce((acc, spec) =>
         acc.relative.length < spec.relative.length ? spec : acc
       , specs[0])
@@ -49,28 +55,81 @@ describe('<SpecsList />', { keystrokeDelay: 0 }, () => {
       .should('not.exist')
 
       cy.contains(`${defaultMessages.specPage.noResultsMessage} garbage 🗑`)
+
+      cy.percySnapshot()
       cy.get('[data-cy="no-results-clear"]').click()
       cy.get('@specsListInput').invoke('val').should('be.empty')
 
+      // validate that something re-populated in the specs list
+      cy.get('[data-cy="specs-list-row"]').should('have.length.above', 2)
+
       cy.get('@specsListInput').type(longestSpec.fileName)
       cy.get(rowSelector).first().should('contain', longestSpec.relative.replace(`/${longestSpec.fileName}${longestSpec.specFileExtension}`, ''))
-      cy.get(rowSelector).last().should('contain', `${longestSpec.fileName}${longestSpec.specFileExtension}`)
+      cy.get(rowSelector).last().within(() => {
+        cy.contains('a', longestSpec.baseName)
+        .should('be.visible')
+        .and('have.attr', 'href', `#/specs/runner?file=${longestSpec.relative}`)
+      })
 
       const directory = longestSpec.relative.slice(0, longestSpec.relative.lastIndexOf('/'))
 
       cy.get('@specsListInput').clear().type(directory)
       cy.get(rowSelector).first().should('contain', directory)
+
+      cy.percySnapshot()
     })
 
-    it('should close directories', () => {
+    it('should close directories with click', () => {
       // close all directories
       const directories: string[] = Array.from(new Set(specs.map((spec) => spec.relative.split('/')[0]))).sort()
 
       directories.forEach((dir) => {
-        cy.get('[data-cy="row-directory-depth-0"]').contains(dir).click()
+        cy.contains('button[data-cy="row-directory-depth-0"]', dir)
+        .should('have.attr', 'aria-expanded', 'true')
+        .click()
+        .should('have.attr', 'aria-expanded', 'false')
       })
 
       cy.get('[data-cy="spec-item"]').should('not.exist')
+
+      cy.percySnapshot()
+    })
+
+    it('should close directories with Enter', () => {
+      const directories: string[] = Array.from(new Set(specs.map((spec) => spec.relative.split('/')[0]))).sort()
+
+      directories.forEach((dir) => {
+        cy.contains('button[data-cy="row-directory-depth-0"]', dir)
+        .should('have.attr', 'aria-expanded', 'true')
+        .focus()
+        .realPress('Enter')
+
+        cy.contains('button[data-cy="row-directory-depth-0"]', dir)
+        .should('have.attr', 'aria-expanded', 'false')
+      })
+
+      cy.get('[data-cy="spec-item"]').should('not.exist')
+    })
+
+    it('should close directories with Space', () => {
+      const directories: string[] = Array.from(new Set(specs.map((spec) => spec.relative.split('/')[0]))).sort()
+
+      directories.forEach((dir) => {
+        cy.contains('button[data-cy="row-directory-depth-0"]', dir)
+        .should('have.attr', 'aria-expanded', 'true')
+        .focus()
+        .realPress('Space')
+
+        cy.contains('button[data-cy="row-directory-depth-0"]', dir)
+        .should('have.attr', 'aria-expanded', 'false')
+      })
+
+      cy.get('[data-cy="spec-item"]').should('not.exist')
+    })
+
+    it('should emit an event to open new spec modal', () => {
+      cy.contains(defaultMessages.createSpec.newSpec).click()
+      cy.get('@showCreateSpecModalSpy').should('have.been.calledOnce')
     })
   })
 

packages/app/src/specs/SpecsList.vue

@@ -14,8 +14,8 @@
       @close="showSpecPatternModal = false"
     />
 
-    <template
-      v-if="specs.length"
+    <div
+      v-show="specs.length"
     >
       <div
         class="grid grid-cols-2 children:font-medium children:text-gray-800"
@@ -41,13 +41,17 @@
         >
           <SpecsListRowItem
             v-for="row in list"
+            :id="getIdIfDirectory(row)"
             :key="row.index"
           >
             <template #file>
               <RouterLink
                 v-if="row.data.isLeaf && row.data"
                 :key="row.data.data?.absolute"
+                class="focus:outline-transparent"
                 :to="{ path: '/specs/runner', query: { file: row.data.data?.relative } }"
+                @click.meta.prevent="handleCtrlClick"
+                @click.ctrl.prevent="handleCtrlClick"
               >
                 <SpecItem
                   :file-name="row.data.data?.fileName || row.data.name"
@@ -64,6 +68,7 @@
                 :depth="row.data.depth - 2"
                 :style="{ paddingLeft: `${((row.data.depth - 2) * 10) + 16}px` }"
                 :indexes="getDirIndexes(row.data)"
+                :aria-controls="getIdIfDirectory(row)"
                 @click="row.data.toggle"
               />
             </template>
@@ -77,9 +82,9 @@
           </SpecsListRowItem>
         </div>
       </div>
-    </template>
+    </div>
     <NoResults
-      v-else
+      v-show="!specs.length"
       :search="search"
       :message="t('specPage.noResultsMessage')"
       class="mt-56px"
@@ -175,6 +180,19 @@ const { containerProps, list, wrapperProps, scrollTo } = useVirtualList(treeSpec
 // If you are scrolled down the virtual list and list changes,
 // reset scroll position to top of list
 watch(() => treeSpecList.value, () => scrollTo(0))
+
+function handleCtrlClick () {
+  // noop intended to reduce the chances of opening tests multiple tabs
+  // which is not a supported state in Cypress
+}
+
+function getIdIfDirectory (row) {
+  if (row.data.isLeaf && row.data) {
+    return undefined
+  }
+
+  return `speclist-${row.data.data.relative.replace(row.data.data.baseName, '')}`
+}
 </script>
 
 <style scoped>

packages/app/src/specs/SpecsListRowItem.vue

@@ -1,9 +1,7 @@
 <template>
   <div
-    class="grid grid-cols-2 outline-none children:cursor-pointer group h-full"
+    class="h-full outline-none ring-inset grid grid-cols-2 group focus-within:ring-indigo-300 focus-within:ring-1 children:cursor-pointer"
     data-cy="specs-list-row"
-    role="link"
-    tabindex="0"
   >
     <div>
       <slot name="file" />

packages/data-context/src/sources/migration/index.ts

@@ -1,4 +1,6 @@
 /* eslint-disable padding-line-between-statements */
 // created by autobarrel, do not modify directly
 
+export * from './autoRename'
+export * from './regexps'
 export * from './shouldShowSteps'

packages/frontend-shared/cypress/e2e/support/e2eSupport.ts

@@ -421,6 +421,8 @@ function validateExternalLink (subject, options: ValidateExternalLinkOptions | s
   })
 }
 
+Cypress.on('uncaught:exception', (err) => !err.message.includes('ResizeObserver loop limit exceeded'))
+
 Cypress.Commands.add('scaffoldProject', scaffoldProject)
 Cypress.Commands.add('addProject', addProject)
 Cypress.Commands.add('openGlobalMode', openGlobalMode)