chore(tests): clean tests output [EE-5758] (#9215)

.github/workflows/test.yaml

@@ -13,7 +13,7 @@ jobs:
       - run: yarn --frozen-lockfile
 
       - name: Run tests
-        run: yarn jest --maxWorkers=2
+        run: make test-client ARGS="--maxWorkers=2"
   test-server:
     runs-on: ubuntu-latest
     steps:

Makefile

@@ -65,7 +65,7 @@ clean: ## Remove all build and download artifacts
 test: test-server test-client ## Run all tests
 
 test-client: ## Run client tests
-	yarn test
+	yarn test $(ARGS)
 
 test-server:	## Run server tests
 	cd api && $(GOTESTSUM) --format pkgname-and-test-fails --format-hide-empty-pkg --hide-summary skipped -- -cover  ./...

app/__mocks__/svg.js

@@ -1,2 +0,0 @@
-export default 'SvgrURL';
-export const ReactComponent = 'div';

app/__mocks__/svg.tsx

@@ -0,0 +1,8 @@
+import { forwardRef } from 'react';
+
+const SvgrMock = forwardRef<HTMLSpanElement>((props, ref) => (
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  <span ref={ref} {...props} />
+));
+
+export default SvgrMock;

app/react/azure/DashboardView/DashboardView.test.tsx

@@ -71,6 +71,8 @@ test('should correctly show total number of resource groups across multiple subs
 });
 
 test("when only subscriptions fail to load, don't show the dashboard", async () => {
+  jest.spyOn(console, 'error').mockImplementation(() => {});
+
   const { queryByLabelText } = await renderComponent(
     1,
     { 'subscription-1': 1 },
@@ -82,6 +84,8 @@ test("when only subscriptions fail to load, don't show the dashboard", async ()
 });
 
 test('when only resource groups fail to load, still show the subscriptions', async () => {
+  jest.spyOn(console, 'error').mockImplementation(() => {});
+
   const { queryByLabelText, findByLabelText } = await renderComponent(
     1,
     { 'subscription-1': 1 },

app/react/components/EdgeIndicator.tsx

@@ -2,6 +2,8 @@ import { Activity } from 'lucide-react';
 
 import { isoDateFromTimestamp } from '@/portainer/filters/filters';
 import { Environment } from '@/react/portainer/environments/types';
+import heartbeatup from '@/assets/ico/heartbeat-up.svg?c';
+import heartbeatdown from '@/assets/ico/heartbeat-down.svg?c';
 
 import { EnvironmentStatusBadgeItem } from './EnvironmentStatusBadgeItem';
 
@@ -35,7 +37,7 @@ export function EdgeIndicator({
     >
       <EnvironmentStatusBadgeItem
         color={heartbeat ? 'success' : 'danger'}
-        icon={heartbeat ? 'svg-heartbeatup' : 'svg-heartbeatdown'}
+        icon={heartbeat ? heartbeatup : heartbeatdown}
         aria-label="edge-heartbeat"
       >
         heartbeat

app/react/components/Svg.tsx

@@ -1,6 +1,5 @@
 // general icons
-import heartbeatup from '@/assets/ico/heartbeat-up.svg?c';
-import heartbeatdown from '@/assets/ico/heartbeat-down.svg?c';
+
 import dataflow from '@/assets/ico/dataflow-1.svg?c';
 import git from '@/assets/ico/git.svg?c';
 import kube from '@/assets/ico/kube.svg?c';
@@ -40,8 +39,6 @@ import quay from '@/assets/ico/vendor/quay.svg?c';
 const placeholder = Placeholder;
 
 export const SvgIcons = {
-  heartbeatup,
-  heartbeatdown,
   dataflow,
   dockericon,
   git,

app/react/kubernetes/applications/ConsoleView/ConsoleView.tsx

@@ -132,6 +132,7 @@ export function ConsoleView() {
                     value={command}
                     onChange={(e) => setCommand(e.target.value)}
                     id="consoleCommand"
+                    // eslint-disable-next-line jsx-a11y/no-autofocus
                     autoFocus
                   />
                 </div>

app/setup-tests/server-handlers.ts

@@ -91,4 +91,8 @@ export const handlers = [
     '/api/status',
     (req, res, ctx) => res(ctx.json({}))
   ),
+  rest.get('/api/teams/:id/memberships', (req, res, ctx) => res(ctx.json([]))),
+  rest.get('/api/endpoints/agent_versions', (req, res, ctx) =>
+    res(ctx.json([]))
+  ),
 ];

jest.config.js

@@ -83,7 +83,7 @@ module.exports = {
   // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
   moduleNameMapper: {
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/app/__mocks__/fileMock.js',
-    '\\.svg\\?c$': '<rootDir>/app/__mocks__/svg.js',
+    '\\.svg\\?c$': '<rootDir>/app/__mocks__/svg.tsx',
     '\\.(css|less)$': '<rootDir>/app/__mocks__/styleMock.js',
     '^@@/(.*)$': '<rootDir>/app/react/components/$1',
     '^@/(.*)$': '<rootDir>/app/$1',

package.json

@@ -22,7 +22,7 @@
     "build": "webpack",
     "format": "prettier --loglevel warn --write \"**/*.{js,css,html,jsx,tsx,ts,json}\"",
     "lint": "eslint --cache --fix './**/*.{js,jsx,ts,tsx}'",
-    "test": "jest --silent",
+    "test": "jest",
     "sb": "yarn storybook",
     "storybook": "storybook dev -p 6006",
     "storybook:build": "storybook build -o ./dist/storybook",