diff --git a/e2e/helpers/properties.helpers.ts b/e2e/helpers/properties.helpers.ts index 4c750d6b..bc7225db 100644 --- a/e2e/helpers/properties.helpers.ts +++ b/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(); + } +}; diff --git a/e2e/props/multi-select-no-common-props.spec.ts b/e2e/props/multi-select-no-common-props.spec.ts new file mode 100644 index 00000000..b87697da --- /dev/null +++ b/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']); +});