Merge pull request #772 from Lemoncode/feature/#546-thumbpage-duplicate-page-clicking-on-arrow-icon

feature/#546-thumbpage-duplicate-page-clicking-on-arrow-icon

Author: brauliodiez

e2e/thumb-pages/duplicate-thumb-page-from-arrow-icon.spec.ts

@@ -0,0 +1,59 @@
+import { test, expect } from '@playwright/test';
+import {
+  addComponentsToCanvas,
+  getByShapeType,
+  getByShapeTypeInThumb,
+} from '../helpers';
+import { Group } from 'konva/lib/Group';
+
+test('should duplicate thumbpage when triggered via the arrow icon', async ({
+  page,
+}) => {
+  await page.goto('');
+
+  // Add components to canvas
+  await addComponentsToCanvas(page, ['Button', 'Combobox']);
+
+  await page.getByText('Pages').click();
+
+  // Find thumb page
+  const siblingElement = page.getByText('Page 1', { exact: true });
+  const thumb = siblingElement.locator('..');
+
+  // Select arrow svg inside the thumb container
+  const svgElement = thumb.locator('span > svg');
+  await svgElement.click();
+
+  // Verify duplicate button exists in the context menu
+  const duplicateButton = page
+    .locator('div')
+    .filter({ hasText: /^Duplicate$/ });
+
+  await expect(duplicateButton).toBeVisible();
+
+  // Duplicate thumbpage
+  await duplicateButton.click();
+
+  // Verify Page 1 - copy exists and its selected
+  const pageTwo = page
+    .getByText('Page 1 - copy', { exact: true })
+    .locator('..');
+  await expect(pageTwo).toBeVisible();
+
+  // Additional click to force the duplicate thumbnail to finish rendering.
+  await pageTwo.click();
+  // Without this click, the React/Konva pipeline does not always update on time and the
+  // assertions fail intermittently.
+
+  // Verify components exist in copy thumb
+  const buttonInCopyThumb = await getByShapeTypeInThumb(page, 1, 'button');
+  const comboboxInCopyThumb = await getByShapeTypeInThumb(page, 1, 'combobox');
+  expect(buttonInCopyThumb).toBeDefined();
+  expect(comboboxInCopyThumb).toBeDefined();
+
+  // Verify components exist in copy canvas
+  const buttonShape = (await getByShapeType(page, 'button')) as Group;
+  const comboboxShape = (await getByShapeType(page, 'combobox')) as Group;
+  expect(buttonShape).toBeDefined();
+  expect(comboboxShape).toBeDefined();
+});