test: add test cases for date input empty string handling

.changeset/orange-eyes-pump.md

@@ -0,0 +1,5 @@
+---
+"@db-ux/ngx-core-components": patch
+---
+
+DBInput: inserting an empty string doesn't reset/empty date or time related form fields

.gitignore

@@ -76,3 +76,4 @@ showcases/patternhub/public/iframe-resizer/*
 /packages/agent-cli/test/.amazonq/rules/db-ux.md
 /core-web.iml
 /build-storybooks/
+blob-report/

packages/components/scripts/post-build/components.ts

@@ -368,7 +368,7 @@ export const getComponents = (): Component[] => [
 					from: 'writeValue(value: any) {',
 					to:
 						'writeValue(value: any) {\n' +
-						'if (!value && (this.type() === "date" ||\n' +
+						'if (!value && value !== "" && (this.type() === "date" ||\n' +
 						'			this.type() === "time" ||\n' +
 						'			this.type() === "week" ||\n' +
 						'			this.type() === "month" ||\n' +

packages/components/src/components/input/input.spec.tsx

@@ -76,6 +76,89 @@ const testAction = () => {
 		await expect(input).not.toHaveAttribute('enterkeyhint');
 		await expect(input).not.toHaveAttribute('inputmode');
 	});
+
+	test('should handle empty string value for date input without clearing', async ({
+		mount
+	}) => {
+		// Test with controlled value prop
+		let component = await mount(
+			<DBInput type="date" label="Date" value="2024-01-15" />
+		);
+		let input = component.locator('input');
+		await expect(input).toHaveValue('2024-01-15');
+
+		// Remount with empty string value - should accept empty string
+		await component.unmount();
+		component = await mount(<DBInput type="date" label="Date" value="" />);
+		input = component.locator('input');
+
+		// The internal input value should be empty string, not null
+		const internalValue = await input.evaluate(
+			(el: HTMLInputElement) => el.value
+		);
+		expect(internalValue).toBe('');
+	});
+
+	test('should distinguish between undefined, null, and empty string for date input', async ({
+		mount
+	}) => {
+		// Test with initial date value
+		let component = await mount(
+			<DBInput type="date" label="Date" value="2024-01-15" />
+		);
+		let input = component.locator('input');
+		await expect(input).toHaveValue('2024-01-15');
+
+		// Test empty string - should accept empty string as valid value
+		await component.unmount();
+		component = await mount(<DBInput type="date" label="Date" value="" />);
+		input = component.locator('input');
+		let value = await input.evaluate((el: HTMLInputElement) => el.value);
+		expect(value).toBe('');
+
+		// Test null - should also result in empty value
+		await component.unmount();
+		component = await mount(
+			<DBInput type="date" label="Date" value={null as any} />
+		);
+		input = component.locator('input');
+		value = await input.evaluate((el: HTMLInputElement) => el.value);
+		expect(value).toBe('');
+
+		// Test undefined - should also result in empty value
+		await component.unmount();
+		component = await mount(
+			<DBInput type="date" label="Date" value={undefined} />
+		);
+		input = component.locator('input');
+		value = await input.evaluate((el: HTMLInputElement) => el.value);
+		expect(value).toBe('');
+	});
+
+	test('should handle empty string for datetime-local input', async ({
+		mount
+	}) => {
+		// Test with initial datetime value
+		let component = await mount(
+			<DBInput
+				type="datetime-local"
+				label="DateTime"
+				value="2024-01-15T10:30"
+			/>
+		);
+		let input = component.locator('input');
+		await expect(input).toHaveValue('2024-01-15T10:30');
+
+		// Test empty string - should accept empty string as valid value
+		await component.unmount();
+		component = await mount(
+			<DBInput type="datetime-local" label="DateTime" value="" />
+		);
+		input = component.locator('input');
+
+		const value = await input.evaluate((el: HTMLInputElement) => el.value);
+		expect(value).toBe('');
+	});
 };
 
 test.describe('DBInput', () => {

showcases/angular-showcase/src/app/components/form/form.component.ts

@@ -111,7 +111,7 @@ export class FormComponent {
 		this.model.checkbox2 = false;
 		this.form.get('input')?.setValue('reset');
 		this.form.get('textarea')?.setValue('reset');
-		this.form.get('dateinput')?.setValue('reset');
+		this.form.get('dateinput')?.setValue('');
 		this.form.get('checkbox')?.setValue(false);
 	}