diff --git a/package-lock.json b/package-lock.json index 9e7683fe..bd2b8b2f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,12 +9,12 @@ "version": "0.0.2", "license": "MIT", "dependencies": { - "@patternfly/react-core": "^6.4.0", - "@patternfly/react-icons": "^6.4.0", - "@patternfly/react-styles": "^6.4.0", + "@patternfly/react-core": "6.5.1", + "@patternfly/react-icons": "6.5.1", + "@patternfly/react-styles": "6.5.1", "react": "^18", "react-dom": "^18", - "sirv-cli": "^3.0.0" + "sirv-cli": "^3.0.1" }, "devDependencies": { "@testing-library/jest-dom": "^6.6.3", @@ -1458,15 +1458,15 @@ } }, "node_modules/@patternfly/react-core": { - "version": "6.4.0", - "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-6.4.0.tgz", - "integrity": "sha512-zMgJmcFohp2FqgAoZHg7EXZS7gnaFESquk0qIavemYI0FsqspVlzV2/PUru7w+86+jXfqebRhgubPRsv1eJwEg==", + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-6.5.1.tgz", + "integrity": "sha512-fFZ0hcIyHJO27hxbf53W3m2R11l0O9WxR7CusJXuCEaNMP31ULrhf5Pv6ROdTrrs39Kl/yPv+2QuxQfe/4e72g==", "license": "MIT", "dependencies": { - "@patternfly/react-icons": "^6.4.0", - "@patternfly/react-styles": "^6.4.0", - "@patternfly/react-tokens": "^6.4.0", - "focus-trap": "7.6.4", + "@patternfly/react-icons": "^6.5.1", + "@patternfly/react-styles": "^6.5.1", + "@patternfly/react-tokens": "^6.5.1", + "focus-trap": "7.6.6", "react-dropzone": "^14.3.5", "tslib": "^2.8.1" }, @@ -1476,9 +1476,9 @@ } }, "node_modules/@patternfly/react-icons": { - "version": "6.4.0", - "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-6.4.0.tgz", - "integrity": "sha512-SPjzatm73NUYv/BL6A/cjRA5sFQ15NkiyPAcT8gmklI7HY+ptd6/eg49uBDFmxTQcSwbb5ISW/R6wwCQBY2M+Q==", + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-6.5.1.tgz", + "integrity": "sha512-CnuPvTTs4MMWx8CAUkmnY690ouN1bbHjunsyXu3QxvGOmzbztP+wS4BdiLS8TIXOIH80Yb7KPhnF8VkA+CduOA==", "license": "MIT", "peerDependencies": { "react": "^17 || ^18 || ^19", @@ -1486,15 +1486,15 @@ } }, "node_modules/@patternfly/react-styles": { - "version": "6.4.0", - "resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-6.4.0.tgz", - "integrity": "sha512-EXmHA67s5sy+Wy/0uxWoUQ52jr9lsH2wV3QcgtvVc5zxpyBX89gShpqv4jfVqaowznHGDoL6fVBBrSe9BYOliQ==", + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-6.5.1.tgz", + "integrity": "sha512-yQMzUbbf6qYM/v3JbPvaCJTgxRbOKoEw229XZmnnM8gDvp8ECiI7LqihrAOK/NA6T6M3DDgsRMd2JurUBhPDEw==", "license": "MIT" }, "node_modules/@patternfly/react-tokens": { - "version": "6.4.0", - "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-6.4.0.tgz", - "integrity": "sha512-iZthBoXSGQ/+PfGTdPFJVulaJZI3rwE+7A/whOXPGp3Jyq3k6X52pr1+5nlO6WHasbZ9FyeZGqXf4fazUZNjbw==", + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-6.5.1.tgz", + "integrity": "sha512-zwepLsIQTL0Lf4R2/PIBOk1m+pm0hYVT3lktf2H4+Y87eRIifwMRb19c+pr4hj4ckGvHs+WxwjTfTj2Qqwn5rw==", "license": "MIT" }, "node_modules/@pkgr/core": { @@ -5981,12 +5981,12 @@ "dev": true }, "node_modules/focus-trap": { - "version": "7.6.4", - "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.6.4.tgz", - "integrity": "sha512-xx560wGBk7seZ6y933idtjJQc1l+ck+pI3sKvhKozdBV1dRZoKhkW5xoCaFv9tQiX5RH1xfSxjuNu6g+lmN/gw==", + "version": "7.6.6", + "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.6.6.tgz", + "integrity": "sha512-v/Z8bvMCajtx4mEXmOo7QEsIzlIOqRXTIwgUfsFOF9gEsespdbD0AkPIka1bSXZ8Y8oZ+2IVDQZePkTfEHZl7Q==", "license": "MIT", "dependencies": { - "tabbable": "^6.2.0" + "tabbable": "^6.3.0" } }, "node_modules/follow-redirects": { @@ -10381,9 +10381,10 @@ } }, "node_modules/sirv-cli": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/sirv-cli/-/sirv-cli-3.0.0.tgz", - "integrity": "sha512-p88yHl8DmTOUJroRiW2o9ezJc/YRLxphBydX2NGQc3naKBA09B3EM4Q/yaN8FYF0e50fRSZP7dyatr72b1u5Jw==", + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/sirv-cli/-/sirv-cli-3.0.1.tgz", + "integrity": "sha512-ICXaF2u6IQhLZ0EXF6nqUF4YODfSQSt+mGykt4qqO5rY+oIiwdg7B8w2PVDBJlQulaS2a3J8666CUoDoAuCGvg==", + "license": "MIT", "dependencies": { "console-clear": "^1.1.0", "get-port": "^5.1.1", @@ -10858,9 +10859,9 @@ } }, "node_modules/tabbable": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.3.0.tgz", - "integrity": "sha512-EIHvdY5bPLuWForiR/AN2Bxngzpuwn1is4asboytXtpTgsArc+WmSJKVLlhdh71u7jFcryDqB2A8lQvj78MkyQ==", + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.4.0.tgz", + "integrity": "sha512-05PUHKSNE8ou2dwIxTngl4EzcnsCDZGJ/iCLtDflR/SHB/ny14rXc+qU5P4mG9JkusiV7EivzY9Mhm55AzAvCg==", "license": "MIT" }, "node_modules/terser": { diff --git a/package.json b/package.json index 8ffb5994..a1eb75f2 100644 --- a/package.json +++ b/package.json @@ -68,12 +68,12 @@ "webpack-merge": "^6.0.1" }, "dependencies": { - "@patternfly/react-core": "^6.4.0", - "@patternfly/react-icons": "^6.4.0", - "@patternfly/react-styles": "^6.4.0", + "@patternfly/react-core": "6.5.1", + "@patternfly/react-icons": "6.5.1", + "@patternfly/react-styles": "6.5.1", "react": "^18", "react-dom": "^18", - "sirv-cli": "^3.0.0" + "sirv-cli": "^3.0.1" }, "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e" } diff --git a/src/app/AppLayout/AppLayout.tsx b/src/app/AppLayout/AppLayout.tsx index 2dac6501..c36b973e 100644 --- a/src/app/AppLayout/AppLayout.tsx +++ b/src/app/AppLayout/AppLayout.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import { NavLink, useLocation } from 'react-router-dom'; import { - Button, Masthead, MastheadBrand, MastheadLogo, @@ -14,6 +13,7 @@ import { Page, PageSidebar, PageSidebarBody, + PageToggleButton, SkipToContent, } from '@patternfly/react-core'; import { IAppRoute, IAppRouteGroup, routes } from '@app/routes'; @@ -24,20 +24,16 @@ interface IAppLayout { } const AppLayout: React.FunctionComponent = ({ children }) => { - const [sidebarOpen, setSidebarOpen] = React.useState(true); const masthead = ( -
- + + Profile + + + + + + + +
should render default App component 1`] = ` >

diff --git a/src/app/app.test.tsx b/src/app/app.test.tsx index 2804a998..574fd085 100644 --- a/src/app/app.test.tsx +++ b/src/app/app.test.tsx @@ -17,39 +17,16 @@ describe('App tests', () => { expect(screen.getByRole('button', { name: 'Global navigation' })).toBeVisible(); }); - // I'm fairly sure that this test not going to work properly no matter what we do since JSDOM doesn't actually - // draw anything. We could potentially make something work, likely using a different test environment, but - // using Cypress for this kind of test would be more efficient. - it.skip('should hide the sidebar on smaller viewports', () => { - Object.defineProperty(window, 'innerWidth', { writable: true, configurable: true, value: 600 }); - - render(); - - window.dispatchEvent(new Event('resize')); - - expect(screen.queryByRole('link', { name: 'Dashboard' })).not.toBeInTheDocument(); - }); - - it('should expand the sidebar on larger viewports', () => { - render(); - - window.dispatchEvent(new Event('resize')); - - expect(screen.getByRole('link', { name: 'Dashboard' })).toBeVisible(); - }); - - it('should hide the sidebar when clicking the nav-toggle button', async () => { + it('should toggle the sidebar when clicking the nav-toggle button', async () => { const user = userEvent.setup(); render(); - window.dispatchEvent(new Event('resize')); const button = screen.getByRole('button', { name: 'Global navigation' }); - - expect(screen.getByRole('link', { name: 'Dashboard' })).toBeVisible(); + const initialExpanded = button.getAttribute('aria-expanded'); await user.click(button); - expect(screen.queryByRole('link', { name: 'Dashboard' })).not.toBeInTheDocument(); + expect(button.getAttribute('aria-expanded')).not.toBe(initialExpanded); }); });