Skip to content

Fixed Webapp test for boards#182

Open
Rajat-Dabade wants to merge 2 commits intoboard-test-fixfrom
webapp-test-fix
Open

Fixed Webapp test for boards#182
Rajat-Dabade wants to merge 2 commits intoboard-test-fixfrom
webapp-test-fix

Conversation

@Rajat-Dabade
Copy link
Copy Markdown
Contributor

@Rajat-Dabade Rajat-Dabade commented Mar 30, 2026

Summary

Fixed all the webapp tests for boards, added the CI rule to run webapp test.

Ticket Link

https://mattermost.atlassian.net/browse/MM-68079

Change Impact: 🟡 Medium

Regression Risk: Medium risk with localized potential for regression. The changes primarily affect the webapp test suite, but several factors elevate the risk:

  • Global test setup modifications in setupFile.ts add window-level mocks (scrollIntoView, window.store) that could have unexpected interactions with other tests
  • The teams Redux slice is added to multiple test mocks, requiring consistent implementation across all affected test files to avoid state shape mismatches
  • The markdownEditor.tsx refactoring modifies production code to handle window.store access, introducing a dependency on global state that could be fragile if the store isn't properly initialized
  • Mock channel data changes (mock_window.tsx) affect the test fixture data structure, requiring validation that all dependent tests are aligned

QA Recommendation: Given that automated test coverage is being significantly expanded by enabling the previously disabled webapp-test CI job, manual QA can be minimized. However, focus manual testing on:

  • Markdown editor rendering and team-aware channel selection functionality
  • Redux state initialization in interactive components that depend on the teams slice
  • Verify no regression in existing snapshot tests after the comment DOM selector refinements

The straightforward nature of test fixes and the fact that no critical business logic or data handling was modified keep this to medium risk rather than high.

@Rajat-Dabade Rajat-Dabade self-assigned this Mar 30, 2026
@Rajat-Dabade Rajat-Dabade added 2: Dev Review Requires review by a core committer 3: QA Review Requires review by a QA tester labels Mar 30, 2026
@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Mar 30, 2026

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: b889490b-7f92-4131-93e5-636f4b042c19

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • ✅ Review completed - (🔄 Check again to review again)
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch webapp-test-fix

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
webapp/src/components/markdownEditor.tsx (1)

66-66: ⚠️ Potential issue | 🟡 Minor

Inconsistent null handling for window.store.

Line 66 still accesses (window as any).store directly and passes it to <Provider>. If window.store is undefined (which the useMemo now guards against), this could cause the Provider to receive an undefined store, leading to runtime errors.

Consider applying the same defensive pattern here or conditionally rendering the Provider.

Proposed fix
+        {(window as any).store && (
         <Provider store={(window as any).store}>
             {messageHtmlToComponent(formatText(text || placeholderText || '', {
                 atMentions: true,
                 team: selectedTeam,
                 channelNamesMap,
             }), {
                 fetchMissingUsers: true,
             })}
         </Provider>
+        )}
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@webapp/src/components/markdownEditor.tsx` at line 66, The component currently
passes (window as any).store directly into <Provider>, which can be undefined;
change it to use the memoized store from the existing useMemo (the local "store"
variable) or conditionally render <Provider> only when that memoized store is
non-null so Provider always receives a defined Redux store (adjust the JSX
around <Provider> to guard on the memoized store variable rather than accessing
(window as any).store directly).
🧹 Nitpick comments (2)
webapp/tests/setupFile.ts (1)

13-28: Consider extending the stub to include entities.teams for selector compatibility.

The getChannelsNameMapInTeam selector from mattermost-redux may traverse into entities.teams or other state slices. The current stub only provides entities.channels. While tests that import mockMMStore from mock_window.tsx explicitly override window.store, any test relying solely on this global stub might encounter issues if the selector accesses missing state paths.

💡 Potential enhancement
 ;(window as any).store = {
     getState: () => ({
         entities: {
             channels: {
                 channels: {},
                 channelsInTeam: {},
                 myMembers: {},
                 stats: {},
                 messageCounts: {},
                 membersInChannel: {},
             },
+            teams: {
+                currentTeamId: '',
+                teams: {},
+                myMembers: {},
+            },
         },
     }),
     subscribe: () => () => {},
     dispatch: () => {},
 }
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@webapp/tests/setupFile.ts` around lines 13 - 28, The global test stub
(window.store) only provides entities.channels which can break selectors like
getChannelsNameMapInTeam that also access entities.teams; update the stub in
setupFile.ts to include an entities.teams object (e.g., teams, myTeamMembers,
teamsInChannel or minimal keys your selectors expect) so selectors/readers that
traverse entities.teams won't fail; ensure the shape matches what
getChannelsNameMapInTeam and related selectors expect and keep
subscribe/dispatch as-is.
.github/workflows/ci.yml (1)

30-31: Consider adding npm cache for faster CI runs.

The actions/setup-node action supports built-in caching. This can significantly speed up CI by caching node_modules.

Proposed improvement
     - name: Setup Node
       uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af # v4.1.0
       with:
         node-version-file: focalboard/.nvmrc
+        cache: 'npm'
+        cache-dependency-path: focalboard/webapp/package-lock.json
     - name: npm ci
       run: cd focalboard/webapp && npm ci
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In @.github/workflows/ci.yml around lines 30 - 31, Update the CI step that runs
"npm ci" to leverage actions/setup-node's built-in caching: keep the existing
setup-node usage and configure it with cache: 'npm' and point
cache-dependency-path to the repo lockfile (e.g., package-lock.json or
yarn.lock) so the "npm ci" step (named "npm ci") restores node_modules between
runs; ensure the setup-node step remains before the "npm ci" step and remove any
manual npm cache handling if present.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Outside diff comments:
In `@webapp/src/components/markdownEditor.tsx`:
- Line 66: The component currently passes (window as any).store directly into
<Provider>, which can be undefined; change it to use the memoized store from the
existing useMemo (the local "store" variable) or conditionally render <Provider>
only when that memoized store is non-null so Provider always receives a defined
Redux store (adjust the JSX around <Provider> to guard on the memoized store
variable rather than accessing (window as any).store directly).

---

Nitpick comments:
In @.github/workflows/ci.yml:
- Around line 30-31: Update the CI step that runs "npm ci" to leverage
actions/setup-node's built-in caching: keep the existing setup-node usage and
configure it with cache: 'npm' and point cache-dependency-path to the repo
lockfile (e.g., package-lock.json or yarn.lock) so the "npm ci" step (named "npm
ci") restores node_modules between runs; ensure the setup-node step remains
before the "npm ci" step and remove any manual npm cache handling if present.

In `@webapp/tests/setupFile.ts`:
- Around line 13-28: The global test stub (window.store) only provides
entities.channels which can break selectors like getChannelsNameMapInTeam that
also access entities.teams; update the stub in setupFile.ts to include an
entities.teams object (e.g., teams, myTeamMembers, teamsInChannel or minimal
keys your selectors expect) so selectors/readers that traverse entities.teams
won't fail; ensure the shape matches what getChannelsNameMapInTeam and related
selectors expect and keep subscribe/dispatch as-is.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: ffb3a45a-aba2-42c5-abd6-2f5c91fb7668

📥 Commits

Reviewing files that changed from the base of the PR and between c2bc884 and 493ce1c.

⛔ Files ignored due to path filters (14)
  • webapp/src/components/__snapshots__/cardDialog.test.tsx.snap is excluded by !**/*.snap
  • webapp/src/components/__snapshots__/centerPanel.test.tsx.snap is excluded by !**/*.snap
  • webapp/src/components/__snapshots__/contentBlock.test.tsx.snap is excluded by !**/*.snap
  • webapp/src/components/__snapshots__/markdownEditor.test.tsx.snap is excluded by !**/*.snap
  • webapp/src/components/__snapshots__/viewTitle.test.tsx.snap is excluded by !**/*.snap
  • webapp/src/components/__snapshots__/workspace.test.tsx.snap is excluded by !**/*.snap
  • webapp/src/components/blocksEditor/__snapshots__/blocksEditor.test.tsx.snap is excluded by !**/*.snap
  • webapp/src/components/blocksEditor/__snapshots__/editor.test.tsx.snap is excluded by !**/*.snap
  • webapp/src/components/blocksEditor/__snapshots__/rootInput.test.tsx.snap is excluded by !**/*.snap
  • webapp/src/components/cardDetail/__snapshots__/cardDetailContents.test.tsx.snap is excluded by !**/*.snap
  • webapp/src/components/cardDetail/__snapshots__/commentsList.test.tsx.snap is excluded by !**/*.snap
  • webapp/src/components/content/__snapshots__/textElement.test.tsx.snap is excluded by !**/*.snap
  • webapp/src/components/globalHeader/__snapshots__/globalHeader.test.tsx.snap is excluded by !**/*.snap
  • webapp/src/components/sidebar/__snapshots__/sidebar.test.tsx.snap is excluded by !**/*.snap
📒 Files selected for processing (13)
  • .github/workflows/ci.yml
  • webapp/package.json
  • webapp/src/components/blocksEditor/blocks/text/text.test.tsx
  • webapp/src/components/blocksEditor/editor.test.tsx
  • webapp/src/components/cardDetail/cardDetail.test.tsx
  • webapp/src/components/cardDetail/cardDetailContents.test.tsx
  • webapp/src/components/cardDetail/commentsList.test.tsx
  • webapp/src/components/content/textElement.test.tsx
  • webapp/src/components/contentBlock.test.tsx
  • webapp/src/components/markdownEditor.test.tsx
  • webapp/src/components/markdownEditor.tsx
  • webapp/tests/mock_window.tsx
  • webapp/tests/setupFile.ts

Copy link
Copy Markdown
Member

@harshilsharma63 harshilsharma63 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

2: Dev Review Requires review by a core committer 3: QA Review Requires review by a QA tester

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants