test(integration): add cases for editing a community

This change adds test cases for seeing or not the edit community button.

I've had to add a label to the button to select it, which also helps make it a little more accessible.

Refs #388, #431

integration/src/browser/edit-community.spec.ts

@@ -0,0 +1,35 @@
+import { expect, test } from './test';
+import { screenshot } from './utils';
+
+test.asACommunityModerator(
+  'can edit a community',
+  async ({ community, page }) => {
+    await page.goto(`/communities/${community.slug}`);
+
+    const editButton = page.locator('[aria-label="Edit this community"]');
+
+    await expect(editButton).toBeVisible();
+    expect(await screenshot(page, editButton)).toMatchSnapshot(
+      'edit-button.png',
+    );
+
+    await editButton.click();
+
+    const editForm = page.locator('form');
+
+    await expect(editForm).toContainText('Enter a description');
+    expect(await screenshot(page, editForm)).toMatchSnapshot('edit-page.png');
+  },
+);
+
+test.asACommunityMember(
+  'cannot edit a community',
+  async ({ community, page }) => {
+    await page.goto(`/communities/${community.slug}`);
+
+    const editButton = page.locator('[aria-label="Edit this community"]');
+
+    await expect(page.locator('body')).toContainText(community.name);
+    await expect(editButton).not.toBeVisible();
+  },
+);

src/frontend/components/Community.js

@@ -295,6 +295,7 @@ export default function Community(props) {
               <Box p={4}>
                 {isOwner ? (
                   <IconButton
+                    aria-label="Edit this community"
                     href={`/community-settings/${community.uuid}`}
                     className={classes.settings}
                   >