diff --git a/package-lock.json b/package-lock.json index 83c6e7c..3aefcef 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@ericblade/react-currency-input", - "version": "1.4.4", + "version": "1.4.5", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ericblade/react-currency-input", - "version": "1.4.4", + "version": "1.4.5", "license": "MIT", "dependencies": { "react-device-detect": "^2.2.3" diff --git a/tests/controlled-value.spec.ts b/tests/controlled-value.spec.ts index 0d771f2..0e2ab92 100644 --- a/tests/controlled-value.spec.ts +++ b/tests/controlled-value.spec.ts @@ -10,32 +10,27 @@ test.describe('controlled component (value prop updates)', () => { await page.goto(fileUrl); }); - test('should update input value when value prop changes externally', async ({ page }) => { - // Simulate a parent-driven prop change by updating the form-controlled value field. - + test('should update input value when value prop changes after user interaction', async ({ page }) => { const currencyInput = page.locator('#currency-input'); + const valueInput = page.locator('[name=value]'); + const applyBtn = page.locator('[name=apply]'); // Initial state: should show $0.00 USD await expect(currencyInput).toHaveValue('$0.00 USD'); - // Simulate typing into the input to set it to a different value - // Note: Using pressSequentially instead of fill+type to properly trigger React events + // Simulate user typing into the currency input await currencyInput.focus(); await currencyInput.selectText(); await currencyInput.pressSequentially('5000'); - - // Now it should show $50.00 USD (with precision 2) await expect(currencyInput).toHaveValue('$50.00 USD'); - // Now change the value via the form control (simulating external prop change) - const valueInput = page.locator('[name=value]'); - const applyBtn = page.locator('[name=apply]'); - - // Simulate a parent setting the controlled value to 22.22 + // Simulate a parent-driven controlled value update (calls React setValue()) + // This is the key regression scenario: after user interaction, an external prop + // change must override the displayed value rather than appear stale. await valueInput.fill('22.22'); await applyBtn.click(); - // Input should reflect the externally provided value (22.22) + // Input should reflect the externally provided value, not the user-typed value await expect(currencyInput).toHaveValue('$22.22 USD'); }); });