From e1cfe2bfc00541bcf843ac1bbfda37a9006bc92a Mon Sep 17 00:00:00 2001 From: Alex Tkachev Date: Wed, 1 May 2024 22:38:25 +0400 Subject: [PATCH] chore(SLB-272): extend styling webform with terms-of-service components --- .../drupal/test_content/webforms/styling.yml | 17 +++++++++ .../PageContent/BlockForm.stories.tsx | 14 ++++++++ tests/e2e/tsconfig.json | 2 +- tests/e2e/webform-snapshots/webforms.spec.ts | 36 +++++++++++++++++++ 4 files changed, 68 insertions(+), 1 deletion(-) diff --git a/packages/drupal/test_content/webforms/styling.yml b/packages/drupal/test_content/webforms/styling.yml index 7cfdd2291..8b6848977 100644 --- a/packages/drupal/test_content/webforms/styling.yml +++ b/packages/drupal/test_content/webforms/styling.yml @@ -30,6 +30,7 @@ elements: |- '#title': Textfield '#description': 'Textfield description.' '#placeholder': 'Placeholder goes here' + '#required': true email_with_a_conformation: '#type': webform_email_confirm '#title': 'Email with a confirmation' @@ -56,6 +57,22 @@ elements: |- Foo: Foo Bar: Bar Baz: Baz + terms_of_service: + '#type': webform_terms_of_service + '#title': 'I agree to the {terms of service} in modal' + '#required': true + '#terms_content': |- + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a felis convallis, pharetra mauris a, eleifend justo. Sed massa ipsum, suscipit sit amet varius a, dignissim at ex. Integer euismod a sapien id auctor. Etiam dignissim scelerisque nunc in porttitor. Nam rutrum molestie mauris, a bibendum ligula. Etiam eget posuere enim. Quisque id condimentum ligula. + + Duis sit amet sapien justo. Suspendisse potenti. Aliquam venenatis congue quam, quis eleifend tellus. Duis aliquam sollicitudin purus sed rutrum. Nullam vitae ante lorem. Curabitur malesuada nibh lectus, ut ultricies elit mattis sed. Ut pharetra urna nec lacus pellentesque vestibulum. Nulla turpis sem, aliquam finibus pharetra at, interdum sit amet ligula. In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce ullamcorper justo in risus condimentum suscipit. Nam in nunc sit amet neque fringilla suscipit. Sed nec metus tempus, rhoncus dolor et, vehicula urna. Donec ultricies leo pharetra ante vulputate vulputate. Nullam tincidunt pharetra nisi eu faucibus. Duis efficitur, massa eget sagittis sodales, magna dolor dapibus justo, et facilisis tellus augue et est. + terms_of_service_01: + '#type': webform_terms_of_service + '#title': 'I agree to the {terms of service} in slideout' + '#terms_type': slideout + '#terms_content': |- + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a felis convallis, pharetra mauris a, eleifend justo. Sed massa ipsum, suscipit sit amet varius a, dignissim at ex. Integer euismod a sapien id auctor. Etiam dignissim scelerisque nunc in porttitor. Nam rutrum molestie mauris, a bibendum ligula. Etiam eget posuere enim. Quisque id condimentum ligula. + + Duis sit amet sapien justo. Suspendisse potenti. Aliquam venenatis congue quam, quis eleifend tellus. Duis aliquam sollicitudin purus sed rutrum. Nullam vitae ante lorem. Curabitur malesuada nibh lectus, ut ultricies elit mattis sed. Ut pharetra urna nec lacus pellentesque vestibulum. Nulla turpis sem, aliquam finibus pharetra at, interdum sit amet ligula. In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce ullamcorper justo in risus condimentum suscipit. Nam in nunc sit amet neque fringilla suscipit. Sed nec metus tempus, rhoncus dolor et, vehicula urna. Donec ultricies leo pharetra ante vulputate vulputate. Nullam tincidunt pharetra nisi eu faucibus. Duis efficitur, massa eget sagittis sodales, magna dolor dapibus justo, et facilisis tellus augue et est. actions: '#type': webform_actions '#title': 'Submit button(s)' diff --git a/packages/ui/src/components/Organisms/PageContent/BlockForm.stories.tsx b/packages/ui/src/components/Organisms/PageContent/BlockForm.stories.tsx index 9d255cea9..8e9ce2c94 100644 --- a/packages/ui/src/components/Organisms/PageContent/BlockForm.stories.tsx +++ b/packages/ui/src/components/Organisms/PageContent/BlockForm.stories.tsx @@ -21,3 +21,17 @@ export const Error = { cssStylesToInject: cmsCss, }, } satisfies StoryObj; + +export const TermsOfServiceModal = { + args: { + url: 'webforms/terms-of-service-modal/index.html' as Url, + cssStylesToInject: cmsCss, + }, +} satisfies StoryObj; + +export const TermsOfServiceSlideout = { + args: { + url: 'webforms/terms-of-service-slideout/index.html' as Url, + cssStylesToInject: cmsCss, + }, +} satisfies StoryObj; diff --git a/tests/e2e/tsconfig.json b/tests/e2e/tsconfig.json index 87555134a..ed6fc0aa9 100644 --- a/tests/e2e/tsconfig.json +++ b/tests/e2e/tsconfig.json @@ -3,7 +3,7 @@ "strict": true, "skipLibCheck": true, "esModuleInterop": true, - "lib": ["es2015"], + "lib": ["es2015", "DOM"], "types": ["node"] } } diff --git a/tests/e2e/webform-snapshots/webforms.spec.ts b/tests/e2e/webform-snapshots/webforms.spec.ts index c3eb894e5..1fe4ba862 100644 --- a/tests/e2e/webform-snapshots/webforms.spec.ts +++ b/tests/e2e/webform-snapshots/webforms.spec.ts @@ -13,10 +13,28 @@ test('Export webforms for styling', async ({ page }) => { const baseUrl = cmsUrl('/en/form/styling?iframe=true&no_css=true'); + page.setViewportSize({ + // In the frontend the form is wrapped into a div with max-w-3xl class, + // which translates to 48 rem, which is 768 px. Roughly. + // We try to match the width because the modal is centered dynamically by + // Drupal JS, but then, when we save the page, the size and position are + // fixed in the HTML. + width: 768, + // Does not matter. + height: 768, + }); + await page.goto(baseUrl); await expect(page.locator(iframeResizerSelector)).toHaveCount(1); await savePage(page, 'idle'); + // Disable frontend validation. + await page.evaluate(() => { + document.querySelectorAll('[required]').forEach((element) => { + element.removeAttribute('required'); + }); + }); + await page.getByLabel('Email with a confirmation').fill('asd@asd'); await page.getByRole('button', { name: 'Submit' }).click(); await expect( @@ -24,6 +42,24 @@ test('Export webforms for styling', async ({ page }) => { ).toBeVisible(); await expect(page.locator(iframeResizerSelector)).toHaveCount(1); await savePage(page, 'error'); + + await page.goto(baseUrl); + await page + .locator('label') + .filter({ hasText: 'I agree to the terms of service in modal' }) + .getByRole('button') + .click(); + await page.waitForTimeout(500); + await savePage(page, 'terms-of-service-modal'); + + await page.goto(baseUrl); + await page + .locator('label') + .filter({ hasText: 'I agree to the terms of service in slideout' }) + .getByRole('button') + .click(); + await page.waitForTimeout(500); + await savePage(page, 'terms-of-service-slideout'); }); async function savePage(page: Page, name: string) {