SWED-2339 adjust UI & E2E tests

src/App/ComponentsDocumentation/components/Dialog/constants.js

@@ -23,7 +23,7 @@ const DialogExample = ({
 			slidesFromBottom={slidesFromBottom}
 			hasGrayBgColor={hasGrayBgColor}
 		>
-			<p>
+			<p className="mb-0">
 				You’re about to permanently delete <i>German Swashbuckle (456)?</i>
 			</p>
 		</DialogComponent>

src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js

@@ -17,7 +17,7 @@ test("Dialog page exist", async ({ page }) => {
 		.click();
 	await expect(page).toHaveTitle(/Dialog/);
 	await expect(
-		page.getByRole("heading", { name: "Dialog", exact: true }),
+		page.getByRole("heading", { name: "Dialog", exact: true, level: 1 }),
 	).toBeVisible();
 });
 
@@ -27,11 +27,14 @@ test("visual regresion accordions", async ({ page, browserName }) => {
 	const brand = (await page.title()).includes("Swedbank")
 		? "SwedbankPay"
 		: "PayEx";
-	const dialogButton = page.getByRole("button", { name: "Open dialog" });
+	const dialogButton = page
+		.locator("#overview-dialog")
+		.getByRole("button", { name: "Open dialog" });
 
+	await expect(dialogButton).toBeVisible();
 	await expect(dialogButton).toHaveScreenshot(`${brand}-dialog-button.png`);
 	await dialogButton.click();
-	await expect(page.getByRole("dialog").locator("section")).toHaveScreenshot(
+	await expect(page.getByRole("dialog")).toHaveScreenshot(
 		`${brand}-dialog-modal.png`,
 	);
 	await expect(page.getByRole("dialog")).toHaveScreenshot(

src/less/components/dialog.less

@@ -167,6 +167,10 @@ dialog {
 	&:not(.dividers) {
 		// style with gray dividers
 		--dialog-divider: none;
+
+		.dialog-body {
+			padding-block: 0;
+		}
 	}
 
 	@media screen and (min-width: 768px) {

src/scripts/main/dialog/dialog.e2e.spec.js

@@ -8,7 +8,9 @@ test.beforeEach(async ({ page }) => {
 test("dialog displays & closes by mouse on close (cross) button ", async ({
 	page,
 }) => {
-	const dialogOpenButton = page.getByRole("button", { name: "Open dialog" });
+	const dialogOpenButton = page
+		.locator("#overview-dialog")
+		.getByRole("button", { name: "Open dialog" });
 
 	await dialogOpenButton.click();
 	await expect(page.getByRole("dialog")).toBeVisible();
@@ -20,7 +22,9 @@ test("dialog displays & closes by mouse on close (cross) button ", async ({
 });
 
 test("dialog closes by mouse on Cancel button ", async ({ page }) => {
-	const dialogOpenButton = page.getByRole("button", { name: "Open dialog" });
+	const dialogOpenButton = page
+		.locator("#overview-dialog")
+		.getByRole("button", { name: "Open dialog" });
 
 	await dialogOpenButton.click();
 	await expect(page.getByRole("dialog")).toBeVisible();
@@ -34,7 +38,9 @@ test("dialog closes by mouse on Cancel button ", async ({ page }) => {
 test("dialog does NOT close when click outside the modal or on another buttons than the cancel OR close buttons ", async ({
 	page,
 }) => {
-	const dialogOpenButton = page.getByRole("button", { name: "Open dialog" });
+	const dialogOpenButton = page
+		.locator("#overview-dialog")
+		.getByRole("button", { name: "Open dialog" });
 
 	await dialogOpenButton.click();
 	await expect(page.getByRole("dialog")).toBeVisible();
@@ -45,7 +51,9 @@ test("dialog does NOT close when click outside the modal or on another buttons t
 });
 
 test("dialog displays & closes by keyboard navigation", async ({ page }) => {
-	const dialogOpenButton = page.getByRole("button", { name: "Open dialog" });
+	const dialogOpenButton = page
+		.locator("#overview-dialog")
+		.getByRole("button", { name: "Open dialog" });
 
 	await dialogOpenButton.press("Enter");
 	await expect(page.getByRole("dialog")).toBeVisible();