Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Remove firefox specific branch in tests #1620

Merged
merged 5 commits into from
Feb 2, 2023
Merged

Remove firefox specific branch in tests #1620

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
57a6847
Update ToolpadEditor.ts
Janpot Feb 1, 2023
280c3bb
clean up
Janpot Feb 1, 2023
334e807
fix lint
Janpot Feb 1, 2023
85b5d03
moar lint
Janpot Feb 1, 2023
7a63781
Merge branch 'master' into try-remove-ff-hack
Janpot Feb 2, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions test/integration/codeComponents/index.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,14 @@ import { test, expect } from '../../playwright/test';
import { readJsonFile } from '../../utils/fs';
import generateId from '../../utils/generateId';

test('components', async ({ page, browserName, api }) => {
test('components', async ({ page, api }) => {
const dom = await readJsonFile(path.resolve(__dirname, './dom.json'));

const app = await api.mutation.createApp(`App ${generateId()}`, {
from: { kind: 'dom', dom },
});

const editorModel = new ToolpadEditor(page, browserName);
const editorModel = new ToolpadEditor(page);
await editorModel.goto(app.id);

await editorModel.hierarchyItem('components', 'myCOmponent').click();
Expand Down
6 changes: 3 additions & 3 deletions test/integration/components/index.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,17 +42,17 @@ test('rendering components in the app runtime', async ({ page, api }) => {
await waitForComponents(page);
});

test('rendering components in the app editor', async ({ page, browserName, api }) => {
test('rendering components in the app editor', async ({ page, api }) => {
const dom = await readJsonFile(path.resolve(__dirname, './componentsDom.json'));

const app = await api.mutation.createApp(`App ${generateId()}`, {
from: { kind: 'dom', dom },
});

const editorModel = new ToolpadEditor(page, browserName);
const editorModel = new ToolpadEditor(page);
editorModel.goto(app.id);

await waitForComponents(page, editorModel.appCanvas, true);
await waitForComponents(page, editorModel.appCanvas);
});

test('select component behavior', async ({ page, api }) => {
Expand Down
4 changes: 2 additions & 2 deletions test/integration/data-grid/index.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,14 @@ import { test, expect } from '../../playwright/test';
import { readJsonFile } from '../../utils/fs';
import generateId from '../../utils/generateId';

test('Code component cell', async ({ page, browserName, api }) => {
test('Code component cell', async ({ page, api }) => {
const dom = await readJsonFile(path.resolve(__dirname, './codeComponentCell.json'));

const app = await api.mutation.createApp(`App ${generateId()}`, {
from: { kind: 'dom', dom },
});

const editorModel = new ToolpadEditor(page, browserName);
const editorModel = new ToolpadEditor(page);
editorModel.goto(app.id);

await editorModel.waitForOverlay();
Expand Down
4 changes: 2 additions & 2 deletions test/integration/duplication/index.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,14 @@ import { test, expect } from '../../playwright/test';
import { readJsonFile } from '../../utils/fs';
import generateId from '../../utils/generateId';

test('duplication', async ({ page, browserName, api }) => {
test('duplication', async ({ page, api }) => {
const dom = await readJsonFile(path.resolve(__dirname, './dom.json'));

const app = await api.mutation.createApp(`App ${generateId()}`, {
from: { kind: 'dom', dom },
});

const editorModel = new ToolpadEditor(page, browserName);
const editorModel = new ToolpadEditor(page);
await editorModel.goto(app.id);

{
Expand Down
16 changes: 8 additions & 8 deletions test/integration/editor/index.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@ import clickCenter from '../../utils/clickCenter';
import generateId from '../../utils/generateId';
import { readJsonFile } from '../../utils/fs';

test('can place new components from catalog', async ({ page, browserName, api }) => {
test('can place new components from catalog', async ({ page, api }) => {
const app = await api.mutation.createApp(`App ${generateId()}`);

const editorModel = new ToolpadEditor(page, browserName);
const editorModel = new ToolpadEditor(page);

await editorModel.goto(app.id);

Expand All @@ -34,8 +34,8 @@ test('can place new components from catalog', async ({ page, browserName, api })
await expect(canvasInputLocator).toHaveCount(2);
});

test('can move elements in page', async ({ page, browserName, api }) => {
const editorModel = new ToolpadEditor(page, browserName);
test('can move elements in page', async ({ page, api }) => {
const editorModel = new ToolpadEditor(page);
const TEXT_FIELD_COMPONENT_DISPLAY_NAME = 'Text field';

const dom = await readJsonFile(path.resolve(__dirname, './domInput.json'));
Expand Down Expand Up @@ -90,8 +90,8 @@ test('can move elements in page', async ({ page, browserName, api }) => {
await expect(secondTextFieldLocator).toHaveAttribute('value', 'textField1');
});

test('can delete elements from page', async ({ page, browserName, api }) => {
const editorModel = new ToolpadEditor(page, browserName);
test('can delete elements from page', async ({ page, api }) => {
const editorModel = new ToolpadEditor(page);

const dom = await readJsonFile(path.resolve(__dirname, './domInput.json'));

Expand Down Expand Up @@ -129,10 +129,10 @@ test('can delete elements from page', async ({ page, browserName, api }) => {
await expect(canvasInputLocator).toHaveCount(0);
});

test('can create new component', async ({ page, browserName, api }) => {
test('can create new component', async ({ page, api }) => {
const app = await api.mutation.createApp(`App ${generateId()}`);

const editorModel = new ToolpadEditor(page, browserName);
const editorModel = new ToolpadEditor(page);

await editorModel.goto(app.id);

Expand Down
4 changes: 2 additions & 2 deletions test/integration/file-picker/index.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { test, expect } from '../../playwright/test';
import { readJsonFile } from '../../utils/fs';
import generateId from '../../utils/generateId';

test('File picker component', async ({ page, browserName, api }) => {
test('File picker component', async ({ page, api }) => {
const dom = await readJsonFile(path.resolve(__dirname, './dom.json'));
const testFilePath = path.resolve(__dirname, './test.txt');

Expand All @@ -14,7 +14,7 @@ test('File picker component', async ({ page, browserName, api }) => {

await page.pause();

const editorModel = new ToolpadEditor(page, browserName);
const editorModel = new ToolpadEditor(page);
editorModel.goto(app.id);

await editorModel.waitForOverlay();
Expand Down
4 changes: 2 additions & 2 deletions test/integration/function-basic/index.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,14 +33,14 @@ test('functions basics', async ({ page, api }) => {
await page.locator('text="echo, secret: Some bar secret"').waitFor({ state: 'visible' });
});

test('function editor save shortcut', async ({ page, api, browserName }) => {
test('function editor save shortcut', async ({ page, api }) => {
const dom = await readJsonFile(path.resolve(__dirname, './functionDom.json'));

const app = await api.mutation.createApp(`App ${generateId()}`, {
from: { kind: 'dom', dom },
});

const editorModel = new ToolpadEditor(page, browserName);
const editorModel = new ToolpadEditor(page);
await editorModel.goto(app.id);

await expect(editorModel.appCanvas.getByText('edited hello')).toBeVisible();
Expand Down
4 changes: 2 additions & 2 deletions test/integration/pages/index.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,14 @@ import { test, expect } from '../../playwright/test';
import { readJsonFile } from '../../utils/fs';
import generateId from '../../utils/generateId';

test('must load page in initial URL without altering URL', async ({ page, browserName, api }) => {
test('must load page in initial URL without altering URL', async ({ page, api }) => {
const dom = await readJsonFile(path.resolve(__dirname, './2pages.json'));

const app = await api.mutation.createApp(`App ${generateId()}`, {
from: { kind: 'dom', dom },
});

const editorModel = new ToolpadEditor(page, browserName);
const editorModel = new ToolpadEditor(page);

await page.goto(`/_toolpad/app/${app.id}/pages/g433ywb?abcd=123`);

Expand Down
12 changes: 4 additions & 8 deletions test/integration/propControls/index.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,14 @@ import clickCenter from '../../utils/clickCenter';
import { readJsonFile } from '../../utils/fs';
import generateId from '../../utils/generateId';

test('can control component prop values in properties control panel', async ({
page,
browserName,
api,
}) => {
test('can control component prop values in properties control panel', async ({ page, api }) => {
const dom = await readJsonFile(path.resolve(__dirname, './domInput.json'));

const app = await api.mutation.createApp(`App ${generateId()}`, {
from: { kind: 'dom', dom },
});

const editorModel = new ToolpadEditor(page, browserName);
const editorModel = new ToolpadEditor(page);

await editorModel.goto(app.id);

Expand Down Expand Up @@ -57,14 +53,14 @@ test('can control component prop values in properties control panel', async ({
await inputByLabel.waitFor({ state: 'visible' });
});

test('changing defaultValue resets controlled value', async ({ page, browserName, api }) => {
test('changing defaultValue resets controlled value', async ({ page, api }) => {
const dom = await readJsonFile(path.resolve(__dirname, './defaultValueDom.json'));

const app = await api.mutation.createApp(`App ${generateId()}`, {
from: { kind: 'dom', dom },
});

const editorModel = new ToolpadEditor(page, browserName);
const editorModel = new ToolpadEditor(page);
await editorModel.goto(app.id);

await editorModel.waitForOverlay();
Expand Down
4 changes: 2 additions & 2 deletions test/integration/rest-basic/index.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ if (customHttbinBaseUrl) {
const HTTPBIN_SOURCE_URL = 'https://httpbin.org/';
const HTTPBIN_TARGET_URL = customHttbinBaseUrl || HTTPBIN_SOURCE_URL;

test('rest basics', async ({ page, browserName, api }) => {
test('rest basics', async ({ page, api }) => {
const dom = await readJsonFile(path.resolve(__dirname, './restDom.json'), (key, value) => {
if (typeof value === 'string') {
return value.replaceAll(HTTPBIN_SOURCE_URL, HTTPBIN_TARGET_URL);
Expand All @@ -38,7 +38,7 @@ test('rest basics', async ({ page, browserName, api }) => {
await expect(page.locator('text="browserQuery: browserQuery_value"')).toBeVisible();
await expect(page.locator('text="browserQuery: browserQuery_value"')).toBeVisible();

const editorModel = new ToolpadEditor(page, browserName);
const editorModel = new ToolpadEditor(page);
await editorModel.goto(app.id);

await editorModel.componentEditor.getByRole('button', { name: 'browserQuery' }).click();
Expand Down
16 changes: 6 additions & 10 deletions test/integration/undo-redo/index.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,14 @@ import { readJsonFile } from '../../utils/fs';
import clickCenter from '../../utils/clickCenter';
import generateId from '../../utils/generateId';

test('test basic undo and redo', async ({ page, browserName, api }) => {
test('test basic undo and redo', async ({ page, api }) => {
const dom = await readJsonFile(path.resolve(__dirname, './dom.json'));

const app = await api.mutation.createApp(`App ${generateId()}`, {
from: { kind: 'dom', dom },
});

const editorModel = new ToolpadEditor(page, browserName);
const editorModel = new ToolpadEditor(page);
await editorModel.goto(app.id);

await editorModel.waitForOverlay();
Expand Down Expand Up @@ -40,18 +40,14 @@ test('test basic undo and redo', async ({ page, browserName, api }) => {
await expect(canvasInputLocator).toHaveCount(3);
});

test('test batching text input actions into single undo entry', async ({
page,
browserName,
api,
}) => {
test('test batching text input actions into single undo entry', async ({ page, api }) => {
const dom = await readJsonFile(path.resolve(__dirname, './dom.json'));

const app = await api.mutation.createApp(`App ${generateId()}`, {
from: { kind: 'dom', dom },
});

const editorModel = new ToolpadEditor(page, browserName);
const editorModel = new ToolpadEditor(page);
await editorModel.goto(app.id);

await editorModel.waitForOverlay();
Expand Down Expand Up @@ -83,14 +79,14 @@ test('test batching text input actions into single undo entry', async ({
await expect(input).toHaveValue('some value');
});

test('test undo and redo through different pages', async ({ page, browserName, api }) => {
test('test undo and redo through different pages', async ({ page, api }) => {
const dom = await readJsonFile(path.resolve(__dirname, './2pages.json'));

const app = await api.mutation.createApp(`App ${generateId()}`, {
from: { kind: 'dom', dom },
});

const editorModel = new ToolpadEditor(page, browserName);
const editorModel = new ToolpadEditor(page);
await editorModel.goto(app.id);

await editorModel.waitForOverlay();
Expand Down
46 changes: 3 additions & 43 deletions test/models/ToolpadEditor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,13 +43,6 @@ class CreateComponentDialog {
export class ToolpadEditor {
readonly page: Page;

/**
* @deprecated Do not use, this is a temporary workaround for firefox issues
* See https://github.com/microsoft/playwright/issues/17441
* TODO: remove this property
*/
readonly browserName: string;

readonly createPageBtn: Locator;

readonly createPageDialog: CreatePageDialog;
Expand All @@ -72,9 +65,8 @@ export class ToolpadEditor {

readonly confirmationDialog: Locator;

constructor(page: Page, browserName: string) {
constructor(page: Page) {
this.page = page;
this.browserName = browserName;

this.createPageBtn = page.locator('[aria-label="Create page"]');
this.createPageDialog = new CreatePageDialog(page);
Expand Down Expand Up @@ -148,43 +140,11 @@ export class ToolpadEditor {
const appCanvasFrame = this.page.frame('data-toolpad-canvas');
expect(appCanvasFrame).toBeDefined();

// Source drag event needs to be dispatched manually in Firefox for tests to work (Playwright bug)
// https://github.com/microsoft/playwright/issues/17441
const isFirefox = this.browserName === 'firefox';
if (isFirefox) {
if (isSourceInCanvas) {
const dataTransfer = await appCanvasFrame!.evaluateHandle(() => new DataTransfer());
await appCanvasFrame!.dispatchEvent(sourceSelector, 'dragstart', { dataTransfer });
} else {
const dataTransfer = await this.page.evaluateHandle(() => new DataTransfer());
await this.page.dispatchEvent(sourceSelector, 'dragstart', { dataTransfer });
}
} else {
await this.page.mouse.down();
}
await this.page.mouse.down();

await this.page.mouse.move(moveTargetX, moveTargetY, { steps: 10 });

// Overlay drag events need to be dispatched manually in Firefox for tests to work (Playwright bug)
// https://github.com/microsoft/playwright/issues/17441
if (isFirefox) {
const pageOverlayBoundingBox = await this.pageOverlay.boundingBox();

expect(pageOverlayBoundingBox).toBeDefined();

const eventMousePosition = {
clientX: moveTargetX - pageOverlayBoundingBox!.x,
clientY: moveTargetY - pageOverlayBoundingBox!.y,
};

const pageOverlaySelector = 'data-testid=page-overlay';

await appCanvasFrame!.dispatchEvent(pageOverlaySelector, 'dragover', eventMousePosition);
await appCanvasFrame!.dispatchEvent(pageOverlaySelector, 'drop', eventMousePosition);
await appCanvasFrame!.dispatchEvent(pageOverlaySelector, 'dragend');
} else {
await this.page.mouse.up();
}
await this.page.mouse.up();
}

async dragNewComponentToAppCanvas(componentName: string) {
Expand Down