Merge pull request #4096 from overleaf/msm-online-user-widget-test

OnlineUsersWidget and ToolbarHeader unit tests

GitOrigin-RevId: 5a8dfe94d54590b108a2caaa938f6e01ef844b67

services/web/frontend/js/features/editor-navigation-toolbar/components/pdf-toggle-button.js

@@ -22,7 +22,7 @@ function PdfToggleButton({ onClick, pdfViewIsOpen }) {
     >
       {/* eslint-disable-next-line jsx-a11y/anchor-is-valid,jsx-a11y/click-events-have-key-events,jsx-a11y/interactive-supports-focus */}
       <a role="button" className={classes} onClick={onClick}>
-        <Icon type="file-pdf-o" modifier="fw" />
+        <Icon type="file-pdf-o" modifier="fw" accessibilityLabel="PDF" />
       </a>
     </OverlayTrigger>
   )

services/web/test/frontend/features/editor-navigation-toolbar/components/online-users-widget.test.js

@@ -0,0 +1,105 @@
+import { expect } from 'chai'
+import sinon from 'sinon'
+import React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+
+import OnlineUsersWidget from '../../../../../frontend/js/features/editor-navigation-toolbar/components/online-users-widget'
+
+describe('<OnlineUsersWidget />', function () {
+  const defaultProps = {
+    onlineUsers: [
+      {
+        user_id: 'test_user',
+        name: 'test_user',
+      },
+      {
+        user_id: 'another_test_user',
+        name: 'another_test_user',
+      },
+    ],
+    goToUser: () => {},
+  }
+
+  describe('with less than 4 users', function () {
+    it('displays user initials', function () {
+      render(<OnlineUsersWidget {...defaultProps} />)
+      screen.getByText('t')
+      screen.getByText('a')
+    })
+
+    it('displays user name in a tooltip', function () {
+      render(<OnlineUsersWidget {...defaultProps} />)
+      const icon = screen.getByText('t')
+      fireEvent.mouseOver(icon)
+      screen.getByRole('tooltip', { name: 'test_user' })
+    })
+
+    it('calls "goToUser" when the user initial is clicked', function () {
+      const props = {
+        ...defaultProps,
+        goToUser: sinon.stub(),
+      }
+      render(<OnlineUsersWidget {...props} />)
+
+      const icon = screen.getByText('t')
+      fireEvent.click(icon)
+
+      expect(props.goToUser).to.be.calledWith({
+        name: 'test_user',
+        user_id: 'test_user',
+      })
+    })
+  })
+
+  describe('with 4 users and more', function () {
+    const props = {
+      ...defaultProps,
+      onlineUsers: defaultProps.onlineUsers.concat([
+        {
+          user_id: 'user_3',
+          name: 'user_3',
+        },
+        {
+          user_id: 'user_4',
+          name: 'user_4',
+        },
+      ]),
+    }
+
+    it('displays the count of users', function () {
+      render(<OnlineUsersWidget {...props} />)
+      screen.getByText('4')
+    })
+
+    it('displays user names on hover', function () {
+      render(<OnlineUsersWidget {...props} />)
+
+      const toggleButton = screen.getByRole('button')
+      fireEvent.click(toggleButton)
+
+      screen.getByText('test_user')
+      screen.getByText('another_test_user')
+      screen.getByText('user_3')
+      screen.getByText('user_4')
+    })
+
+    it('calls "goToUser" when the user name is clicked', function () {
+      const testProps = {
+        ...props,
+        goToUser: sinon.stub(),
+      }
+      render(<OnlineUsersWidget {...testProps} />)
+
+      const toggleButton = screen.getByRole('button')
+      fireEvent.click(toggleButton)
+
+      const icon = screen.getByText('user_3')
+      fireEvent.click(icon)
+
+      expect(testProps.goToUser).to.be.calledWith({
+        name: 'user_3',
+        user_id: 'user_3',
+      })
+    })
+  })
+})

services/web/test/frontend/features/editor-navigation-toolbar/components/toolbar-header.test.js

@@ -0,0 +1,105 @@
+import { expect } from 'chai'
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+
+import ToolbarHeader from '../../../../../frontend/js/features/editor-navigation-toolbar/components/toolbar-header'
+
+describe('<ToolbarHeader />', function () {
+  const defaultProps = {
+    onShowLeftMenuClick: () => {},
+    toggleChatOpen: () => {},
+    toggleReviewPanelOpen: () => {},
+    toggleHistoryOpen: () => {},
+    unreadMessageCount: 0,
+    onlineUsers: [],
+    goToUser: () => {},
+    projectName: 'test project',
+    renameProject: () => {},
+    openShareModal: () => {},
+    togglePdfView: () => {},
+  }
+
+  describe('cobranding logo', function () {
+    it('is not displayed by default', function () {
+      render(<ToolbarHeader {...defaultProps} />)
+      expect(screen.queryByRole('link', { name: 'variation' })).to.not.exist
+    })
+
+    it('is displayed when cobranding data is available', function () {
+      const props = {
+        ...defaultProps,
+        cobranding: {
+          brandVariationHomeUrl: 'http://cobranding',
+          brandVariationName: 'variation',
+          logoImgUrl: 'http://cobranding/logo',
+        },
+      }
+      render(<ToolbarHeader {...props} />)
+      screen.getByRole('link', { name: 'variation' })
+    })
+  })
+
+  describe('pdf toggle button', function () {
+    it('is not displayed by default', function () {
+      render(<ToolbarHeader {...defaultProps} />)
+      expect(screen.queryByText('PDF')).to.not.exist
+    })
+
+    it('is displayed when "pdfButtonIsVisible" prop is set to true', function () {
+      const props = {
+        ...defaultProps,
+        pdfButtonIsVisible: true,
+      }
+      render(<ToolbarHeader {...props} />)
+      screen.getByText('PDF')
+    })
+  })
+
+  describe('track changes toggle button', function () {
+    it('is displayed by default', function () {
+      render(<ToolbarHeader {...defaultProps} />)
+      screen.getByText('Review')
+    })
+
+    it('is not displayed when "isRestrictedTokenMember" prop is set to true', function () {
+      const props = {
+        ...defaultProps,
+        isRestrictedTokenMember: true,
+      }
+      render(<ToolbarHeader {...props} />)
+      expect(screen.queryByText('Review')).to.not.exist
+    })
+  })
+
+  describe('History toggle button', function () {
+    it('is displayed by default', function () {
+      render(<ToolbarHeader {...defaultProps} />)
+      screen.getByText('History')
+    })
+
+    it('is not displayed when "isRestrictedTokenMember" prop is set to true', function () {
+      const props = {
+        ...defaultProps,
+        isRestrictedTokenMember: true,
+      }
+      render(<ToolbarHeader {...props} />)
+      expect(screen.queryByText('History')).to.not.exist
+    })
+  })
+
+  describe('Chat toggle button', function () {
+    it('is displayed by default', function () {
+      render(<ToolbarHeader {...defaultProps} />)
+      screen.getByText('Chat')
+    })
+
+    it('is not displayed when "isRestrictedTokenMember" prop is set to true', function () {
+      const props = {
+        ...defaultProps,
+        isRestrictedTokenMember: true,
+      }
+      render(<ToolbarHeader {...props} />)
+      expect(screen.queryByText('Chat')).to.not.exist
+    })
+  })
+})