chore(test): Cleanup tests logs

Currently, there are many logs regarding warnings from tests.

The changes in this commit are:
* Clean some of the logs
* Introduce `jest-canvas-mock` dependency to properly mock `@patternfly/react-topology` `SVG` interaction
* Remove the duplicated build of `@kaoto-next/camel-catalog` package

.github/workflows/build-lint-test.yml

@@ -35,9 +35,9 @@ jobs:
       - name: 🧪 Run tests
         run: yarn workspaces foreach --verbose --topological-dev run test
 
-      # Build packages
+      # Build packages excluding @kaoto-next/camel-catalog since it was build during installing dependencies
       - name: Build packages
-        run: yarn workspaces foreach --verbose --topological-dev run build
+        run: yarn workspaces foreach --verbose --topological-dev --exclude @kaoto-next/camel-catalog run build
 
       # Build lib
       - name: Build @kaoto-next/ui package in lib mode

.github/workflows/deploy-to-gh-pages.yml

@@ -41,8 +41,9 @@ jobs:
       - name: 🔧 Install dependencies
         run:  yarn
 
+      # Build packages excluding @kaoto-next/camel-catalog since it was build during installing dependencies
       - name: Build packages
-        run: yarn workspaces foreach --verbose --topological-dev run build
+        run: yarn workspaces foreach --verbose --topological-dev --exclude @kaoto-next/camel-catalog run build
 
       - name: 📤 Upload artifact @kaoto-next/ui web application
         uses: actions/upload-pages-artifact@v2

packages/ui/jest-setup.ts

@@ -1,8 +1,20 @@
 import '@testing-library/jest-dom';
+import { FilterDOMPropsKeys, filterDOMProps } from 'uniforms';
 // import '@testing-library/jest-dom/extend-expect'
 
-beforeAll(() => {
-  jest
-    .spyOn(global, 'crypto', 'get')
-    .mockImplementation(() => ({ getRandomValues: () => [12345678] }) as unknown as Crypto);
+filterDOMProps.register('inputRef' as FilterDOMPropsKeys, 'placeholder' as FilterDOMPropsKeys);
+
+jest
+  .spyOn(global, 'crypto', 'get')
+  .mockImplementation(() => ({ getRandomValues: () => [12345678] }) as unknown as Crypto);
+
+jest.spyOn(console, 'warn').mockImplementation((...args) => {
+  if (
+    args[0].toString().includes('[mobx-react-lite] importing batchingForReactDom is no longer needed') ||
+    args[0].toString().includes('NODE_ENV is not defined')
+  ) {
+    return;
+  }
+
+  console.log(...args);
 });

packages/ui/jest.config.ts

@@ -151,7 +151,7 @@ export default {
   // setupFiles: [],
 
   // A list of paths to modules that run some code to configure or set up the testing framework before each test
-  setupFilesAfterEnv: ['<rootDir>/jest-setup.ts'],
+  setupFilesAfterEnv: ['<rootDir>/jest-setup.ts', 'jest-canvas-mock'],
 
   // The number of seconds after which a test is considered as slow and reported as such in the results.
   // slowTestThreshold: 5,

packages/ui/package.json

@@ -94,6 +94,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
     "jest": "^29.4.2",
+    "jest-canvas-mock": "^2.5.2",
     "jest-environment-jsdom": "^29.4.2",
     "lodash.clonedeep": "^4.5.0",
     "prettier": "^3.0.0",

packages/ui/src/camel-utils/camel-random-id.test.ts

@@ -13,6 +13,10 @@ describe('camel-random-id', () => {
   });
 
   it('should return a random number using Date.now() if crypto module is not available', () => {
+    Object.defineProperty(global, 'msCrypto', {
+      value: undefined,
+      writable: true,
+    });
     jest.spyOn(global, 'crypto', 'get').mockImplementationOnce(() => undefined as unknown as Crypto);
     jest.spyOn(global.Date, 'now').mockReturnValueOnce(888);
 

packages/ui/src/models/camel/camel-resource.ts

@@ -28,7 +28,7 @@ export interface CamelResource {
  */
 export function createCamelResource(json?: unknown, type?: SourceSchemaType): CamelResource {
   const jsonRecord = json as Record<string, unknown>;
-  if (json && 'kind' in jsonRecord) {
+  if (json && typeof json === 'object' && 'kind' in jsonRecord) {
     return doCreateCamelResource(json, jsonRecord['kind'] as SourceSchemaType);
   } else {
     return doCreateCamelResource(json, type || SourceSchemaType.Route);

packages/ui/src/store/index.ts

@@ -6,7 +6,7 @@ let isDevMode = true;
 try {
   isDevMode = NODE_ENV === 'development';
 } catch (error) {
-  console.info('NODE_ENV is not defined');
+  console.warn('NODE_ENV is not defined');
 }
 
 if (isDevMode) {

yarn.lock

@@ -2418,6 +2418,7 @@ __metadata:
     eslint-plugin-react-hooks: ^4.6.0
     eslint-plugin-react-refresh: ^0.4.3
     jest: ^29.4.2
+    jest-canvas-mock: ^2.5.2
     jest-environment-jsdom: ^29.4.2
     lodash.clonedeep: ^4.5.0
     lodash.get: ^4.4.2
@@ -7821,7 +7822,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"color-name@npm:~1.1.4":
+"color-name@npm:^1.1.4, color-name@npm:~1.1.4":
   version: 1.1.4
   resolution: "color-name@npm:1.1.4"
   checksum: b0445859521eb4021cd0fb0cc1a75cecf67fceecae89b63f62b201cca8d345baf8b952c966862a9d9a2632987d4f6581f0ec8d957dfacece86f0a7919316f610
@@ -8281,6 +8282,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cssfontparser@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "cssfontparser@npm:1.2.1"
+  checksum: 952d487cddab591fb944f2a4c326a7736bc963784a6d92b6ad4051f3bf5ee49a732eff62e29a52ff085197cb07f5bd66525a2245ded7fd356113ac81be9238b9
+  languageName: node
+  linkType: hard
+
 "cssom@npm:^0.5.0":
   version: 0.5.0
   resolution: "cssom@npm:0.5.0"
@@ -12243,6 +12251,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest-canvas-mock@npm:^2.5.2":
+  version: 2.5.2
+  resolution: "jest-canvas-mock@npm:2.5.2"
+  dependencies:
+    cssfontparser: ^1.2.1
+    moo-color: ^1.0.2
+  checksum: a3004d2e96473049045e49dcf98e5ea6011494048ab42b5422b3089d9ff406aaca8353e79587055d840fa145541668eb8f78613765f252ad5901a8217e91ea5d
+  languageName: node
+  linkType: hard
+
 "jest-changed-files@npm:^29.6.3":
   version: 29.6.3
   resolution: "jest-changed-files@npm:29.6.3"
@@ -14007,6 +14025,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"moo-color@npm:^1.0.2":
+  version: 1.0.3
+  resolution: "moo-color@npm:1.0.3"
+  dependencies:
+    color-name: ^1.1.4
+  checksum: 02bf59b6bbd5e86641bc062e2dc0843e6e579e18ef67e1c8e93bfc01945df578f20e66ce16aa9632db2aa0e16806e0914a26eb345a804f45fff1ae12a8906a29
+  languageName: node
+  linkType: hard
+
 "mri@npm:^1.2.0":
   version: 1.2.0
   resolution: "mri@npm:1.2.0"