Add @testing-library/react and component tests

webapp/package.json

@@ -32,11 +32,6 @@
         "reselect": "4.1.6"
     },
     "devDependencies": {
-        "babel-jest": "29.5.0",
-        "enzyme": "3.11.0",
-        "enzyme-adapter-react-16": "1.15.7",
-        "enzyme-to-json": "3.6.2",
-        "identity-obj-proxy": "3.0.0",
         "@babel/cli": "7.11.6",
         "@babel/core": "7.11.6",
         "@babel/eslint-parser": "7.22.15",
@@ -49,6 +44,8 @@
         "@babel/preset-react": "7.10.4",
         "@babel/preset-typescript": "7.10.4",
         "@babel/runtime": "7.11.2",
+        "@reduxjs/toolkit": "2.2.1",
+        "@testing-library/react": "12.1.2",
         "@types/react": "16.9.49",
         "@types/react-bootstrap": "0.32.29",
         "@types/react-custom-scrollbars": "4.0.10",
@@ -57,6 +54,7 @@
         "@types/react-transition-group": "4.4.0",
         "@typescript-eslint/eslint-plugin": "4.1.1",
         "@typescript-eslint/parser": "4.1.1",
+        "babel-jest": "29.5.0",
         "babel-loader": "8.1.0",
         "babel-plugin-typescript-to-proptypes": "1.4.1",
         "css-loader": "4.3.0",
@@ -67,6 +65,7 @@
         "eslint-plugin-react": "7.20.6",
         "eslint-plugin-react-hooks": "4.1.2",
         "file-loader": "6.1.0",
+        "identity-obj-proxy": "3.0.0",
         "style-loader": "1.2.1",
         "typescript": "4.6.4",
         "webpack": "4.44.2",

webapp/src/components/team_sidebar/__snapshots__/team_sidebar.test.tsx.snap

@@ -0,0 +1,116 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TeamSidebar should render when show is false 1`] = `<div />`;
+
+exports[`TeamSidebar should render when show is true 1`] = `
+<div>
+  <div>
+    <a
+      href="https://gitlab.com/gitlab-org"
+      rel="noopener noreferrer"
+      style="color: rgba(51, 51, 51, 0.6); display: block; margin-bottom: 10px; width: 100%;"
+      target="_blank"
+    >
+      <i
+        class="fa fa-gitlab fa-lg"
+      />
+    </a>
+    <a
+      style="color: rgba(51, 51, 51, 0.6); display: block; margin-bottom: 10px; width: 100%;"
+    >
+      <svg
+        height="13"
+        viewBox="0 0 16 16"
+        width="13"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          clip-rule="evenodd"
+          d="M10.34 1.22a.75.75 0 0 0-1.06 0L7.53 2.97 7 3.5l.53.53 1.75 1.75a.75.75 0 1 0 1.06-1.06l-.47-.47h.63c.69 0 1.25.56 1.25 1.25v4.614a2.501 2.501 0 1 0 1.5 0V5.5a2.75 2.75 0 0 0-2.75-2.75h-.63l.47-.47a.75.75 0 0 0 0-1.06ZM13.5 12.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-9 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm1.5 0a2.5 2.5 0 1 1-3.25-2.386V5.886a2.501 2.501 0 1 1 1.5 0v4.228A2.501 2.501 0 0 1 6 12.5Zm-1.5-9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+          fill="rgba(51,51,51,0.6)"
+          fill-rule="evenodd"
+        />
+      </svg>
+      <span
+        style="margin-left: 2px;"
+      >
+        0
+      </span>
+    </a>
+    <a
+      style="color: rgba(51, 51, 51, 0.6); display: block; margin-bottom: 10px; width: 100%;"
+    >
+      <svg
+        height="13"
+        viewBox="0 0 16 16"
+        width="13"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          clip-rule="evenodd"
+          d="M9 2.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm1.45-.5a2.5 2.5 0 0 0-4.9 0H3a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1h-2.55ZM8 5H5.5V3.5h-2v11h9v-11h-2V5H8ZM5 7.75A.75.75 0 0 1 5.75 7h4.5a.75.75 0 0 1 0 1.5h-4.5A.75.75 0 0 1 5 7.75Zm.75 1.75a.75.75 0 0 0 0 1.5h4.5a.75.75 0 0 0 0-1.5h-4.5Z"
+          fill="rgba(51,51,51,0.6)"
+          fill-rule="evenodd"
+        />
+      </svg>
+      <span
+        style="margin-left: 2px;"
+      >
+        0
+      </span>
+    </a>
+    <a
+      style="color: rgba(51, 51, 51, 0.6); display: block; margin-bottom: 10px; width: 100%;"
+    >
+      <svg
+        height="13"
+        viewBox="0 0 16 16"
+        width="13"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          clip-rule="evenodd"
+          d="M3 2.5h6a.5.5 0 0 1 .5.5v10a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5V3a.5.5 0 0 1 .5-.5ZM1 3a2 2 0 0 1 2-2h6a2 2 0 0 1 1.97 1.658l2.913 1.516a1.75 1.75 0 0 1 .744 2.36l-3.878 7.45a.753.753 0 0 1-.098.145c-.36.526-.965.871-1.651.871H3a2 2 0 0 1-2-2V3Zm10 7.254 2.297-4.413a.25.25 0 0 0-.106-.337L11 4.364v5.89Z"
+          fill="rgba(51,51,51,0.6)"
+          fill-rule="evenodd"
+        />
+      </svg>
+      <span
+        style="margin-left: 2px;"
+      >
+        0
+      </span>
+    </a>
+    <a
+      style="color: rgba(51, 51, 51, 0.6); display: block; margin-bottom: 10px; width: 100%;"
+    >
+      <svg
+        height="13"
+        viewBox="0 0 16 16"
+        width="13"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          clip-rule="evenodd"
+          d="M3 13.5a.5.5 0 0 1-.5-.5V3a.5.5 0 0 1 .5-.5h9.25a.75.75 0 0 0 0-1.5H3a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V9.75a.75.75 0 0 0-1.5 0V13a.5.5 0 0 1-.5.5H3Zm12.78-8.82a.75.75 0 0 0-1.06-1.06L9.162 9.177 7.289 7.241a.75.75 0 1 0-1.078 1.043l2.403 2.484a.75.75 0 0 0 1.07.01L15.78 4.68Z"
+          fill="rgba(51,51,51,0.6)"
+          fill-rule="evenodd"
+        />
+      </svg>
+      <span
+        style="margin-left: 2px;"
+      >
+        0
+      </span>
+    </a>
+    <a
+      href="#"
+      style="color: rgba(51, 51, 51, 0.6); display: block; margin-bottom: 10px; width: 100%;"
+    >
+      <i
+        class="fa fa-refresh fa-spin"
+      />
+    </a>
+  </div>
+</div>
+`;

webapp/src/components/team_sidebar/index.js

@@ -1,6 +1,6 @@
 import {connect} from 'react-redux';
 
-import TeamSidebar from './team_sidebar.jsx';
+import TeamSidebar from './team_sidebar';
 
 function mapStateToProps(state) {
     const members = state.entities.teams.myMembers || {};

webapp/src/components/team_sidebar/team_sidebar.test.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+
+import {describe, expect, test} from '@jest/globals';
+import {render} from '@testing-library/react';
+import {configureStore, createSlice} from '@reduxjs/toolkit';
+
+import {Provider} from 'react-redux';
+
+import TeamSidebar from './team_sidebar';
+
+const mockTheme = {
+    sidebarBg: '#ffffff',
+    sidebarText: '#333333',
+    sidebarUnreadText: '#ff0000',
+    sidebarTextHoverBg: '#eeeeee',
+    sidebarTextActiveBorder: '#007bff',
+    sidebarTextActiveColor: '#007bff',
+    sidebarHeaderBg: '#f8f9fa',
+    sidebarHeaderTextColor: '#495057',
+    onlineIndicator: '#28a745',
+    awayIndicator: '#ffc107',
+    dndIndicator: '#dc3545',
+    mentionBg: '#ffeb3b',
+    mentionBj: '#ffeb3b',
+    mentionColor: '#333333',
+    centerChannelBg: '#f8f9fa',
+    centerChannelColor: '#333333',
+    newMessageSeparator: '#007bff',
+    linkColor: '#007bff',
+    buttonBg: '#007bff',
+    buttonColor: '#ffffff',
+    errorTextColor: '#dc3545',
+    mentionHighlightBg: '#ffeb3b',
+    mentionHighlightLink: '#007bff',
+    codeTheme: 'solarized-dark',
+};
+
+const mockSlice = createSlice({
+    name: 'mock-reducer',
+    initialState: {
+        'plugins-com.github.manland.mattermost-plugin-gitlab': {
+            connected: true,
+            username: 'mattermost',
+            clientId: '',
+            lhsData: {
+                reviews: [],
+                yourAssignedPrs: [],
+                yourAssignedIssues: [],
+                todos: [],
+            },
+            gitlabURL: 'https://gitlab.com/gitlab-org',
+            organization: '',
+            rhsPluginAction: () => true,
+        },
+        entities: {general: {config: {}}},
+    },
+    reducers: {},
+});
+
+const mockStore = configureStore({
+    reducer: mockSlice.reducer,
+});
+
+describe('TeamSidebar', () => {
+    test.each([true, false])('should render when show is %s', (show) => {
+        const {container} = render(
+            <Provider store={mockStore}>
+                <TeamSidebar
+                    show={show}
+                    theme={mockTheme}
+                />
+            </Provider>,
+        );
+
+        expect(container).toMatchSnapshot();
+    });
+});

webapp/src/components/team_sidebar/team_sidebar.tsx

@@ -0,0 +1,25 @@
+import React, {FC} from 'react';
+
+import {Theme} from 'mattermost-redux/types/preferences';
+
+import SidebarButtons from '../sidebar_buttons';
+
+interface TeamSidebarProps {
+    show: boolean;
+    theme: Theme;
+}
+
+const TeamSidebar: FC<TeamSidebarProps> = ({show, theme}: TeamSidebarProps) => {
+    if (!show) {
+        return null;
+    }
+
+    return (
+        <SidebarButtons
+            theme={theme}
+            isTeamSidebar={true}
+        />
+    );
+};
+
+export default TeamSidebar;