Skip to content

Commit 81f1b42

Browse files
author
Rachel
authored
fix: only show active router link styles on parent page (#22069)
1 parent ce647c2 commit 81f1b42

File tree

10 files changed

+64
-44
lines changed

10 files changed

+64
-44
lines changed

‎packages/app/cypress/e2e/cypress-in-cypress-component.cy.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -182,10 +182,10 @@ describe('Cypress In Cypress CT', { viewportWidth: 1500, defaultCommandTimeout:
182182
cy.get('.passed > .num').should('contain', 1)
183183
cy.get('.failed > .num').should('contain', '--')
184184

185-
cy.get('[href="#/runs"]').click()
185+
cy.findByTestId('sidebar-link-runs-page').click()
186186
cy.get('[data-cy="app-header-bar"]').findByText('Runs').should('be.visible')
187187

188-
cy.get('[href="#/specs"]').click()
188+
cy.findByTestId('sidebar-link-specs-page').click()
189189
cy.get('[data-cy="app-header-bar"]').findByText('Specs').should('be.visible')
190190

191191
cy.contains('TestComponent.spec').click()

‎packages/app/cypress/e2e/cypress-in-cypress-e2e.cy.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -233,10 +233,10 @@ describe('Cypress In Cypress E2E', { viewportWidth: 1500, defaultCommandTimeout:
233233
cy.get('.passed > .num').should('contain', 1)
234234
cy.get('.failed > .num').should('contain', '--')
235235

236-
cy.get('[href="#/runs"]').click()
236+
cy.findByTestId('sidebar-link-runs-page').click()
237237
cy.get('[data-cy="app-header-bar"]').findByText('Runs').should('be.visible')
238238

239-
cy.get('[href="#/specs"]').click()
239+
cy.findByTestId('sidebar-link-specs-page').click()
240240
cy.get('[data-cy="app-header-bar"]').findByText('Specs').should('be.visible')
241241

242242
cy.contains('dom-content.spec').click()

‎packages/app/cypress/e2e/cypress-origin-communicator.cy.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ describe('Cypress In Cypress Origin Communicator', () => {
9797
// make sure duplicate logs are not present
9898
cy.get('.command-name-origin').find('.command-name-log').should('have.length', 2)
9999

100-
cy.get('a[href="#/specs"]').click()
100+
cy.findByTestId('sidebar-link-specs-page').click()
101101
cy.location('hash').should('include', '/specs')
102102

103103
cy.contains('simple_origin.cy').click()

‎packages/app/cypress/e2e/runs.cy.ts‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ function scaffoldTestingTypeAndVisitRunsPage (testingType: 'e2e' | 'component')
1919

2020
cy.visitApp()
2121

22-
return cy.get('[href="#/runs"]').click()
22+
return cy.findByTestId('sidebar-link-runs-page').click()
2323
}
2424

2525
describe('App: Runs', { viewportWidth: 1200 }, () => {
@@ -47,7 +47,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
4747
})
4848

4949
cy.visitApp()
50-
cy.get('[href="#/runs"]').click()
50+
cy.findByTestId('sidebar-link-runs-page').click()
5151
cy.get('[data-cy="runs-loader"]')
5252
cy.get('[data-cy="runs"]')
5353
})
@@ -62,13 +62,13 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
6262

6363
it('when logged out, shows call to action', () => {
6464
cy.visitApp()
65-
cy.get('[href="#/runs"]').click()
65+
cy.findByTestId('sidebar-link-runs-page').click()
6666
cy.contains(defaultMessages.runs.connect.buttonUser).should('exist')
6767
})
6868

6969
it('clicking the login button will open the login modal', () => {
7070
cy.visitApp()
71-
cy.get('[href="#/runs"]').click()
71+
cy.findByTestId('sidebar-link-runs-page').click()
7272
cy.contains('Log In').click()
7373
cy.findByRole('dialog', { name: 'Log in to Cypress' }).within(() => {
7474
cy.get('button').contains('Log In')
@@ -79,7 +79,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
7979
cy.loginUser()
8080
cy.visitApp()
8181

82-
cy.get('[href="#/runs"]').click()
82+
cy.findByTestId('sidebar-link-runs-page').click()
8383
cy.contains('a', 'OVERLIMIT').click()
8484

8585
cy.withCtx((ctx) => {
@@ -105,7 +105,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
105105
return obj.result
106106
})
107107

108-
cy.get('[href="#/runs"]').click()
108+
cy.findByTestId('sidebar-link-runs-page').click()
109109

110110
cy.findByText(defaultMessages.runs.connect.buttonProject).click()
111111
cy.get('[aria-modal="true"]').should('exist')
@@ -145,7 +145,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
145145
return obj.result
146146
})
147147

148-
cy.get('[href="#/runs"]').click()
148+
cy.findByTestId('sidebar-link-runs-page').click()
149149

150150
cy.findByText(defaultMessages.runs.connect.buttonProject).click()
151151
cy.get('[aria-modal="true"]').should('exist')
@@ -175,7 +175,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
175175
return obj.result
176176
})
177177

178-
cy.get('[href="#/runs"]').click()
178+
cy.findByTestId('sidebar-link-runs-page').click()
179179
cy.findByText(defaultMessages.runs.connect.buttonProject).click()
180180
cy.get('[aria-modal="true"]').should('exist')
181181

@@ -217,7 +217,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
217217
expect(config.projectId).to.not.equal('newProjectId')
218218
})
219219

220-
cy.get('[href="#/runs"]').click()
220+
cy.findByTestId('sidebar-link-runs-page').click()
221221
cy.findByText(defaultMessages.runs.connect.buttonProject).click()
222222
cy.get('button').contains(defaultMessages.runs.connect.modal.selectProject.createProject).click()
223223
cy.findByText(defaultMessages.runs.connectSuccessAlert.title).should('be.visible')
@@ -263,7 +263,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
263263

264264
cy.visitApp()
265265

266-
cy.get('[href="#/runs"]').click()
266+
cy.findByTestId('sidebar-link-runs-page').click()
267267
})
268268

269269
it('if project Id is specified in config file that does not exist, shows call to action', () => {
@@ -389,7 +389,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
389389

390390
cy.visitApp()
391391

392-
cy.get('[href="#/runs"]').click()
392+
cy.findByTestId('sidebar-link-runs-page').click()
393393
})
394394

395395
it('if project Id is specified in config file that is not accessible, shows call to action', () => {
@@ -415,7 +415,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
415415
})
416416

417417
cy.visitApp()
418-
cy.get('[href="#/runs"]').click()
418+
cy.findByTestId('sidebar-link-runs-page').click()
419419
cy.findByText(defaultMessages.runs.connect.buttonProject).should('exist')
420420
})
421421

@@ -471,14 +471,14 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
471471
it('displays a list of recorded runs if a run has been recorded', () => {
472472
cy.loginUser()
473473
cy.visitApp()
474-
cy.get('[href="#/runs"]').click()
474+
cy.findByTestId('sidebar-link-runs-page').click()
475475
cy.get('[data-cy="runs"]')
476476
})
477477

478478
it('displays each run with correct information', () => {
479479
cy.loginUser()
480480
cy.visitApp()
481-
cy.get('[href="#/runs"]').click()
481+
cy.findByTestId('sidebar-link-runs-page').click()
482482

483483
cy.get('[href="http://dummy.cypress.io/runs/0"]').first().within(() => {
484484
cy.findByText('fix: make gql work CANCELLED')
@@ -515,7 +515,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
515515
cy.loginUser()
516516
cy.visitApp()
517517

518-
cy.get('[href="#/runs"]').click()
518+
cy.findByTestId('sidebar-link-runs-page').click()
519519
cy.get('[data-cy^="runCard-"]').first().click()
520520

521521
cy.withCtx((ctx) => {
@@ -540,7 +540,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
540540
return obj.result
541541
})
542542

543-
cy.get('[href="#/runs"]').click()
543+
cy.findByTestId('sidebar-link-runs-page').click()
544544
cy.contains('h2', 'Cannot connect to the Cypress Dashboard')
545545
cy.percySnapshot()
546546

@@ -571,7 +571,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
571571
cy.loginUser()
572572
cy.visitApp()
573573
cy.wait(1000)
574-
cy.get('[href="#/runs"]').click()
574+
cy.findByTestId('sidebar-link-runs-page').click()
575575
cy.get('[data-cy="runs"]')
576576

577577
cy.goOffline()
@@ -585,7 +585,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
585585
cy.loginUser()
586586
cy.visitApp()
587587
cy.wait(1000)
588-
cy.get('[href="#/runs"]').click()
588+
cy.findByTestId('sidebar-link-runs-page').click()
589589
cy.get('[data-cy="runs"]')
590590

591591
cy.goOffline()
@@ -696,10 +696,10 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
696696
cy.get('[data-cy="run-card-icon-RUNNING"]').should('have.length', 2).should('be.visible')
697697

698698
// If we navigate away & back, we should see the same runs
699-
cy.get('[href="#/settings"]').click()
699+
cy.findByTestId('sidebar-link-settings-page').click()
700700
cy.remoteGraphQLIntercept((obj) => obj.result)
701701

702-
cy.get('[href="#/runs"]').click()
702+
cy.findByTestId('sidebar-link-runs-page').click()
703703

704704
cy.get('[data-cy="run-card-icon-PASSED"]').should('have.length', 3).should('be.visible')
705705
cy.get('[data-cy="run-card-icon-RUNNING"]').should('have.length', 2).should('be.visible')

‎packages/app/cypress/e2e/settings.cy.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ describe('App: Settings', () => {
9999
cy.waitForSpecToFinish()
100100
// Wait for the test to pass, so the test is completed
101101
cy.get('.passed > .num').should('contain', 1)
102-
cy.get('[href="#/settings"]').click()
102+
cy.findByTestId('sidebar-link-settings-page').click()
103103
cy.contains('Dashboard Settings').click()
104104
// Assert the data is not there before it arrives
105105
cy.contains('Record Key').should('not.exist')
@@ -114,18 +114,18 @@ describe('App: Settings', () => {
114114
o.sinon.spy(ctx.actions.auth, 'logout')
115115
})
116116

117-
cy.get('[href="#/settings"]').click()
117+
cy.findByTestId('sidebar-link-settings-page').click()
118118
cy.contains('Dashboard Settings').click()
119119
cy.contains('Record Key').should('exist')
120-
cy.get('[href="#/runs"]').click()
120+
cy.findByTestId('sidebar-link-runs-page').click()
121121
cy.findByTestId('user-avatar-title').click()
122122
cy.findByRole('button', { name: 'Log Out' }).click()
123123

124124
cy.withRetryableCtx((ctx, o) => {
125125
expect(ctx.actions.auth.logout).to.have.been.calledOnce
126126
})
127127

128-
cy.get('[href="#/settings"]').click()
128+
cy.findByTestId('sidebar-link-settings-page').click()
129129
cy.contains('Dashboard Settings').click()
130130
cy.contains('Record Key').should('not.exist')
131131
})
@@ -345,7 +345,7 @@ describe('App: Settings', () => {
345345
// navigate away and come back
346346
// preferred editor selected from dropdown should have been persisted
347347
cy.visitApp()
348-
cy.get('[href="#/settings"]').click()
348+
cy.findByTestId('sidebar-link-settings-page').click()
349349
cy.wait(200)
350350
cy.get('[data-cy="Device Settings"]').click()
351351

@@ -366,7 +366,7 @@ describe('App: Settings', () => {
366366

367367
// navigate away and come back
368368
// preferred editor entered from input should have been persisted
369-
cy.get('[href="#/settings"]').click()
369+
cy.findByTestId('sidebar-link-settings-page').click()
370370
cy.wait(100)
371371
cy.get('[data-cy="Device Settings"]').click()
372372

@@ -394,7 +394,7 @@ describe('App: Settings', () => {
394394
// navigate away and come back
395395
// preferred editor selected from dropdown should have been persisted
396396
cy.visitApp()
397-
cy.get('[href="#/settings"]').click()
397+
cy.findByTestId('sidebar-link-settings-page').click()
398398
cy.wait(200)
399399
cy.get('[data-cy="Device Settings"]').click()
400400

‎packages/app/cypress/e2e/sidebar_navigation.cy.ts‎

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -137,17 +137,17 @@ describe('Sidebar Navigation', () => {
137137
cy.percySnapshot()
138138
cy.findByTestId('sidebar-header').trigger('mouseout')
139139

140-
cy.get('[href="#/runs"]').trigger('mouseenter')
140+
cy.findByTestId('sidebar-link-runs-page').trigger('mouseenter')
141141
cy.contains('.v-popper--some-open--tooltip', 'Runs')
142-
cy.get('[href="#/runs"]').trigger('mouseout')
142+
cy.findByTestId('sidebar-link-runs-page').trigger('mouseout')
143143

144-
cy.get('[href="#/specs"]').trigger('mouseenter')
144+
cy.findByTestId('sidebar-link-specs-page').trigger('mouseenter')
145145
cy.contains('.v-popper--some-open--tooltip', 'Specs')
146-
cy.get('[href="#/specs"]').trigger('mouseout')
146+
cy.findByTestId('sidebar-link-specs-page').trigger('mouseout')
147147

148-
cy.get('[href="#/settings"]').trigger('mouseenter')
148+
cy.findByTestId('sidebar-link-settings-page').trigger('mouseenter')
149149
cy.contains('.v-popper--some-open--tooltip', 'Settings')
150-
cy.get('[href="#/settings"]').trigger('mouseout')
150+
cy.findByTestId('sidebar-link-settings-page').trigger('mouseout')
151151
})
152152

153153
it('opens the left nav bar when clicking the expand button (if unexpanded)', () => {
@@ -235,6 +235,20 @@ describe('Sidebar Navigation', () => {
235235
cy.get('.router-link-active').findByText('Specs').should('be.visible')
236236
})
237237

238+
it('Specs sidebar nav link is not active when a test is running', () => {
239+
cy.location('hash').should('equal', '#/specs')
240+
cy.contains('.router-link-exact-active', 'Specs')
241+
242+
cy.findAllByTestId('spec-item').first().click()
243+
cy.location('hash').should('contain', '#/specs/runner')
244+
cy.contains('.router-link-exact-active', 'Specs').should('not.exist')
245+
cy.percySnapshot()
246+
247+
cy.findByTestId('sidebar-link-specs-page').click()
248+
cy.location('hash').should('equal', '#/specs')
249+
cy.contains('.router-link-exact-active', 'Specs')
250+
})
251+
238252
it('has a menu item labeled "Settings" which takes you to the Settings page', () => {
239253
cy.findByTestId('app-header-bar').findByText('Settings').should('not.exist')
240254
cy.findByText('Settings').should('be.visible')

‎packages/app/cypress/e2e/subscriptions/createCloudOrgModal-subscription.cy.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
2828
return obj.result
2929
})
3030

31-
cy.get('[href="#/runs"]').click()
31+
cy.findByTestId('sidebar-link-runs-page').click()
3232

3333
cy.findByText(defaultMessages.runs.connect.buttonProject).click()
3434
cy.get('[aria-modal="true"]').should('exist')

‎packages/app/cypress/e2e/top-nav.cy.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -382,7 +382,7 @@ describe('App Top Nav Workflows', () => {
382382
cy.findByTestId('login-panel').contains('Test User').should('be.visible')
383383
cy.findByTestId('login-panel').contains('test@example.com').should('be.visible')
384384

385-
cy.get('[href="#/runs"]').click()
385+
cy.findByTestId('sidebar-link-runs-page').click()
386386
cy.get('@logInButton').click()
387387

388388
cy.findByTestId('app-header-bar').within(() => {

‎packages/app/src/navigation/SidebarNavigation.cy.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,9 @@ describe('SidebarNavigation', () => {
3737
cy.contains('.v-popper--some-open--tooltip', 'test-project').should('be.visible')
3838
cy.findByTestId('sidebar-header').trigger('mouseout')
3939

40-
cy.get('[href="#/runs"]').trigger('mouseenter')
40+
cy.findByTestId('sidebar-link-runs-page').trigger('mouseenter')
4141
cy.contains('.v-popper--some-open--tooltip', 'Runs').should('be.visible')
42-
cy.get('[href="#/runs"]').trigger('mouseout')
42+
cy.findByTestId('sidebar-link-runs-page').trigger('mouseout')
4343
cy.percySnapshot()
4444
})
4545

@@ -55,4 +55,9 @@ describe('SidebarNavigation', () => {
5555
cy.findByTestId('keyboard-modal-trigger').focus().type('{enter}')
5656
cy.findByTestId('keyboard-modal').should('be.visible')
5757
})
58+
59+
it('uses exact match for router link active class', () => {
60+
mountComponent()
61+
cy.findByTestId('sidebar-link-specs-page').should('have.class', 'router-link-exact-active')
62+
})
5863
})

‎packages/app/src/navigation/SidebarNavigation.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,12 +38,13 @@
3838
>
3939
<RouterLink
4040
v-for="item in navigation"
41-
v-slot="{ isActive }"
41+
v-slot="{ isExactActive }"
4242
:key="item.name"
4343
:to="item.href"
44+
:data-cy="`sidebar-link-${item.name.toLowerCase()}-page`"
4445
>
4546
<SidebarNavigationRow
46-
:active="isActive"
47+
:active="isExactActive"
4748
:icon="item.icon"
4849
:name="item.name"
4950
:is-nav-bar-expanded="isNavBarExpanded"

0 commit comments

Comments
 (0)