Skip to content

Commit

Permalink
Amina/fix: hide placeholder in input fields (#9224)
Browse files Browse the repository at this point in the history 
* fix: hide placeholder

* fix: hide placeholder

* fix: test_cases

* fix: test_cases
  • Loading branch information
@amina-deriv
amina-deriv committed Jul 10, 2023
1 parent 57c7d7a commit 8be80c9
Show file tree
Hide file tree
Showing 5 changed files with 29 additions and 28 deletions.
16 changes: 8 additions & 8 deletions packages/account/src/Components/address-details/__tests__/address-details.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,31 +127,31 @@ describe('<AddressDetails/>', () => {
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 } });
await waitFor(() => {
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 } });
await waitFor(() => {
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 } });
await waitFor(() => {
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 } });
Expand Down Expand Up @@ -271,12 +271,12 @@ describe('<AddressDetails/>', () => {

render(<AddressDetails {...mock_props} />);

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();
});
});
13 changes: 5 additions & 8 deletions packages/account/src/Components/personal-details/__tests__/personal-details.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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();

Expand Down Expand Up @@ -337,7 +334,7 @@ describe('<PersonalDetails/>', () => {
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();
});
Expand All @@ -355,7 +352,7 @@ describe('<PersonalDetails/>', () => {
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();
});
Expand All @@ -374,7 +371,7 @@ describe('<PersonalDetails/>', () => {
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();
});
Expand Down Expand Up @@ -443,7 +440,7 @@ describe('<PersonalDetails/>', () => {
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();
Expand Down
4 changes: 2 additions & 2 deletions ...ges/account/src/Components/poi/idv-document-submit/__tests__/idv-document-submit.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ describe('<IdvDocumentSubmit/>', () => {
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();
Expand Down Expand Up @@ -122,7 +122,7 @@ describe('<IdvDocumentSubmit/>', () => {

const document_type_input = screen.getByRole<HTMLTextAreaElement>('combobox');
expect(document_type_input.name).toBe('document_type');
const document_number_input = screen.getByPlaceholderText<HTMLTextAreaElement>('Enter your document number');
const document_number_input = screen.getByLabelText<HTMLTextAreaElement>('Enter your document number');
expect(document_number_input.name).toBe('document_number');
expect(document_number_input).toBeDisabled();

Expand Down
16 changes: 8 additions & 8 deletions packages/cfd/src/Components/__tests__/cfd-poa.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ const error_messages = {
describe('<CFDPOA />', () => {
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*',
Expand Down Expand Up @@ -181,11 +181,11 @@ describe('<CFDPOA />', () => {

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');
Expand All @@ -199,8 +199,8 @@ describe('<CFDPOA />', () => {

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);
Expand Down
8 changes: 6 additions & 2 deletions packages/components/src/components/input/input.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,7 @@ const Input = React.forwardRef<HTMLInputElement & HTMLTextAreaElement, TInputPro
warn,
data_testId,
maxLength,
placeholder,
...props
},
ref?
Expand All @@ -101,6 +102,7 @@ const Input = React.forwardRef<HTMLInputElement & HTMLTextAreaElement, TInputPro
};

const has_footer = !!has_character_counter || (!!hint && !!is_relative_hint);
const field_placeholder = label ? '' : placeholder;

return (
<InputWrapper has_footer={has_footer}>
Expand Down Expand Up @@ -128,20 +130,21 @@ const Input = React.forwardRef<HTMLInputElement & HTMLTextAreaElement, TInputPro
data-testid={data_testId}
{...props}
className={classNames('dc-input__field dc-input__textarea', {
'dc-input__field--placeholder-visible': !label && props.placeholder,
'dc-input__field--placeholder-visible': !label && placeholder,
})}
onChange={changeHandler}
disabled={disabled}
id={input_id}
maxLength={maxLength}
placeholder={field_placeholder}
/>
) : (
<input
ref={ref}
data-testid={data_testId}
{...props}
className={classNames('dc-input__field', field_className, {
'dc-input__field--placeholder-visible': !label && props.placeholder,
'dc-input__field--placeholder-visible': !label && placeholder,
})}
onFocus={props.onFocus}
onBlur={props.onBlur}
Expand All @@ -152,6 +155,7 @@ const Input = React.forwardRef<HTMLInputElement & HTMLTextAreaElement, TInputPro
id={input_id}
aria-label={label as string}
maxLength={maxLength}
placeholder={field_placeholder}
/>
)}
{trailing_icon &&
Expand Down

0 comments on commit 8be80c9

Please sign in to comment.