feat(ws): Notebooks 2.0 // Frontend // Fetch API Infra

Signed-off-by: yelias <[email protected]>

workspaces/frontend/jest.config.js

@@ -33,6 +33,10 @@ module.exports = {
   // A list of paths to snapshot serializer modules Jest should use for snapshot testing
   snapshotSerializers: [],
 
+  setupFilesAfterEnv: ['<rootDir>/src/__tests__/unit/jest.setup.ts'],
+
+  preset: 'ts-jest',
+
   coverageDirectory: 'jest-coverage',
 
   collectCoverageFrom: [

workspaces/frontend/package.json

@@ -37,6 +37,7 @@
   "devDependencies": {
     "@cypress/code-coverage": "^3.13.5",
     "@testing-library/cypress": "^10.0.1",
+    "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "14.4.3",
@@ -47,6 +48,7 @@
     "chai-subset": "^1.6.0",
     "concurrently": "^9.1.0",
     "copy-webpack-plugin": "^11.0.0",
+    "core-js": "^3.39.0",
     "css-loader": "^6.11.0",
     "css-minimizer-webpack-plugin": "^5.0.1",
     "cypress": "^13.15.0",
@@ -56,6 +58,7 @@
     "cypress-multi-reporters": "^2.0.4",
     "dotenv": "^16.4.5",
     "dotenv-webpack": "^8.1.0",
+    "expect": "^29.7.0",
     "html-webpack-plugin": "^5.6.0",
     "imagemin": "^8.0.1",
     "jest": "^29.7.0",

workspaces/frontend/src/__mocks__/mockNamespaces.ts

@@ -0,0 +1,5 @@
+import { NamespacesList } from '~/app/types';
+
+export const mockNamespaces = (): NamespacesList => ({
+  data: [{ name: 'default' }, { name: 'kubeflow' }, { name: 'custom-namespace' }],
+});

workspaces/frontend/src/__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {};

workspaces/frontend/src/__mocks__/utils.ts

@@ -0,0 +1,5 @@
+import { ResponseBody } from '~/app/types';
+
+export const mockBFFResponse = <T>(data: T): ResponseBody<T> => ({
+  data,
+});

workspaces/frontend/src/__tests__/unit/jest.d.ts

@@ -0,0 +1,29 @@
+declare namespace jest {
+  interface Expect {
+    isIdentityEqual: <T>(expected: T) => T;
+  }
+
+  interface Matchers<R, T> {
+    hookToBe: (expected: unknown) => R;
+    hookToStrictEqual: (expected: unknown) => R;
+    hookToHaveUpdateCount: (expected: number) => R;
+    hookToBeStable: <
+      V extends T extends Pick<
+        import('~/__tests__/unit/testUtils/hooks').RenderHookResultExt<
+          infer Result,
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          any
+        >,
+        'result'
+      >
+        ? import('~/__tests__/unit/testUtils/hooks').BooleanValues<Result>
+        : never,
+    >(
+      expected?: V,
+    ) => R;
+  }
+
+  interface Expect {
+    isIdentityEqual: (expected: unknown) => AsymmetricMatcher;
+  }
+}

workspaces/frontend/src/__tests__/unit/jest.setup.ts

@@ -0,0 +1,66 @@
+import { TextEncoder } from 'util';
+import { JestAssertionError } from 'expect';
+import 'core-js/actual/array/to-sorted';
+import {
+  BooleanValues,
+  RenderHookResultExt,
+  createComparativeValue,
+} from '~/__tests__/unit/testUtils/hooks';
+
+global.TextEncoder = TextEncoder;
+
+const tryExpect = (expectFn: () => void) => {
+  try {
+    expectFn();
+  } catch (e) {
+    const { matcherResult } = e as JestAssertionError;
+    if (matcherResult) {
+      return { ...matcherResult, message: () => matcherResult.message };
+    }
+    throw e;
+  }
+  return {
+    pass: true,
+    message: () => '',
+  };
+};
+
+expect.extend({
+  // custom asymmetric matchers
+
+  /**
+   * Checks that a value is what you expect.
+   * It uses Object.is to check strict equality.
+   *
+   * Usage:
+   * expect.isIdentifyEqual(...)
+   */
+  isIdentityEqual: (actual, expected) => ({
+    pass: Object.is(actual, expected),
+    message: () => `expected ${actual} to be identity equal to ${expected}`,
+  }),
+
+  // hook related custom matchers
+  hookToBe: (actual: RenderHookResultExt<unknown, unknown>, expected) =>
+    tryExpect(() => expect(actual.result.current).toBe(expected)),
+
+  hookToStrictEqual: (actual: RenderHookResultExt<unknown, unknown>, expected) =>
+    tryExpect(() => expect(actual.result.current).toStrictEqual(expected)),
+
+  hookToHaveUpdateCount: (actual: RenderHookResultExt<unknown, unknown>, expected: number) =>
+    tryExpect(() => expect(actual.getUpdateCount()).toBe(expected)),
+
+  hookToBeStable: <R>(actual: RenderHookResultExt<R, unknown>, expected?: BooleanValues<R>) => {
+    if (actual.getUpdateCount() <= 1) {
+      throw new Error('Cannot assert stability as the hook has not run at least 2 times.');
+    }
+    if (typeof expected === 'undefined') {
+      return tryExpect(() => expect(actual.result.current).toBe(actual.getPreviousResult()));
+    }
+    return tryExpect(() =>
+      expect(actual.result.current).toStrictEqual(
+        createComparativeValue(actual.getPreviousResult(), expected),
+      ),
+    );
+  },
+});