@axinom/mosaic-e2e-page-model 0.2.5-rc.9 → 0.3.0-rc.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-e2e-page-model",
-  "version": "0.2.5-rc.9",
+  "version": "0.3.0-rc.1",
   "description": "A page model for testing an Axinom Mosaic Management System with Playwright.",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -10,7 +10,8 @@
     "axinom mosaic"
   ],
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -21,7 +22,7 @@
     "dev": "tsc -w"
   },
   "dependencies": {
-    "@axinom/mosaic-e2e-ui-selectors": "^0.2.5-rc.9"
+    "@axinom/mosaic-e2e-ui-selectors": "^0.3.0-rc.1"
   },
   "devDependencies": {
     "@types/node": "^14.18.0",
@@ -34,5 +35,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "c9dfcc273fab65d29108afc4dcf62db978afbd9b"
+  "gitHead": "ead0510054dde1f3bc61b39a57e83e541d251b59"
 }

package/src/index.ts

@@ -0,0 +1,5 @@
+export * from './managed-services';
+export * from './page-model';
+export * from './service-model';
+export * from './sign-in';
+export * from './ui-selectors';

package/src/managed-services/channel-service.ts

@@ -0,0 +1,231 @@
+import { ManagedServiceModel } from './managed-service-model';
+
+export class ChannelService extends ManagedServiceModel {
+  /**
+   * This method creates a channel by title.
+   * The management system must be loaded & signed in before using this method.
+   *
+   * The following steps will be taken:
+   * - Navigate to the channels station
+   * - Click on [New] button
+   *  - Populate channel's title and click on [Proceed] button in order to save newly created channel
+   *
+   * @param args.channelTitle  The title of the channel
+   */
+  async createChannel(args: { channelTitle: string }): Promise<void> {
+    const { uiShell, uiManagedWorkflows } = this;
+
+    // create channel
+    await uiShell.navigateToLandingPageTile('Channels');
+    await uiManagedWorkflows.list.waitForData();
+    await uiShell.waitForPageTransition(
+      uiManagedWorkflows.pageHeader.actions.getActionByLabel('NEW').click(),
+    );
+    await uiManagedWorkflows.form
+      .getFieldByLabel('Title')
+      .asSingleLineTextField()
+      .setValue(args.channelTitle);
+    await uiShell.waitForPageTransition(
+      uiManagedWorkflows.actions.getActionByLabel('Proceed').click(),
+    );
+    await uiManagedWorkflows.form.waitForData();
+  }
+
+  /**
+   * This method opens channel properties page for a channel.
+   * The management system must be loaded & signed in before using this method.
+   *
+   * The following steps will be taken:
+   * - Navigate to the channels station
+   * - Filter out for the particular channel by title
+   * - Open channel properties page
+   *
+   * @param args.channelTitle  The title of the channel
+   */
+  async navigateToChannelProperties(args: {
+    channelTitle: string;
+  }): Promise<void> {
+    const { uiShell, uiManagedWorkflows } = this;
+
+    // filter out newly created channel
+    await uiShell.navigateToLandingPageTile('Channels');
+    await uiManagedWorkflows.list.waitForData();
+    await uiManagedWorkflows.filters
+      .getFilterByName('title')
+      .asFreeTextFilter()
+      .setValue(args.channelTitle);
+    await uiManagedWorkflows.list.waitForData();
+
+    // navigate to the channel properties station
+    await uiShell.waitForPageTransition(
+      uiManagedWorkflows.list.getRow(1).actionButton.click(),
+    );
+    await uiManagedWorkflows.form.waitForData();
+  }
+
+  /**
+   * This method publishes a channel.
+   * The management system must be loaded & signed in before using this method.
+   *
+   * The following steps will be taken:
+   * - Navigate to the channels station
+   * - Filter out for the particular channel by title
+   * - Open channel properties page
+   * - Publish the channel
+   *
+   * @param args.channelTitle  The title of the channel
+   */
+  async publishChannel(args: { channelTitle: string }): Promise<void> {
+    const { uiShell, uiManagedWorkflows } = this;
+
+    this.navigateToChannelProperties({
+      channelTitle: args.channelTitle,
+    });
+
+    // click on [Publishing] button
+    await uiManagedWorkflows.form.waitForData();
+    await uiShell.waitForPageTransition(
+      uiManagedWorkflows.actions.getActionByLabel('Publishing').click(),
+    );
+    // publish the channel
+    await uiManagedWorkflows.actions.getActionByLabel('Publish').click(),
+      await uiShell.waitForPageTransition(
+        uiManagedWorkflows.actions.confirmButton.click(),
+      );
+  }
+
+  /**
+   * This method unpublishes a channel.
+   * The management system must be loaded & signed in before using this method.
+   *
+   * The following steps will be taken:
+   * - Navigate to the channels station
+   * - Filter out for the particular channel by title
+   * - Open channel properties page
+   * - Unpublish the channel
+   *
+   * @param args.channelTitle  The title of the channel
+   */
+  async unpublishChannel(args: { channelTitle: string }): Promise<void> {
+    const { uiShell, uiManagedWorkflows } = this;
+
+    this.navigateToChannelProperties({
+      channelTitle: args.channelTitle,
+    });
+
+    await uiManagedWorkflows.actions.getActionByLabel('Unpublish').click(),
+      await uiShell.waitForPageTransition(
+        uiManagedWorkflows.actions.confirmButton.click(),
+      );
+  }
+
+  /**
+   * This method deletes a channel.
+   * The management system must be loaded & signed in before using this method.
+   *
+   * The following steps will be taken:
+   * - Navigate to the channels station
+   * - Filter out for the particular channel by title
+   * - Open channel properties page
+   * - Delete the channel
+   *
+   * @param args.channelTitle  The title of the channel
+   */
+  async deleteChannel(args: { channelTitle: string }): Promise<void> {
+    const { uiShell, uiManagedWorkflows } = this;
+
+    this.navigateToChannelProperties({
+      channelTitle: args.channelTitle,
+    });
+
+    const action = uiManagedWorkflows.actions.getActionByLabel('Delete');
+    try {
+      await action.waitFor({ state: 'visible' });
+    } catch {
+      throw new Error(`The "Delete" action is not visible.`);
+    }
+    await action.click();
+    await uiShell.waitForPageTransition(
+      uiManagedWorkflows.actions.confirmButton.click(),
+    );
+    await uiManagedWorkflows.list.waitForData();
+  }
+
+  /**
+   * This method creates a playlist for a channel.
+   * The management system must be loaded & signed in before using this method.
+   *
+   * The following steps will be taken:
+   * - Navigate to the channels station
+   * - Filter out for the particular channel by title
+   * - Open channel properties page
+   * - Click on [Playlists] button
+   * - Click on [New] button on the Playlists station
+   * - Populate Scheduled Start date and proceed in order to save newly created playlist
+   *
+   * @param args.channelTitle  The title of the channel
+   * @param args.scheduledStart  The start date/time of the playlist
+   */
+  async createPlaylist(args: {
+    channelTitle: string;
+    scheduledStart: string;
+  }): Promise<void> {
+    const { uiShell, uiManagedWorkflows } = this;
+
+    this.navigateToChannelProperties({
+      channelTitle: args.channelTitle,
+    });
+    await uiShell.waitForPageTransition(
+      uiManagedWorkflows.actions.getActionByLabel('Playlists').click(),
+    );
+
+    // create playlist
+    await uiShell.waitForPageTransition(
+      uiManagedWorkflows.pageHeader.actions.getActionByLabel('NEW').click(),
+    );
+    await uiManagedWorkflows.form
+      .getFieldByLabel('Scheduled Start')
+      .asDateTimeField()
+      .setValue(args.scheduledStart);
+    await uiShell.waitForPageTransition(
+      uiManagedWorkflows.actions.getActionByLabel('Proceed').click(),
+    );
+  }
+
+  /**
+   * This method publishes a playlist.
+   * The management system must be loaded & signed in before using this method.
+   *
+   * The following steps will be taken:
+   * - Navigate to the channels station
+   * - Filter out for the particular channel by title
+   * - Open channel properties page
+   * - Click on [Playlists] button
+   * - Click on first playlist found
+   * - Publish the playlist
+   *
+   * @param args.channelTitle  The title of the channel
+   */
+  async publishPlaylist(args: { channelTitle: string }): Promise<void> {
+    const { uiShell, uiManagedWorkflows } = this;
+
+    this.navigateToChannelProperties({
+      channelTitle: args.channelTitle,
+    });
+
+    // publish playlist
+    await uiShell.waitForPageTransition(
+      uiManagedWorkflows.actions.getActionByLabel('Playlists').click(),
+    );
+    await uiShell.waitForPageTransition(
+      uiManagedWorkflows.list.getRow(1).actionButton.click(),
+    );
+    await uiShell.waitForPageTransition(
+      uiManagedWorkflows.actions.getActionByLabel('Publishing').click(),
+    );
+    await uiManagedWorkflows.actions.getActionByLabel('Publish').click(),
+      await uiShell.waitForPageTransition(
+        uiManagedWorkflows.actions.confirmButton.click(),
+      );
+  }
+}

package/src/managed-services/image-service/image-selection-explorer.ts

@@ -0,0 +1,40 @@
+import { SelectionExplorer } from '@axinom/mosaic-e2e-ui-selectors';
+
+/** A mod*e*l for the mod*a*l image explorer component used to select images. */
+export class ImageSelectionExplorer extends SelectionExplorer {
+  /**
+   * Select an image by title.
+   * If the image explorer modal is not showing or the selected title does not exist then an exception will be raised.
+   *
+   * The following steps will be taken:
+   * - Verify that the page header title is 'Select Image'
+   * - Filter by title and verify that at least one result is shown
+   * - Select the first result by row action
+   * - Wait for the modal to be closed
+   */
+  async selectImageByTitle(imageTitle: string): Promise<void> {
+    // verify the modal header
+    await this.pageHeader.title.waitFor({ state: 'visible' });
+    if ((await this.pageHeader.title.textContent()) !== 'Select Image') {
+      throw new Error('Image explorer modal must be showing.');
+    }
+    await this.waitToOpen();
+    await this.list.waitForData();
+
+    await this.filters
+      .getFilterByName('title')
+      .asFreeTextFilter()
+      .setValue(imageTitle);
+    await this.list.waitForData();
+
+    // verify that one result is showing
+    if ((await this.list.allVisibleRows.count()) === 0) {
+      throw new Error('An image with the specified title was not found.');
+    }
+
+    await this.list.getRow(1).selectButton.click();
+
+    // wait for the modal to close
+    await this.waitToClose();
+  }
+}

package/src/managed-services/image-service/image-service.ts

@@ -0,0 +1,142 @@
+import { ActionLabel } from '@axinom/mosaic-e2e-ui-selectors';
+import { ManagedServiceModel } from '../managed-service-model';
+import { ImageSelectionExplorer } from './image-selection-explorer';
+
+/** A model for the managed image service. */
+export class ImageService extends ManagedServiceModel {
+  /**
+   * This method navigates to an image details station by title.
+   * The management system must be loaded & signed in before using this method.
+   * If there is not exactly one matching image an exception will be raised.
+   *
+   * The following steps will be taken:
+   * - Navigate to the home breadcrumb then the 'Images' tile
+   * - Filter by title and click the image row action
+   * - Wait for the image details station to load
+   */
+  async navigateToImageDetails(args: {
+    /** A unique image title. */
+    title: string;
+  }): Promise<void> {
+    const { uiShell, uiManagedWorkflows } = this;
+    await uiShell.navigateToLandingPageTile('Images');
+    await uiManagedWorkflows.list.waitForData();
+
+    // filter to the item
+    await uiManagedWorkflows.filters
+      .getFilterByName('title')
+      .asFreeTextFilter()
+      .setValue(args.title);
+    await uiManagedWorkflows.list.waitForData();
+
+    // Verify that there is exactly one matching row
+    if ((await uiManagedWorkflows.list.allVisibleRows.count()) !== 1) {
+      throw new Error(
+        `Failed to find exactly one non-archived image with title '${args.title}'.`,
+      );
+    }
+
+    // navigate
+    await uiShell.waitForPageTransition(
+      uiManagedWorkflows.list.getRow(1).actionButton.click(),
+    );
+    await uiManagedWorkflows.form.waitForData();
+  }
+
+  /**
+   * This method uploads an image file from the local file system.
+   * The management system must be loaded & signed in before using this method.
+   * A unique image title and a valid image type must be provided.
+   *
+   * The following steps will be taken:
+   * - Navigate to the home breadcrumb then the 'Images' tile
+   * - Click the 'Upload' action
+   * - Enter file and image type inputs then click 'Proceed'
+   * - Edit the image title
+   * - Click the 'refresh' breadcrumb and wait for the image details station to reload
+   */
+  async uploadImage(properties: {
+    /** Path to a local image file. */
+    sourceFile: string;
+    /** A unique image title. */
+    title: string;
+    /** An existing image type (display value). */
+    imageType: string;
+  }): Promise<void> {
+    const { uiShell, uiManagedWorkflows } = this;
+    await uiShell.navigateToLandingPageTile('Images');
+    await uiShell.waitForPageTransition(
+      uiManagedWorkflows.pageHeader.actions.getActionByLabel('Upload').click(),
+    );
+
+    // Setting image upload input
+    await uiManagedWorkflows.form
+      .getFieldByName('file')
+      .asFileUploadField()
+      .setValue(properties.sourceFile);
+
+    // Set image type.
+    await uiManagedWorkflows.form
+      .getFieldByName('imageType')
+      .asSelectField()
+      .setValueByLabel(properties.imageType);
+
+    // Submitting the upload
+    await uiShell.waitForPageTransition(
+      uiManagedWorkflows.actions.getActionByLabel(ActionLabel.Proceed).click(),
+    );
+    await uiManagedWorkflows.form.waitForData();
+
+    // Set image title.
+    await uiManagedWorkflows.form
+      .getFieldByName('title')
+      .asSingleLineTextField()
+      .setValue(properties.title);
+
+    // Refresh to save
+    await uiShell.navigateToBreadcrumbRefresh();
+    await uiManagedWorkflows.form.waitForData();
+  }
+
+  /**
+   * This method archives an image by title.
+   * The management system must be loaded & signed in before using this method.
+   * If a single matching, non-archived image is not found then an exception will be raised.
+   *
+   * The following steps will be taken:
+   * - Navigate to the home breadcrumb then the 'Images' tile
+   * - Filter by title and click the image row action
+   * - Click 'Archive' and confirm
+   * - Wait for the image explorer station to load
+   */
+  async archiveImage(args: {
+    /** A unique image title. */
+    title: string;
+  }): Promise<void> {
+    const { uiShell, uiManagedWorkflows } = this;
+    await this.navigateToImageDetails(args);
+    try {
+      await uiManagedWorkflows.actions
+        .getActionByLabel('Archive')
+        .waitFor({ state: 'visible' });
+    } catch {
+      throw new Error(`The image archive button is not visible.`);
+    }
+    await uiManagedWorkflows.actions.getActionByLabel('Archive').click();
+    await uiShell.waitForPageTransition(
+      uiManagedWorkflows.actions.confirmButton.click(),
+    );
+    await uiManagedWorkflows.list.waitForData();
+  }
+
+  /**
+   * A reference to the ImageSelectionExplorer component mod*e*l which can be used
+   * to select images in a mod*a*l. e.g.
+   * ```
+   * await app.ui.form.modal
+   *  .as(app.imageService.ImageSelectionExplorer)
+   *  .selectImage('My image title');
+   * ```
+   */
+  readonly ImageSelectionExplorer = ImageSelectionExplorer;
+}

package/src/managed-services/image-service/index.ts

@@ -0,0 +1,2 @@
+export * from './image-selection-explorer';
+export * from './image-service';

package/src/managed-services/index.ts

@@ -0,0 +1,4 @@
+export * from './channel-service';
+export * from './image-service';
+export * from './monetization-service';
+export * from './video-service';

package/src/managed-services/managed-service-model.ts

@@ -0,0 +1,31 @@
+import { UiWorkflowsModel } from '@axinom/mosaic-e2e-ui-selectors';
+import { Page } from 'playwright-core';
+import { UiShellModel } from '../ui-selectors/ui-shell-model';
+
+/**
+ * An abstract model representing a Mosaic managed service.
+ */
+export abstract class ManagedServiceModel {
+  constructor(
+    /** The playwright page object. */
+    protected readonly page: Page,
+
+    /**
+     * A model representing the Mosaic UI shell including methods for navigation.
+     *
+     * Use this model to interact with:
+     * - The breadcrumbs bar (on any page)
+     * - The landing page
+     * - The settings hub page
+     */
+    protected readonly uiShell: UiShellModel,
+
+    /**
+     * A model representing Mosaic UI workflows.
+     *
+     * Use this model to interact with workflows or mod*a*ls of any managed
+     * service (Image, Video, Monetization, etc).
+     */
+    protected readonly uiManagedWorkflows: UiWorkflowsModel,
+  ) {}
+}

package/src/managed-services/monetization-service/claim-set-control.ts

@@ -0,0 +1,84 @@
+import {
+  Accordion,
+  AccordionItem,
+  ComponentModel,
+  DynamicDataList,
+  Modal,
+} from '@axinom/mosaic-e2e-ui-selectors';
+import { FrameLocator, Locator, Page } from 'playwright-core';
+
+/**
+ * A model for the a claim row in the claims editor station. This model should not be used directly.
+ * It is used internally by methods of the `MonetizationService` model.
+ */
+export class ClaimRow extends ComponentModel {
+  /** Get a locator to the appropriate input element to select this claim. */
+  async getInput(): Promise<Locator> {
+    const radioLabel = this.getLocator('//label', -1);
+    const checkBox = this.getLocator('//input', -1);
+    return (await radioLabel.isVisible()) ? radioLabel : checkBox;
+  }
+
+  /** This method toggles the claim selection. */
+  async toggle(): Promise<void> {
+    const input = await this.getInput();
+    await input.check();
+  }
+}
+
+/**
+ * A model for the a claim group in the claims editor station. This model should not be used directly.
+ * It is used internally by methods of the `MonetizationService` model.
+ */
+export class ClaimGroup extends AccordionItem {
+  /** A model for the dynamic data list used to for claim multiple select. */
+  readonly dataList = new DynamicDataList(this);
+
+  /** A model for the modal opened by the dynamic data list. */
+  readonly explorerModal = new Modal(this).asSelectionExplorer();
+
+  /**
+   * This method will determine whether the claim group uses modal input.
+   * If this returns true, then claims should be selected with the `dataList` and `explorerModal` properties.
+   * If it returns false then the `getClaimRowByLabel` method should be used.
+   */
+  async isDataListEntry(): Promise<boolean> {
+    return this.dataList.getLocator().isVisible();
+  }
+
+  /** This method gets a claim row by label. */
+  getClaimRowByLabel(claimLabel: string): ClaimRow {
+    return new ClaimRow(
+      this,
+      `//*[contains(@data-test-id, "claim:") and .//*[@data-test-id="claim-label" and text()="${claimLabel}"]]`,
+    );
+  }
+}
+
+/**
+ * A model for the claims editor station. This model should not be used directly.
+ * It is used internally by methods of the `MonetizationService` model.
+ */
+export class ClaimsEditor extends ComponentModel {
+  /**
+   * A model for an accordion component.
+   * @param parent  The parent playwright page, frame or component model.
+   * @param xpath  A relative xpath selector to this element from the parent.
+   */
+  constructor(parent: Page | FrameLocator | ComponentModel, xpath = '//form') {
+    super(parent, xpath);
+  }
+
+  private accordion = new Accordion(this.root, this.xpath);
+
+  /** This method gets a claim row by claim value. */
+  getClaimRow(claim: string): ClaimRow {
+    return new ClaimRow(this.accordion, `//*[@data-test-id="claim:${claim}"]`);
+  }
+
+  /** This method gets a claim group by label. */
+  getClaimGroup(claimGroupLabel: string): ClaimGroup {
+    const accordionItem = this.accordion.getItemContainingText(claimGroupLabel);
+    return new ClaimGroup(this.root, accordionItem.xpath);
+  }
+}

package/src/managed-services/monetization-service/index.ts

@@ -0,0 +1,3 @@
+export * from './monetization-service';
+export * from './payment-plan-recurrence-period-field';
+export * from './payment-provider-settings-field';