test: Addressing launchpad test flake in Windows (#22536)

tbiethman · web-flow · commit 24052eb62a24 · 2022-06-27T14:24:33.000-05:00
* test: Bumping timeout on breadcrumb state checks for Windows

* todos project was missing component index but has component testing configured

* Adding key to links to ensure attrs are cleaned up/reset

* Coercing boolean keys to strings to match vue key types
diff --git a/packages/frontend-shared/src/gql-components/HeaderBarContent.vue b/packages/frontend-shared/src/gql-components/HeaderBarContent.vue
@@ -26,7 +26,9 @@
             <li class="inline-block">
               <!-- context for use of aria role and disabled here: https://www.scottohara.me/blog/2021/05/28/disabled-links.html -->
               <!-- the `href` given here is a fake one provided for the sake of assistive technology. no actual routing is happening. -->
+              <!-- the `key` is used to ensure the role/href attrs are added and removed appropriately from the element. -->
               <a
+                :key="Boolean(hasLinkToProjects).toString()"
                 class="font-medium"
                 :class="hasLinkToProjects ? 'text-indigo-500 hocus-link-default' :
                   'text-gray-700'"
@@ -51,7 +53,9 @@
             <li class="inline-block">
               <!-- context for use of aria role and disabled here: https://www.scottohara.me/blog/2021/05/28/disabled-links.html -->
               <!-- the `href` given here is a fake one provided for the sake of assistive technology. no actual routing is happening. -->
+              <!-- the `key` is used to ensure the role/href attrs are added and removed appropriately from the element. -->
               <a
+                :key="Boolean(hasLinkToCurrentProject).toString()"
                 class="font-medium"
                 :role="hasLinkToCurrentProject ? undefined : 'link'"
                 :href="hasLinkToCurrentProject ? 'choose-testing-type' : undefined"
diff --git a/packages/launchpad/cypress/e2e/global-mode.cy.ts b/packages/launchpad/cypress/e2e/global-mode.cy.ts
@@ -152,7 +152,8 @@ describe('Launchpad: Global Mode', () => {
 
     it('updates breadcrumb when selecting a project and navigating back', () => {
       const getBreadcrumbLink = (name: string, options: { disabled: boolean } = { disabled: false }) => {
-        return cy.findByRole('link', { name }).should('have.attr', 'aria-disabled', options.disabled ? 'true' : 'false')
+        // The timeout is increased to account for variability in configuration load times in CI.
+        return cy.findByRole('link', { name, timeout: 10000 }).should('have.attr', 'aria-disabled', options.disabled ? 'true' : 'false')
       }
 
       const resetSpies = () => {
diff --git a/system-tests/projects/todos/cypress/support/component-index.html b/system-tests/projects/todos/cypress/support/component-index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>

Original file line number	Diff line number	Diff line change
`@@ -152,7 +152,8 @@ describe('Launchpad: Global Mode', () => {`
`152`	`152`
`153`	`153`	`it('updates breadcrumb when selecting a project and navigating back', () => {`
`154`	`154`	`const getBreadcrumbLink = (name: string, options: { disabled: boolean } = { disabled: false }) => {`
`155`		`- return cy.findByRole('link', { name }).should('have.attr', 'aria-disabled', options.disabled ? 'true' : 'false')`
	`155`	`+ // The timeout is increased to account for variability in configuration load times in CI.`
	`156`	`+ return cy.findByRole('link', { name, timeout: 10000 }).should('have.attr', 'aria-disabled', options.disabled ? 'true' : 'false')`
`156`	`157`	`}`
`157`	`158`
`158`	`159`	`const resetSpies = () => {`