diff --git a/app/soapbox/features/group/components/__tests__/group-options-button.test.tsx b/app/soapbox/features/group/components/__tests__/group-options-button.test.tsx
new file mode 100644
index 000000000..4d7779799
--- /dev/null
+++ b/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('', () => {
+ describe('when the user blocked', () => {
+ beforeEach(() => {
+ group = buildGroup({
+ relationship: buildGroupRelationship({
+ requested: false,
+ member: true,
+ blocked_by: true,
+ role: 'user',
+ }),
+ });
+ });
+
+ it('should render null', () => {
+ render();
+
+ 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();
+
+ 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();
+
+ 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();
+
+ expect(screen.queryAllByTestId('dropdown-menu-button')).toHaveLength(1);
+ });
+ });
+});
\ No newline at end of file
diff --git a/app/soapbox/features/group/components/group-options-button.tsx b/app/soapbox/features/group/components/group-options-button.tsx
index 54ded9181..b6e83ae06 100644
--- a/app/soapbox/features/group/components/group-options-button.tsx
+++ b/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'
/>
);