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

* 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
cypress-io · Jun 27, 2022 · 24052eb · 24052eb · cypress-bot · Jun 27, 2022
1 parent fac83fd
commit 24052eb
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 1 deletion.
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>