Port embed test to playwright

e2e/client/playwright/authoring.spec.ts

@@ -38,28 +38,3 @@ test('can apply "populate abstract" macro', async ({page}) => {
         page.locator(s('authoring', 'authoring-field=abstract')).getByRole('textbox'),
     ).toHaveText('test sport story body');
 });
-
-test('can embed if url is valid', async ({page}) => {
-    await restoreDatabaseSnapshot();
-
-    const monitoring = new Monitoring(page);
-
-    await page.goto('/#/workspace/monitoring');
-
-    await monitoring.selectDesk('Sports');
-
-    await page.locator(
-        s('monitoring-group=Sports / Working Stage', 'article-item=test sports story'),
-    ).dblclick();
-
-    await expect(
-        page.locator(s('authoring', 'authoring-field=body_html')).getByRole('textbox'),
-    ).toHaveText('test sport story body');
-
-    await page.locator(s('Embed')).getByRole('button').click();
-
-    await page.getByPlaceholder('Enter URL or code to embed').type('https://google.com');
-
-    await page.locator(s('embed-controls', 'submit')).click();
-    await expect(page.getByText('https://google.com')).toBeDefined();
-});

e2e/client/playwright/editor3.spec.ts

@@ -0,0 +1,28 @@
+import {test, expect} from '@playwright/test';
+import {Monitoring} from './page-object-models/monitoring';
+import {restoreDatabaseSnapshot, s} from './utils';
+
+test('can add embeds', async ({page}) => {
+    await restoreDatabaseSnapshot();
+
+    const monitoring = new Monitoring(page);
+
+    await page.goto('/#/workspace/monitoring');
+
+    await monitoring.selectDesk('Sports');
+
+    await page.locator(
+        s('monitoring-group=Sports / Working Stage', 'article-item=test sports story'),
+    ).dblclick();
+
+    await expect(
+        page.locator(s('authoring', 'authoring-field=body_html')).getByRole('textbox'),
+    ).toHaveText('test sport story body');
+
+    await page.getByRole('button', {name: 'Embed'}).click();
+
+    await page.getByPlaceholder('Enter URL or code to embed').type('https://sourcefabric.org');
+
+    await page.locator(s('embed-controls', 'submit')).click();
+    await expect(page.getByText('https://sourcefabric.org')).toBeDefined();
+});

scripts/core/editor3/components/toolbar/IconButton.tsx

@@ -20,7 +20,8 @@ interface IProps {
 export const IconButton: React.FunctionComponent<IProps> = ({onClick, iconName, tooltip, uiTheme}) => (
     <div
         data-flow={'down'}
-        data-test-id={tooltip}
+        data-test-id="icon-button"
+        data-test-value={tooltip}
         data-sd-tooltip={tooltip}
         className="Editor3-styleButton"
         style={uiTheme == null ? undefined : {color: uiTheme.textColor}}