Skip to content

Commit

Permalink
Port embed test to playwright (#4440)
Browse files Browse the repository at this point in the history
  • Loading branch information
thecalcc authored Aug 14, 2024
1 parent fffbc6c commit 43fe3e7
Show file tree
Hide file tree
Showing 4 changed files with 57 additions and 29 deletions.
41 changes: 41 additions & 0 deletions e2e/client/playwright/editor3.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down
21 changes: 15 additions & 6 deletions scripts/core/editor3/components/embeds/EmbedInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
}

/**
Expand All @@ -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">
Expand All @@ -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>
Expand Down
22 changes: 0 additions & 22 deletions scripts/core/editor3/components/tests/embeds.spec.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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('');
}));
});
2 changes: 1 addition & 1 deletion scripts/core/editor3/components/toolbar/IconButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);

0 comments on commit 43fe3e7

Please sign in to comment.