diff --git a/packages/account/src/Components/address-details/__tests__/address-details.spec.tsx b/packages/account/src/Components/address-details/__tests__/address-details.spec.tsx index b9dbde92873b..1deb87a55a92 100644 --- a/packages/account/src/Components/address-details/__tests__/address-details.spec.tsx +++ b/packages/account/src/Components/address-details/__tests__/address-details.spec.tsx @@ -127,7 +127,7 @@ describe('', () => { expect(mock_props.onCancel).toHaveBeenCalledTimes(1); expect(mock_props.onSave).toHaveBeenCalledTimes(1); - const address_line_1_input: HTMLInputElement = screen.getByPlaceholderText(address_line_1); + const address_line_1_input: HTMLInputElement = screen.getByLabelText(address_line_1_marked); const first_line_adress_text = 'Test first line address'; expect(address_line_1_input.value).toBe(''); fireEvent.change(address_line_1_input, { target: { value: first_line_adress_text } }); @@ -135,7 +135,7 @@ describe('', () => { expect(address_line_1_input.value).toBe(first_line_adress_text); }); - const address_town_input: HTMLInputElement = screen.getByPlaceholderText(address_town); + const address_town_input: HTMLInputElement = screen.getByLabelText(address_town_marked); const address_town_text = 'Test city'; expect(address_town_input.value).toBe(''); fireEvent.change(address_town_input, { target: { value: address_town_text } }); @@ -143,7 +143,7 @@ describe('', () => { expect(address_town_input.value).toBe(address_town_text); }); - const address_postcode_input: HTMLInputElement = screen.getByPlaceholderText(address_postcode); + const address_postcode_input: HTMLInputElement = screen.getByLabelText(address_postcode); const address_postcode_text = 'Test postcode'; expect(address_postcode_input.value).toBe(''); fireEvent.change(address_postcode_input, { target: { value: address_postcode_text } }); @@ -151,7 +151,7 @@ describe('', () => { expect(address_postcode_input.value).toBe(address_postcode_text); }); - const address_state_input: HTMLInputElement = screen.getByPlaceholderText(address_state); + const address_state_input: HTMLInputElement = screen.getByLabelText(address_state); const address_state_text = 'Test state'; expect(address_state_input.value).toBe('Default test state'); fireEvent.change(address_state_input, { target: { value: address_state_text } }); @@ -271,12 +271,12 @@ describe('', () => { render(); - expect(screen.getByPlaceholderText(address_line_1)).toBeDisabled(); - expect(screen.getByPlaceholderText(address_line_2)).toBeDisabled(); + expect(screen.getByLabelText(address_line_1)).toBeDisabled(); + expect(screen.getByLabelText(address_line_2)).toBeDisabled(); await waitFor(() => { expect(screen.getByRole('textbox', { name: 'State/Province' })).toBeEnabled(); }); - expect(screen.getByPlaceholderText(address_town)).toBeEnabled(); - expect(screen.getByPlaceholderText(address_postcode)).toBeEnabled(); + expect(screen.getByLabelText(address_town)).toBeEnabled(); + expect(screen.getByLabelText(address_postcode)).toBeEnabled(); }); }); diff --git a/packages/account/src/Components/personal-details/__tests__/personal-details.spec.js b/packages/account/src/Components/personal-details/__tests__/personal-details.spec.js index 210729fc956b..e887bfdb5d84 100644 --- a/packages/account/src/Components/personal-details/__tests__/personal-details.spec.js +++ b/packages/account/src/Components/personal-details/__tests__/personal-details.spec.js @@ -62,17 +62,14 @@ const runCommonFormfieldsTests = () => { expect(screen.queryByTestId('tax_residence')).toBeInTheDocument(); expect(screen.queryByTestId('tax_residence_mobile')).not.toBeInTheDocument(); - expect(screen.getByPlaceholderText(/john/i)).toBeInTheDocument(); expect( screen.getByText(/Please enter your first name as in your official identity documents./i) ).toBeInTheDocument(); - expect(screen.getByPlaceholderText('Doe')).toBeInTheDocument(); expect( screen.getByText(/Please enter your last name as in your official identity documents./i) ).toBeInTheDocument(); - expect(screen.getByPlaceholderText(/01-07-1999/i)).toBeInTheDocument(); expect( screen.getByText(/Please enter your date of birth as in your official identity documents./i) ).toBeInTheDocument(); @@ -88,7 +85,7 @@ const runCommonFormfieldsTests = () => { expect(screen.getByText(tax_residence_pop_over_text)).toBeInTheDocument(); - expect(screen.getByPlaceholderText(/tax identification number/i)).toBeInTheDocument(); + expect(screen.getByLabelText(/tax identification number/i)).toBeInTheDocument(); const tax_identification_number_pop_over = screen.queryByTestId('tax_identification_number_pop_over'); expect(tax_identification_number_pop_over).toBeInTheDocument(); @@ -337,7 +334,7 @@ describe('', () => { expect(screen.getByText(/family name\*/i)).toBeInTheDocument(); expect(screen.getByText(/date of birth\*/i)).toBeInTheDocument(); expect(screen.getByText(/phone number\*/i)).toBeInTheDocument(); - expect(screen.getByPlaceholderText(/phone number\*/i)).toBeInTheDocument(); + expect(screen.getByLabelText(/phone number\*/i)).toBeInTheDocument(); runCommonFormfieldsTests(); }); @@ -355,7 +352,7 @@ describe('', () => { expect(screen.getByText(/last name\*/i)).toBeInTheDocument(); expect(screen.getByText(/date of birth\*/i)).toBeInTheDocument(); expect(screen.getByText(/phone number\*/i)).toBeInTheDocument(); - expect(screen.getByPlaceholderText(/phone number\*/i)).toBeInTheDocument(); + expect(screen.getByLabelText(/phone number\*/i)).toBeInTheDocument(); runCommonFormfieldsTests(); }); @@ -374,7 +371,7 @@ describe('', () => { expect(screen.getByText('Last name')).toBeInTheDocument(); expect(screen.getByText('Date of birth')).toBeInTheDocument(); expect(screen.getByText('Phone number')).toBeInTheDocument(); - expect(screen.getByPlaceholderText('Phone number')).toBeInTheDocument(); + expect(screen.getByLabelText('Phone number')).toBeInTheDocument(); runCommonFormfieldsTests(); }); @@ -443,7 +440,7 @@ describe('', () => { expect(screen.queryByTestId('tax_residence_mobile')).toBeInTheDocument(); expect(screen.queryByTestId('tax_residence')).not.toBeInTheDocument(); expect(screen.getByText(/tax identification number/i)).toBeInTheDocument(); - expect(screen.getByPlaceholderText(/tax identification number/i)).toBeInTheDocument(); + expect(screen.getByLabelText(/tax identification number/i)).toBeInTheDocument(); expect(screen.getByRole('heading', { name: /account opening reason/i })).toBeInTheDocument(); expect(screen.queryByTestId('dti_dropdown_display')).not.toBeInTheDocument(); expect(screen.queryByTestId('account_opening_reason_mobile')).toBeInTheDocument(); diff --git a/packages/account/src/Components/poi/idv-document-submit/__tests__/idv-document-submit.spec.tsx b/packages/account/src/Components/poi/idv-document-submit/__tests__/idv-document-submit.spec.tsx index cd91cddbcb05..0ad15477f156 100644 --- a/packages/account/src/Components/poi/idv-document-submit/__tests__/idv-document-submit.spec.tsx +++ b/packages/account/src/Components/poi/idv-document-submit/__tests__/idv-document-submit.spec.tsx @@ -93,7 +93,7 @@ describe('', () => { expect(mock_props.handleBack).toHaveBeenCalledTimes(1); const document_type_input = screen.getByLabelText('Choose the document type'); - const document_number_input = screen.getByPlaceholderText('Enter your document number'); + const document_number_input = screen.getByLabelText('Enter your document number'); expect(document_number_input).toBeDisabled(); expect(screen.queryByText('Test document 1 name')).not.toBeInTheDocument(); expect(screen.queryByText('Test document 2 name')).not.toBeInTheDocument(); @@ -122,7 +122,7 @@ describe('', () => { const document_type_input = screen.getByRole('combobox'); expect(document_type_input.name).toBe('document_type'); - const document_number_input = screen.getByPlaceholderText('Enter your document number'); + const document_number_input = screen.getByLabelText('Enter your document number'); expect(document_number_input.name).toBe('document_number'); expect(document_number_input).toBeDisabled(); diff --git a/packages/cfd/src/Components/__tests__/cfd-poa.spec.js b/packages/cfd/src/Components/__tests__/cfd-poa.spec.js index a676ac458d63..802897bcc797 100644 --- a/packages/cfd/src/Components/__tests__/cfd-poa.spec.js +++ b/packages/cfd/src/Components/__tests__/cfd-poa.spec.js @@ -66,7 +66,7 @@ const error_messages = { describe('', () => { const address = { address_line_1: 'First line of address*', - address_line_2: 'Second line of address', + address_line_2: 'Second line of address (optional)', address_postcode: 'Postal/ZIP code', address_state: 'State/Province', address_town: 'Town/City*', @@ -181,11 +181,11 @@ describe('', () => { expect(await screen.findByText(/Address information/i)).toBeInTheDocument(); - const address_line_1_input = screen.getByPlaceholderText(address.address_line_1); - const address_line_2_input = screen.getByPlaceholderText(address.address_line_2); - const address_town_input = screen.getByPlaceholderText(address.address_town); - const address_state_input = screen.getByPlaceholderText(address.address_state); - const address_postcode_input = screen.getByPlaceholderText(address.address_postcode); + const address_line_1_input = screen.getByLabelText(address.address_line_1); + const address_line_2_input = screen.getByLabelText(address.address_line_2); + const address_town_input = screen.getByLabelText(address.address_town); + const address_state_input = screen.getByLabelText(address.address_state); + const address_postcode_input = screen.getByLabelText(address.address_postcode); expect(address_line_1_input.value).toBe('dead end'); expect(address_line_2_input.value).toBe('Psycho Path'); @@ -199,8 +199,8 @@ describe('', () => { expect(await screen.findByText(/Address information/i)).toBeInTheDocument(); - const address_line_1_input = screen.getByPlaceholderText(address.address_line_1); - const address_town_input = screen.getByPlaceholderText(address.address_town); + const address_line_1_input = screen.getByLabelText(address.address_line_1); + const address_town_input = screen.getByLabelText(address.address_town); fireEvent.blur(address_line_1_input); fireEvent.blur(address_town_input); diff --git a/packages/components/src/components/input/input.tsx b/packages/components/src/components/input/input.tsx index 01c6a4fa6e2e..31e24c7026a3 100644 --- a/packages/components/src/components/input/input.tsx +++ b/packages/components/src/components/input/input.tsx @@ -78,6 +78,7 @@ const Input = React.forwardRef @@ -128,12 +130,13 @@ const Input = React.forwardRef ) : ( )} {trailing_icon &&