Add tests for GroupOptionsButton

app/soapbox/features/group/components/__tests__/group-options-button.test.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+
+import { buildGroup, buildGroupRelationship } from 'soapbox/jest/factory';
+import { render, screen } from 'soapbox/jest/test-helpers';
+import { GroupRoles } from 'soapbox/schemas/group-member';
+import { Group } from 'soapbox/types/entities';
+
+import GroupOptionsButton from '../group-options-button';
+
+let group: Group;
+
+describe('<GroupOptionsButton />', () => {
+  describe('when the user blocked', () => {
+    beforeEach(() => {
+      group = buildGroup({
+        relationship: buildGroupRelationship({
+          requested: false,
+          member: true,
+          blocked_by: true,
+          role: 'user',
+        }),
+      });
+    });
+
+    it('should render null', () => {
+      render(<GroupOptionsButton group={group} />);
+
+      expect(screen.queryAllByTestId('dropdown-menu-button')).toHaveLength(0);
+    });
+  });
+
+  describe('when the user is an admin', () => {
+    beforeEach(() => {
+      group = buildGroup({
+        relationship: buildGroupRelationship({
+          requested: false,
+          member: true,
+          role: GroupRoles.ADMIN,
+        }),
+      });
+    });
+
+    it('should render null', () => {
+      render(<GroupOptionsButton group={group} />);
+
+      expect(screen.queryAllByTestId('dropdown-menu-button')).toHaveLength(0);
+    });
+  });
+
+  describe('when the user is an owner', () => {
+    beforeEach(() => {
+      group = buildGroup({
+        relationship: buildGroupRelationship({
+          requested: false,
+          member: true,
+          role: GroupRoles.OWNER,
+        }),
+      });
+    });
+
+    it('should render null', () => {
+      render(<GroupOptionsButton group={group} />);
+
+      expect(screen.queryAllByTestId('dropdown-menu-button')).toHaveLength(0);
+    });
+  });
+
+  describe('when the user is a member', () => {
+    beforeEach(() => {
+      group = buildGroup({
+        relationship: buildGroupRelationship({
+          requested: false,
+          member: true,
+          role: GroupRoles.USER,
+        }),
+      });
+    });
+
+    it('should render the dropdown menu', () => {
+      render(<GroupOptionsButton group={group} />);
+
+      expect(screen.queryAllByTestId('dropdown-menu-button')).toHaveLength(1);
+    });
+  });
+});

app/soapbox/features/group/components/group-options-button.tsx

@@ -1,4 +1,5 @@
 import React, { useMemo } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
 
 import { initReport, ReportableEntities } from 'soapbox/actions/reports';
 import DropdownMenu, { Menu } from 'soapbox/components/dropdown-menu';
@@ -8,20 +9,25 @@ import { GroupRoles } from 'soapbox/schemas/group-member';
 
 import type { Account, Group } from 'soapbox/types/entities';
 
+const messages = defineMessages({
+  report: { id: 'group.report.label', defaultMessage: 'Report' },
+});
+
 interface IGroupActionButton {
   group: Group
 }
 
 const GroupOptionsButton = ({ group }: IGroupActionButton) => {
-  const dispatch = useAppDispatch();
   const account = useOwnAccount();
+  const dispatch = useAppDispatch();
+  const intl = useIntl();
 
   const isMember = group.relationship?.role === GroupRoles.USER;
   const isBlocked = group.relationship?.blocked_by;
 
   const menu: Menu = useMemo(() => ([
     {
-      text: 'Report',
+      text: intl.formatMessage(messages.report),
       icon: require('@tabler/icons/flag.svg'),
       action: () => dispatch(initReport(ReportableEntities.GROUP, account as Account, { group })),
     },
@@ -38,6 +44,7 @@ const GroupOptionsButton = ({ group }: IGroupActionButton) => {
         theme='secondary'
         iconClassName='h-5 w-5'
         className='self-stretch px-2.5'
+        data-testid='dropdown-menu-button'
       />
     </DropdownMenu>
   );