Add @testing-library/react and component tests #465

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open

Raghunandhan8818 wants to merge 18 commits into mattermost:master from Raghunandhan8818:435-team-sidebar-ts-migration

webapp/package-lock.json

Large diffs are not rendered by default.

webapp/package.json

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -17,10 +17,11 @@
  
        },

        "dependencies": {

            "@primer/octicons-react": "10.1.0",

            "core-js": "3.40.0",

            "@reduxjs/toolkit": "2.5.1",

            "core-js": "3.6.5",

            "csstype": "3.0.3",

            "debounce-promise": "3.1.2",

            "jest": "29.5.0",

            "jest": "29.7.0",

            "mattermost-redux": "5.33.1",

            "prop-types": "15.7.2",

            "react": "16.14.0",

    @@ -30,6 +31,7 @@
  
            "react-redux": "7.2.1",

            "react-select": "5.3.2",

            "redux": "4.0.5",

            "redux-offline": "2.0.0",

            "reselect": "4.1.8"

        },

        "devDependencies": {

    @@ -46,7 +48,7 @@
  
            "@babel/preset-typescript": "7.10.4",

            "@babel/runtime": "7.11.2",

            "@testing-library/jest-dom": "5.16.5",

            "@testing-library/react": "9.5.0",

            "@testing-library/react": "12.1.2",

            "@types/debounce-promise": "3.1.4",

            "@types/jest": "29.5.0",

            "@types/node": "14.11.1",

webapp/src/actions/index.ts

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -9,11 +9,11 @@ import {AnyAction, Dispatch} from 'redux';
  
    import Client from '../client';

    import ActionTypes from '../action_types';

    import {APIError, ConnectedData, GitlabUsersData, LHSData, ShowRhsPluginActionData, SubscriptionData} from 'src/types';

    import {Item} from 'src/types/gitlab_items';

    import {GlobalState} from 'src/types/store';

    import {getPluginState} from 'src/selectors';

    import {CommentBody, IssueBody} from 'src/types/gitlab_types';

    import {APIError, ConnectedData, GitlabUsersData, LHSData, ShowRhsPluginActionData, SubscriptionData} from '../types';

    import {Item} from '../types/gitlab_items';

    import {GlobalState} from '../types/store';

    import {getPluginState} from '../selectors';

    import {CommentBody, IssueBody} from '../types/gitlab_types';

    export function getConnected(reminder = false) {

        return async (dispatch: Dispatch<AnyAction>) => {

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

-Original file line number
+Diff line change
@@ -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;"
+          >
+          </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;"
+          >
+          </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;"
+          >
+          </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;"
+          >
+          </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

-Original file line number
+Diff line change
@@ Expand Up / @@ -3,7 +3,7 @@ @@
     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 || {};
@@ Expand Down @@

webapp/src/components/team_sidebar/team_sidebar.jsx

This file was deleted.

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

-Original file line number
+Diff line change
@@ -0,0 +1,80 @@
+    // Copyright (c) 2019-present Mattermost, Inc. All Rights Reserved.
+    // See LICENSE.txt for license information.
+    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

-Original file line number
+Diff line change
@@ -0,0 +1,28 @@
+    // Copyright (c) 2019-present Mattermost, Inc. All Rights Reserved.
+    // See LICENSE.txt for license information.
+    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;

webapp/src/selectors/index.ts

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -8,9 +8,9 @@ import {createSelector} from 'reselect';
  
    import {getPost} from 'mattermost-redux/selectors/entities/posts';

    import manifest from '../manifest';

    import {Item} from 'src/types/gitlab_items';

    import {GlobalState, PluginState, pluginStateKey} from 'src/types/store';

    import {SideBarData} from 'src/types';

    import {Item} from '../types/gitlab_items';

    import {GlobalState, PluginState, pluginStateKey} from '../types/store';

    import {SideBarData} from '../types';

    export const getPluginServerRoute = (state: GlobalState) => {

        const config = getConfig(state);

webapp/tsconfig.json

-Original file line number
+Diff line change
@@ Expand Up / @@ -27,6 +27,7 @@ @@
       ],
       "exclude": [
         "dist",
-        "!node_modules/@types"
+        "!node_modules/@types",
+        "node_modules"
       ]
     }

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add @testing-library/react and component tests #465

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Add @testing-library/react and component tests #465

Are you sure you want to change the base?

Uh oh!

Add @testing-library/react and component tests #465

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!

Uh oh!

Uh oh!