|
| 1 | +import { expect, test } from '../../fixtures.js'; |
| 2 | +import { UniversalEditorBase } from '../../main/page/universalEditorBasePage.js'; |
| 3 | +import * as componentPathInUE from '@testing-library/dom'; |
| 4 | + |
| 5 | +const universalEditorBase = new UniversalEditorBase(); |
| 6 | +const { selectors } = universalEditorBase; |
| 7 | + |
| 8 | +// Component configuration |
| 9 | +const component = 'emailinput'; |
| 10 | +const fieldPath = 'content/root/section/form'; |
| 11 | +const componentName1 = 'Email'; |
| 12 | +const componentName2 = 'Password'; |
| 13 | +const partialUrl1 = 'resource/scripts/dompurify.min.js'; |
| 14 | +const partialUrl2 = 'resource/blocks/form/components/password/password-hide-icon.png'; |
| 15 | +const waringMessage = 'Warning: Converting to a dissimilar type may cause existing functionality to break.'; |
| 16 | + |
| 17 | +const testURL = |
| 18 | + 'https://author-p133911-e1313554.adobeaemcloud.com/ui#/@formsinternal01/aem/universal-editor/canvas/author-p133911-e1313554.adobeaemcloud.com/content/forms/af/forms-x-walk-collateral/formsreplace.html'; |
| 19 | + |
| 20 | +test.describe('Forms Replace Component', () => { |
| 21 | + |
| 22 | + test('Verify component replacement functionality in Forms Replace @chromium-only', async ({ page }) => { |
| 23 | + test.setTimeout(60000); |
| 24 | + await page.goto(testURL, { waitUntil: 'load' }); |
| 25 | + const frame = page.frameLocator(selectors.iFrame); |
| 26 | + const iframeEditor = frame.frameLocator(selectors.iFrameEditor); |
| 27 | + const componentPathInUE = iframeEditor.locator(`${selectors.componentPath}${component}"]`); |
| 28 | + await expect(frame.locator(selectors.propertyPagePath)).toBeVisible(); |
| 29 | + |
| 30 | + await universalEditorBase.expandContentTreeField(page, frame, 'content/root/section'); |
| 31 | + try { |
| 32 | + await expect(frame.locator(`li[data-resource$="${fieldPath}"][class*="treenode"] button`)).toBeVisible({timeout: 6000}); |
| 33 | + } catch (e) { |
| 34 | + await page.reload(); |
| 35 | + await componentPathInUE.waitFor({ state: 'visible', timeout: 20000 }); |
| 36 | + } |
| 37 | + await universalEditorBase.expandContentTreeField(page, frame, fieldPath); |
| 38 | + const componentPathInContentTree = frame.locator(`li[data-resource$="${fieldPath}/${component}"][class*="treenode"]`).first(); |
| 39 | + await frame.locator(universalEditorBase.selectors.adaptiveFormInContentTree).locator('span').click(); |
| 40 | + await expect(frame.locator(universalEditorBase.selectors.adaptiveFormInContentTree).locator('..')).toHaveAttribute('aria-selected', 'true'); |
| 41 | + await expect(componentPathInContentTree).toBeVisible(); |
| 42 | + await componentPathInContentTree.scrollIntoViewIfNeeded(); |
| 43 | + await componentPathInContentTree.click({ force: true }); |
| 44 | + const formReplaceButton = frame.locator(selectors.formReplace); |
| 45 | + await expect(formReplaceButton).toBeVisible({ timeout: 8000 }); |
| 46 | + await formReplaceButton.click(); |
| 47 | + const replaceIframe = frame.frameLocator(universalEditorBase.selectors.replaceFrameLocator); |
| 48 | + await expect(replaceIframe.locator('div[id="forms-replace"] div span:has-text("Selected Component")').first()).toBeVisible({ timeout: 6000 }); |
| 49 | + const locator = replaceIframe.locator('div[id="forms-replace"] div span:has-text("Type:") + span'); |
| 50 | + await expect(locator).toBeVisible({ timeout: 6000 }); |
| 51 | + await expect(locator).not.toHaveText(/loading/i, { timeout: 6000 }); |
| 52 | + const componentType = (await locator.textContent())?.trim(); |
| 53 | + const replaceContext = { page, frame, replaceIframe }; |
| 54 | + if (componentType === componentName1) { |
| 55 | + await replaceFormComponent(replaceContext, componentName2, partialUrl2); |
| 56 | + |
| 57 | + } else if (componentType === componentName2) { |
| 58 | + await replaceFormComponent(replaceContext, componentName1, partialUrl1); |
| 59 | + |
| 60 | + } else { |
| 61 | + throw new Error('Neither Email nor Password component was visible.'); |
| 62 | + } |
| 63 | + }); |
| 64 | +}); |
| 65 | + |
| 66 | +async function waitForAndValidateResponse(page, partialUrl) { |
| 67 | + const response = await page.waitForResponse(resp => |
| 68 | + resp.url().includes(partialUrl) && resp.status() === 200 |
| 69 | + ); |
| 70 | + expect(response.url()).toContain(partialUrl); |
| 71 | + expect(response.status()).toBe(200); |
| 72 | + expect(response.ok()).toBe(true); |
| 73 | +} |
| 74 | + |
| 75 | +async function replaceFormComponent(replaceContext, componentName, partialUrl) { |
| 76 | + const { page, frame, replaceIframe } = replaceContext; |
| 77 | + await replaceIframe.locator(selectors.replaceTextLocator + '+ button').click(); |
| 78 | + await replaceIframe.locator(selectors.replaceTextLocator).type(componentName, { delay: 100 }); |
| 79 | + const componentLocator = replaceIframe.getByText(componentName).last(); |
| 80 | + await expect(componentLocator).toBeVisible(); |
| 81 | + await componentLocator.waitFor({ state: 'visible' }); |
| 82 | + await replaceIframe.getByText(componentName).last().click(); |
| 83 | + await expect(replaceIframe.getByText(waringMessage)).toBeVisible(); |
| 84 | + const replaceButton = replaceIframe.getByText('Replace').last(); |
| 85 | + await replaceButton.page().waitForTimeout(300); |
| 86 | + await replaceButton.scrollIntoViewIfNeeded(); |
| 87 | + await expect(replaceButton).toBeEnabled(); |
| 88 | + await replaceButton.click(); |
| 89 | + await waitForAndValidateResponse(page, partialUrl); |
| 90 | + const formReplaceButton = frame.locator(selectors.formReplace); |
| 91 | + await expect(formReplaceButton).toBeVisible(); |
| 92 | + await formReplaceButton.click(); |
| 93 | + await expect( |
| 94 | + replaceIframe |
| 95 | + .locator(`div[id="forms-replace"] div span:text-is("${componentName}")`) |
| 96 | + .first() |
| 97 | + ).toBeVisible({timeout: 8000}); |
| 98 | +} |
0 commit comments