From 617f3156515ebff4130dc7f3ea88be783a016466 Mon Sep 17 00:00:00 2001
From: Lukas <llukas.tyla@gmail.com>
Date: Thu, 11 Jul 2024 14:20:33 +0300
Subject: [PATCH] Add e2e for the mobile value behavior

---
 .../MobileDatePickerV6WithClearAction.tsx     | 21 +++++++++++++++++++
 test/e2e/index.test.ts                        | 13 ++++++++++++
 2 files changed, 34 insertions(+)
 create mode 100644 test/e2e/fixtures/DatePicker/MobileDatePickerV6WithClearAction.tsx

diff --git a/test/e2e/fixtures/DatePicker/MobileDatePickerV6WithClearAction.tsx b/test/e2e/fixtures/DatePicker/MobileDatePickerV6WithClearAction.tsx
new file mode 100644
index 000000000000..b78b026bdb6f
--- /dev/null
+++ b/test/e2e/fixtures/DatePicker/MobileDatePickerV6WithClearAction.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import dayjs from 'dayjs';
+import { MobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+
+export default function MobileDatePickerV6WithClearAction() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <MobileDatePicker
+        label="Mobile Date Picker"
+        defaultValue={dayjs('2022-04-17')}
+        slotProps={{
+          actionBar: {
+            actions: ['clear', 'cancel', 'accept'],
+          },
+        }}
+      />
+    </LocalizationProvider>
+  );
+}
diff --git a/test/e2e/index.test.ts b/test/e2e/index.test.ts
index ea00f52f8c1c..5daa8064aa94 100644
--- a/test/e2e/index.test.ts
+++ b/test/e2e/index.test.ts
@@ -800,6 +800,19 @@ async function initializeEnvironment(
             '04/11/2022',
           );
         });
+
+        it('should have consistent `placeholder` and `value` behavior', async () => {
+          await renderFixture('DatePicker/MobileDatePickerV6WithClearAction');
+
+          const input = page.getByRole('textbox');
+
+          await input.click({ position: { x: 10, y: 2 } });
+          await page.getByRole('button', { name: 'Clear' }).click();
+
+          await input.blur();
+          expect(await input.getAttribute('placeholder')).to.equal('MM/DD/YYYY');
+          expect(await input.inputValue()).to.equal('');
+        });
       });
     });