qpp-style 9.52.0 → 9.53.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qpp-style",
-  "version": "9.52.0",
+  "version": "9.53.0",
   "description": "Shared style guide across the QPP program.",
   "main": "dist/index.js",
   "homepage": "https://cmsgov.github.io/qpp-style",
@@ -19,41 +19,41 @@
     "lint": "eslint 'components/**/*.{js,jsx}'"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "^7.28.6",
+    "@babel/eslint-parser": "^7.29.7",
     "@svgr/webpack": "^8.0.1",
     "@testing-library/react": "^16.3.2",
-    "@types/node": "^24.12.2",
+    "@types/node": "^24.13.3",
     "@types/webpack": "^5.28.5",
-    "autoprefixer": "^10.5.0",
-    "babel-jest": "^30.3.0",
+    "autoprefixer": "^10.5.2",
+    "babel-jest": "^30.4.1",
     "babel-loader": "^10.1.1",
     "babel-plugin-transform-es2015-modules-umd": "^6.24.1",
     "copy-webpack-plugin": "^14.0.0",
     "css-loader": "^7.1.4",
-    "eslint": "^9.39.4",
+    "eslint": "^9.39.5",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-babel": "^5.3.1",
-    "eslint-plugin-prettier": "^5.5.5",
+    "eslint-plugin-prettier": "^5.5.6",
     "eslint-plugin-react": "^7.37.5",
     "eslint-webpack-plugin": "^6.0.0",
     "gh-pages": "^6.3.0",
     "husky": "^9.1.7",
-    "jest": "^30.3.0",
-    "jest-environment-jsdom": "^30.3.0",
+    "jest": "^30.4.2",
+    "jest-environment-jsdom": "^30.4.1",
     "jsonwebtoken": "^9.0.3",
     "lint-staged": "^16.4.0",
     "mini-css-extract-plugin": "^2.10.2",
-    "prettier": "^3.8.3",
+    "prettier": "^3.9.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "rimraf": "^6.1.3",
-    "sass": "^1.99.0",
-    "sass-loader": "^16.0.7",
+    "sass": "^1.101.0",
+    "sass-loader": "^16.0.8",
     "style-loader": "^4.0.0",
     "svgo": "^4.0.1",
     "svgo-loader": "^4.0.0",
-    "terser-webpack-plugin": "^5.4.0",
-    "webpack": "^5.106.2",
+    "terser-webpack-plugin": "^5.6.1",
+    "webpack": "^5.108.4",
     "webpack-cli": "^6.0.1"
   },
   "lint-staged": {
@@ -84,7 +84,7 @@
     "url": "https://github.com/CMSgov/qpp-style/issues"
   },
   "dependencies": {
-    "@ariakit/react": "^0.4.25",
+    "@ariakit/react": "^0.4.32",
     "@material-design-icons/svg": "^0.14.15",
     "cookie": "^1.1.1",
     "jwt-decode": "^4.0.0",

package/test/components/SideNavUI.test.js

@@ -1,9 +1,16 @@
-import { render } from '@testing-library/react';
+import { render, fireEvent, waitFor, screen } from '@testing-library/react';
 import jwt from 'jsonwebtoken';
 
 import { SideNavUI } from '../../components/SideNav/UI';
 
 describe('SideNavUI', () => {
+  afterEach(() => {
+    localStorage.clear();
+    document.cookie = 'selected_role=; expires=Thu, 01 Jan 1970 00:00:00 UTC; Path=/;';
+    delete global.fetch;
+    window.history.pushState({}, '', '/');
+  });
+
   it('renders the sidebar HTML', () => {
     const token = jwt.sign(
       {
@@ -19,4 +26,84 @@ describe('SideNavUI', () => {
     const { container } = render(<SideNavUI svgIcons="" />);
     expect(container.querySelector('aside')).toBeDefined();
   });
+
+  it('re-fetches /config/side-navigation with the new role when the role stays on the same page', async () => {
+    localStorage.setItem('selectedUserRole', 'QPP User');
+    const sideNavOptions = [
+      { name: 'QPP User', value: 'QPP User' },
+      { name: 'Reviewer', value: 'Reviewer' },
+    ];
+    global.fetch = jest.fn().mockResolvedValue({
+      json: () =>
+        Promise.resolve({
+          markup: '<nav>content</nav>',
+          sideNavOptions,
+          hasMultipleRoles: true,
+        }),
+    });
+
+    // Reviewer's default page is /user/reviewers - starting there means
+    // selecting Reviewer will NOT trigger a redirect, so the in-place
+    // refetch should still happen.
+    window.history.pushState({}, '', '/user/reviewers');
+
+    render(<SideNavUI svgIcons="" />);
+
+    await waitFor(() => expect(global.fetch).toHaveBeenCalled());
+
+    const dropdown = await screen.findByLabelText('Select User Role');
+    global.fetch.mockClear();
+
+    fireEvent.change(dropdown, { target: { value: 'Reviewer' } });
+
+    await waitFor(() =>
+      expect(global.fetch).toHaveBeenCalledWith(
+        expect.stringContaining('/config/side-navigation?role=Reviewer')
+      )
+    );
+  });
+
+  it('skips the in-place refetch when the role change triggers a redirect to a different page', async () => {
+    localStorage.setItem('selectedUserRole', 'QPP User');
+    const sideNavOptions = [
+      { name: 'QPP User', value: 'QPP User' },
+      { name: 'Reviewer', value: 'Reviewer' },
+    ];
+    global.fetch = jest.fn().mockResolvedValue({
+      json: () =>
+        Promise.resolve({
+          markup: '<nav>content</nav>',
+          sideNavOptions,
+          hasMultipleRoles: true,
+        }),
+    });
+
+    // QPP User's default page is /user/submissions, which differs from
+    // Reviewer's default page (/user/reviewers), so selecting Reviewer
+    // triggers a redirect (redirectPage calls window.location.assign, which
+    // jsdom doesn't implement and logs a benign "not implemented" error -
+    // that's expected here and safe to ignore). The remount that follows a
+    // real page navigation is responsible for fetching fresh config, so no
+    // in-place refetch should occur in this component during the redirect.
+    const consoleErrorSpy = jest
+      .spyOn(console, 'error')
+      .mockImplementation(() => {});
+    window.history.pushState({}, '', '/user/submissions');
+
+    render(<SideNavUI svgIcons="" />);
+
+    await waitFor(() => expect(global.fetch).toHaveBeenCalled());
+
+    const dropdown = await screen.findByLabelText('Select User Role');
+    global.fetch.mockClear();
+
+    fireEvent.change(dropdown, { target: { value: 'Reviewer' } });
+
+    // Give any (incorrect) in-place refetch a chance to fire before asserting
+    // it didn't.
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(global.fetch).not.toHaveBeenCalled();
+
+    consoleErrorSpy.mockRestore();
+  });
 });