Merge pull request #109 from penpot/dherrero/feature/plugin-tests

feat(plugins):  add new tests for the Penpot plugins

pages/workspace/plugins-page.js

@@ -0,0 +1,86 @@
+const { MainPage } = require('../workspace/main-page');
+const { expect } = require('@playwright/test');
+
+const LOREM_IPSUM_PLUGIN_URL =  'https://lorem-ipsum-penpot-plugin.pages.dev/assets/manifest.json';
+
+exports.PluginsPage = class PluginsPage extends MainPage {
+  /**
+   * @param {import('@playwright/test').Page} page
+   */
+  constructor(page) {
+    super(page);
+
+    // Main Toolbar
+    this.pluginsButton = page.getByRole('button', { name: /plugins/i });
+    // Main Menu - first level
+    this.pluginsMainMenuItem = page.getByRole('menuitem').getByText('Plugins');
+    // Main Menu - second level
+    this.pluginsManagerButton = page.getByRole('menuitem').getByText('Plugins Manager');;
+    this.loremIpsumPluginButton = page.getByRole('menuitem').getByText('Lorem ipsum');;
+
+    // Plugin Manager panel
+    this.pluginPanel = page.locator('div[class$="workspace_plugins__plugin-management"]');
+    this.closePluginPanelButton = page.locator('button[class$="plugins__close-btn"]');
+    this.urlPluginPanelInput = page.getByRole('textbox').and(page.getByPlaceholder('Write a plugin URL'));
+    this.installPluginPanelButton = page.getByRole('button', { name: 'Install' }).first()
+    this.deletePluginPanelButton = page.locator('button[class$="plugins__trash-button"]').first();
+    this.allowPluginPanelButton = page.getByRole('button', { name: 'Allow' })
+    this.openPluginPanelButton = page.locator('button', {name: 'Open'});
+    this.installedPluginPanelListElements = page.locator('div[class$="workspace_plugins__plugins-list-element"]')
+
+    // Lorem Ipsum panel
+    this.loremPluginPanel = page.getByTitle('LOREM IPSUM PLUGIN').locator('div').first()
+    this.loremIpsumPluginGenerateButton  = page.frameLocator('[src*="https://lorem-ipsum-penpot-plugin.pages.dev"]').getByRole('button', { name: /Generate/i});;
+  }
+
+  // POM Methods
+  async clickPluginsButton() {
+    await this.pluginsButton.click();
+  }
+
+  async clickPluginsMainMenuItem() {
+    await this.pluginsMainMenuItem.click();
+  }
+
+  async clickPluginsManagerButton() {
+    await this.pluginsManagerButton.click();
+  }
+
+  async clickLoremIpsumButton() {
+    await this.loremIpsumPluginButton.click();
+  }
+
+  async setPluginUrl(url) {
+    await this.urlPluginPanelInput.clear();
+    await this.urlPluginPanelInput.fill(url);
+  }
+
+  async clickOnInstallPluginButton() {
+    await this.installPluginPanelButton.click();    
+  }
+
+  async clickOnDeletePluginButton() {
+    await this.deletePluginPanelButton.click();    
+  }
+
+  async clickOnAllowPluginButton() {
+    await this.allowPluginPanelButton.click();    
+  }
+
+  async clickClosePluginPanelButton() {
+    await this.closePluginPanelButton.click();
+    await expect(this.pluginPanel).not.toBeVisible();
+  }
+
+  async checkInstalledPluginsCountIs(count) {
+    expect(await this.installedPluginPanelListElements.count()).toBe(count);
+  }
+
+  async setPluginLoremIpsumUrl() {
+    await this.setPluginUrl(LOREM_IPSUM_PLUGIN_URL);
+  }
+
+  async checkLoremIpsumPluginIsVisible() {
+    await (expect(this.loremIpsumPluginGenerateButton).toBeVisible());
+  }
+};

tests/plugins/plugins.spec.js

@@ -0,0 +1,73 @@
+const { mainTest } = require('../../fixtures');
+const { expect, test } = require('@playwright/test');
+const { random } = require('../../helpers/string-generator');
+const { TeamPage } = require('../../pages/dashboard/team-page');
+const { DashboardPage } = require('../../pages/dashboard/dashboard-page');
+const { PluginsPage } = require('../../pages/workspace/plugins-page');
+const { qase } = require('playwright-qase-reporter/dist/playwright');
+const { updateTestResults } = require('../../helpers/saveTestResults');
+
+
+const teamName = random().concat('autotest');
+
+test.beforeEach(async ({ page }) => {
+  const teamPage = new TeamPage(page);
+  const dashboardPage = new DashboardPage(page);
+  const pluginsPage = new PluginsPage(page);
+  await teamPage.createTeam(teamName);
+  await teamPage.isTeamSelected(teamName);
+  await dashboardPage.createFileViaPlaceholder();
+  await pluginsPage.isMainPageLoaded();
+});
+
+test.afterEach(async ({ page }, testInfo) => {
+  const teamPage = new TeamPage(page);
+  const pluginsPage  = new PluginsPage(page);
+  await pluginsPage.backToDashboardFromFileEditor();
+  await teamPage.deleteTeam(teamName);
+  await updateTestResults(testInfo.status, testInfo.retry)
+});
+
+mainTest.slow();
+
+mainTest(qase([1837,1838,1839,1842,1844], 'Install, open and delete a plugin'), async ({ page }) => {
+  const pluginsPage = new PluginsPage(page);
+
+  // 1837, Install a plugin by URL (via plugin icon in toolbar)
+  await pluginsPage.clickPluginsButton();
+  await expect(pluginsPage.pluginPanel).toBeVisible();
+
+  await pluginsPage.setPluginLoremIpsumUrl();
+  await pluginsPage.clickOnInstallPluginButton();
+  await pluginsPage.clickOnAllowPluginButton();
+  await pluginsPage.checkInstalledPluginsCountIs(1);
+  await expect(pluginsPage.pluginPanel).toHaveScreenshot(
+    'plugin-manager-plugin-installed.png'
+  );
+
+  // 1838, Close the "Plugins Manager" modal
+    await pluginsPage.clickOnESC();
+
+  // 1844, Open a plugin (via Main menu 3 dots > Plugins > plugin name)
+  await pluginsPage.clickMainMenuButton();
+  await pluginsPage.clickPluginsMainMenuItem();
+  await pluginsPage.clickLoremIpsumButton();
+  await pluginsPage.checkLoremIpsumPluginIsVisible();
+  await expect(pluginsPage.loremPluginPanel).toHaveScreenshot(
+    'lorem-ipsum-plugin-panel.png'
+  );
+
+  // 1839, Delete a plugin from the "Plugins Manager" modal (via delete icon button)
+  await pluginsPage.clickMainMenuButton();
+  await pluginsPage.clickPluginsMainMenuItem();
+  await pluginsPage.clickPluginsManagerButton();
+  await pluginsPage.clickOnDeletePluginButton();
+  await pluginsPage.checkInstalledPluginsCountIs(0);
+  await expect(pluginsPage.pluginPanel).toHaveScreenshot(
+    'plugin-manager-no-plugins-installed.png'
+  );
+
+  // 1842, Close the plugin modal (via "X" icon)
+  await pluginsPage.clickClosePluginPanelButton();
+
+});