Show total number of votes and maximum number of votes for all users

CHANGELOG.md

@@ -4,6 +4,10 @@ You can find the changelog of the Retrospective Extension below.
 
 _PS: Unfortunately, changelog before v1.0.46 is not available_ 🤦‍♂️
 
+## v1.90.X
+
+* Total number of team votes is now shown together with your own vote count. From [GitHub PR #488](https://github.com/microsoft/vsts-extension-retrospectives/pull/488).
+
 ## v1.90.3
 
 * Github Experience: Updating README to include the code coverage and status badges. Github PRs now get code coverage comments from CodeCov. From [Github PR #461](https://github.com/microsoft/vsts-extension-retrospectives/pull/461).

RetrospectiveExtension.Frontend/components/__mocks__/azure-devops-extension-sdk/sdk.tsx

@@ -7,8 +7,13 @@ const CommonServiceIds = {
   ProjectPageService: "ms.vss-tfs-web.tfs-page-data-service"
 };
 
+const mockExtensionDataManager = {
+  getDocuments: () => {},
+  getDocument: () => {}
+};
+
 const mockExtensionDataService = {
-  getExtensionDataManager: () => {},
+  getExtensionDataManager: () => mockExtensionDataManager,
 };
 
 const mockLocationService = {

RetrospectiveExtension.Frontend/components/__mocks__/mocked_components/mockedFeedbackColumn.tsx

@@ -1,7 +1,6 @@
 
 import { mocked } from 'jest-mock';
 import { WorkflowPhase } from '../../../interfaces/workItem';
-import { TooltipOverflowMode } from 'office-ui-fabric-react';
 
 export const testTeamId = "mocked-team-uuid";
 export const testBoardId = "mocked-board-uuid";
@@ -90,7 +89,7 @@ testColumnsObj[testColumnUuidOne] = {
 testColumnsObj[testColumnUuidTwo] = {
   columnProperties:
   {
-    id: TooltipOverflowMode,
+    id: testColumnUuidTwo,
     title: testColumnTwoTitle,
     iconClass: 'far fa-smile',
     accentColor: '#008100',

RetrospectiveExtension.Frontend/components/__tests__/feedbackBoard.test.tsx

@@ -1,3 +1,115 @@
+import React from 'react';
+import { IFeedbackBoardDocument } from '../../interfaces/feedback';
+import { shallow } from 'enzyme';
+import { mocked } from 'jest-mock';
+import FeedbackBoard, { FeedbackBoardProps } from '../../components/feedbackBoard';
+import { testColumnProps } from '../__mocks__/mocked_components/mockedFeedbackColumn';
+import { IdentityRef } from 'azure-devops-extension-api/WebApi';
+
+jest.mock('../feedbackBoardMetadataForm', () => mocked({}));
+jest.mock('azure-devops-extension-api/Work/WorkClient', () => {
+  const getTeamIterationsMock = () => {
+    return [
+      mocked({
+        attributes: mocked({
+          finishDate: new Date(),
+          startDate: new Date(),
+          timeFrame: 1,
+        }),
+        id: 'iterationId',
+        name: 'iteration name',
+        path: 'default path',
+        _links: [],
+        url: 'https://teamfieldvaluesurl'
+      })
+    ];
+  };
+
+  const getTeamFieldValuesMock = () => {
+    return [
+      mocked({
+        defaultValue: 'default field value',
+        field: mocked({
+          referenceName: 'default reference name',
+          url: 'https://fieldurl'
+        }),
+        values: [
+          mocked({
+            includeChildren: false,
+            value: 'default team field value',
+          })
+        ],
+        links: [],
+        url: 'https://teamfieldvaluesurl'
+      })]
+  };
+
+  const workRestClientMock = jest.fn().mockImplementation(() => ({
+    getTeamIterations: getTeamIterationsMock,
+    getTeamFieldValues: getTeamFieldValuesMock,
+  }));
+
+  return { WorkRestClient: workRestClientMock };
+});
+
+jest.mock('azure-devops-extension-api/Common', () => ({
+  getClient: (clientClass: typeof Object) => new clientClass(),
+}));
+
+const mockedIdentity: IdentityRef = {
+  directoryAlias: '',
+  id: '',
+  imageUrl: '',
+  inactive: false,
+  isAadIdentity: false,
+  isContainer: false,
+  isDeletedInOrigin: false,
+  profileUrl: '',
+  uniqueName: '',
+  _links: undefined,
+  descriptor: '',
+  displayName: '',
+  url: ''
+};
+
+const mockedBoard: IFeedbackBoardDocument = {
+  id: testColumnProps.boardId,
+  title: testColumnProps.boardTitle,
+  teamId: testColumnProps.team.id,
+  createdBy: mockedIdentity,
+  createdDate: new Date(),
+  columns: testColumnProps.columnIds.map((columnId) => testColumnProps.columns[columnId].columnProperties),
+  activePhase: 'Vote',
+  maxVotesPerUser: 5,
+  boardVoteCollection: {},
+  teamEffectivenessMeasurementVoteCollection: []
+};
+
+const mockedProps: FeedbackBoardProps = {
+  displayBoard: true,
+  board: mockedBoard,
+  team: testColumnProps.team,
+  workflowPhase: 'Vote',
+  nonHiddenWorkItemTypes: testColumnProps.nonHiddenWorkItemTypes,
+  allWorkItemTypes: testColumnProps.allWorkItemTypes,
+  isAnonymous: testColumnProps.isBoardAnonymous,
+  hideFeedbackItems: testColumnProps.hideFeedbackItems,
+  isCarouselDialogHidden: false,
+  hideCarouselDialog: jest.fn(() => { }),
+  userId: ''
+};
+
 describe(`The Feedback Board Component`, () => {
-  it(`Should not regress`, () => {});
-});
+  it(`can be rendered`, () => {
+    const wrapper = shallow(<FeedbackBoard {...mockedProps} />);
+    const component = wrapper.children().dive();
+    expect(component.prop('className')).toBe('feedback-board');
+  });
+
+  it(`shows correct vote counts`, () => {
+    const wrapper = shallow(<FeedbackBoard {...mockedProps} />);
+    const component = wrapper.children().dive();
+    expect(component.findWhere((child) => child.prop("className") === "feedback-maxvotes-per-user").text())
+      .toBe('Votes Used: 0 / 5 (me), 0 / 0 (team)');
+  });
+});

RetrospectiveExtension.Frontend/components/__tests__/setupTests.tsx

@@ -24,7 +24,7 @@ jest.mock('azure-devops-extension-api/WorkItemTracking', () => { });
 jest.mock('azure-devops-extension-api/WorkItemTracking/WorkItemTracking', () => { });
 jest.mock('azure-devops-extension-api/WorkItemTracking/WorkItemTrackingClient', () => {
   const mockWorkItemTrackingClient = {
-    WorkItemTrackingRestClient: {},
+    WorkItemTrackingRestClient: jest.fn().mockImplementation(() => ({})),
   };
 
   return mockWorkItemTrackingClient;

RetrospectiveExtension.Frontend/components/feedbackBoard.tsx

@@ -69,7 +69,7 @@ class FeedbackBoard extends React.Component<FeedbackBoardProps, FeedbackBoardSta
       defaultActionItemIteration: '',
       hasItems: false,
       isDataLoaded: false,
-      currentVoteCount: (props.board.boardVoteCollection === undefined || props.board.boardVoteCollection === null) ? "0" : (props.board.boardVoteCollection[this.props.userId] === undefined || props.board.boardVoteCollection[this.props.userId] === null) ? "0" : props.board.boardVoteCollection[this.props.userId]?.toString()
+      currentVoteCount: props.board.boardVoteCollection?.[this.props.userId]?.toString() ?? "0",
     };
   }
 
@@ -421,19 +421,28 @@ class FeedbackBoard extends React.Component<FeedbackBoardProps, FeedbackBoardSta
         onVoteCasted: () => {
           itemDataService.getBoardItem(this.props.team.id, this.props.board.id).then((boardItem: IFeedbackBoardDocument) => {
             const voteCollection = boardItem.boardVoteCollection;
-
-            this.setState({ currentVoteCount: voteCollection === undefined ? "0" : voteCollection[this.props.userId] === undefined ? "0" : voteCollection[this.props.userId].toString() });
+            this.setState({ currentVoteCount: voteCollection?.[this.props.userId]?.toString() ?? "0"});
           });
         },
         groupTitles: []
       };
     });
 
+    const columnItems = this.state.columnIds
+      .flatMap((columnId) => this.state.columns[columnId].columnItems);
+    const participants = new Set(columnItems.flatMap((columnItem) => Object.keys(columnItem.feedbackItem.voteCollection))).size;
+
+    const teamVotes = columnItems
+      .flatMap((columnItem) => Object.values(columnItem.feedbackItem.voteCollection))
+      .reduce((a, b) => a + b, 0)
+      .toString();
+    const maxTeamVotes = (participants * this.props.board?.maxVotesPerUser).toString();
+
     return (
       <div className="feedback-board">
         {this.props.workflowPhase === WorkflowPhase.Vote &&
           <div className="feedback-maxvotes-per-user">
-            <label>Votes Used: {this.state.currentVoteCount} / {this.props.board?.maxVotesPerUser?.toString()}</label>
+            <label>Votes Used: {this.state.currentVoteCount} / {this.props.board?.maxVotesPerUser?.toString()} (me), {teamVotes} / {maxTeamVotes} (team)</label>
           </div>
         }
         <div className="feedback-columns-container">

RetrospectiveExtension.Frontend/dal/azureDevOpsWorkService.tsx

@@ -33,7 +33,7 @@ class WorkService {
     }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     catch (e: any) {
-      if (e.serverError.typeKey === 'CurrentIterationDoesNotExistException') {
+      if (e.serverError?.typeKey === 'CurrentIterationDoesNotExistException') {
         // TODO: Enable once trackTrace is supported
         // appInsightsClient.trackTrace(TelemetryExceptions.CurrentTeamIterationNotFound, e);
       }