Skip to content

Commit

Permalink
fix: migrate cypress to playwright
Browse files Browse the repository at this point in the history 
Add more tests
Remove legacy tests
  • Loading branch information
@denis-kralj-novu
denis-kralj-novu committed May 21, 2024
1 parent 678ea30 commit 997d62a
Show file tree
Hide file tree
Showing 7 changed files with 106 additions and 172 deletions.
151 changes: 0 additions & 151 deletions apps/web/cypress/tests/notification-editor/variants.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -228,158 +228,7 @@ describe('Workflow Editor - Variants', function () {
}
};

describe('Editor actions', function () {
it('in production should only show the view conditions action', function () {
const channel = 'sms';
createWorkflow(`Production Test Editor Actions`);

const dataTransfer = new DataTransfer();

cy.getByTestId(`dnd-${channel}Selector`).trigger('dragstart', { dataTransfer });
cy.getByTestId('addNodeButton').parent().trigger('drop', { dataTransfer });
cy.clickWorkflowNode(`node-${channel}Selector`, false);
if (['inApp', 'email', 'sms', 'chat', 'push'].includes(channel)) {
cy.getByTestId('edit-action').click();
}
fillEditorContent(channel);
cy.getByTestId('sidebar-close').click();
cy.waitForNetworkIdle(500);

showStepActions(channel);
cy.getByTestId('add-conditions-action').should('be.visible').click();
addConditions();
cy.getByTestId('notification-template-submit-btn').click();
cy.wait('@updateWorkflow');

navigateAndPromoteAllChanges();

switchEnvironment('Production');

navigateAndOpenFirstWorkflow();

cy.clickWorkflowNode(`node-${channel}Selector`, false);
if (['inApp', 'email', 'sms', 'chat', 'push'].includes(channel)) {
cy.getByTestId('edit-action').click();
}
cy.getByTestId('editor-sidebar-add-variant').should('not.exist');
cy.getByTestId('editor-sidebar-add-conditions').should('not.exist');
cy.getByTestId('editor-sidebar-edit-conditions').should('be.visible');
cy.getByTestId('editor-sidebar-delete').should('not.exist');
});
});

describe('Add conditions action', function () {
it('should allow adding the conditions on the step', function () {
createWorkflow('Test Conditions Action');

const dataTransfer = new DataTransfer();

cy.getByTestId(`dnd-${'inApp'}Selector`).trigger('dragstart', { dataTransfer });
cy.getByTestId('addNodeButton').parent().trigger('drop', { dataTransfer });
cy.clickWorkflowNode(`node-${'inApp'}Selector`, false);
if (['inApp', 'email', 'sms', 'chat', 'push'].includes('inApp')) {
cy.getByTestId('edit-action').click();
}
fillEditorContent('inApp');
cy.getByTestId('sidebar-close').click();
cy.waitForNetworkIdle(500);

showStepActions('inApp');
cy.getByTestId('add-conditions-action').should('be.visible').click();
addConditions();

cy.getByTestId(`node-inAppSelector`).getByTestId('conditions-action').should('be.visible').contains('1');
showStepActions('inApp');
cy.getByTestId(`node-inAppSelector`).getByTestId('add-conditions-action').should('be.visible').contains('1');
});

it('should allow adding the conditions from the variants list sidebar header', function () {
createWorkflow('Test Conditions Action');

const dataTransfer = new DataTransfer();

cy.getByTestId(`dnd-${'inApp'}Selector`).trigger('dragstart', { dataTransfer });
cy.getByTestId('addNodeButton').parent().trigger('drop', { dataTransfer });
cy.clickWorkflowNode(`node-${'inApp'}Selector`, false);
if (['inApp', 'email', 'sms', 'chat', 'push'].includes('inApp')) {
cy.getByTestId('edit-action').click();
}
fillEditorContent('inApp');
cy.getByTestId('sidebar-close').click();
cy.waitForNetworkIdle(500);

showStepActions('inApp');
addVariantActionClick('inApp');
addConditions();
cy.getByTestId('sidebar-close').click();
cy.waitForNetworkIdle(500);

cy.getByTestId('variants-list-sidebar')
.getByTestId('variant-sidebar-add-conditions')
.should('be.visible')
.click();
addConditions();

cy.getByTestId('variants-list-sidebar')
.getByTestId('variant-sidebar-edit-conditions')
.should('be.visible')
.contains('1');
});

it('should allow adding the conditions on the variant in the variants list', function () {
createWorkflow('Test Conditions Action');

const dataTransfer = new DataTransfer();

cy.getByTestId(`dnd-${'inApp'}Selector`).trigger('dragstart', { dataTransfer });
cy.getByTestId('addNodeButton').parent().trigger('drop', { dataTransfer });
cy.clickWorkflowNode(`node-${'inApp'}Selector`, false);
if (['inApp', 'email', 'sms', 'chat', 'push'].includes('inApp')) {
cy.getByTestId('edit-action').click();
}
fillEditorContent('inApp');
cy.getByTestId('sidebar-close').click();
cy.waitForNetworkIdle(500);

showStepActions('inApp');
addVariantActionClick('inApp');
addConditions();
cy.getByTestId('sidebar-close').click();
cy.waitForNetworkIdle(500);

cy.getByTestId('variant-item-card-0').getByTestId('conditions-action').should('be.visible').contains('1');
cy.getByTestId('variant-item-card-0').should('be.visible').trigger('mouseover');
cy.getByTestId('variant-item-card-0').getByTestId('add-conditions-action').should('be.visible').click();
addConditions();

cy.getByTestId('variant-item-card-0').getByTestId('conditions-action').should('be.visible').contains('2');
});

it('should allow adding the conditions in the step editor', function () {
createWorkflow('Test Conditions Action');

const dataTransfer = new DataTransfer();

cy.getByTestId(`dnd-${'inApp'}Selector`).trigger('dragstart', { dataTransfer });
cy.getByTestId('addNodeButton').parent().trigger('drop', { dataTransfer });
cy.clickWorkflowNode(`node-${'inApp'}Selector`, false);
if (['inApp', 'email', 'sms', 'chat', 'push'].includes('inApp')) {
cy.getByTestId('edit-action').click();
}
fillEditorContent('inApp');
cy.getByTestId('editor-sidebar-add-conditions').click();
addConditions();
cy.getByTestId('editor-sidebar-edit-conditions').contains('1');
cy.getByTestId('notification-template-submit-btn').click();
cy.wait('@updateWorkflow');

cy.reload();
cy.wait('@getWorkflow');

checkEditorContent('inApp');
cy.getByTestId('editor-sidebar-edit-conditions').contains('1');
});

it('should allow adding the conditions in the variant editor', function () {
createWorkflow('Test Conditions Action');

Expand Down
9 changes: 9 additions & 0 deletions apps/web/tests/page-models/nodeInAppEditingModalPageModel.ts
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,20 @@
import { expect, Page } from '@playwright/test';
import { fillTextInAMonacoEditor } from '../utils.ts/browser';
import { addConditions } from '../utils.ts/commands';
import { ConditionsPage } from './conditionsPage';
import { EditorState } from './editorState';
import { VariantPreviewModalPage } from './variantPreviewModalPage';
import { WorkflowBaseSidePanelPage } from './workflowSettingsSidePanel';

export class NodeInAppEditingModalPageModel extends WorkflowBaseSidePanelPage {
async addMoreConditionViaSidebar() {
await this.getEditConditionsButton().click();
await addConditions(this.page);
}
async addConditionViaSidebar() {
await this.getAddConditionsSidebarButton().click();
await addConditions(this.page);
}
async updateInAppData(inAppBodyVariant: string) {
await this.fillNotificationBody(inAppBodyVariant);
await this.nodeSettingsUpdateButton().click();
Expand Down
35 changes: 32 additions & 3 deletions apps/web/tests/page-models/variantPreviewModalPage.ts
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,40 @@
import { expect, Page } from '@playwright/test';
import { addConditions } from '../utils.ts/commands';
import { ConditionsPage } from './conditionsPage';
import { WorkflowBaseSidePanelPage } from './workflowSettingsSidePanel';

export class VariantPreviewModalPage extends WorkflowBaseSidePanelPage {
async addVariantConditionAtIndex(index: number) {
await this.getVariantAtIndex(index).hover();
await this.getVariantAddConditionButton(index).click();
await addConditions(this.page);
}
getVariantAddConditionButton(index: number) {
return this.getVariantAtIndex(index).getByTestId('add-conditions-action');
}
public getVariantAddConditionsButton() {
return this.page.getByTestId('variant-sidebar-add-conditions');
}

public getVariantEditConditionsButton() {
return this.page.getByTestId('variant-sidebar-edit-conditions');
}
public async addConditionToVariantNode() {
await this.getVariantAddConditionsButton().click();
await addConditions(this.page);
}
public async assertHasVariant(variant: VARIANT_NAMES) {
await expect(this.page.getByTestId('variant-item-card-0')).toContainText(variant);
await expect(this.page.getByTestId('variant-item-card-0').getByTestId('conditions-action')).toContainText('1');
await expect(this.page.getByTestId('variant-root-card')).toBeVisible();
await expect(this.getVariantAtIndex(0)).toContainText(variant);
await expect(this.getVariantAtIndex(0).getByTestId('conditions-action')).toContainText('1');
await expect(this.getVariantRootCard()).toBeVisible();
}

public getVariantRootCard() {
return this.page.getByTestId('variant-root-card');
}

public getVariantAtIndex(index: number) {
return this.page.getByTestId(`variant-item-card-${index}`);
}

public async assertHasVariantCount(count: number) {
Expand Down
11 changes: 6 additions & 5 deletions apps/web/tests/page-models/workflowEditorPage.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { NodeChatEditingModalPageModel } from './nodeChatEditingModalPageModel';
import { NodePushEditorPageModal } from './nodePushEditorPageModal';
import { NodeDelayEditorPageModal } from './nodeDelayEditorPageModal';
import { ConditionsPage } from './conditionsPage';
import { addConditions } from '../utils.ts/commands';

export class WorkflowEditorPage {
async getFirstSmsNodeEditor() {
Expand All @@ -23,11 +24,7 @@ export class WorkflowEditorPage {
async addConditionToNode(channel: ChannelType) {
await this.clickWorkflowNode(channel);
await this.getAddConditionsButton().click();
const conditionsModal = new ConditionsPage(this.page);
await conditionsModal.getAddNewConditionButton().click();
await conditionsModal.getConditionsFormKeyInput().fill('test');
await conditionsModal.getConditionsFormValueInput().fill('test');
await conditionsModal.getApplyConditionsButton().click();
await addConditions(this.page);
const sidePanel = new WorkflowSettingsSidePanel(this.page);
await sidePanel.closeSidePanel();
}
Expand Down Expand Up @@ -221,6 +218,10 @@ export class WorkflowEditorPage {
return this.page.getByTestId('add-conditions-action');
}

getConditionsButton() {
return this.page.getByTestId('step-actions').getByTestId('conditions-action');
}

nodeEmailSelector() {
return this.page.getByTestId('node-emailSelector');
}
Expand Down
2 changes: 1 addition & 1 deletion apps/web/tests/page-models/workflowSettingsSidePanel.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export abstract class WorkflowBaseSidePanelPage extends BasePage {
nodeSettingsUpdateButton() {
return this.page.getByTestId('notification-template-submit-btn');
}
getAddConditionsButton() {
getAddConditionsSidebarButton() {
return this.page.getByTestId('editor-sidebar-add-conditions');
}
getEditConditionsButton() {
Expand Down
9 changes: 9 additions & 0 deletions apps/web/tests/utils.ts/commands.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { expect, Locator, Page } from '@playwright/test';
import { ConditionsPage } from '../page-models/conditionsPage';

export async function logout(page: Page, settings = {}) {
await page.goto('/');
Expand All @@ -19,3 +20,11 @@ export async function setFileForFilePicker(locator: Locator, filePath: string) {
export async function assertElementContainsText(locator: Locator, name: string) {
await expect(locator).toContainText(name);
}

export async function addConditions(page: Page) {
const conditionsModal = new ConditionsPage(page);
await conditionsModal.getAddNewConditionButton().click();
await conditionsModal.getConditionsFormKeyInput().fill('test');
await conditionsModal.getConditionsFormValueInput().fill('test');
await conditionsModal.getApplyConditionsButton().click();
}
61 changes: 49 additions & 12 deletions apps/web/tests/variants.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import { ChangesPage } from './page-models/changesPage';
import { SidebarPage } from './page-models/sidebarPage';
import { WorkflowsPage } from './page-models/workflowsPage';
import { NodeSmsEditingModalPageModel } from './page-models/nodeSmsEditingModalPageModel';
import { addConditions } from './utils.ts/commands';
import { NodeSidebarPreview } from './page-models/nodeSidebarPreview';

test.beforeEach(async ({ page }) => {
await initializeSession(page, { noTemplates: true });
Expand Down Expand Up @@ -95,7 +97,7 @@ test('should allow creating variant from the step editor', async ({ page }) => {
await nodeInAppEditingPageModel.fillNotificationBody(inAppBody);
await nodeInAppEditingPageModel.getEditorAddVariantButton().click();

await setConditions(page);
await addConditions(page);

await nodeInAppEditingPageModel.switchEditorMode(EditorState.PREVIEW);
await nodeInAppEditingPageModel.assertPreviewText(inAppBody);
Expand All @@ -110,14 +112,14 @@ test('should allow adding multiple variants', async ({ page }) => {
await nodeInAppEditingPageModel.fillNotificationBody(inAppBody);
await nodeInAppEditingPageModel.getEditorAddVariantButton().click();

await setConditions(page);
await addConditions(page);

await nodeInAppEditingPageModel.closeSidePanel();
const variantPreviewModalPage = new VariantPreviewModalPage(page);

await variantPreviewModalPage.getVariantPreviewAddVariantButton().click();

await setConditions(page);
await addConditions(page);

await variantPreviewModalPage.closeSidePanel();
variantPreviewModalPage.assertHasVariantCount(2);
Expand Down Expand Up @@ -265,7 +267,7 @@ test('ensure production node editor only shows close button for simple case', as
const smsNodeEditorPage = await workflowEditorPage.getFirstSmsNodeEditor();

expect(smsNodeEditorPage.getEditorAddVariantButton()).toHaveCount(0);
expect(smsNodeEditorPage.getAddConditionsButton()).toHaveCount(0);
expect(smsNodeEditorPage.getAddConditionsSidebarButton()).toHaveCount(0);
expect(smsNodeEditorPage.getEditConditionsButton()).toHaveCount(0);
expect(smsNodeEditorPage.getDeleteButton()).toHaveCount(0);
expect(smsNodeEditorPage.getCloseSidebarLocator()).toHaveCount(1);
Expand All @@ -288,19 +290,54 @@ test('ensure production shows close and edit conditions button for conditioned n
const smsNodeEditorPage = await workflowEditorPage.getFirstSmsNodeEditor();

expect(smsNodeEditorPage.getEditorAddVariantButton()).toHaveCount(0);
expect(smsNodeEditorPage.getAddConditionsButton()).toHaveCount(0);
expect(smsNodeEditorPage.getAddConditionsSidebarButton()).toHaveCount(0);
expect(smsNodeEditorPage.getEditConditionsButton()).toHaveCount(1);
expect(smsNodeEditorPage.getDeleteButton()).toHaveCount(0);
expect(smsNodeEditorPage.getCloseSidebarLocator()).toHaveCount(1);
});

async function setConditions(page: any) {
const conditionsModal = new ConditionsPage(page);
await conditionsModal.getAddNewConditionButton().click();
await conditionsModal.getConditionsFormKeyInput().fill('test');
await conditionsModal.getConditionsFormValueInput().fill('test');
await conditionsModal.getApplyConditionsButton().click();
}
test('Allows adding conditions on the step', async ({ page }) => {
const workflowEditorPage = await WorkflowEditorPage.goToNewWorkflow(page);
await workflowEditorPage.addAndFillInAppNode('this is a test paragraph', 'Test Add conditional Flow for inApp');
const relevantNode = workflowEditorPage.getNode(ChannelType.IN_APP, 0);
await relevantNode.hover();
workflowEditorPage.getAddConditionsButton().click();
await addConditions(page);
workflowEditorPage.clickWorkflowNode(ChannelType.IN_APP);
await expect(workflowEditorPage.getAddConditionsButton()).toHaveCount(1);
await expect(workflowEditorPage.getConditionsButton()).toHaveCount(1);
});

test('Allows adding conditions from the variants overview modal header', async ({ page }) => {
const workflowEditorPage = await WorkflowEditorPage.goToNewWorkflow(page);
await workflowEditorPage.addAndFillInAppNode('this is a test paragraph', 'Test Add conditional Flow for inApp');
const inAppVariantEditor = await workflowEditorPage.addVariantToInAppNode();
const variantOverview = await inAppVariantEditor.updateInAppData('some new content');
await expect(variantOverview.getVariantAddConditionsButton()).toHaveCount(1);
await variantOverview.addConditionToVariantNode();
await expect(variantOverview.getVariantEditConditionsButton()).toHaveCount(1);
});

test('Allows adding second variant condition from the variants overview modal header', async ({ page }) => {
const workflowEditorPage = await WorkflowEditorPage.goToNewWorkflow(page);
await workflowEditorPage.addAndFillInAppNode('this is a test paragraph', 'Test Add conditional Flow for inApp');
const inAppVariantEditor = await workflowEditorPage.addVariantToInAppNode();
const variantOverview = await inAppVariantEditor.updateInAppData('some new content');
await expect(variantOverview.getVariantAtIndex(0)).toContainText('1');
await variantOverview.addVariantConditionAtIndex(0);
await expect(variantOverview.getVariantAtIndex(0)).toContainText('2');
});

test('Allows adding second condition from the in step editor', async ({ page }) => {
const workflowEditorPage = await WorkflowEditorPage.goToNewWorkflow(page);
const inAppEditor = await workflowEditorPage.addAndEditInAppNode();
await inAppEditor.fillNotificationBody('some content');
await inAppEditor.pressUpdate();
await inAppEditor.addConditionViaSidebar();
expect(inAppEditor.getEditConditionsButton()).toContainText('1');
await inAppEditor.addMoreConditionViaSidebar();
expect(inAppEditor.getEditConditionsButton()).toContainText('2');
});

async function assertHasExpectedNonVariantEditorButtons(page: Page) {
await expect(page.getByTestId('editor-sidebar-add-variant')).toBeVisible();
Expand Down

0 comments on commit 997d62a

Please sign in to comment.