From dab04576a12542ea86882ff024dbc8283f0d11e2 Mon Sep 17 00:00:00 2001 From: sabril <5334504+saturninoabril@users.noreply.github.com> Date: Wed, 14 Jan 2026 13:14:01 +0800 Subject: [PATCH] MM-66972 Upgrade to node 24 and main dependencies with babel, webpack and jest (#34760) * chore: upgrade to node 24 and dependencies mainly with babel, webpack and jest * fix components tests, make trial modal passed on all node 20-24 * fix cache for platform packages * updated test --------- Co-authored-by: Mattermost Build --- .github/actions/webapp-setup/action.yml | 3 + .github/workflows/api.yml | 2 +- .github/workflows/e2e-tests-ci-template.yml | 10 +- .github/workflows/server-ci.yml | 6 + .nvmrc | 2 +- e2e-tests/.ci/server.generate.sh | 14 +- e2e-tests/playwright/package-lock.json | 6 +- webapp/.npmrc | 1 - .../workflows/performance-benchmarks.yml | 4 +- webapp/channels/package.json | 4 +- .../access_control/__mocks__/monaco-editor.ts | 11 +- .../trial_banner/trial_banner.tsx | 3 +- .../permission_description.test.tsx.snap | 2 +- .../channel_invite_modal.scss | 2 +- .../team_warning_banner.test.tsx.snap | 16 +- .../channel_settings_configuration_tab.scss | 4 +- .../src/components/common/scrollbars.test.tsx | 15 + .../__snapshots__/emoji_picker.test.tsx.snap | 2 +- .../file_attachment.test.tsx.snap | 2 +- ...ct_outgoing_oauth_connection.test.tsx.snap | 8 +- ...dd_outgoing_oauth_connection.test.tsx.snap | 4 +- ...it_outgoing_oauth_connection.test.tsx.snap | 12 +- ...d_outgoing_oauth_connections.test.tsx.snap | 4 +- ...th_connection_audience_input.test.tsx.snap | 10 +- .../src/components/login/login.test.tsx | 12 +- .../marketplace_modal.test.tsx.snap | 6 +- .../invite_members.test.tsx.snap | 2 +- .../selectPropertyRenderer.test.tsx | 4 +- .../src/components/root/actions/index.ts | 3 +- .../src/components/root/root.test.tsx | 20 +- .../signup/__snapshots__/signup.test.tsx.snap | 4 +- .../start_trial_form_modal.test.tsx.snap | 4 +- .../__snapshots__/thread_footer.test.tsx.snap | 4 +- .../global_threads/global_threads.tsx | 3 +- .../three_days_left_trial_modal.test.tsx.snap | 13 - .../three_days_left_trial_modal.test.tsx | 122 +- .../user_account_name_menuitem.test.tsx.snap | 2 +- .../user_account_menu/user_account_menu.scss | 8 +- .../user_group_popover.test.tsx.snap | 2 +- .../group_member_list.test.tsx.snap | 2 +- .../advanced_textbox/advanced_textbox.scss | 2 +- .../src/components/widgets/menu/menu.test.tsx | 4 +- .../widgets/menu/menu_items/useWords.tsx | 5 +- .../tooltip_content.test.tsx.snap | 6 +- webapp/channels/src/selectors/i18n.test.js | 13 +- webapp/channels/src/tests/setup_jest.ts | 15 +- webapp/channels/src/utils/browser_utils.ts | 9 + webapp/package-lock.json | 15991 ++++++---------- webapp/package.json | 21 +- webapp/platform/client/tsconfig.build.json | 1 + webapp/platform/client/tsconfig.json | 1 + webapp/platform/components/package.json | 1 + webapp/platform/types/tsconfig.json | 1 + 53 files changed, 5777 insertions(+), 10651 deletions(-) delete mode 100644 webapp/channels/src/components/three_days_left_trial_modal/__snapshots__/three_days_left_trial_modal.test.tsx.snap create mode 100644 webapp/channels/src/utils/browser_utils.ts diff --git a/.github/actions/webapp-setup/action.yml b/.github/actions/webapp-setup/action.yml index 77574bd5270..af97cb31c72 100644 --- a/.github/actions/webapp-setup/action.yml +++ b/.github/actions/webapp-setup/action.yml @@ -15,6 +15,9 @@ runs: path: | webapp/node_modules webapp/channels/node_modules + webapp/platform/client/node_modules + webapp/platform/components/node_modules + webapp/platform/types/node_modules key: node-modules-${{ runner.os }}-${{ hashFiles('webapp/package-lock.json') }} - name: ci/cache-platform-builds uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0 diff --git a/.github/workflows/api.yml b/.github/workflows/api.yml index 1369ab4d1e6..257c22d6e0b 100644 --- a/.github/workflows/api.yml +++ b/.github/workflows/api.yml @@ -20,7 +20,7 @@ jobs: - name: Checkout code uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2 - - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0 + - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0 with: node-version-file: .nvmrc cache: "npm" diff --git a/.github/workflows/e2e-tests-ci-template.yml b/.github/workflows/e2e-tests-ci-template.yml index 7b953976a4b..36ecdf64e21 100644 --- a/.github/workflows/e2e-tests-ci-template.yml +++ b/.github/workflows/e2e-tests-ci-template.yml @@ -133,7 +133,7 @@ jobs: fetch-depth: 0 - name: ci/setup-node if: "${{ inputs.run_preflight_checks }}" - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0 + uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0 id: setup_node with: node-version-file: ".nvmrc" @@ -164,7 +164,7 @@ jobs: fetch-depth: 0 - name: ci/setup-node if: "${{ inputs.run_preflight_checks }}" - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0 + uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0 id: setup_node with: node-version-file: ".nvmrc" @@ -246,7 +246,7 @@ jobs: ref: ${{ inputs.commit_sha }} fetch-depth: 0 - name: ci/setup-node - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0 + uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0 id: setup_node with: node-version-file: ".nvmrc" @@ -333,7 +333,7 @@ jobs: ln -sfn /usr/local/opt/docker-compose/bin/docker-compose ~/.docker/cli-plugins/docker-compose sudo ln -sf $HOME/.colima/default/docker.sock /var/run/docker.sock - name: ci/setup-node - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0 + uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0 id: setup_node with: node-version-file: ".nvmrc" @@ -412,7 +412,7 @@ jobs: e2e-tests/${{ inputs.TEST }}/results/ - name: ci/setup-node if: "${{ inputs.enable_reporting }}" - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0 + uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0 id: setup_node with: node-version-file: ".nvmrc" diff --git a/.github/workflows/server-ci.yml b/.github/workflows/server-ci.yml index 46b4f6e86af..919f697f8d6 100644 --- a/.github/workflows/server-ci.yml +++ b/.github/workflows/server-ci.yml @@ -282,6 +282,12 @@ jobs: steps: - name: Checkout mattermost project uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2 + - name: ci/setup-node + uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0 + with: + node-version-file: ".nvmrc" + cache: "npm" + cache-dependency-path: "webapp/package-lock.json" - name: Run setup-go-work run: make setup-go-work - name: Build diff --git a/.nvmrc b/.nvmrc index a3597ecbd10..f88da62e246 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -20.11 +24.11 diff --git a/e2e-tests/.ci/server.generate.sh b/e2e-tests/.ci/server.generate.sh index c2d784b613a..103d849c29f 100755 --- a/e2e-tests/.ci/server.generate.sh +++ b/e2e-tests/.ci/server.generate.sh @@ -260,7 +260,7 @@ $(if mme2e_is_token_in_list "webhook-interactions" "$ENABLED_DOCKER_SERVICES"; t # shellcheck disable=SC2016 echo ' webhook-interactions: - image: mattermostdevelopment/mirrored-node:${NODE_VERSION_REQUIRED} + image: node:${NODE_VERSION_REQUIRED} command: sh -c "npm install --global --legacy-peer-deps && exec node webhook_serve.js" healthcheck: test: ["CMD", "curl", "-s", "-o/dev/null", "127.0.0.1:3000"] @@ -275,11 +275,21 @@ $(if mme2e_is_token_in_list "webhook-interactions" "$ENABLED_DOCKER_SERVICES"; t fi) $(if mme2e_is_token_in_list "playwright" "$ENABLED_DOCKER_SERVICES"; then + # shellcheck disable=SC2016 echo ' playwright: image: mcr.microsoft.com/playwright:v1.57.0-noble entrypoint: ["/bin/bash", "-c"] - command: ["until [ -f /var/run/mm_terminate ]; do sleep 5; done"] + command: + - | + # Install Node.js based on .nvmrc + NODE_VERSION=$$(cat /mattermost/.nvmrc) + echo "Installing Node.js $${NODE_VERSION}..." + curl -fsSL https://deb.nodesource.com/setup_$${NODE_VERSION%%.*}.x | bash - + apt-get install -y nodejs + echo "Node.js version: $$(node --version)" + # Wait for termination signal + until [ -f /var/run/mm_terminate ]; do sleep 5; done env_file: - "./.env.playwright" environment: diff --git a/e2e-tests/playwright/package-lock.json b/e2e-tests/playwright/package-lock.json index 91d89d3654f..7933af97634 100644 --- a/e2e-tests/playwright/package-lock.json +++ b/e2e-tests/playwright/package-lock.json @@ -5981,9 +5981,9 @@ } }, "node_modules/systeminformation": { - "version": "5.30.1", - "resolved": "https://registry.npmjs.org/systeminformation/-/systeminformation-5.30.1.tgz", - "integrity": "sha512-5zK8Sqqn71b0AoYKnj8nurrugOVogo4hBxAeQR9N0lbC5V+Fkw1hRBRWLaKxBmuvX8v4xH3cxifOJjlhQQW1lQ==", + "version": "5.30.2", + "resolved": "https://registry.npmjs.org/systeminformation/-/systeminformation-5.30.2.tgz", + "integrity": "sha512-Rrt5oFTWluUVuPlbtn3o9ja+nvjdF3Um4DG0KxqfYvpzcx7Q9plZBTjJiJy9mAouua4+OI7IUGBaG9Zyt9NgxA==", "license": "MIT", "os": [ "darwin", diff --git a/webapp/.npmrc b/webapp/.npmrc index 145d3fa25b8..cffe8cdef13 100644 --- a/webapp/.npmrc +++ b/webapp/.npmrc @@ -1,2 +1 @@ save-exact=true -engine-strict=true diff --git a/webapp/channels/.github/workflows/performance-benchmarks.yml b/webapp/channels/.github/workflows/performance-benchmarks.yml index 9360a7ad30c..f20e4c3eeb1 100644 --- a/webapp/channels/.github/workflows/performance-benchmarks.yml +++ b/webapp/channels/.github/workflows/performance-benchmarks.yml @@ -23,9 +23,9 @@ jobs: - name: Check out web app uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2 - - uses: actions/setup-node@cdca7365b2dadb8aad0a33bc7601856ffabcc48e # v4.3.0 + - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0 with: - node-version: 16.10.0 + node-version-file: ".nvmrc" - name: Download and install Cypress uses: cypress-io/github-action@108b8684ae52e735ff7891524cbffbcd4be5b19f # v6.7.16 diff --git a/webapp/channels/package.json b/webapp/channels/package.json index 746555ffa37..e6541105274 100644 --- a/webapp/channels/package.json +++ b/webapp/channels/package.json @@ -149,8 +149,8 @@ "imagemin-mozjpeg": "9.0.0", "jest": "30.1.3", "jest-canvas-mock": "2.5.0", - "jest-cli": "29.7.0", - "jest-environment-jsdom": "29.7.0", + "jest-cli": "30.1.3", + "jest-environment-jsdom": "30.1.0", "jest-junit": "16.0.0", "jest-watch-typeahead": "3.0.1", "nock": "13.2.8", diff --git a/webapp/channels/src/components/admin_console/access_control/__mocks__/monaco-editor.ts b/webapp/channels/src/components/admin_console/access_control/__mocks__/monaco-editor.ts index d6a969c7b57..c97540259fb 100644 --- a/webapp/channels/src/components/admin_console/access_control/__mocks__/monaco-editor.ts +++ b/webapp/channels/src/components/admin_console/access_control/__mocks__/monaco-editor.ts @@ -3,7 +3,16 @@ import {jest} from '@jest/globals'; -const monacoMock = { +const monacoMock: { + editor: { + create: jest.Mock; + defineTheme: jest.Mock; + setTheme: jest.Mock; + }; + languages: { + registerCompletionItemProvider: jest.Mock; + }; +} = { editor: { create: jest.fn(), defineTheme: jest.fn(), diff --git a/webapp/channels/src/components/admin_console/license_settings/trial_banner/trial_banner.tsx b/webapp/channels/src/components/admin_console/license_settings/trial_banner/trial_banner.tsx index 1c34f39d06e..4e6e83e4174 100644 --- a/webapp/channels/src/components/admin_console/license_settings/trial_banner/trial_banner.tsx +++ b/webapp/channels/src/components/admin_console/license_settings/trial_banner/trial_banner.tsx @@ -2,7 +2,6 @@ // See LICENSE.txt for license information. import React, {useEffect, useState} from 'react'; -import type {ReactNode} from 'react'; import {FormattedMessage, useIntl} from 'react-intl'; import {useDispatch, useSelector} from 'react-redux'; @@ -108,7 +107,7 @@ const TrialBanner = ({ case TrialLoadStatus.Failed: return formatMessage({id: 'start_trial.modal.failed', defaultMessage: 'Failed'}); case TrialLoadStatus.Embargoed: - return formatMessage( + return formatMessage( { id: 'admin.license.trial-request.embargoed', defaultMessage: 'We were unable to process the request due to limitations for embargoed countries. Learn more in our documentation, or reach out to legal@mattermost.com for questions around export limitations.', diff --git a/webapp/channels/src/components/admin_console/permission_schemes_settings/__snapshots__/permission_description.test.tsx.snap b/webapp/channels/src/components/admin_console/permission_schemes_settings/__snapshots__/permission_description.test.tsx.snap index fab9f64e31a..1443cba92bf 100644 --- a/webapp/channels/src/components/admin_console/permission_schemes_settings/__snapshots__/permission_description.test.tsx.snap +++ b/webapp/channels/src/components/admin_console/permission_schemes_settings/__snapshots__/permission_description.test.tsx.snap @@ -69,7 +69,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_descrip Inherited from All Members diff --git a/webapp/channels/src/components/channel_invite_modal/channel_invite_modal.scss b/webapp/channels/src/components/channel_invite_modal/channel_invite_modal.scss index 682de30d98e..df3acf11195 100644 --- a/webapp/channels/src/components/channel_invite_modal/channel_invite_modal.scss +++ b/webapp/channels/src/components/channel_invite_modal/channel_invite_modal.scss @@ -1,4 +1,4 @@ -@import 'utils/mixins'; +@use 'utils/mixins'; .channel-invite { &__wrapper { diff --git a/webapp/channels/src/components/channel_invite_modal/team_warning_banner/__snapshots__/team_warning_banner.test.tsx.snap b/webapp/channels/src/components/channel_invite_modal/team_warning_banner/__snapshots__/team_warning_banner.test.tsx.snap index f40510abaca..4814e9cc1bc 100644 --- a/webapp/channels/src/components/channel_invite_modal/team_warning_banner/__snapshots__/team_warning_banner.test.tsx.snap +++ b/webapp/channels/src/components/channel_invite_modal/team_warning_banner/__snapshots__/team_warning_banner.test.tsx.snap @@ -121,7 +121,7 @@ exports[`components/channel_invite_modal/team_warning_banner should match snapsh className="AlertBanner__footerMessage" > You can add to this channel once they are members of the Team Name Display @@ -549,7 +549,7 @@ exports[`components/channel_invite_modal/team_warning_banner should match snapsh className="AlertBanner__footerMessage" > and You can add and to this channel once they are members of the Team Name Display diff --git a/webapp/channels/src/components/channel_settings_modal/channel_settings_configuration_tab.scss b/webapp/channels/src/components/channel_settings_modal/channel_settings_configuration_tab.scss index 512855fd0c0..d9bbed9ad93 100644 --- a/webapp/channels/src/components/channel_settings_modal/channel_settings_configuration_tab.scss +++ b/webapp/channels/src/components/channel_settings_modal/channel_settings_configuration_tab.scss @@ -1,7 +1,7 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. -@import "utils/_animations"; +@use "utils/animations"; .ChannelSettingsModal__configurationTab { display: flex; @@ -32,7 +32,7 @@ } .channel_banner_section_body { - @include fade-in; + @include animations.fade-in; display: flex; width: 100%; diff --git a/webapp/channels/src/components/common/scrollbars.test.tsx b/webapp/channels/src/components/common/scrollbars.test.tsx index 4ee5ca0fe20..1baaf7ca48b 100644 --- a/webapp/channels/src/components/common/scrollbars.test.tsx +++ b/webapp/channels/src/components/common/scrollbars.test.tsx @@ -7,6 +7,21 @@ import {fireEvent, render} from 'tests/react_testing_utils'; import Scrollbars from './scrollbars'; +const originalGetComputedStyle = window.getComputedStyle; +beforeAll(() => { + window.getComputedStyle = (elt: Element, pseudoElt?: string | null) => { + if (pseudoElt) { + // Return an empty CSSStyleDeclaration-like object for pseudo elements + return {} as CSSStyleDeclaration; + } + return originalGetComputedStyle(elt); + }; +}); + +afterAll(() => { + window.getComputedStyle = originalGetComputedStyle; +}); + describe('Scrollbars', () => { test('should attach scroll handler to the correct element', () => { const onScroll = jest.fn(); diff --git a/webapp/channels/src/components/emoji_picker/__snapshots__/emoji_picker.test.tsx.snap b/webapp/channels/src/components/emoji_picker/__snapshots__/emoji_picker.test.tsx.snap index ab22850e9df..0eaecc364a9 100644 --- a/webapp/channels/src/components/emoji_picker/__snapshots__/emoji_picker.test.tsx.snap +++ b/webapp/channels/src/components/emoji_picker/__snapshots__/emoji_picker.test.tsx.snap @@ -136,7 +136,7 @@ exports[`components/emoji_picker/EmojiPicker should match snapshot 1`] = ` role="grid" >
configuring outgoing OAuth connections @@ -590,7 +590,7 @@ exports[`components/integrations/AbstractOutgoingOAuthConnection should match sn "listen": [Function], "location": Object { "hash": "", - "pathname": "undefinedundefined", + "pathname": "/", "search": "", "state": undefined, }, @@ -1073,7 +1073,7 @@ exports[`components/integrations/AbstractOutgoingOAuthConnection should match sn Get help with configuring outgoing OAuth connections diff --git a/webapp/channels/src/components/integrations/outgoing_oauth_connections/__snapshots__/add_outgoing_oauth_connection.test.tsx.snap b/webapp/channels/src/components/integrations/outgoing_oauth_connections/__snapshots__/add_outgoing_oauth_connection.test.tsx.snap index 3997ceaa575..697f7acb5b3 100644 --- a/webapp/channels/src/components/integrations/outgoing_oauth_connections/__snapshots__/add_outgoing_oauth_connection.test.tsx.snap +++ b/webapp/channels/src/components/integrations/outgoing_oauth_connections/__snapshots__/add_outgoing_oauth_connection.test.tsx.snap @@ -15,7 +15,7 @@ exports[`components/integrations/AddOutgoingOAuthConnection should match snapsho "listen": [Function], "location": Object { "hash": "", - "pathname": "undefinedundefined", + "pathname": "/", "search": "", "state": undefined, }, @@ -467,7 +467,7 @@ exports[`components/integrations/AddOutgoingOAuthConnection should match snapsho Get help with configuring outgoing OAuth connections diff --git a/webapp/channels/src/components/integrations/outgoing_oauth_connections/__snapshots__/edit_outgoing_oauth_connection.test.tsx.snap b/webapp/channels/src/components/integrations/outgoing_oauth_connections/__snapshots__/edit_outgoing_oauth_connection.test.tsx.snap index 4e5af9625ca..80e26c04646 100644 --- a/webapp/channels/src/components/integrations/outgoing_oauth_connections/__snapshots__/edit_outgoing_oauth_connection.test.tsx.snap +++ b/webapp/channels/src/components/integrations/outgoing_oauth_connections/__snapshots__/edit_outgoing_oauth_connection.test.tsx.snap @@ -15,7 +15,7 @@ exports[`components/integrations/EditOutgoingOAuthConnection should match snapsh "listen": [Function], "location": Object { "hash": "", - "pathname": "undefinedundefined", + "pathname": "/", "search": "", "state": undefined, }, @@ -643,7 +643,7 @@ https://myothersite.com/api/v2" Get help with configuring outgoing OAuth connections @@ -756,7 +756,7 @@ exports[`components/integrations/EditOutgoingOAuthConnection should match snapsh "listen": [Function], "location": Object { "hash": "", - "pathname": "undefinedundefined", + "pathname": "/", "search": "", "state": undefined, }, @@ -1385,7 +1385,7 @@ https://myothersite.com/api/v2" Get help with configuring outgoing OAuth connections @@ -1498,7 +1498,7 @@ exports[`components/integrations/EditOutgoingOAuthConnection should match snapsh "listen": [Function], "location": Object { "hash": "", - "pathname": "undefinedundefined", + "pathname": "/", "search": "", "state": undefined, }, @@ -2126,7 +2126,7 @@ https://myothersite.com/api/v2" Get help with configuring outgoing OAuth connections diff --git a/webapp/channels/src/components/integrations/outgoing_oauth_connections/__snapshots__/installed_outgoing_oauth_connections.test.tsx.snap b/webapp/channels/src/components/integrations/outgoing_oauth_connections/__snapshots__/installed_outgoing_oauth_connections.test.tsx.snap index c96ce8a83af..390cf7b688f 100644 --- a/webapp/channels/src/components/integrations/outgoing_oauth_connections/__snapshots__/installed_outgoing_oauth_connections.test.tsx.snap +++ b/webapp/channels/src/components/integrations/outgoing_oauth_connections/__snapshots__/installed_outgoing_oauth_connections.test.tsx.snap @@ -15,7 +15,7 @@ exports[`components/integrations/InstalledOutgoingOAuthConnections should match "listen": [Function], "location": Object { "hash": "", - "pathname": "undefinedundefined", + "pathname": "/", "search": "", "state": undefined, }, @@ -190,7 +190,7 @@ exports[`components/integrations/InstalledOutgoingOAuthConnections should match Create { const button = screen.getByRole('link', {name: 'Gitlab Icon GitLab 2'}); - expect(button.style).toMatchObject({ - color: 'rgb(0, 255, 0)', - borderColor: '#00ff00', - }); + expect(button.style.color).toBe('rgb(0, 255, 0)'); + expect(button.style.borderColor).toBe('rgb(0, 255, 0)'); }); it('should focus username field when there is an error', async () => { @@ -374,10 +372,8 @@ describe('components/login/Login', () => { const button = screen.getByRole('link', {name: 'OpenID Icon OpenID 2'}); - expect(button.style).toMatchObject({ - color: 'rgb(0, 255, 0)', - borderColor: '#00ff00', - }); + expect(button.style.color).toBe('rgb(0, 255, 0)'); + expect(button.style.borderColor).toBe('rgb(0, 255, 0)'); }); it('should redirect on login', async () => { diff --git a/webapp/channels/src/components/plugin_marketplace/__snapshots__/marketplace_modal.test.tsx.snap b/webapp/channels/src/components/plugin_marketplace/__snapshots__/marketplace_modal.test.tsx.snap index 797c2508c1a..a9769b41484 100644 --- a/webapp/channels/src/components/plugin_marketplace/__snapshots__/marketplace_modal.test.tsx.snap +++ b/webapp/channels/src/components/plugin_marketplace/__snapshots__/marketplace_modal.test.tsx.snap @@ -92,7 +92,7 @@ exports[`components/marketplace/ doesn't show web marketplace banner in FeatureF Error connecting to the marketplace server. Please check your settings in the System Console @@ -204,7 +204,7 @@ exports[`components/marketplace/ hides search, shows web marketplace banner in F Error connecting to the marketplace server. Please check your settings in the System Console @@ -501,7 +501,7 @@ exports[`components/marketplace/ should render with error banner 1`] = ` Error connecting to the marketplace server. Please check your settings in the System Console diff --git a/webapp/channels/src/components/preparing_workspace/__snapshots__/invite_members.test.tsx.snap b/webapp/channels/src/components/preparing_workspace/__snapshots__/invite_members.test.tsx.snap index a011277947a..3b1c8a01555 100644 --- a/webapp/channels/src/components/preparing_workspace/__snapshots__/invite_members.test.tsx.snap +++ b/webapp/channels/src/components/preparing_workspace/__snapshots__/invite_members.test.tsx.snap @@ -173,7 +173,7 @@ exports[`InviteMembers component should match snapshot when it is cloud 1`] = ` id="react-select-2-input" role="combobox" spellcheck="false" - style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;" + style="color: inherit; background: 0px; opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;" tabindex="0" type="text" value="" diff --git a/webapp/channels/src/components/properties_card_view/propertyValueRenderer/select_property_renderer/selectPropertyRenderer.test.tsx b/webapp/channels/src/components/properties_card_view/propertyValueRenderer/select_property_renderer/selectPropertyRenderer.test.tsx index d937401b2a3..a54b26de96f 100644 --- a/webapp/channels/src/components/properties_card_view/propertyValueRenderer/select_property_renderer/selectPropertyRenderer.test.tsx +++ b/webapp/channels/src/components/properties_card_view/propertyValueRenderer/select_property_renderer/selectPropertyRenderer.test.tsx @@ -39,8 +39,10 @@ describe('SelectPropertyRenderer', () => { const element = screen.getByTestId('select-property'); expect(element).toBeInTheDocument(); expect(element).toHaveTextContent('option1'); + + // Component applies inline styles via style prop expect(element).toHaveStyle({ - backgroundColor: 'rgba(var(--button-bg-rgb), 0.08)', + backgroundColor: 'var(--sidebar-text-active-border)', color: '#FFF', }); }); diff --git a/webapp/channels/src/components/root/actions/index.ts b/webapp/channels/src/components/root/actions/index.ts index 04b7a71ad22..43c7c5d897f 100644 --- a/webapp/channels/src/components/root/actions/index.ts +++ b/webapp/channels/src/components/root/actions/index.ts @@ -21,6 +21,7 @@ import {checkIsFirstAdmin, getCurrentUser, isCurrentUserSystemAdmin} from 'matte import {redirectUserToDefaultTeam, emitUserLoggedOutEvent} from 'actions/global_actions'; +import {reloadPage} from 'utils/browser_utils'; import {ActionTypes, StoragePrefixes} from 'utils/constants'; import {doesCookieContainsMMUserId} from 'utils/utils'; @@ -165,7 +166,7 @@ export function handleLoginLogoutSignal(e: StorageEvent): ThunkActionFunc // detected login from a different tab function reloadOnFocus() { - location.reload(); + reloadPage(); } window.addEventListener('focus', reloadOnFocus); } diff --git a/webapp/channels/src/components/root/root.test.tsx b/webapp/channels/src/components/root/root.test.tsx index e6aa0381674..db734ba53c1 100644 --- a/webapp/channels/src/components/root/root.test.tsx +++ b/webapp/channels/src/components/root/root.test.tsx @@ -9,6 +9,7 @@ import * as GlobalActions from 'actions/global_actions'; import testConfigureStore from 'packages/mattermost-redux/test/test_store'; import {renderWithContext, waitFor} from 'tests/react_testing_utils'; +import * as BrowserUtils from 'utils/browser_utils'; import {StoragePrefixes} from 'utils/constants'; import {handleLoginLogoutSignal, redirectToOnboardingOrDefaultTeam} from './actions'; @@ -26,6 +27,10 @@ jest.mock('utils/utils', () => ({ applyTheme: jest.fn(), })); +jest.mock('utils/browser_utils', () => ({ + reloadPage: jest.fn(), +})); + jest.mock('actions/global_actions', () => ({ redirectUserToDefaultTeam: jest.fn(), })); @@ -93,11 +98,9 @@ describe('components/Root', () => { }; let originalMatchMedia: (query: string) => MediaQueryList; - let originalReload: () => void; beforeAll(() => { originalMatchMedia = window.matchMedia; - originalReload = window.location.reload; Object.defineProperty(window, 'matchMedia', { writable: true, @@ -106,22 +109,17 @@ describe('components/Root', () => { media: query, })), }); - - Object.defineProperty(window.location, 'reload', { - configurable: true, - writable: true, - }); - - window.location.reload = jest.fn(); }); afterEach(() => { jest.restoreAllMocks(); + + // Reset the reloadPage mock after each test + (BrowserUtils.reloadPage as jest.Mock).mockClear(); }); afterAll(() => { window.matchMedia = originalMatchMedia; - window.location.reload = originalReload; }); test('should load config and license on mount and redirect to sign-up page', async () => { @@ -228,7 +226,7 @@ describe('components/Root', () => { window.dispatchEvent(new Event('focus')); await waitFor(() => { - expect(window.location.reload).toHaveBeenCalledTimes(1); + expect(BrowserUtils.reloadPage).toHaveBeenCalledTimes(1); }); }); diff --git a/webapp/channels/src/components/signup/__snapshots__/signup.test.tsx.snap b/webapp/channels/src/components/signup/__snapshots__/signup.test.tsx.snap index 7a9d3bea7a4..4ff9940f9e4 100644 --- a/webapp/channels/src/components/signup/__snapshots__/signup.test.tsx.snap +++ b/webapp/channels/src/components/signup/__snapshots__/signup.test.tsx.snap @@ -170,7 +170,7 @@ exports[`components/signup/Signup should match snapshot for all signup options e Sign up at https://mattermost.com/security-updates/ @@ -336,7 +336,7 @@ exports[`components/signup/Signup should match snapshot for all signup options e Sign up at https://mattermost.com/security-updates/ diff --git a/webapp/channels/src/components/start_trial_form_modal/__snapshots__/start_trial_form_modal.test.tsx.snap b/webapp/channels/src/components/start_trial_form_modal/__snapshots__/start_trial_form_modal.test.tsx.snap index 8b2e7997cb5..8aac9eb4679 100644 --- a/webapp/channels/src/components/start_trial_form_modal/__snapshots__/start_trial_form_modal.test.tsx.snap +++ b/webapp/channels/src/components/start_trial_form_modal/__snapshots__/start_trial_form_modal.test.tsx.snap @@ -225,7 +225,7 @@ Object { id="react-select-2-input" role="combobox" spellcheck="false" - style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;" + style="color: inherit; background: 0px; opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;" tabindex="0" type="text" value="" @@ -312,7 +312,7 @@ Object { id="react-select-3-input" role="combobox" spellcheck="false" - style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;" + style="color: inherit; background: 0px; opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;" tabindex="0" type="text" value="" diff --git a/webapp/channels/src/components/threading/channel_threads/thread_footer/__snapshots__/thread_footer.test.tsx.snap b/webapp/channels/src/components/threading/channel_threads/thread_footer/__snapshots__/thread_footer.test.tsx.snap index be2ca7225d2..4f73fca0c3b 100644 --- a/webapp/channels/src/components/threading/channel_threads/thread_footer/__snapshots__/thread_footer.test.tsx.snap +++ b/webapp/channels/src/components/threading/channel_threads/thread_footer/__snapshots__/thread_footer.test.tsx.snap @@ -507,7 +507,7 @@ exports[`components/threading/channel_threads/thread_footer should report total Last reply