diff --git a/.changeset/long-taxis-drop.md b/.changeset/long-taxis-drop.md new file mode 100644 index 0000000000..e7245495e5 --- /dev/null +++ b/.changeset/long-taxis-drop.md @@ -0,0 +1,5 @@ +--- +'@adyen/adyen-web': patch +--- + +fixes bug where storedetails had state value of true by default without visually showing it diff --git a/packages/lib/src/components/internal/StoreDetails/StoreDetails.test.tsx b/packages/lib/src/components/internal/StoreDetails/StoreDetails.test.tsx index 4eaea89e83..7b4c42a85c 100644 --- a/packages/lib/src/components/internal/StoreDetails/StoreDetails.test.tsx +++ b/packages/lib/src/components/internal/StoreDetails/StoreDetails.test.tsx @@ -5,25 +5,42 @@ import StoreDetails from './StoreDetails'; test('StoredDetails defaults to false, toggles to true', async () => { const user = userEvent.setup(); + let value; - const onChangeMock = jest.fn(); + const onChangeMock = jest.fn(event => (value = event)); render(); const checkbox = await screen.findByRole('checkbox'); + // check for the checked status in the DOM expect(checkbox).not.toBeChecked(); + // also check for the emitted value from onChange + expect(value).toBe(false); await user.click(checkbox); expect(checkbox).toBeChecked(); + expect(value).toBe(true); }); test('StoredDetails storeDetails prop true does nothing LEGACY TEST', async () => { // I wanted to capture this buggy feature, const user = userEvent.setup(); + let value; - const onChangeMock = jest.fn(); + const onChangeMock = jest.fn(event => (value = event)); render(); const checkbox = await screen.findByRole('checkbox'); + // buggy behaviour should be fixed, but we improve test coverage before that + // the checkbox will not be visibly "checked" expect(checkbox).not.toBeChecked(); + // correct behaviour + expect(value).toBe(true); await user.click(checkbox); expect(checkbox).toBeChecked(); + // it will emit "true" again because it will start reading the DOM + expect(value).toBe(true); + + await user.click(checkbox); + // now it's all correct + expect(checkbox).not.toBeChecked(); + expect(value).toBe(false); }); diff --git a/packages/lib/src/components/internal/StoreDetails/StoreDetails.tsx b/packages/lib/src/components/internal/StoreDetails/StoreDetails.tsx index 067eefe4fc..421b5dc5fc 100644 --- a/packages/lib/src/components/internal/StoreDetails/StoreDetails.tsx +++ b/packages/lib/src/components/internal/StoreDetails/StoreDetails.tsx @@ -6,7 +6,7 @@ import Checkbox from '../FormFields/Checkbox'; /** * "Store details" generic checkbox */ -function StoreDetails({ storeDetails = true, ...props }) { +function StoreDetails({ storeDetails = false, ...props }) { const { i18n } = useCoreContext(); const [value, setValue] = useState(storeDetails);