diff --git a/packages/console/src/containers/ConsoleContent/Sidebar/index.tsx b/packages/console/src/containers/ConsoleContent/Sidebar/index.tsx index 90b320d1b..3cb525f7f 100644 --- a/packages/console/src/containers/ConsoleContent/Sidebar/index.tsx +++ b/packages/console/src/containers/ConsoleContent/Sidebar/index.tsx @@ -27,7 +27,7 @@ function Sidebar() { key={title} titleKey={title} icon={} - isActive={match(getPath(title))} + isActive={match('/' + getPath(title))} modal={modal} externalLink={externalLink} /> diff --git a/packages/integration-tests/src/tests/console/bootstrap.test.ts b/packages/integration-tests/src/tests/console/bootstrap.test.ts index 8f39dd103..dbd94c31e 100644 --- a/packages/integration-tests/src/tests/console/bootstrap.test.ts +++ b/packages/integration-tests/src/tests/console/bootstrap.test.ts @@ -7,7 +7,7 @@ import { consoleUsername, logtoConsoleUrl as logtoConsoleUrlString, } from '#src/constants.js'; -import { appendPathname, expectNavigation } from '#src/utils.js'; +import { appendPathname, cls, dcls, expectNavigation } from '#src/utils.js'; /** * NOTE: This test suite assumes test cases will run sequentially (which is Jest default). @@ -121,4 +121,18 @@ describe('smoke testing for console admin account creation and sign-in', () => { it('renders SVG correctly with viewbox property', async () => { await page.waitForSelector('div[class$=topbar] > svg[viewbox][class$=logo]', { visible: true }); }); + + it('can highlight the current tab in the sidebar', async () => { + const activeSelector = [dcls('sidebar'), 'a' + cls('row') + cls('active'), dcls('title')].join( + ' ' + ); + + await expect(page).toMatchElement(activeSelector, { text: 'Applications', visible: true }); + await expectNavigation( + expect(page).toClick([dcls('sidebar'), 'a' + cls('row')].join(' '), { + text: 'Dashboard', + }) + ); + await expect(page).toMatchElement(activeSelector, { text: 'Dashboard', visible: true }); + }); });