Test - migration javascript to typescript

jest.config.js

@@ -3,7 +3,7 @@ const config = {
   rootDir: "../../../..",
   setupFiles: ["jest-canvas-mock"],
   setupFilesAfterEnv: [
-    "<rootDir>/test/textEncoder.js",
+    "<rootDir>/test/textEncoder.ts",
     "<rootDir>/test/jestImports.ts",
     "<rootDir>/test/resizeObservers.ts",
   ],

src/helpers/level_color_helper.js → src/helpers/level_color_helper.ts

@@ -1,55 +1,69 @@
-// @ts-nocheck
+export interface LevelColor {
+  text: string;
+  border: string;
+  primary: string;
+  secondary: string;
+}
 
-const beginner = {
+const beginner: LevelColor = {
   text: "#595959",
   border: "#D9D9D9",
   primary: "#F5F5F5",
   secondary: "#BFBFBF",
 };
 
-const bronze = {
+const bronze: LevelColor = {
   text: "#FA541C",
   border: "#FFBB96",
   primary: "#FFF2E8",
   secondary: "#FA541C",
 };
 
-const silver = {
+const silver: LevelColor = {
   text: "#1890FF",
   border: "#91D5FF",
   primary: "#E6F7FF",
   secondary: "#40A9FF",
 };
 
-const gold = {
+const gold: LevelColor = {
   text: "#FAAD14",
   border: "#FFE58F",
   primary: "#FFFBE6",
   secondary: "#FFC53D",
 };
 
-const platinum = {
+const platinum: LevelColor = {
   text: "#13C2C2",
   border: "#87E8DE",
   primary: "#E6FFFB",
   secondary: "#13C2C2",
 };
 
-const titanium = {
+const titanium: LevelColor = {
   text: "#722ED1",
   border: "#D3ADF7",
   primary: "#F9F0FF",
   secondary: "#722ED1",
 };
 
-const diamond = {
+const diamond: LevelColor = {
   text: "#2F54EB",
   border: "#ADC6FF",
   primary: "#F0F5FF",
   secondary: "#2F54EB",
 };
 
-const ColorMap = {
+type ColorMapKey =
+  | "beginner"
+  | "bronze"
+  | "silver"
+  | "gold"
+  | "platinum"
+  | "titanium"
+  | "diamond";
+
+const ColorMap: Record<ColorMapKey, LevelColor> = {
   beginner,
   bronze,
   silver,
@@ -59,8 +73,8 @@ const ColorMap = {
   diamond,
 };
 
-const availableColors = (totalLevels) => {
-  const levelColors = {
+const availableColors = (totalLevels: number): ColorMapKey[] => {
+  const levelColors: Record<ColorMapKey, boolean> = {
     beginner: true,
     bronze: totalLevels > 3,
     silver: totalLevels > 2,
@@ -70,17 +84,22 @@ const availableColors = (totalLevels) => {
     diamond: totalLevels > 6,
   };
 
-  return Object.keys(levelColors).filter((c) => levelColors[c]);
+  return (Object.keys(levelColors) as ColorMapKey[]).filter(
+    (c) => levelColors[c],
+  );
 };
 
 // `levelPosition` refers to the level's position relative the other levels in the account. This is not always the
 //    level's index since it's possible for gaps in level indexes to exist. e.g. for an account
 //    with levels with indexes 0,1,2,4,5, the corresponding levelPositions would be 0,1,2,3,4
-export const levelColor = (totalLevels, levelPosition) => {
+export const levelColor = (
+  totalLevels: number,
+  levelPosition: number,
+): LevelColor => {
   const filteredColors = availableColors(totalLevels);
   return ColorMap[filteredColors[levelPosition]];
 };
 
-export const levelColorPalette = (totalLevels) => {
+export const levelColorPalette = (totalLevels: number): LevelColor[] => {
   return availableColors(totalLevels).map((color) => ColorMap[color]);
 };

src/helpers/maturity_report_helper.ts

@@ -0,0 +1,107 @@
+import { escape } from "lodash";
+
+interface Level {
+  name: string;
+  index?: number;
+}
+
+interface LevelEntry {
+  [key: string]: number;
+}
+
+interface ServiceLevelCount {
+  level: {
+    name: string;
+  };
+  serviceCount: number;
+}
+
+interface CategoryLevelCount {
+  category?: {
+    id?: string;
+    name: string;
+  } | null;
+  level: {
+    name: string;
+    index?: number;
+  };
+  serviceCount: number;
+}
+
+export const mountInitialLevelArray = (levels: Level[]): LevelEntry[] => {
+  return levels.map((level) => {
+    return { [escape(level.name)]: 0 };
+  });
+};
+
+export const updateCategoryAggregateWithLevelCounter = (
+  aggregate: LevelEntry[],
+  level: string,
+  serviceCounter: number,
+): LevelEntry[] => {
+  return aggregate.map((obj) => {
+    const currentKey = Object.keys(obj)[0];
+    if (level === currentKey) {
+      return { [currentKey]: serviceCounter };
+    }
+    return obj;
+  });
+};
+
+export const servicesByLevel = (
+  levels: Level[],
+  servicesLevelCount: ServiceLevelCount[],
+): LevelEntry[] => {
+  return levels.map((level) => {
+    const serviceLevelCount = servicesLevelCount.find(
+      (entry) => entry.level.name === level.name,
+    );
+    // serviceLevelCount is undefined when no services exist at that level
+    return { [escape(level.name)]: serviceLevelCount?.serviceCount || 0 };
+  });
+};
+
+export const levelsByCategory = (
+  levels: Level[],
+  categoryLevelCounts: CategoryLevelCount[],
+): Record<string, LevelEntry[]> => {
+  const initialLevelArray = mountInitialLevelArray(levels);
+
+  return categoryLevelCounts.reduce(
+    (acc, categoryLevel) => {
+      const currentCategory = categoryLevel.category
+        ? categoryLevel.category.name
+        : "Uncategorized";
+      const levelName = escape(categoryLevel.level.name);
+
+      const categoryAggregate = acc[currentCategory] || initialLevelArray;
+      const newCategoryAggregate = updateCategoryAggregateWithLevelCounter(
+        categoryAggregate,
+        levelName,
+        categoryLevel.serviceCount,
+      );
+
+      return {
+        ...acc,
+        [currentCategory]: newCategoryAggregate,
+      };
+    },
+    {} as Record<string, LevelEntry[]>,
+  );
+};
+
+export const fontFamily = [
+  "-apple-system",
+  "BlinkMacSystemFont",
+  "Segoe U",
+  "PingFang SC",
+  "Hiragino Sans GB",
+  "Microsoft YaHei",
+  "Helvetica Neue",
+  "Helvetica",
+  "Arial",
+  "sans-serif",
+  "Apple Color Emoji",
+  "Segoe UI Emoji",
+  "Segoe UI Symbol",
+].join(", ");

test/textEncoder.js → test/textEncoder.ts

@@ -1,5 +1,5 @@
 // eslint-disable-next-line no-restricted-imports -- Test configuration overrides
-const { TextEncoder, TextDecoder } = require("util");
+import { TextEncoder, TextDecoder } from "util";
 
 // jsdom does not bundle TextEncoder out of the box despite all browsers doing so.
 // https://stackoverflow.com/questions/68468203/why-am-i-getting-textencoder-is-not-defined-in-jest

tsconfig.json

@@ -7,5 +7,5 @@
     "checkJs": true,
   },
   "types": ["node", "jest", "@testing-library/jest-dom"],
-  "include": ["src", "test/jestImports.ts"],
+  "include": ["src", "test/**/*.ts"],
 }