Merge pull request #771 from Lemoncode/feature/#607-multiple-selection-no-common-props

Feature/#607 multiple selection no common props

Author: brauliodiez

e2e/helpers/properties.helpers.ts

@@ -19,3 +19,13 @@ export const checkPropertiesExist = async (
     await expect(propLocator).toBeVisible();
   }
 };
+
+export const checkPropertiesDoNotExist = async (
+  page: Page,
+  properties: string[]
+) => {
+  for (const property of properties) {
+    const propLocator = page.getByText(property, { exact: true });
+    await expect(propLocator).not.toBeVisible();
+  }
+};

e2e/props/multi-select-no-common-props.spec.ts

@@ -0,0 +1,45 @@
+import { test, expect } from '@playwright/test';
+import {
+  addComponentsWithDifferentCategoriesToCanvas,
+  checkPropertiesDoNotExist,
+  checkPropertiesExist,
+  ComponentWithCategory,
+  getTransformer,
+  selectAllComponentsInCanvas,
+} from '../helpers';
+
+test('when selecting button and bar chart, check that there are not common props (just default layering prop)', async ({
+  page,
+}) => {
+  page.goto('');
+
+  // Add components to canvas
+  const components: ComponentWithCategory[] = [
+    { name: 'Button' },
+    { name: 'Bar Chart', category: 'Rich Components' },
+  ];
+  await addComponentsWithDifferentCategoriesToCanvas(page, components);
+
+  // Select all components in canvas
+  await selectAllComponentsInCanvas(page);
+
+  // Confirm both items are selected
+  const selectedItems = await getTransformer(page);
+  expect(selectedItems._nodes.length).toEqual(2);
+
+  const buttonProps: string[] = [
+    'Stroke',
+    'Stroke style',
+    'Background',
+    'TextColor',
+    'Disabled',
+    'Border-radius',
+  ];
+
+  // Verify button props are not visible in the properties panel
+  await checkPropertiesDoNotExist(page, buttonProps);
+
+  // Verify layering prop to be visible
+
+  await checkPropertiesExist(page, ['Layering']);
+});