Skip to content

Commit

Permalink
feat(SearchInput): create new component (#1286)
Browse files Browse the repository at this point in the history 
* feat(SearchInput): new component
  • Loading branch information
@janseke10
janseke10 authored Oct 29, 2024
1 parent 2cf2846 commit fa65305
Show file tree
Hide file tree
Showing 19 changed files with 910 additions and 325 deletions.
14 changes: 6 additions & 8 deletions src/components/FieldWithValidation/__tests__/FieldWithValidation.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,9 @@ describe('FieldWithValidation', () => {
);
expect(container).toMatchSnapshot();
const input = screen.getByRole('textbox');
expect(input).toHaveAttribute(
'class',
'Input Input--context_critical Input--size_medium'
);
const inputContainer = screen.getByTestId('inputContainer');
expect(input).toHaveAttribute('class', 'Input__input Input__input--size_medium');
expect(inputContainer).toHaveClass('Input__inputContainer--context_critical');
expect(input).toBeInTheDocument();
expect(screen.getByText(message)).toBeInTheDocument();
});
Expand Down Expand Up @@ -75,13 +74,12 @@ describe('FieldWithValidation', () => {
);

expect(container).toMatchSnapshot();
const inputContainer = screen.getByTestId('inputContainer');

const input = screen.getByRole('textbox');

expect(input).toHaveAttribute(
'class',
'Input Input--context_critical Input--size_medium'
);
expect(input).toHaveAttribute('class', 'Input__input Input__input--size_medium');
expect(inputContainer).toHaveClass('Input__inputContainer--context_critical');
});

it('should render the message when field is focused', () => {
Expand Down
157 changes: 103 additions & 54 deletions src/components/FieldWithValidation/__tests__/__snapshots__/FieldWithValidation.spec.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,40 @@

exports[`FieldWithValidation when rendering message as text with no error message passed should simply render the child as it is 1`] = `
<div>
<input
class="Input Input--size_medium"
data-lpignore="true"
id=":r0:"
type="text"
value=""
/>
<div>
<div
class="Input__inputContainer Input__inputContainer--size_medium"
data-testid="inputContainer"
>
<input
class="Input__input Input__input--size_medium"
data-lpignore="true"
id=":r0:"
type="text"
value=""
/>
</div>
</div>
</div>
`;

exports[`FieldWithValidation when using tooltip when error message is defined should remove the message when field is blurred 1`] = `
<div>
<input
aria-invalid="true"
class="Input Input--context_critical Input--size_medium"
data-lpignore="true"
id=":r6:"
type="text"
value=""
/>
<div>
<div
class="Input__inputContainer Input__inputContainer--context_critical Input__inputContainer--size_medium"
data-testid="inputContainer"
>
<input
aria-invalid="true"
class="Input__input Input__input--size_medium"
data-lpignore="true"
id=":r6:"
type="text"
value=""
/>
</div>
</div>
<p
class="Text--context_critical Text--size_small FieldWithValidation"
>
Expand All @@ -32,14 +46,21 @@ exports[`FieldWithValidation when using tooltip when error message is defined sh

exports[`FieldWithValidation when using tooltip when error message is defined should render the message when field is focused 1`] = `
<div>
<input
aria-invalid="true"
class="Input Input--context_critical Input--size_medium"
data-lpignore="true"
id=":r5:"
type="text"
value=""
/>
<div>
<div
class="Input__inputContainer Input__inputContainer--context_critical Input__inputContainer--size_medium"
data-testid="inputContainer"
>
<input
aria-invalid="true"
class="Input__input Input__input--size_medium"
data-lpignore="true"
id=":r5:"
type="text"
value=""
/>
</div>
</div>
<p
class="Text--context_critical Text--size_small FieldWithValidation"
>
Expand All @@ -50,14 +71,21 @@ exports[`FieldWithValidation when using tooltip when error message is defined sh

exports[`FieldWithValidation when using tooltip when error message is defined should set context to bad on child 1`] = `
<div>
<input
aria-invalid="true"
class="Input Input--context_critical Input--size_medium"
data-lpignore="true"
id=":r4:"
type="text"
value=""
/>
<div>
<div
class="Input__inputContainer Input__inputContainer--context_critical Input__inputContainer--size_medium"
data-testid="inputContainer"
>
<input
aria-invalid="true"
class="Input__input Input__input--size_medium"
data-lpignore="true"
id=":r4:"
type="text"
value=""
/>
</div>
</div>
<p
class="Text--context_critical Text--size_small FieldWithValidation"
>
Expand All @@ -68,26 +96,40 @@ exports[`FieldWithValidation when using tooltip when error message is defined sh

exports[`FieldWithValidation when using tooltip with no error message passed should not render a tooltip with no error message 1`] = `
<div>
<input
class="Input Input--size_medium"
data-lpignore="true"
id=":r3:"
type="text"
value=""
/>
<div>
<div
class="Input__inputContainer Input__inputContainer--size_medium"
data-testid="inputContainer"
>
<input
class="Input__input Input__input--size_medium"
data-lpignore="true"
id=":r3:"
type="text"
value=""
/>
</div>
</div>
</div>
`;

exports[`FieldWithValidation with error message passed should render the message as text 1`] = `
<div>
<input
aria-invalid="true"
class="Input Input--context_critical Input--size_medium"
data-lpignore="true"
id=":r2:"
type="text"
value=""
/>
<div>
<div
class="Input__inputContainer Input__inputContainer--context_critical Input__inputContainer--size_medium"
data-testid="inputContainer"
>
<input
aria-invalid="true"
class="Input__input Input__input--size_medium"
data-lpignore="true"
id=":r2:"
type="text"
value=""
/>
</div>
</div>
<p
class="Text--context_critical Text--size_small FieldWithValidation"
>
Expand All @@ -98,14 +140,21 @@ exports[`FieldWithValidation with error message passed should render the message

exports[`FieldWithValidation with error message passed should set context to bad on child 1`] = `
<div>
<input
aria-invalid="true"
class="Input Input--context_critical Input--size_medium"
data-lpignore="true"
id=":r1:"
type="text"
value=""
/>
<div>
<div
class="Input__inputContainer Input__inputContainer--context_critical Input__inputContainer--size_medium"
data-testid="inputContainer"
>
<input
aria-invalid="true"
class="Input__input Input__input--size_medium"
data-lpignore="true"
id=":r1:"
type="text"
value=""
/>
</div>
</div>
<p
class="Text--context_critical Text--size_small FieldWithValidation"
>
Expand Down
Loading

0 comments on commit fa65305

Please sign in to comment.