Merge pull request #971

* chore(30540): fix cypress-each

* chore(30540): add declaration for the custom commands

* chore(30540): refactor component to simple TS and external command

* chore(30540): add comments for debugging

* chore(30540): add duplicate for testing

* chore(30540): add types

* chore(30540): fix paths

* chore(30540): update dependencies

* chore(30540): update eslint configuration

* chore(30540): clean comments

* chore(30540): linting

Author: vanch3d

hivemq-edge-frontend/cypress/cypress.d.ts

@@ -0,0 +1,26 @@
+import type { ContextObject } from 'axe-core'
+import type { Options } from 'cypress-axe'
+
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      getByTestId(value: string): Chainable<JQuery<HTMLElement>>
+      getByAriaLabel(value: string): Chainable<JQuery<HTMLElement>>
+      checkAccessibility(
+        context?: string | Node | ContextObject | undefined,
+        options?: Options | undefined,
+        skipFailures?: boolean
+      ): Chainable<JQuery<HTMLElement>>
+      clearInterceptList(interceptAlias: string): Chainable<JQuery<HTMLElement>>
+      mount(jsx: React__default.ReactNode, options?: MountOptions, rerenderKey?: string): Cypress.Chainable<MountReturn>
+      mountWithProviders(
+        component: React.ReactNode,
+        options?: MountOptions & { routerProps?: MemoryRouterProps } & {
+          wrapper?: React.JSXElementConstructor<{ children: React.ReactNode }>
+        }
+      ): Cypress.Chainable<MountReturn>
+    }
+  }
+}
+
+export {}

hivemq-edge-frontend/cypress/support/commands.ts

@@ -1,47 +1,8 @@
-/// <reference types="cypress" />
-// ***********************************************
-// This example commands.ts shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add('login', (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
-//
 import { getByTestId } from './commands/getByTestId.ts'
 import { getByAriaLabel } from './commands/getByAriaLabel.ts'
 import { checkAccessibility } from './commands/checkAccessibility.ts'
 import { clearInterceptList } from './commands/clearInterceptList.ts'
 
-declare global {
-  // eslint-disable-next-line @typescript-eslint/no-namespace
-  namespace Cypress {
-    interface Chainable {
-      checkAccessibility: typeof checkAccessibility
-      getByTestId: typeof getByTestId
-      getByAriaLabel: typeof getByAriaLabel
-      clearInterceptList: typeof clearInterceptList
-    }
-  }
-}
-
 Cypress.Commands.add('getByTestId', getByTestId)
 Cypress.Commands.add('getByAriaLabel', getByAriaLabel)
 Cypress.Commands.add('checkAccessibility', checkAccessibility)

hivemq-edge-frontend/cypress/support/component.tsx renamed to hivemq-edge-frontend/cypress/support/commands/mountWithProviders.tsx

@@ -1,12 +1,4 @@
-import 'cypress-axe'
-import 'cypress-each'
-import '@percy/cypress'
-import 'cypress-real-events'
-import '@cypress/code-coverage/support'
-
-import './commands'
-
-import type { MountOptions, MountReturn } from 'cypress/react'
+import type { MountOptions } from 'cypress/react'
 import { mount } from 'cypress/react'
 import type { MemoryRouterProps } from 'react-router-dom'
 import { MemoryRouter } from 'react-router-dom'
@@ -22,29 +14,18 @@ import '@/config/i18n.config.ts'
 import '@fontsource/roboto/400.css'
 import '@fontsource/roboto/700.css'
 
-// Augment the Cypress namespace to include type definitions for
-// your custom command.
-// Alternatively, can be defined in cypress/support/component.d.ts
-// with a <reference path="./component" /> at the top of your spec.
-declare global {
-  // eslint-disable-next-line @typescript-eslint/no-namespace
-  namespace Cypress {
-    interface Chainable {
-      mount: typeof mount
-
-      mountWithProviders(
-        component: React.ReactNode,
-        options?: MountOptions & { routerProps?: MemoryRouterProps } & {
-          wrapper?: React.JSXElementConstructor<{ children: React.ReactNode }>
-        }
-      ): Cypress.Chainable<MountReturn>
-    }
+/**
+ * * Attempts to find an element with a test id attribute of the given param value
+ * @example
+ * cy.getByTestId('btn')
+ * */
+export const mountWithProviders = (
+  component: React.ReactNode,
+  options?: MountOptions & { routerProps?: MemoryRouterProps } & {
+    wrapper?: React.JSXElementConstructor<{ children: React.ReactNode }>
   }
-}
-
-Cypress.Commands.add('mount', mount)
-Cypress.Commands.add('mountWithProviders', (component, options = {}) => {
-  const { routerProps = { initialEntries: ['/'] }, wrapper: Test, ...mountOptions } = options
+) => {
+  const { routerProps = { initialEntries: ['/'] }, wrapper: Test, ...mountOptions } = options || {}
 
   const wrapped = (
     <QueryClientProvider
@@ -74,4 +55,4 @@ Cypress.Commands.add('mountWithProviders', (component, options = {}) => {
   )
 
   return mount(wrapped, mountOptions)
-})
+}

hivemq-edge-frontend/cypress/support/component.ts

@@ -0,0 +1,12 @@
+import 'cypress-axe'
+import 'cypress-each'
+import '@percy/cypress'
+import 'cypress-real-events'
+import '@cypress/code-coverage/support'
+
+import './commands'
+import { mount } from 'cypress/react'
+import { mountWithProviders } from './commands/mountWithProviders.tsx'
+
+Cypress.Commands.add('mount', mount)
+Cypress.Commands.add('mountWithProviders', mountWithProviders)

hivemq-edge-frontend/eslint.config.mjs

@@ -1,5 +1,6 @@
 import js from '@eslint/js'
 import globals from 'globals'
+import reactPlugin from 'eslint-plugin-react'
 import reactHooks from 'eslint-plugin-react-hooks'
 import reactRefresh from 'eslint-plugin-react-refresh'
 import tsEslint from 'typescript-eslint'
@@ -9,16 +10,21 @@ import pluginQuery from '@tanstack/eslint-plugin-query'
 
 export default tsEslint.config(
   { ignores: ['dist', '**/__generated__/*'] },
-  eslintConfigPrettier,
+  reactPlugin.configs.flat.recommended,
+  reactPlugin.configs.flat['jsx-runtime'],
   pluginCypress.configs.recommended,
   ...pluginQuery.configs['flat/recommended'],
+  eslintConfigPrettier,
   {
     extends: [js.configs.recommended, ...tsEslint.configs.recommended],
     files: ['**/*.{ts,tsx}'],
     languageOptions: {
       ecmaVersion: 2020,
       globals: globals.browser,
     },
+    settings: {
+      react: { version: 'detect' },
+    },
     plugins: {
       'react-hooks': reactHooks,
       'react-refresh': reactRefresh,
@@ -37,10 +43,14 @@ export default tsEslint.config(
         },
       ],
 
+      'react/prop-types': 0,
+      'react/display-name': 0,
+
       'unused-expressions': 'off',
       '@typescript-eslint/no-unused-expressions': 'off',
       'cypress/no-unnecessary-waiting': 'error',
       '@typescript-eslint/consistent-type-imports': 'error',
+      'react/jsx-curly-brace-presence': ['error', { props: 'never', children: 'never' }],
     },
   }
 )

hivemq-edge-frontend/package.json

@@ -7,6 +7,7 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "lint:eslint": "eslint src --report-unused-disable-directives --max-warnings 0",
+    "lint:eslint:fix": "eslint src --report-unused-disable-directives --max-warnings 0 --fix",
     "lint:prettier": "prettier --check .",
     "lint:prettier:write": "prettier --write .",
     "lint:stylelint": "stylelint './src/**/*.css'",
@@ -22,7 +23,7 @@
     "cypress:run:matrix:e2e": "cypress run -q --e2e --spec ./cypress/e2e/Login/**/* && copyfiles --flat ./coverage-cypress/lcov.info ./coverage-cypress/coverage-final.json ./coverage-combined/e2e",
     "cypress:run:matrix:components": "cypress run -q --component --spec ./src/components/ConnectionStatusBadge/**/* && copyfiles --flat ./coverage-cypress/lcov.info ./coverage-combined/components",
     "cypress:run:matrix:extensions": "cypress run -q --component --spec ./src/extensions/datahub/components/controls/CanvasControls.spec.cy.tsx && copyfiles --flat ./coverage-cypress/lcov.info ./coverage-combined/extensions",
-    "cypress:run:matrix:modules": "cypress run -q --component --spec ./src/modules/**/*",
+    "cypress:run:matrix:modules": "cypress run -q --component --spec './src/modules/**/*'",
     "cypress:percy": "LOCAL_NONCE=$(date '+%s') && PERCY_PARALLEL_NONCE=$LOCAL_NONCE percy exec --parallel -- cypress run --e2e && PERCY_PARALLEL_NONCE=$LOCAL_NONCE percy exec --parallel -- cypress run --component && PERCY_PARALLEL_NONCE=$LOCAL_NONCE percy build:finalize ",
     "test": "vitest",
     "test:coverage": "vitest run --coverage",
@@ -119,12 +120,12 @@
     "@4tw/cypress-drag-drop": "^2.3.0",
     "@chakra-ui/cli": "^2.4.1",
     "@cypress/code-coverage": "^3.13.11",
-    "@eslint/js": "^9.17.0",
+    "@eslint/js": "^9.26.0",
     "@istanbuljs/nyc-config-typescript": "^1.0.2",
     "@mswjs/data": "^0.16.2",
     "@percy/cli": "^1.28.5",
     "@percy/cypress": "^3.1.3",
-    "@tanstack/eslint-plugin-query": "^5.66.0",
+    "@tanstack/eslint-plugin-query": "^5.74.7",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@types/debug": "^4.1.12",
@@ -144,24 +145,25 @@
     "cypress-each": "^1.14.0",
     "cypress-terminal-report": "^7.1.0",
     "d3-scale-cluster": "^2.0.1",
-    "eslint": "^9.19.0",
-    "eslint-config-prettier": "^10.0.1",
-    "eslint-plugin-cypress": "^4.1.0",
-    "eslint-plugin-react-hooks": "^5.1.0",
-    "eslint-plugin-react-refresh": "^0.4.18",
+    "eslint": "^9.26.0",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-plugin-cypress": "^4.3.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
     "fs-extra": "^11.3.0",
-    "globals": "^15.14.0",
+    "globals": "^16.1.0",
     "i18next-pseudo": "^2.2.1",
     "jsdom": "^24.0.0",
     "msw": "^2.7.0",
     "openapi-typescript-codegen": "^0.25.0",
-    "prettier": "^3.4.2",
+    "prettier": "^3.5.3",
     "sass": "^1.70.0",
     "stylelint": "^16.14.1",
     "stylelint-config-standard": "^37.0.0",
     "stylelint-config-standard-scss": "^14.0.0",
     "typescript": "^5.7.3",
-    "typescript-eslint": "^8.18.2",
+    "typescript-eslint": "^8.32.1",
     "vite": "^6.2.5",
     "vite-plugin-istanbul": "^6.0.2",
     "vitest": "^3.1.1"