feat: added Unit testing using Jest for utils file (#15)

* fix: update import path for Kubeflow styles

Signed-off-by: LogicalGuy77 <harshitacademia@gmail.com>

* fix: update build scripts to ensure CSS assets are copied correctly

Signed-off-by: LogicalGuy77 <harshitacademia@gmail.com>

* fix: enhance frontend dependency installation and style setup

Signed-off-by: LogicalGuy77 <harshitacademia@gmail.com>

* fix: enhance frontend dependency installation and style setup

Signed-off-by: LogicalGuy77 <harshitacademia@gmail.com>

* fix: enhance frontend dependency installation and style setup

Signed-off-by: LogicalGuy77 <harshitacademia@gmail.com>

* feat: setup Jest and __mocks__ for unit testing

* feat: enhance type definitions and add tests for predictor extension specifications

* fix: format code for consistency in utils.jest.spec.ts

* fix: update unit test command to use Jest instead of production

---------

Signed-off-by: LogicalGuy77 <harshitacademia@gmail.com>

Author: LogicalGuy77

.github/workflows/test-node.yaml

@@ -61,4 +61,4 @@ jobs:
         - name: Run Unit Tests
           run: |
             cd frontend
-            npm run test:prod
+            npm run test:jest

frontend/__mocks__/kubeflow.ts

@@ -0,0 +1,96 @@
+// Mock for Kubeflow imports used in getK8sObjectUiStatus function
+export enum STATUS_TYPE {
+  UNINITIALIZED = "Uninitialized",
+  TERMINATING = "Terminating",
+  WARNING = "Warning",
+  READY = "Ready",
+}
+
+// Interface for Kubernetes condition
+export interface Condition {
+  type: string;
+  status: string;
+  reason?: string;
+  message?: string;
+}
+
+// Interface for status object
+export interface Status {
+  phase: STATUS_TYPE;
+  state: string;
+  message: string;
+}
+
+// Interface for Kubernetes object
+export interface K8sObject {
+  kind: string;
+  metadata: {
+    name?: string;
+    namespace?: string;
+    deletionTimestamp?: string;
+    [key: string]: any;
+  };
+  status?: {
+    conditions?: Condition[] | null;
+    [key: string]: any;
+  };
+  spec?: any;
+}
+
+// Types for getPredictorExtensionSpec tests
+export enum PredictorType {
+  Tensorflow = 'tensorflow',
+  Triton = 'triton',
+  Sklearn = 'sklearn',
+  Onnx = 'onnx',
+  Pytorch = 'pytorch',
+  Xgboost = 'xgboost',
+  Pmml = 'pmml',
+  Lightgbm = 'lightgbm',
+  MLFlow = 'mlflow',
+  Custom = 'custom',
+}
+
+export interface PredictorExtensionSpec {
+  storageUri?: string;
+  runtimeVersion?: string;
+  protocolVersion?: string;
+  image?: string;
+  name?: string;
+  env?: Array<{
+    name: string;
+    value: string;
+  }>;
+  [key: string]: any;
+}
+
+export interface ModelSpec extends PredictorExtensionSpec {
+  modelFormat: {
+    name: string;
+    version?: string;
+  };
+  runtime?: string;
+}
+
+export interface PredictorSpec {
+  sklearn?: PredictorExtensionSpec;
+  xgboost?: PredictorExtensionSpec;
+  tensorflow?: PredictorExtensionSpec;
+  pytorch?: PredictorExtensionSpec;
+  triton?: PredictorExtensionSpec;
+  onnx?: PredictorExtensionSpec;
+  pmml?: PredictorExtensionSpec;
+  lightgbm?: PredictorExtensionSpec;
+  mlflow?: PredictorExtensionSpec;
+  model?: ModelSpec;
+  containers?: Array<{
+    name?: string;
+    image?: string;
+    env?: Array<{
+      name: string;
+      value: string;
+    }>;
+    [key: string]: any;
+  }>;
+  [key: string]: any;
+}

frontend/jest.config.js

@@ -0,0 +1,28 @@
+module.exports = {
+  preset: "jest-preset-angular",
+  setupFilesAfterEnv: ["<rootDir>/src/test-setup.jest.ts"],
+  testMatch: ["**/*.jest.spec.ts"],
+  collectCoverageFrom: [
+    "src/**/*.ts",
+    "!src/**/*.spec.ts",
+    "!src/**/*.jest.spec.ts",
+    "!src/main.ts",
+    "!src/polyfills.ts",
+  ],
+  coverageDirectory: "coverage-jest",
+  testEnvironment: "jsdom",
+  moduleNameMapper: {
+    "^kubeflow$": "<rootDir>/__mocks__/kubeflow.ts",
+    "^src/(.*)$": "<rootDir>/src/$1",
+    "^@/(.*)$": "<rootDir>/src/$1",
+  },
+  moduleFileExtensions: ["ts", "tsx", "js", "json"],
+  transform: {
+    "^.+\\.(ts|js|html)$": "jest-preset-angular",
+  },
+  transformIgnorePatterns: [
+    "node_modules/(?!(kubeflow|@angular|rxjs|lodash-es)/)",
+  ],
+  roots: ["<rootDir>/src"],
+  modulePaths: ["<rootDir>/src"],
+};