Add tests for assets (Graphics)

pages/main-page.js

@@ -293,6 +293,9 @@ exports.MainPage = class MainPage {
     this.downloadFileTickIcon = page.locator('svg[class="icon-tick"]');
     this.downloadFileCloseButton = page.locator('input[value="Close"]');
     this.assetsTab = page.locator('div[data-id=":assets"]');
+    this.assetsPanel = page.locator('div[class="assets-bar"]');
+    this.layersTab = page.locator('div[data-id=":layers"]');
+    this.layersPanel = page.locator('div[class="layers-tab"]');
     this.addAsSharedLibraryButton = page.locator(
       'input[value="Add as Shared Library"]'
     );
@@ -383,6 +386,35 @@ exports.MainPage = class MainPage {
     this.exportElementButton = page.locator(
       'div[class="btn-icon-dark download-button "]'
     );
+    this.assetsTitleText = page.locator('div[class^="asset-title"]');
+    this.assetsTypeSelector = page.locator('div[class="assets-bar"] select');
+    this.fileLibraryGraphicsUploadImageSelector = page.locator(
+      'div[class="libraries-wrapper"] input[accept="image/gif,image/png,image/svg+xml,image/webp,image/jpeg"]'
+    );
+    this.fileLibraryGraphicsUploadedImageLabel = page.locator(
+      'div[class="grid-cell"]'
+    );
+    this.renameFileLibraryGraphicsMenuItem = page.locator(
+      'li:has-text("Rename")'
+    );
+    this.deleteFileLibraryGraphicsMenuItem = page.locator(
+      'li:has-text("Delete")'
+    );
+    this.createGroupFileLibraryGraphicsMenuItem = page.locator(
+      'li:has-text("Group")'
+    );
+    this.renameGroupFileLibraryMenuItem = page.locator('li:has-text("Rename")');
+    this.ungroupFileLibraryMenuItem = page.locator('li:has-text("Ungroup")');
+    this.fileLibraryGraphicsUploadedImageNameInput = page.locator(
+      'div[class="grid-cell"] input'
+    );
+    this.groupNameInput = page.locator("#asset-name");
+    this.createGroupButton = page.locator('input[value="Create"]');
+    this.renameGroupButton = page.locator('input[value="Rename"]');
+    this.fileLibraryGroupTitle = page.locator('div[class="group-title "]');
+    this.fileLibraryChangeViewButton = page.locator(
+      'div[class="listing-option-btn"] svg'
+    );
   }
 
   async clickMoveButton() {
@@ -1011,6 +1043,26 @@ exports.MainPage = class MainPage {
     await this.assetsTab.click();
   }
 
+  async switchToAssetsPanelViaShortcut() {
+    await this.page.keyboard.press("Alt+I");
+  }
+
+  async isAssetsPanelDisplayed() {
+    await expect(this.assetsPanel).toBeVisible();
+  }
+
+  async clickLayersTab() {
+    await this.layersTab.click();
+  }
+
+  async switchToLayersPanelViaShortcut() {
+    await this.page.keyboard.press("Alt+L");
+  }
+
+  async isLayersPanelDisplayed() {
+    await expect(this.layersPanel).toBeVisible();
+  }
+
   async clickAddAsSharedLibraryButton() {
     await this.addAsSharedLibraryButton.click();
   }
@@ -1186,4 +1238,77 @@ exports.MainPage = class MainPage {
   async isExportElementButtonNotDisplayed() {
     await expect(this.exportElementButton).not.toBeVisible();
   }
+
+  async selectTypeFromAllAssetsSelector(type) {
+    switch (type) {
+      case "All assets":
+        await this.assetsTypeSelector.selectOption(":all");
+        break;
+      case "Components":
+        await this.assetsTypeSelector.selectOption(":components");
+        break;
+      case "Graphics":
+        await this.assetsTypeSelector.selectOption(":graphics");
+        break;
+      case "Colors":
+        await this.assetsTypeSelector.selectOption(":colors");
+        break;
+      case "Typographies":
+        await this.assetsTypeSelector.selectOption(":typographies");
+        break;
+    }
+  }
+
+  async isAssetsTitleDisplayed(title) {
+    await expect(this.assetsTitleText).toHaveText(title);
+  }
+
+  async uploadImageToFileLibraryGraphics(filePath) {
+    await this.fileLibraryGraphicsUploadImageSelector.setInputFiles(filePath);
+  }
+
+  async isImageUploadedToFileLibraryGraphics() {
+    await expect(this.fileLibraryGraphicsUploadedImageLabel).toBeVisible();
+  }
+
+  async isImageNotUploadedToFileLibraryGraphics() {
+    await expect(this.fileLibraryGraphicsUploadedImageLabel).not.toBeVisible();
+  }
+
+  async deleteFileLibraryGraphics() {
+    await this.fileLibraryGraphicsUploadedImageLabel.click({ button: "right" });
+    await this.deleteFileLibraryGraphicsMenuItem.click();
+  }
+
+  async createGroupFileLibraryGraphics(newGroupName) {
+    await this.fileLibraryGraphicsUploadedImageLabel.click({ button: "right" });
+    await this.createGroupFileLibraryGraphicsMenuItem.click();
+    await this.groupNameInput.fill(newGroupName);
+    await this.createGroupButton.click();
+  }
+
+  async isFileLibraryGroupCreated(groupName) {
+    await expect(this.fileLibraryGroupTitle).toHaveText(groupName);
+  }
+
+  async isFileLibraryGroupRemoved() {
+    await expect(this.fileLibraryGroupTitle).not.toBeVisible();
+  }
+
+  async renameGroupFileLibrary(newGroupName) {
+    await this.fileLibraryGroupTitle.click({ button: "right" });
+    await this.renameGroupFileLibraryMenuItem.click();
+    await this.clearInput(this.groupNameInput);
+    await this.groupNameInput.fill(newGroupName);
+    await this.renameGroupButton.click();
+  }
+
+  async ungroupFileLibrary() {
+    await this.fileLibraryGroupTitle.click({ button: "right" });
+    await this.ungroupFileLibraryMenuItem.click();
+  }
+
+  async clickFileLibraryChangeViewButton() {
+    await this.fileLibraryChangeViewButton.click();
+  }
 };

tests/assets-graphics.spec.js

@@ -0,0 +1,134 @@
+const { mainTest } = require("../fixtures");
+const { MainPage } = require("../pages/main-page");
+const { expect } = require("@playwright/test");
+
+mainTest(
+  "AS-1 Switch from Layers to Assets (via clicking tab and ALT+I / ALT+L shortcuts)",
+  async ({ page }) => {
+    const mainPage = new MainPage(page);
+    await mainPage.clickAssetsTab();
+    await mainPage.isAssetsPanelDisplayed();
+    await mainPage.clickLayersTab();
+    await mainPage.isLayersPanelDisplayed();
+    await mainPage.switchToAssetsPanelViaShortcut();
+    await mainPage.isAssetsPanelDisplayed();
+    await mainPage.switchToLayersPanelViaShortcut();
+    await mainPage.isLayersPanelDisplayed();
+  }
+);
+
+mainTest("AS-2 Filter Graphics from All Assets drop-down", async ({ page }) => {
+  const mainPage = new MainPage(page);
+  await mainPage.clickAssetsTab();
+  await mainPage.selectTypeFromAllAssetsSelector("Graphics");
+  await mainPage.isAssetsTitleDisplayed("Graphics (0)");
+});
+
+mainTest("AS-3 File library graphics - add (.png)", async ({ page }) => {
+  const mainPage = new MainPage(page);
+  await mainPage.clickAssetsTab();
+  await mainPage.uploadImageToFileLibraryGraphics("images/images.png");
+  await mainPage.waitForChangeIsSaved();
+  await mainPage.isImageUploadedToFileLibraryGraphics();
+  await expect(mainPage.assetsPanel).toHaveScreenshot("graphics-png.png");
+});
+
+mainTest("AS-4 File library graphics - add (.jpg)", async ({ page }) => {
+  const mainPage = new MainPage(page);
+  await mainPage.clickAssetsTab();
+  await mainPage.uploadImageToFileLibraryGraphics("images/sample.jpeg");
+  await mainPage.waitForChangeIsSaved();
+  await mainPage.isImageUploadedToFileLibraryGraphics();
+  await expect(mainPage.assetsPanel).toHaveScreenshot("graphics-jpg.png");
+});
+
+mainTest("AS-5 File library graphics - add (.svg)", async ({ page }) => {
+  const mainPage = new MainPage(page);
+  await mainPage.clickAssetsTab();
+  await mainPage.uploadImageToFileLibraryGraphics(
+    "images/potato-snack-food-svgrepo-com.svg"
+  );
+  await mainPage.waitForChangeIsSaved();
+  await mainPage.isImageUploadedToFileLibraryGraphics();
+  await expect(mainPage.assetsPanel).toHaveScreenshot("graphics-svg.png");
+});
+
+mainTest("AS-11 File library graphics - delete", async ({ page }) => {
+  const mainPage = new MainPage(page);
+  await mainPage.clickAssetsTab();
+  await mainPage.uploadImageToFileLibraryGraphics("images/images.png");
+  await mainPage.waitForChangeIsSaved();
+  await mainPage.deleteFileLibraryGraphics();
+  await mainPage.waitForChangeIsSaved();
+  await mainPage.isImageNotUploadedToFileLibraryGraphics();
+  await mainPage.selectTypeFromAllAssetsSelector("Graphics");
+  await mainPage.isAssetsTitleDisplayed("Graphics (0)");
+});
+
+mainTest("AS-12 File library graphics - create group", async ({ page }) => {
+  const mainPage = new MainPage(page);
+  await mainPage.clickAssetsTab();
+  await mainPage.uploadImageToFileLibraryGraphics("images/images.png");
+  await mainPage.waitForChangeIsSaved();
+  await mainPage.createGroupFileLibraryGraphics("Test Group");
+  await mainPage.waitForChangeIsSaved();
+  await mainPage.isFileLibraryGroupCreated("Test Group");
+  await expect(mainPage.assetsPanel).toHaveScreenshot("group-graphics.png");
+});
+
+mainTest("AS-14 File library graphics - rename group", async ({ page }) => {
+  const mainPage = new MainPage(page);
+  await mainPage.clickAssetsTab();
+  await mainPage.uploadImageToFileLibraryGraphics("images/images.png");
+  await mainPage.waitForChangeIsSaved();
+  await mainPage.createGroupFileLibraryGraphics("Test Group");
+  await mainPage.waitForChangeIsSaved();
+  await mainPage.renameGroupFileLibrary("New Group");
+  await mainPage.waitForChangeIsSaved();
+  await mainPage.isFileLibraryGroupCreated("New Group");
+  await expect(mainPage.assetsPanel).toHaveScreenshot(
+    "group-graphics-renamed.png"
+  );
+});
+
+mainTest("AS-17 File library graphics - ungroup", async ({ page }) => {
+  const mainPage = new MainPage(page);
+  await mainPage.clickAssetsTab();
+  await mainPage.uploadImageToFileLibraryGraphics("images/images.png");
+  await mainPage.waitForChangeIsSaved();
+  await mainPage.createGroupFileLibraryGraphics("Test Group");
+  await mainPage.waitForChangeIsSaved();
+  await mainPage.ungroupFileLibrary();
+  await mainPage.waitForChangeIsSaved();
+  await mainPage.isFileLibraryGroupRemoved();
+  await expect(mainPage.assetsPanel).toHaveScreenshot("graphics-png.png");
+});
+
+mainTest(
+  "AS-19 File library graphics - change view (list / tile)",
+  async ({ page }) => {
+    const mainPage = new MainPage(page);
+    await mainPage.clickAssetsTab();
+    await mainPage.uploadImageToFileLibraryGraphics("images/images.png");
+    await mainPage.waitForChangeIsSaved();
+    await mainPage.uploadImageToFileLibraryGraphics("images/sample.jpeg");
+    await mainPage.waitForChangeIsSaved();
+    await mainPage.uploadImageToFileLibraryGraphics(
+      "images/potato-snack-food-svgrepo-com.svg"
+    );
+    await mainPage.waitForChangeIsSaved();
+    await expect(mainPage.assetsPanel).toHaveScreenshot(
+      "graphics-tile-view.png"
+    );
+    await mainPage.clickFileLibraryChangeViewButton();
+    await mainPage.waitForChangeIsSaved();
+    await expect(mainPage.assetsPanel).toHaveScreenshot(
+      "graphics-list-view.png"
+    );
+    await mainPage.clickFileLibraryChangeViewButton();
+    await mainPage.waitForChangeIsSaved();
+    await expect(mainPage.assetsPanel).toHaveScreenshot(
+      "graphics-tile-view.png"
+    );
+  }
+);