Update dependencies

.babelrc.json

@@ -11,18 +11,6 @@
     "@babel/preset-typescript"
   ],
   "plugins": [
-    [
-      "babel-plugin-styled-components",
-      {
-        "transpileTemplateLiterals": false
-      }
-    ],
-    [
-      "@babel/plugin-transform-react-jsx",
-      {
-        "runtime": "automatic"
-      }
-    ],
     "@babel/plugin-transform-shorthand-properties",
     "@babel/plugin-transform-block-scoping",
     [

.github/workflows/branch_build.yml

@@ -53,8 +53,8 @@ jobs:
       - name: Type check
         run: pnpm tsc --noemit
 
-      # - name: Run tests
-      #   run: pnpm test:coverage
+      - name: Run tests
+        run: pnpm test:coverage
 
       - name: Get previous commit hash
         run: |

.github/workflows/pr_build.yml

@@ -51,8 +51,8 @@ jobs:
       - name: Type check
         run: pnpm tsc --noemit
 
-      # - name: Run tests
-      #   run: pnpm test:coverage
+      - name: Run tests
+        run: pnpm test:coverage
 
       - name: Get labels from pull request
         id: labels

jest.config.js

@@ -24,7 +24,7 @@ module.exports = {
   resolver: "<rootDir>/custom-jest-resolver",
   maxWorkers: "75%",
   modulePaths: ["<rootDir>/src/"],
-  setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
+  setupFilesAfterEnv: ["<rootDir>/jest.setup.tsx"],
   transform: {
     "^.+\\.(t|j)sx?$": [
       "@swc/jest",

jest.setup.ts → jest.setup.tsx

@@ -1,63 +1,51 @@
 import "regenerator-runtime/runtime";
-import "@testing-library/jest-dom/extend-expect";
+import "@testing-library/jest-dom";
+import "intersection-observer";
+import { useQuery } from "@tanstack/react-query";
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
 import { TextDecoder, TextEncoder } from "util";
-import React from "react";
-import TimeAgo from "javascript-time-ago";
-import en from "javascript-time-ago/locale/en.json";
-import fetch from "node-fetch";
+import * as React from "react";
 import { lightTheme } from "@deskpro/deskpro-ui";
-import { mockClient } from "./src/testing";
+import { mockClient, mockContext } from "./testing";
+import type { IDeskproClient } from "@deskpro/app-sdk";
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 //@ts-ignore
 global.TextEncoder = TextEncoder;
-
 //for some reason the types are wrong, but this works
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 //@ts-ignore
 global.TextDecoder = TextDecoder;
-
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 //@ts-ignore
 global.React = React;
 
-TimeAgo.addDefaultLocale(en);
-
 jest.mock("@deskpro/app-sdk", () => ({
   ...jest.requireActual("@deskpro/app-sdk"),
   useDeskproAppClient: () => ({ client: mockClient }),
   useDeskproAppEvents: (
     hooks: { [key: string]: (param: Record<string, unknown>) => void },
     deps: [] = []
   ) => {
-    const deskproAppEventsObj = {
-      type: "ticket",
-      settings: {
-        instance_url: "http://instance.url",
-        permanent_auth_token: "this_is_token",
-      },
-      data: {
-        ticket: { id: "215", subject: "Big ticket" },
-        app: {},
-        env: {},
-        currentAgent: {},
-      },
-    };
     React.useEffect(() => {
-      !!hooks.onChange && hooks.onChange(deskproAppEventsObj);
-      !!hooks.onShow && hooks.onShow(deskproAppEventsObj);
-      !!hooks.onReady && hooks.onReady(deskproAppEventsObj);
-      !!hooks.onAdminSettingsChange && hooks.onAdminSettingsChange(deskproAppEventsObj.settings);
+      !!hooks.onChange && hooks.onChange(mockContext);
+      !!hooks.onShow && hooks.onShow(mockContext);
+      !!hooks.onReady && hooks.onReady(mockContext);
+      !!hooks.onAdminSettingsChange && hooks.onAdminSettingsChange(mockContext.settings);
       /* eslint-disable-next-line react-hooks/exhaustive-deps */
     }, deps);
   },
-  useInitialisedDeskproAppClient: (callback: (param: Record<string, unknown>) => void) => {
-    callback({
-      registerElement: () => {},
-      deregisterElement: () => {},
-      setTitle: () => {},
-    });
+  useInitialisedDeskproAppClient: (callback: (param: typeof mockClient) => void) => {
+    callback(mockClient);
   },
+  useDeskproLatestAppContext: () => ({ context: mockContext }),
   useDeskproAppTheme: () => ({ theme: lightTheme }),
   proxyFetch: async () => fetch,
+  LoadingSpinner: () => <>Loading...</>,
+  useQueryWithClient: (
+    queryKey: string[],
+    queryFn: (client: IDeskproClient) => Promise<void>,
+    options: object,
+  ) => useQuery(queryKey, () => queryFn(mockClient as never), options),
 }));

package.json

@@ -15,62 +15,66 @@
     "bumpManifestVer": "node ./bin/bumpManifestVer.js"
   },
   "dependencies": {
-    "@deskpro/app-sdk": "1.2.10",
-    "@deskpro/deskpro-ui": "4.7.0",
-    "@fortawesome/free-solid-svg-icons": "^6.2.1",
+    "@deskpro/app-sdk": "^3.0.15",
+    "@deskpro/deskpro-ui": "^7.1.0",
+    "@fortawesome/fontawesome-svg-core": "^6.3.0",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@heroicons/react": "1.0.6",
     "@hookform/resolvers": "^2.9.11",
-    "@swc/core": "^1.3.51",
-    "@tanstack/react-query": "^4.26.1",
+    "@tanstack/react-query": "^4.36.1",
     "date-fns": "^2.29.3",
     "iframe-resizer": "^4.3.2",
     "javascript-time-ago": "^2.5.9",
     "lodash": "^4.17.21",
     "polished": "^4.1.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-error-boundary": "^3.1.4",
+    "react-error-boundary": "^4.0.12",
     "react-hook-form": "^7.43.2",
+    "react-is": "^18.2.0",
     "react-router-dom": "^6.7.0",
     "react-time-ago": "^7.2.1",
     "showdown": "^2.1.0",
     "styled-components": "^5.3.6",
-    "ts-pattern": "^4.1.3",
+    "ts-pattern": "^4.3.0",
     "use-debounce": "^9.0.3",
-    "zod": "^3.20.6"
+    "zod": "^3.22.4"
   },
   "devDependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.3.0",
-    "@jest/globals": "^29.3.1",
+    "@jest/globals": "^29.7.0",
+    "@swc/core": "^1.3.51",
+    "@swc/helpers": "^0.5.3",
     "@swc/jest": "^0.2.24",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^29.2.6",
-    "@types/lodash": "^4.14.191",
-    "@types/react": "^18.0.27",
-    "@types/react-dom": "^18.0.10",
-    "@types/showdown": "^2.0.0",
-    "@types/styled-components": "^5.1.25",
-    "@types/testing-library__jest-dom": "^5.14.5",
-    "@typescript-eslint/eslint-plugin": "5.6.0",
-    "@typescript-eslint/parser": "5.6.0",
+    "@testing-library/dom": "^9.3.4",
+    "@testing-library/jest-dom": "^6.3.0",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.11",
+    "@types/lodash": "^4.14.202",
+    "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.18",
+    "@types/showdown": "^2.0.6",
+    "@types/styled-components": "^5.1.34",
+    "@typescript-eslint/eslint-plugin": "6.19.1",
+    "@typescript-eslint/parser": "6.19.1",
     "@typescript/lib-dom": "npm:@types/web@^0.0.86",
     "@vitejs/plugin-react": "^1.1.3",
     "adm-zip": "^0.5.9",
     "cross-env": "7.0.3",
-    "eslint": "8.4.1",
-    "eslint-config-prettier": "8.3.0",
-    "eslint-plugin-react-hooks": "4.3.0",
-    "jest": "^29.3.1",
-    "jest-environment-jsdom": "^29.3.1",
+    "eslint": "8.56.0",
+    "eslint-config-prettier": "8.10.0",
+    "eslint-plugin-react-hooks": "4.6.0",
+    "intersection-observer": "^0.12.2",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "node-fetch": "^3.3.0",
     "prettier": "^2.8.7",
+    "react-resize-observer": "^1.1.1",
     "rimraf": "^3.0.2",
     "rollup-plugin-copy": "3.4.0",
     "slugify": "^1.6.5",
-    "ts-jest": "^29.0.5",
-    "typescript": "^4.5.4",
+    "ts-jest": "^29.1.2",
+    "typescript": "^4.9.5",
     "vite": "^2.7.2"
   }
 }