From 43fe3e7a041f2d95b49371b8632bba14d59ba75f Mon Sep 17 00:00:00 2001
From: Konstantin Markov <maga.ot.oz@protonmail.com>
Date: Wed, 14 Aug 2024 15:45:43 +0300
Subject: [PATCH] Port embed test to playwright (#4440)

---
 e2e/client/playwright/editor3.spec.ts         | 41 +++++++++++++++++++
 .../editor3/components/embeds/EmbedInput.tsx  | 21 +++++++---
 .../editor3/components/tests/embeds.spec.tsx  | 22 ----------
 .../editor3/components/toolbar/IconButton.tsx |  2 +-
 4 files changed, 57 insertions(+), 29 deletions(-)

diff --git a/e2e/client/playwright/editor3.spec.ts b/e2e/client/playwright/editor3.spec.ts
index 9ecf26ff16..cc1d5a426d 100644
--- a/e2e/client/playwright/editor3.spec.ts
+++ b/e2e/client/playwright/editor3.spec.ts
@@ -4,6 +4,47 @@ import {restoreDatabaseSnapshot, s} from './utils';
 import {getEditor3FormattingOptions, getEditor3Paragraphs} from './utils/editor3';
 import {TreeSelectDriver} from './utils/tree-select-driver';
 
+test('can add embeds', async ({page}) => {
+    await restoreDatabaseSnapshot();
+
+    const monitoring = new Monitoring(page);
+
+    const requestRoute = 'https://sourcefabric.org';
+
+    await page.route(
+        `https://iframe.ly/api/oembed?callback=?&url=
+        ${requestRoute}
+        &api_key="mock_api_key"
+        &omit_script=true&iframe=true`,
+        (route) => {
+            route.fulfill({
+                body: JSON.stringify([{
+                    title: 'Open Source Software for Journalism',
+                    description: 'Sourcefabric is Europe\'s largest developer of '
+                    + 'open source tools for news media, powering news and media organisations around the world.',
+                }]),
+            });
+        },
+    );
+    await page.goto('/#/workspace/monitoring');
+
+    await monitoring.selectDeskOrWorkspace('Sports');
+
+    await page.locator(
+        s('monitoring-group=Sports / Working Stage', 'article-item=test sports story'),
+    ).dblclick();
+
+    page.locator(s('toolbar')).getByRole('button', {name: 'Embed'}).click();
+
+    await page.locator(s('embed-form')).getByPlaceholder('Enter URL or code to embed')
+        .fill('https://sourcefabric.org');
+
+    await page.locator(s('embed-controls', 'submit')).click();
+    await expect(
+        page.locator(s('authoring', 'authoring-field=body_html')).getByText('https://sourcefabric.org'),
+    ).toBeDefined();
+});
+
 test('accepting a spelling suggestion', async ({page}) => {
     const monitoring = new Monitoring(page);
 
diff --git a/scripts/core/editor3/components/embeds/EmbedInput.tsx b/scripts/core/editor3/components/embeds/EmbedInput.tsx
index 76ea0ad739..889d4d45b2 100644
--- a/scripts/core/editor3/components/embeds/EmbedInput.tsx
+++ b/scripts/core/editor3/components/embeds/EmbedInput.tsx
@@ -113,8 +113,12 @@ export class EmbedInputComponent extends React.Component<IProps, any> {
         }
 
         getEmbedObject(value)
-            .then((data) => data.type === 'link' ? $.Deferred().reject() : data)
-            .then(this.processSuccess, this.processError);
+            .then((data) => {
+                this.processSuccess(data);
+            })
+            .catch((error) => {
+                this.processError(error);
+            });
     }
 
     /**
@@ -136,7 +140,12 @@ export class EmbedInputComponent extends React.Component<IProps, any> {
         const {error} = this.state;
 
         return (
-            <form onSubmit={this.onSubmit} className="embed-dialog" onKeyUp={this.onKeyUp}>
+            <form
+                data-test-id="embed-form"
+                onSubmit={this.onSubmit}
+                className="embed-dialog"
+                onKeyUp={this.onKeyUp}
+            >
                 <OverlayTrigger
                     overlay={(
                         <Tooltip id="create_new_embed_tooltip">
@@ -154,11 +163,11 @@ export class EmbedInputComponent extends React.Component<IProps, any> {
                     }}
                     placeholder={gettext('Enter URL or code to embed')}
                 />
-                <div className="input-controls">
-                    <a className="icn-btn" onClick={this.onSubmit}>
+                <div data-test-id="embed-controls" className="input-controls">
+                    <a role="button" data-test-id="submit" className="icn-btn" onClick={this.onSubmit}>
                         <i className="icon-ok" />
                     </a>
-                    <a className="icn-btn" onClick={this.onCancel}>
+                    <a role="button" data-test-id="cancel" className="icn-btn" onClick={this.onCancel}>
                         <i className="icon-close-small" />
                     </a>
                 </div>
diff --git a/scripts/core/editor3/components/tests/embeds.spec.tsx b/scripts/core/editor3/components/tests/embeds.spec.tsx
index 727887f385..d771f12cfe 100644
--- a/scripts/core/editor3/components/tests/embeds.spec.tsx
+++ b/scripts/core/editor3/components/tests/embeds.spec.tsx
@@ -92,26 +92,4 @@ describe('editor3.components.embed-input', () => {
         expect(wrapper.state('error')).toBe('this is the error');
         expect(wrapper.find('.embed-dialog__error').text()).toBe('this is the error');
     }));
-
-    it('should call onSubmit and reset error on success', inject(($q, $rootScope) => {
-        const {options} = mockStore();
-        const onCancel = jasmine.createSpy();
-        const onSubmit = jasmine.createSpy();
-        const wrapper = mount(<EmbedInput embed={onSubmit} hidePopups={onCancel} />, options);
-
-        spyOn($, 'ajax').and.returnValue($q.resolve({html: 'foo'}));
-
-        wrapper.setState({error: 'some error'});
-
-        const instance: any = wrapper.find('input').instance();
-
-        instance.value = 'http://will.fail';
-        wrapper.simulate('submit');
-
-        $rootScope.$apply();
-
-        expect(onSubmit).toHaveBeenCalledWith({html: 'foo'});
-        expect(onCancel).toHaveBeenCalled();
-        expect(wrapper.state('error')).toBe('');
-    }));
 });
diff --git a/scripts/core/editor3/components/toolbar/IconButton.tsx b/scripts/core/editor3/components/toolbar/IconButton.tsx
index 105eaeedc9..5134f2b9e1 100644
--- a/scripts/core/editor3/components/toolbar/IconButton.tsx
+++ b/scripts/core/editor3/components/toolbar/IconButton.tsx
@@ -26,6 +26,6 @@ export const IconButton: React.FunctionComponent<IProps> = ({onClick, iconName,
         style={uiTheme == null ? undefined : {color: uiTheme.textColor}}
         role="button"
     >
-        <span onClick={onClick}><i className={`icon-${iconName}`} /></span>
+        <span role="button" onClick={onClick}><i className={`icon-${iconName}`} /></span>
     </div>
 );