[ci] Workflow for Grid UI component tests (#15778)

Signed-off-by: Viet Nguyen Duc <[email protected]>

Author: VietND96

.github/workflows/ci-grid-ui.yml

@@ -0,0 +1,38 @@
+name: CI - Grid UI
+
+on:
+  pull_request:
+    paths:
+      - 'javascript/grid-ui/**'
+  push:
+    branches:
+      - trunk
+    paths:
+      - 'javascript/grid-ui/**'
+  workflow_dispatch:
+  workflow_call:
+
+jobs:
+  grid-ui-tests:
+    runs-on: ubuntu-latest
+    name: Grid UI Component Tests
+    steps:
+      - name: Checkout source tree
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 50
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+          cache: 'npm'
+          cache-dependency-path: 'javascript/grid-ui/package.json'
+
+      - name: Install dependencies
+        working-directory: javascript/grid-ui
+        run: npm install
+
+      - name: Run component tests
+        working-directory: javascript/grid-ui
+        run: npm test

javascript/grid-ui/jest.config.cjs

@@ -0,0 +1,41 @@
+// Licensed to the Software Freedom Conservancy (SFC) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The SFC licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  testMatch: ['<rootDir>/src/tests/**/*.test.tsx'],
+  transform: {
+    '^.+\\.(ts|tsx)$': 'ts-jest',
+    '^.+\\.(js|jsx)$': 'ts-jest'
+  },
+  moduleNameMapper: {
+    '\\.(css|less|scss|sass)$': '<rootDir>/src/tests/__mocks__/styleMock.js',
+    '\\.(jpg|jpeg|png|gif|svg)$': '<rootDir>/src/tests/__mocks__/styleMock.js'
+  },
+  transformIgnorePatterns: [
+    'node_modules/(?!(pretty-ms|parse-ms)/)'
+  ],
+  setupFilesAfterEnv: [
+    '<rootDir>/src/setupTests.tsx',
+    '<rootDir>/src/tests/setup-jest.js'
+  ],
+  // Suppress act() warnings from Material-UI components
+  testEnvironmentOptions: {
+    suppressConsole: true
+  }
+};

javascript/grid-ui/package.json

@@ -27,7 +27,8 @@
     "source-map-explorer": "2.5.3"
   },
   "scripts": {
-    "build": "bazel build //javascript/grid-ui:bundle"
+    "build": "bazel build //javascript/grid-ui:bundle",
+    "test": "jest --config jest.config.cjs"
   },
   "homepage": "./ui",
   "browser": {
@@ -47,11 +48,13 @@
     ]
   },
   "devDependencies": {
-    "@babel/preset-react": "7.26.3",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "14.3.1",
     "@testing-library/user-event": "14.5.2",
     "esbuild": "0.24.2",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "ts-jest": "^29.3.4",
     "ts-standard": "12.0.2",
     "typescript": "5.7.2"
   },

javascript/grid-ui/src/tests/__mocks__/styleMock.js

@@ -0,0 +1,18 @@
+// Licensed to the Software Freedom Conservancy (SFC) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The SFC licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+module.exports = 'chrome.svg';

javascript/grid-ui/src/tests/components/QueuedSessions.test.tsx

@@ -17,7 +17,8 @@
 
 import * as React from 'react'
 import QueuedSessions from '../../components/QueuedSessions/QueuedSessions'
-import { render, screen } from '@testing-library/react'
+import { screen } from '@testing-library/react'
+import { render } from '../utils/render-utils'
 
 const sessionQueueRequests: string[] = [
   '{"acceptInsecureCerts":true,"browserName":"chrome","goog:chromeOptions":{"args":["--start-maximized"],"extensions":[]}}'

javascript/grid-ui/src/tests/components/RunningSessions.test.tsx

@@ -18,7 +18,8 @@
 import * as React from 'react'
 import RunningSessions from '../../components/RunningSessions/RunningSessions'
 import SessionInfo from '../../models/session-info'
-import { render, screen, within } from '@testing-library/react'
+import { act, screen, within } from '@testing-library/react'
+import { render } from '../utils/render-utils'
 import userEvent from '@testing-library/user-event'
 import { createSessionData } from '../../models/session-data'
 
@@ -131,7 +132,13 @@ it('search field works for multiple results', async () => {
 it('search field works for lazy search', async () => {
   const { getByPlaceholderText, getByText, queryByText } = render(<RunningSessions sessions={sessions} origin={origin} />)
   const user = userEvent.setup()
-  await user.type(getByPlaceholderText('Search…'), 'browserName')
+
+  await act(async () => {
+    await user.type(getByPlaceholderText('Search…'), 'browserName')
+  })
+
+  await new Promise(resolve => setTimeout(resolve, 0))
+
   expect(getByPlaceholderText('Search…')).toHaveValue('browserName')
   expect(queryByText(sessions[0].id)).toBeInTheDocument()
   expect(getByText(sessions[1].id)).toBeInTheDocument()

javascript/grid-ui/src/tests/setup-jest.js

@@ -0,0 +1,24 @@
+// Licensed to the Software Freedom Conservancy (SFC) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The SFC licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+const originalError = console.error;
+console.error = (...args) => {
+  if (/Warning.*not wrapped in act/.test(args[0])) {
+    return;
+  }
+  originalError.call(console, ...args);
+};

javascript/grid-ui/src/tests/utils/render-utils.tsx

@@ -0,0 +1,30 @@
+// Licensed to the Software Freedom Conservancy (SFC) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The SFC licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+import React from 'react'
+import { render } from '@testing-library/react'
+import { MemoryRouter } from 'react-router-dom'
+
+const renderWithRouter = (ui, { route = '/' } = {}) => {
+  return render(
+    <MemoryRouter initialEntries={[route]}>
+      {ui}
+    </MemoryRouter>
+  )
+}
+
+export { renderWithRouter as render }