Merge pull request #958 from cultuurnet/feature/III-6417

cultuurnet · Nov 28, 2024 · 0b20501 · 0b20501
2 parents c9106ec + 8cf6a0d
commit 0b20501
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 44 deletions.
diff --git a/src/pages/organizers/[organizerId]/ownerships/OwnershipsTable.tsx b/src/pages/organizers/[organizerId]/ownerships/OwnershipsTable.tsx
@@ -19,6 +19,7 @@ export const OwnershipsTable = ({ requests, renderActions }: Props) => {
   const { t } = useTranslation();
   return (
     <Stack
+      role="table"
       flex={1}
       padding={4}
       marginBottom={5}
@@ -42,6 +43,7 @@ export const OwnershipsTable = ({ requests, renderActions }: Props) => {
         {requests.map((request) => (
           <Inline
             key={request.id}
+            role="row"
             justifyContent="space-between"
             alignItems="center"
             paddingY={3}

diff --git a/src/test/e2e/create-organizer.spec.ts b/src/test/e2e/create-organizer.spec.ts
@@ -1,5 +1,5 @@
 import { faker } from '@faker-js/faker';
-import { test } from '@playwright/test';
+import { expect, test } from '@playwright/test';
 
 const dummyOrganizer = {
   name: faker.lorem.word(),
@@ -18,55 +18,94 @@ const dummyOrganizer = {
 };
 
 test('create an organizer', async ({ baseURL, page }) => {
-  await page.goto(`${baseURL}/organizers/create`);
+  let organizerUrl;
 
-  await page.getByLabel('Naam').click();
-  await page.getByLabel('Naam').fill(dummyOrganizer.name);
-  await page.getByLabel('Website', { exact: true }).click();
-  await page
-    .getByLabel('Website', { exact: true })
-    .fill(dummyOrganizer.website);
-  await page.getByRole('button', { name: 'Opslaan' }).click();
+  await test.step('Step 1: Create an organizer', async () => {
+    await page.goto(`${baseURL}/organizers/create`);
 
-  await page.getByRole('tab', { name: 'Beschrijving' }).click();
-  await page.getByLabel('rdw-editor').click();
-  await page.getByLabel('rdw-editor').fill(dummyOrganizer.description);
+    await page.getByLabel('Naam').click();
+    await page.getByLabel('Naam').fill(dummyOrganizer.name);
+    await page.getByLabel('Website', { exact: true }).click();
+    await page
+      .getByLabel('Website', { exact: true })
+      .fill(dummyOrganizer.website);
+    await page.getByRole('button', { name: 'Opslaan' }).click();
 
-  await page.getByRole('tab', { name: 'Contact' }).click();
-  await page.getByRole('button', { name: 'Contactgegevens toevoegen' }).click();
-  await page.locator('#contact-info-value-1').click();
-  await page.locator('#contact-info-value-1').fill(dummyOrganizer.email);
-  await page.locator('#contact-info-value-1').blur();
+    await page.getByRole('tab', { name: 'Beschrijving' }).click();
+    await page.getByLabel('rdw-editor').click();
+    await page.getByLabel('rdw-editor').fill(dummyOrganizer.description);
 
-  await page.getByRole('tab', { name: 'Labels' }).click();
-  await page.getByLabel('Verfijn met labels').click();
-  await page.getByLabel('Verfijn met labels').fill(dummyOrganizer.label);
-  await page.getByLabel(dummyOrganizer.label).click();
-  await page.getByText(dummyOrganizer.label).click();
+    await page.getByRole('tab', { name: 'Contact' }).click();
+    await page
+      .getByRole('button', { name: 'Contactgegevens toevoegen' })
+      .click();
+    await page.locator('#contact-info-value-1').click();
+    await page.locator('#contact-info-value-1').fill(dummyOrganizer.email);
+    await page.locator('#contact-info-value-1').blur();
 
-  await page.getByRole('tab', { name: 'Afbeeldingen' }).click();
-  await page.getByRole('button', { name: 'Afbeelding toevoegen' }).click();
-  await page.getByRole('button', { name: 'Kies bestand' }).click();
-  await page
-    .locator('input[type=file]')
-    .setInputFiles('./src/test/data/image.png');
-  await page.getByLabel('Beschrijving').click();
-  await page.getByLabel('Beschrijving').fill(dummyOrganizer.image.name);
-  await page.getByLabel('Copyright').click();
-  await page.getByLabel('Copyright').fill(dummyOrganizer.image.copyright);
-  await page.getByRole('button', { name: 'Uploaden' }).click();
-  await page.getByText(`© ${dummyOrganizer.image.copyright}`).click();
+    await page.getByRole('tab', { name: 'Labels' }).click();
+    await page.getByLabel('Verfijn met labels').click();
+    await page.getByLabel('Verfijn met labels').fill(dummyOrganizer.label);
+    await page.getByLabel(dummyOrganizer.label).click();
+    await page.getByText(dummyOrganizer.label).click();
 
-  await page.getByRole('tab', { name: 'Adres' }).click();
-  await page.getByLabel('Gemeente').click();
-  await page.getByLabel('Gemeente').fill(dummyOrganizer.location.municipality);
-  await page.getByLabel(dummyOrganizer.location.municipality).click();
-  const streetField = await page.getByLabel('Straat en nummer').nth(0);
-  await streetField.click();
-  await streetField.fill(dummyOrganizer.location.address);
-  await streetField.blur();
+    await page.getByRole('tab', { name: 'Afbeeldingen' }).click();
+    await page.getByRole('button', { name: 'Afbeelding toevoegen' }).click();
+    await page.getByRole('button', { name: 'Kies bestand' }).click();
+    await page
+      .locator('input[type=file]')
+      .setInputFiles('./src/test/data/image.png');
+    await page.getByLabel('Beschrijving').click();
+    await page.getByLabel('Beschrijving').fill(dummyOrganizer.image.name);
+    await page.getByLabel('Copyright').click();
+    await page.getByLabel('Copyright').fill(dummyOrganizer.image.copyright);
+    await page.getByRole('button', { name: 'Uploaden' }).click();
+    await page.getByText(`© ${dummyOrganizer.image.copyright}`).click();
 
-  await page.getByText('100/100').click();
+    await page.getByRole('tab', { name: 'Adres' }).click();
+    await page.getByLabel('Gemeente').click();
+    await page
+      .getByLabel('Gemeente')
+      .fill(dummyOrganizer.location.municipality);
+    await page.getByLabel(dummyOrganizer.location.municipality).click();
+    const streetField = await page.getByLabel('Straat en nummer').nth(0);
+    await streetField.click();
+    await streetField.fill(dummyOrganizer.location.address);
+    await streetField.blur();
 
-  await page.getByRole('button', { name: 'Klaar met bewerken' }).click();
+    await page.getByText('100/100').click();
+
+    await page
+      .getByRole('button', { name: 'Klaar met bewerken' })
+      .click({ force: true });
+
+    await page.waitForURL('**/preview**');
+    organizerUrl = await page.url();
+  });
+
+  await test.step('Step 2: can assign ownerships on organizer', async () => {
+    await page.goto(organizerUrl.replace('preview', 'ownerships'));
+
+    // Add ownership
+    await page
+      .getByRole('button', { name: 'Nieuwe beheerder toevoegen' })
+      .click();
+    await page.getByLabel('E-mailadres').fill(process.env.E2E_TEST_EMAIL);
+    await page.getByRole('button', { name: 'Beheerder toevoegen' }).click();
+    await expect(page.getByRole('dialog')).toBeHidden();
+    await expect(page.getByTestId('alert-success')).toContainText(
+      process.env.E2E_TEST_EMAIL,
+    );
+    await expect(
+      page.getByRole('row').getByText(process.env.E2E_TEST_EMAIL),
+    ).toBeVisible();
+    await page.getByRole('row').getByRole('button').click();
+
+    // Delete ownership
+    await page.getByRole('button', { name: 'Beheerder verwijderen' }).click();
+    await expect(page.getByRole('dialog')).toBeHidden();
+    await expect(
+      page.getByRole('row').getByText(process.env.E2E_TEST_EMAIL),
+    ).toBeHidden();
+  });
 });
diff --git a/src/ui/Alert.tsx b/src/ui/Alert.tsx
@@ -139,6 +139,7 @@ const Alert = ({
   return (
     <Inline
       role="alert"
+      data-testid={`alert-${variant}`}
       alignSelf={fullWidth ? 'normal' : 'flex-start'}
       display={visible ? 'flex' : 'none'}
       {...getStackProps(props)}