qpp-style 9.34.3 → 9.34.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qpp-style",
-  "version": "9.34.3",
+  "version": "9.34.4",
   "description": "Shared style guide across the QPP program.",
   "main": "dist/index.js",
   "homepage": "https://cmsgov.github.io/qpp-style",
@@ -21,46 +21,40 @@
     "format-styles": "prettier 'styles/**/*.{css,scss}' --write --quiet"
   },
   "devDependencies": {
-    "@babel/cli": "^7.22.9",
-    "@babel/core": "^7.22.9",
-    "@babel/eslint-parser": "^7.22.9",
-    "@babel/preset-env": "^7.22.9",
-    "@babel/preset-react": "^7.22.5",
-    "@babel/register": "^7.22.5",
+    "@babel/eslint-parser": "^7.22.15",
     "@svgr/webpack": "^8.0.1",
     "@testing-library/react": "^14.0.0",
+    "@types/node": "^20.8.4",
+    "@types/webpack": "^5.28.3",
     "autoprefixer": "^10.4.14",
     "babel-jest": "^29.6.1",
     "babel-loader": "^9.1.3",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-es2015-modules-umd": "^6.24.1",
-    "chai": "^4.3.7",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.8.1",
-    "eslint": "^8.45.0",
-    "eslint-config-prettier": "^8.8.0",
+    "eslint": "^8.51.0",
+    "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-babel": "^5.3.1",
     "eslint-plugin-prettier": "^5.0.0",
-    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-webpack-plugin": "^4.0.1",
     "feather-icons-react": "^0.6.2",
-    "gh-pages": "^5.0.0",
+    "gh-pages": "^6.0.0",
     "husky": "^8.0.3",
     "jest": "^29.6.1",
     "jest-environment-jsdom": "^29.6.1",
-    "jsonwebtoken": "^9.0.1",
+    "jsonwebtoken": "^9.0.2",
     "mini-css-extract-plugin": "^2.7.6",
     "moxios": "^0.4.0",
-    "preact": "^10.16.0",
+    "preact": "^10.18.1",
     "prettier": "^3.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-test-renderer": "^18.2.0",
-    "regenerator-runtime": "^0.13.11",
-    "rimraf": "^5.0.1",
-    "sass": "^1.63.6",
+    "rimraf": "^5.0.5",
+    "sass": "^1.69.0",
     "sass-loader": "^13.3.2",
-    "sinon": "^15.0.3",
     "style-loader": "^3.3.3",
     "svgo": "^3.0.2",
     "svgo-loader": "^4.0.0",
@@ -86,9 +80,9 @@
     "url": "https://github.com/CMSgov/qpp-style/issues"
   },
   "dependencies": {
-    "@material-design-icons/svg": "^0.14.11",
+    "@material-design-icons/svg": "^0.14.13",
     "ariakit": "^2.0.0-next.44",
-    "axios": "^1.5.0",
+    "axios": "^1.5.1",
     "cookie": "^0.5.0",
     "jwt-decode": "^3.1.2",
     "prop-types": "^15.8.1",

package/test/components/FooterUI.test.js

@@ -1,8 +1,7 @@
-import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-import ReactTestUtils from 'react-dom/test-utils';
-import { expect } from 'chai';
-import FooterUI from '../../components/Footer/FooterUI';
+import React, { Component } from "react";
+import ReactDOM from "react-dom";
+import ReactTestUtils from "react-dom/test-utils";
+import FooterUI from "../../components/Footer/FooterUI";
 
 class Wrapper extends Component {
   render() {
@@ -10,51 +9,51 @@ class Wrapper extends Component {
   }
 }
 
-describe('FooterUI', () => {
-  it('renders the footer HTML', () => {
+describe("FooterUI", () => {
+  it("renders the footer HTML", () => {
     // Native elements and functional stateless react components don't have public instances and
     // cannot be used with renderIntoDocument. React has a separate package install for a shallow
     // renderer that allows this. Otherwise, you need a wrapper when testing presentational components.
     const component = ReactTestUtils.renderIntoDocument(
       <Wrapper>
         <FooterUI />
-      </Wrapper>
+      </Wrapper>,
     );
     const footer = ReactTestUtils.findRenderedDOMComponentWithTag(
       component,
-      'footer'
+      "footer",
     );
     const footerNode = ReactDOM.findDOMNode(footer);
-    expect(ReactTestUtils.isDOMComponent(footerNode)).to.be.true;
+    expect(ReactTestUtils.isDOMComponent(footerNode)).toBe(true);
   });
 });
 
-describe('renders the footer properly in the non-authenticated experience', () => {
-  it('renders by default the non-authenticated experience', () => {
+describe("renders the footer properly in the non-authenticated experience", () => {
+  it("renders by default the non-authenticated experience", () => {
     const component = ReactTestUtils.renderIntoDocument(
       <Wrapper>
         <FooterUI />
-      </Wrapper>
+      </Wrapper>,
     );
     const isNotFullWidth = ReactTestUtils.scryRenderedDOMComponentsWithClass(
       component,
-      'responsive-container'
+      "responsive-container",
     )[1];
     const isNotFullWidthNode = ReactDOM.findDOMNode(isNotFullWidth);
-    expect(ReactTestUtils.isDOMComponent(isNotFullWidthNode)).to.be.true;
+    expect(ReactTestUtils.isDOMComponent(isNotFullWidthNode)).toBe(true);
   });
 
-  it('explicitly renders the non-authenticated experience', () => {
+  it("explicitly renders the non-authenticated experience", () => {
     const component = ReactTestUtils.renderIntoDocument(
       <Wrapper>
         <FooterUI isFullWidth={false} />
-      </Wrapper>
+      </Wrapper>,
     );
     const isNotFullWidth = ReactTestUtils.scryRenderedDOMComponentsWithClass(
       component,
-      'responsive-container'
+      "responsive-container",
     )[1];
     const isNotFullWidthNode = ReactDOM.findDOMNode(isNotFullWidth);
-    expect(ReactTestUtils.isDOMComponent(isNotFullWidthNode)).to.be.true;
+    expect(ReactTestUtils.isDOMComponent(isNotFullWidthNode)).toBe(true);
   });
 });

package/test/components/Infotip.test.js

@@ -1,15 +1,13 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { act, Simulate } from 'react-dom/test-utils';
-import { expect } from 'chai';
-import { spy } from 'sinon';
-import Infotip from '../../components/Infotip';
+import React from "react";
+import ReactDOM from "react-dom";
+import { act, Simulate } from "react-dom/test-utils";
+import Infotip from "../../components/Infotip";
 
-describe('Infotip', () => {
+describe("Infotip", () => {
   let container;
 
   beforeEach(() => {
-    container = document.createElement('div');
+    container = document.createElement("div");
     document.body.appendChild(container);
   });
 
@@ -18,51 +16,51 @@ describe('Infotip', () => {
     container = null;
   });
 
-  it('renders an svg icon for tooltip anchor', () => {
+  it("renders an svg icon for tooltip anchor", () => {
     act(() => {
       ReactDOM.render(<Infotip label="tooltip text" />, container);
     });
-    const svg = container.querySelector('svg');
-    expect(svg).to.be.ok;
+    const svg = container.querySelector("svg");
+    expect(svg).toBeTruthy();
   });
 
-  it('renders white icon when lightIcon prop is true', () => {
+  it("renders white icon when lightIcon prop is true", () => {
     act(() => {
       ReactDOM.render(<Infotip lightIcon label="tooltip text" />, container);
     });
-    const paths = container.querySelectorAll('path');
-    expect(paths[1].getAttribute('fill')).to.equal('#FFF');
-    expect(paths[2].getAttribute('fill')).to.equal('#0073C8');
+    const paths = container.querySelectorAll("path");
+    expect(paths[1].getAttribute("fill")).toBe("#FFF");
+    expect(paths[2].getAttribute("fill")).toBe("#0073C8");
   });
 
   it('overrides "touchstart" events for button', () => {
     act(() => {
       ReactDOM.render(<Infotip label="tooltip text" />, container);
     });
-    const button = container.querySelector('button');
-    const stopPropagation = spy();
+    const button = container.querySelector("button");
+    const stopPropagation = jest.fn();
     act(() => {
       Simulate.touchStart(button, { stopPropagation });
-    })
-    expect(stopPropagation.called).to.be.true;
+    });
+    expect(stopPropagation).toHaveBeenCalled();
   });
 
   it('uses "touchend" event on button to prevent default and toggle focus', () => {
     act(() => {
       ReactDOM.render(<Infotip label="tooltip text" />, container);
     });
-    const button = container.querySelector('button');
-    const preventDefault = spy();
-    const focus = spy(button, 'focus');
-    const blur = spy(button, 'blur');
+    const button = container.querySelector("button");
+    const preventDefault = jest.fn();
+    const focus = jest.spyOn(button, "focus");
+    const blur = jest.spyOn(button, "blur");
     act(() => {
       Simulate.touchEnd(button, {
         preventDefault,
       });
-    })
-    expect(preventDefault.calledOnce).to.be.true;
-    expect(button.focus.calledOnce).to.be.true;
-    expect(button.blur.calledOnce).to.be.false;
+    });
+    expect(preventDefault).toHaveBeenCalledTimes(1);
+    expect(button.focus).toHaveBeenCalledTimes(1);
+    expect(button.blur).not.toHaveBeenCalled();
     act(() => {
       Simulate.touchEnd(button, {
         preventDefault,
@@ -71,9 +69,9 @@ describe('Infotip', () => {
           blur,
         },
       });
-    })
-    expect(preventDefault.calledTwice).to.be.true;
-    expect(focus.calledOnce).to.be.true;
-    expect(blur.calledOnce).to.be.true;
+    });
+    expect(preventDefault).toHaveBeenCalledTimes(2);
+    expect(focus).toHaveBeenCalledTimes(1);
+    expect(blur).toHaveBeenCalledTimes(1);
   });
 });

package/test/session/session.test.js

@@ -1,9 +1,8 @@
-import moxios from 'moxios';
-import sinon from 'sinon';
-import { fetchTtl, RefreshSession, LogoutSession } from '../../session';
+import moxios from "moxios";
+import { fetchTtl, RefreshSession, LogoutSession } from "../../session";
 
-describe('Session management', () => {
-  describe.skip('Fetch TTL', () => {
+describe("Session management", () => {
+  describe.skip("Fetch TTL", () => {
     beforeEach(() => {
       moxios.install();
     });
@@ -12,12 +11,12 @@ describe('Session management', () => {
       moxios.uninstall();
     });
 
-    test('handles a successful fetch for time_remaining', (done) => {
+    test("handles a successful fetch for time_remaining", (done) => {
       const exp = 1393286893;
       const date = new Date(exp * 1000);
       const remaining = 240000;
 
-      moxios.stubRequest('/api/auth/sessions/ttl', {
+      moxios.stubRequest("/api/auth/sessions/ttl", {
         status: 200,
         responseText: JSON.stringify({
           data: {
@@ -27,17 +26,17 @@ describe('Session management', () => {
         }),
       });
 
-      fetchTtl('fakeToken').then((expiry) => {
+      fetchTtl("fakeToken").then((expiry) => {
         expect(expiry).toBe(remaining);
         done();
       });
     });
 
-    test('handles backward-compat fetch for TTL', (done) => {
+    test("handles backward-compat fetch for TTL", (done) => {
       const exp = 1393286893;
       const date = new Date(exp * 1000);
 
-      moxios.stubRequest('/api/auth/sessions/ttl', {
+      moxios.stubRequest("/api/auth/sessions/ttl", {
         status: 200,
         responseText: JSON.stringify({
           data: {
@@ -46,28 +45,28 @@ describe('Session management', () => {
         }),
       });
 
-      fetchTtl('fakeToken').then((expiry) => {
+      fetchTtl("fakeToken").then((expiry) => {
         expect(expiry.getTime()).toBe(date.getTime());
         done();
       });
     });
 
-    test('throws an error on 400', (done) => {
-      moxios.stubRequest('/api/auth/sessions/ttl', {
+    test("throws an error on 400", (done) => {
+      moxios.stubRequest("/api/auth/sessions/ttl", {
         status: 400,
         responseText: JSON.stringify({
-          error: 'error text',
+          error: "error text",
         }),
       });
 
-      fetchTtl('fakeToken').catch((error) => {
+      fetchTtl("fakeToken").catch((error) => {
         expect(error.response.status).toBe(400);
         done();
       });
     });
   });
 
-  describe('Logout session', () => {
+  describe("Logout session", () => {
     beforeEach(() => {
       moxios.install();
     });
@@ -76,63 +75,63 @@ describe('Session management', () => {
       moxios.uninstall();
     });
 
-    test('Handles a successful logout', (done) => {
-      window.document.cookie = 'qpp_auth_token=testing';
+    test("Handles a successful logout", (done) => {
+      window.document.cookie = "qpp_auth_token=testing";
 
-      moxios.stubRequest('/user/session-logout', {
+      moxios.stubRequest("/user/session-logout", {
         status: 200,
-        responseText: 'Hello',
+        responseText: "Hello",
       });
 
-      let onFulfilled = sinon.spy();
-      let onFailed = sinon.spy();
+      let onFulfilled = jest.fn();
+      let onFailed = jest.fn();
 
       Promise.resolve(LogoutSession(window))
         .then(() => {
-          expect(onFulfilled.called).toBe(true);
-          expect(onFailed.called).toBe(false);
+          expect(onFulfilled).toHaveBeenCalled();
+          expect(onFailed).toHaveBeenCalled();
         })
         .catch((error) => {
           done();
         });
     });
 
-    test('Handles a 400 Response on logout', (done) => {
-      window.document.cookie = 'qpp_auth_token=testing';
+    test("Handles a 400 Response on logout", (done) => {
+      window.document.cookie = "qpp_auth_token=testing";
 
-      moxios.stubRequest('/user/session-logout', {
+      moxios.stubRequest("/user/session-logout", {
         status: 400,
-        responseText: 'Hello',
+        responseText: "Hello",
       });
 
-      let onFulfilled = sinon.spy();
-      let onFailed = sinon.spy();
+      let onFulfilled = jest.fn();
+      let onFailed = jest.fn();
 
       Promise.resolve(LogoutSession(window))
         .then(() => {
-          expect(onFulfilled.called).toBe(false);
-          expect(onFailed.called).toBe(true);
+          expect(onFulfilled).toHaveBeenCalled();
+          expect(onFailed).toHaveBeenCalled();
         })
         .catch((error) => {
           done();
         });
     });
 
-    test('Handles a 401 Response on logout', (done) => {
-      window.document.cookie = 'qpp_auth_token=testing';
+    test("Handles a 401 Response on logout", (done) => {
+      window.document.cookie = "qpp_auth_token=testing";
 
-      moxios.stubRequest('/user/session-logout', {
+      moxios.stubRequest("/user/session-logout", {
         status: 401,
-        responseText: 'Hello',
+        responseText: "Hello",
       });
 
-      let onFulfilled = sinon.spy();
-      let onFailed = sinon.spy();
+      let onFulfilled = jest.fn();
+      let onFailed = jest.fn();
 
       Promise.resolve(LogoutSession(window))
         .then(() => {
-          expect(onFulfilled.called).toBe(false);
-          expect(onFailed.called).toBe(true);
+          expect(onFulfilled).not.toHaveBeenCalled();
+          expect(onFailed).toHaveBeenCalled();
         })
         .catch((error) => {
           done();
@@ -140,7 +139,7 @@ describe('Session management', () => {
     });
   });
 
-  describe.skip('Refresh session', () => {
+  describe.skip("Refresh session", () => {
     beforeEach(() => {
       moxios.install();
     });
@@ -149,16 +148,16 @@ describe('Session management', () => {
       moxios.uninstall();
     });
 
-    test('Handles a successful refresh', () => {
-      window.document.cookie = 'qpp_auth_token=testing';
+    test("Handles a successful refresh", () => {
+      window.document.cookie = "qpp_auth_token=testing";
 
-      moxios.stubRequest('/api/auth/sessions/refresh', {
+      moxios.stubRequest("/api/auth/sessions/refresh", {
         status: 200,
-        responseText: 'Hello',
+        responseText: "Hello",
       });
 
-      let onFulfilled = sinon.spy();
-      let onFailed = sinon.spy();
+      let onFulfilled = jest.fn();
+      let onFailed = jest.fn();
 
       Promise.resolve(
         RefreshSession({
@@ -167,21 +166,21 @@ describe('Session management', () => {
           window: window,
         }),
       ).then(() => {
-        expect(onFulfilled.called).toBe(true);
-        expect(onFailed.called).toBe(false);
+        expect(onFulfilled).toHaveBeenCalled();
+        expect(onFailed).not.toHaveBeenCalled();
       });
     });
 
-    test('Handles a 400 response on refresh', () => {
-      window.document.cookie = 'qpp_auth_token=testing';
+    test("Handles a 400 response on refresh", () => {
+      window.document.cookie = "qpp_auth_token=testing";
 
-      moxios.stubRequest('/api/auth/sessions/refresh', {
+      moxios.stubRequest("/api/auth/sessions/refresh", {
         status: 400,
-        responseText: 'Hello',
+        responseText: "Hello",
       });
 
-      let onFulfilled = sinon.spy();
-      let onFailed = sinon.spy();
+      let onFulfilled = jest.fn();
+      let onFailed = jest.fn();
 
       Promise.resolve(
         RefreshSession({
@@ -190,21 +189,21 @@ describe('Session management', () => {
           window,
         }),
       ).then(() => {
-        expect(onFulfilled.called).toBe(false);
-        expect(onFailed.called).toBe(true);
+        expect(onFulfilled).not.toHaveBeenCalled();
+        expect(onFailed).toHaveBeenCalled();
       });
     });
 
-    test('Handles a 401 response on refresh', () => {
-      window.document.cookie = 'qpp_auth_token=testing';
+    test("Handles a 401 response on refresh", () => {
+      window.document.cookie = "qpp_auth_token=testing";
 
-      moxios.stubRequest('/api/auth/sessions/refresh', {
+      moxios.stubRequest("/api/auth/sessions/refresh", {
         status: 401,
-        responseText: 'Hello',
+        responseText: "Hello",
       });
 
-      let onFulfilled = sinon.spy();
-      let onFailed = sinon.spy();
+      let onFulfilled = jest.fn();
+      let onFailed = jest.fn();
 
       Promise.resolve(
         RefreshSession({
@@ -213,8 +212,8 @@ describe('Session management', () => {
           window,
         }),
       ).then(() => {
-        expect(onFulfilled.called).toBe(false);
-        expect(onFailed.called).toBe(true);
+        expect(onFulfilled).toHaveBeenCalled();
+        expect(onFailed).toHaveBeenCalled();
       });
     });
   });