Add tests for GroupRelationship

app/soapbox/features/group/components/__tests__/group-relationship.test.tsx

@@ -0,0 +1,66 @@
+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 GroupRelationship from '../group-relationship';
+
+let group: Group;
+
+describe('<GroupRelationship />', () => {
+  describe('when the user is an admin', () => {
+    beforeEach(() => {
+      group = buildGroup({
+        relationship: buildGroupRelationship({
+          requested: false,
+          member: true,
+          role: GroupRoles.ADMIN,
+        }),
+      });
+    });
+
+    it('should render the relationship', () => {
+      render(<GroupRelationship group={group} />);
+
+      expect(screen.getByTestId('group-relationship')).toHaveTextContent('Admin');
+    });
+  });
+
+  describe('when the user is an owner', () => {
+    beforeEach(() => {
+      group = buildGroup({
+        relationship: buildGroupRelationship({
+          requested: false,
+          member: true,
+          role: GroupRoles.OWNER,
+        }),
+      });
+    });
+
+    it('should render the relationship', () => {
+      render(<GroupRelationship group={group} />);
+
+      expect(screen.getByTestId('group-relationship')).toHaveTextContent('Owner');
+    });
+  });
+
+  describe('when the user is a member', () => {
+    beforeEach(() => {
+      group = buildGroup({
+        relationship: buildGroupRelationship({
+          requested: false,
+          member: true,
+          role: GroupRoles.USER,
+        }),
+      });
+    });
+
+    it('should render null', () => {
+      render(<GroupRelationship group={group} />);
+
+      expect(screen.queryAllByTestId('group-relationship')).toHaveLength(0);
+    });
+  });
+});

app/soapbox/features/group/components/group-relationship.tsx

@@ -13,12 +13,16 @@ const GroupRelationship = ({ group }: IGroupRelationship) => {
   const isOwner = group.relationship?.role === GroupRoles.OWNER;
   const isAdmin = group.relationship?.role === GroupRoles.ADMIN;
 
-  if (!isOwner || !isAdmin) {
+  if (!isOwner && !isAdmin) {
     return null;
   }
 
   return (
-    <HStack space={1} alignItems='center'>
+    <HStack
+      space={1}
+      alignItems='center'
+      data-testid='group-relationship'
+    >
       <Icon
         className='h-4 w-4'
         src={
@@ -30,8 +34,8 @@ const GroupRelationship = ({ group }: IGroupRelationship) => {
 
       <Text tag='span' weight='medium' size='sm' theme='inherit'>
         {isOwner
-          ? <FormattedMessage id='group.role.admin' defaultMessage='Admin' />
+          ? <FormattedMessage id='group.role.owner' defaultMessage='Owner' />
-          : <FormattedMessage id='group.role.moderator' defaultMessage='Moderator' />}
+          : <FormattedMessage id='group.role.admin' defaultMessage='Admin' />}
       </Text>
     </HStack>
   );