ci: test & lint mattermost-plugin (#3156)

* ci: test & lint `mattermost-plugin`

* chore: fix mattermost-plugin/webapp linting

* lint: fix eslint errors

* ci: run `make webapp-ci`

* test: fix non-idempotent snapshot tests

* chore: `npm run i18n-extract`

Co-authored-by: Mattermod <mattermod@users.noreply.github.com>

.github/workflows/ci.yml

@@ -40,10 +40,9 @@ jobs:
       uses: actions/checkout@v3
 
     - name: npm ci
-      run: cd webapp; npm ci
-
-    - name: ESLint
-      run: cd webapp; npm run check
+      run: |
+        cd webapp && npm ci && cd -
+        cd mattermost-plugin/webapp && npm ci
 
     - name: Set up Go
       uses: actions/setup-go@v3
@@ -67,11 +66,8 @@ jobs:
         name: focalboard-server-linux-amd64.tar.gz
         path: ${{ github.workspace }}/dist/focalboard-server-linux-amd64.tar.gz
 
-    - name: "Test webapp: Jest"
-      run: cd webapp; npm run test
-
-    - name: "Test webapp: Cypress"
-      run: "cd webapp; npm run cypress:ci"
+    - name: Lint & test webapp
+      run: make webapp-ci
 
   ci-windows-server:
     runs-on: windows-2022

Makefile

@@ -37,11 +37,7 @@ prebuild: ## Run prebuild actions (install dependencies etc.).
 	cd webapp; npm install
 	cd mattermost-plugin/webapp; npm install
 
-ci: server-test
-	cd webapp; npm run check
-	cd webapp; npm run test
-	cd webapp; npm run cypress:ci
-	cd mattermost-plugin/webapp; npm run test
+ci: webapp-ci server-test ## Simulate CI, locally.
 
 templates-archive: ## Build templates archive file
 	cd server/assets/build-template-archive; go run -tags '$(BUILD_TAGS)' main.go --dir="../templates-boardarchive" --out="../templates.boardarchive"
@@ -170,6 +166,13 @@ server-test-postgres: templates-archive ## Run server tests using postgres
 webapp: ## Build webapp.
 	cd webapp; npm run pack
 
+webapp-ci: ## Webapp CI: linting & testing.
+	cd webapp; npm run check
+	cd mattermost-plugin/webapp; npm run lint
+	cd webapp; npm run test
+	cd mattermost-plugin/webapp; npm run test
+	cd webapp; npm run cypress:ci
+
 webapp-test: ## jest tests for webapp
 	cd webapp; npm run test
 

mattermost-plugin/webapp/.eslintrc.json

@@ -1,12 +1,12 @@
 {
   "extends": [
-    "plugin:mattermost/react",
+    "plugin:react/recommended",
     "plugin:cypress/recommended",
     "plugin:jquery/deprecated"
   ],
   "plugins": [
+    "react",
     "babel",
-    "mattermost",
     "import",
     "cypress",
     "jquery",

mattermost-plugin/webapp/src/components/__snapshots__/rhsChannelBoardItem.test.tsx.snap

@@ -33,7 +33,7 @@ exports[`components/rhsChannelBoardItem render board 1`] = `
     <div
       class="date"
     >
-      Last update at: July 06, 8:48 AM
+      Last update at: July 08, 8:10 PM
     </div>
   </div>
 </div>
@@ -135,7 +135,7 @@ exports[`components/rhsChannelBoardItem render board with menu open 1`] = `
     <div
       class="date"
     >
-      Last update at: July 06, 8:48 AM
+      Last update at: July 08, 8:10 PM
     </div>
   </div>
 </div>

mattermost-plugin/webapp/src/components/__snapshots__/rhsChannelBoards.test.tsx.snap

@@ -62,7 +62,7 @@ exports[`components/rhsChannelBoards renders the RHS for channel boards 1`] = `
           <div
             class="date"
           >
-            Last update at: July 06, 8:48 AM
+            Last update at: July 08, 8:10 PM
           </div>
         </div>
         <div
@@ -96,7 +96,7 @@ exports[`components/rhsChannelBoards renders the RHS for channel boards 1`] = `
           <div
             class="date"
           >
-            Last update at: July 06, 8:48 AM
+            Last update at: July 08, 8:10 PM
           </div>
         </div>
       </div>

mattermost-plugin/webapp/src/components/boardSelector.test.tsx

@@ -6,8 +6,9 @@ import {Provider as ReduxProvider} from 'react-redux'
 import {render, screen, act} from '@testing-library/react'
 import {mocked} from 'jest-mock'
 
-import octoClient from '../../../../webapp/src/octoClient'
 import userEvent from '@testing-library/user-event'
+
+import octoClient from '../../../../webapp/src/octoClient'
 import {mockStateStore} from '../../../../webapp/src/testUtils'
 import {createBoard} from '../../../../webapp/src/blocks/board'
 import {wrapIntl} from '../../../../webapp/src/testUtils'

mattermost-plugin/webapp/src/components/rhsChannelBoardItem.test.tsx

@@ -24,6 +24,7 @@ describe('components/rhsChannelBoardItem', () => {
             },
         }
         const board = createBoard()
+        board.updateAt = 1657311058157
         board.title = 'Test board'
 
         const store = mockStateStore([], state)
@@ -46,6 +47,7 @@ describe('components/rhsChannelBoardItem', () => {
             },
         }
         const board = createBoard()
+        board.updateAt = 1657311058157
         board.title = 'Test board'
 
         const store = mockStateStore([], state)

mattermost-plugin/webapp/src/components/rhsChannelBoards.test.tsx

@@ -3,7 +3,7 @@
 
 import React from 'react'
 import {Provider as ReduxProvider} from 'react-redux'
-import {render, screen} from '@testing-library/react'
+import {render} from '@testing-library/react'
 
 import {createBoard} from '../../../../webapp/src/blocks/board'
 import {mockStateStore, wrapIntl} from '../../../../webapp/src/testUtils'
@@ -12,8 +12,11 @@ import RHSChannelBoards from './rhsChannelBoards'
 
 describe('components/rhsChannelBoards', () => {
     const board1 = createBoard()
+    board1.updateAt = 1657311058157
     const board2 = createBoard()
     const board3 = createBoard()
+    board3.updateAt = 1657311058157
+
     board1.channelId = 'channel-id'
     board3.channelId = 'channel-id'
 

mattermost-plugin/webapp/src/components/rhsChannelBoards.tsx

@@ -22,7 +22,7 @@ const boardsScreenshots = (window as any).baseURL + '/public/boards-screenshots.
 const RHSChannelBoards = () => {
     const boards = useAppSelector(getMySortedBoards)
     const team = useAppSelector(getCurrentTeam)
-    const currentChannel = useAppSelector(getCurrentChannel);
+    const currentChannel = useAppSelector(getCurrentChannel)
     const dispatch = useAppDispatch()
 
     if (!boards) {

mattermost-plugin/webapp/src/components/rhsChannelBoardsHeader.tsx

@@ -10,7 +10,7 @@ import {useAppSelector} from '../../../../webapp/src/store/hooks'
 
 const RHSChannelBoardsHeader = () => {
     const appBarIconURL = (window as any).baseURL + '/public/app-bar-icon.png'
-    const currentChannel = useAppSelector(getCurrentChannel);
+    const currentChannel = useAppSelector(getCurrentChannel)
     const language = useAppSelector<string>(getLanguage)
 
     if (!currentChannel) {

mattermost-plugin/webapp/src/index.tsx

@@ -59,7 +59,7 @@ import ErrorBoundary from './error_boundary'
 import {PluginRegistry} from './types/mattermost-webapp'
 
 import './plugin.scss'
-import CloudUpgradeNudge from "./components/cloudUpgradeNudge/cloudUpgradeNudge";
+import CloudUpgradeNudge from "./components/cloudUpgradeNudge/cloudUpgradeNudge"
 
 function getSubpath(siteURL: string): string {
     const url = new URL(siteURL)

mattermost-plugin/webapp/tests/setup.tsx

@@ -1,4 +1,8 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import 'mattermost-webapp/tests/setup'
+// This won't exist locally when running in CI
+// eslint-disable-next-line no-process-env
+if (!process.env.CI) {
+    require('mattermost-webapp/tests/setup')
+}

webapp/i18n/en.json

@@ -180,7 +180,6 @@
   "PropertyType.File": "File or media",
   "PropertyType.MultiSelect": "Multi select",
   "PropertyType.Number": "Number",
-  "PropertyType.People": "People",
   "PropertyType.Person": "Person",
   "PropertyType.Phone": "Phone",
   "PropertyType.Select": "Select",
@@ -365,4 +364,4 @@
   "tutorial_tip.ok": "Next",
   "tutorial_tip.out": "Opt out of these tips.",
   "tutorial_tip.seen": "Seen this before?"
-}
+}

webapp/src/components/shareBoard/shareBoard.test.tsx

@@ -242,7 +242,7 @@ describe('src/components/shareBoard/shareBoard', () => {
             )
             container = result.container
         })
-        const copyLinkElement = screen.getByRole('button', {name: 'Copy internal link'})
+        const copyLinkElement = screen.getByRole('button', {name: 'Copy link'})
         expect(copyLinkElement).toBeDefined()
 
         expect(container).toMatchSnapshot()
@@ -273,7 +273,7 @@ describe('src/components/shareBoard/shareBoard', () => {
 
         expect(container).toMatchSnapshot()
 
-        const copyLinkElement = screen.getByRole('button', {name: 'Copy internal link'})
+        const copyLinkElement = screen.getByRole('button', {name: 'Copy link'})
         expect(copyLinkElement).toBeDefined()
 
         await act(async () => {
@@ -283,7 +283,7 @@ describe('src/components/shareBoard/shareBoard', () => {
         expect(mockedUtils.copyTextToClipboard).toBeCalledTimes(1)
         expect(container).toMatchSnapshot()
 
-        const copiedLinkElement = screen.getByRole('button', {name: 'Copy internal link'})
+        const copiedLinkElement = screen.getByRole('button', {name: 'Copied!'})
         expect(copiedLinkElement).toBeDefined()
         expect(copiedLinkElement.textContent).toContain('Copied!')
     })