Port embed test to playwright

e2e/client/playwright/editor3.spec.ts

@@ -3,6 +3,47 @@ import {test, expect} from '@playwright/test';
 import {restoreDatabaseSnapshot, s} from './utils';
 import {getEditor3FormattingOptions, getEditor3Paragraphs} from './utils/editor3';
 import {TreeSelectDriver} from './utils/tree-select-driver';
+import {appConfig} from 'scripts/appConfig';
+
+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=${appConfig.iframely.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', 'formatting-option')).getByRole('button', {name: 'Embed'}).click();
+
+    await page.locator(s('embed-controls')).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);

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,7 @@ 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-controls" onSubmit={this.onSubmit} className="embed-dialog" onKeyUp={this.onKeyUp}>
                 <OverlayTrigger
                     overlay={(
                         <Tooltip id="create_new_embed_tooltip">
@@ -154,11 +158,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>

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('');
-    }));
 });

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>
 );