Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[]DS-979] refactor: make data-testid configurable in Input #861

Merged
merged 5 commits into from
Jan 17, 2025
Merged

[]DS-979] refactor: make data-testid configurable in Input #861

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e6aaf5a
refactor: make data-testid configurable in Input
matheus-wh Jan 13, 2025
8b79b95
refactor: make data-testid configurable in Snackbar
matheus-wh Jan 13, 2025
cb484fb
Update testID on native input component
matheus-wh Jan 16, 2025
252e223
Update data-testid on web input component
matheus-wh Jan 16, 2025
b114938
Update snapshots
matheus-wh Jan 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/yoga/src/Input/native/Input.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -185,6 +185,7 @@ const Input = React.forwardRef(
components: { input },
},
},
dataTestId,
...props
},
ref,
Expand Down Expand Up @@ -266,6 +267,7 @@ const Input = React.forwardRef(
setFocused(false);
onBlur(e);
}}
testID={dataTestId}
ref={inputRef}
/>
{Boolean(label) && (
Expand Down Expand Up @@ -336,6 +338,7 @@ Input.propTypes = {
onClean: func,
onFocus: func,
hideMaxLength: bool,
dataTestId: string,
};

Input.defaultProps = {
Expand All @@ -354,6 +357,7 @@ Input.defaultProps = {
onClean: () => {},
onFocus: () => {},
hideMaxLength: false,
dataTestId: 'input',
matheus-wh marked this conversation as resolved.
Show resolved Hide resolved
};

export default withTheme(Input);
18 changes: 11 additions & 7 deletions packages/yoga/src/Input/native/Input.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ describe('<Input />', () => {
it('should match with default input', () => {
const { toJSON } = render(
<ThemeProvider>
<Input />
matheus-wh marked this conversation as resolved.
Show resolved Hide resolved
<Input dataTestId="input" />
</ThemeProvider>,
);

Expand All @@ -28,7 +28,7 @@ describe('<Input />', () => {
it('should match when input is focused', () => {
const { toJSON, getByTestId } = render(
<ThemeProvider>
<Input label="Input" testID="input" />
<Input label="Input" dataTestId="input" />
</ThemeProvider>,
);

Expand Down Expand Up @@ -93,7 +93,11 @@ describe('<Input />', () => {
const onChangeTextMock = jest.fn();
const { getByTestId } = render(
<ThemeProvider>
<Input label="Input" testID="input" onChangeText={onChangeTextMock} />
<Input
label="Input"
dataTestId="input"
onChangeText={onChangeTextMock}
/>
</ThemeProvider>,
);

Expand All @@ -108,7 +112,7 @@ describe('<Input />', () => {
<ThemeProvider>
<Input
label="Input"
testID="input"
dataTestId="input"
onChangeText={onChangeTextMock}
disabled
/>
Expand All @@ -124,7 +128,7 @@ describe('<Input />', () => {
const onFocusMock = jest.fn();
const { getByTestId } = render(
<ThemeProvider>
<Input label="Input" testID="input" onFocus={onFocusMock} />
<Input label="Input" dataTestId="input" onFocus={onFocusMock} />
</ThemeProvider>,
);

Expand All @@ -138,7 +142,7 @@ describe('<Input />', () => {

const { getByTestId } = render(
<ThemeProvider>
<Input label="Input" testID="input" onBlur={onBlurMock} />
<Input label="Input" dataTestId="input" onBlur={onBlurMock} />
</ThemeProvider>,
);

Expand All @@ -153,7 +157,7 @@ describe('<Input />', () => {
it('should update maxLength counter when add character', () => {
const { getByText, rerender } = render(
<ThemeProvider>
<Input label="Input" testID="input" maxLength={10} />
<Input label="Input" dataTestId="input" maxLength={10} />
</ThemeProvider>,
);

Expand Down
1 change: 1 addition & 0 deletions packages/yoga/src/Input/native/__snapshots__/Email.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ exports[`<Input.Email /> Snapshots should match with default input 1`] = `
},
]
}
testID="input"
textContentType="emailAddress"
typed={false}
value=""
Expand Down
7 changes: 7 additions & 0 deletions packages/yoga/src/Input/native/__snapshots__/Input.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,7 @@ exports[`<Input /> Snapshots should match with default input 1`] = `
},
]
}
testID="input"
typed={false}
value=""
/>
Expand Down Expand Up @@ -184,6 +185,7 @@ exports[`<Input /> Snapshots should match with disabled input 1`] = `
},
]
}
testID="input"
typed={false}
value=""
/>
Expand Down Expand Up @@ -235,6 +237,7 @@ exports[`<Input /> Snapshots should match with error 1`] = `
},
]
}
testID="input"
typed={false}
value=""
/>
Expand Down Expand Up @@ -320,6 +323,7 @@ exports[`<Input /> Snapshots should match with full width 1`] = `
},
]
}
testID="input"
typed={false}
value=""
/>
Expand Down Expand Up @@ -408,6 +412,7 @@ exports[`<Input /> Snapshots should match with helper text and max length 1`] =
},
]
}
testID="input"
typed={false}
value=""
/>
Expand Down Expand Up @@ -513,6 +518,7 @@ exports[`<Input /> Snapshots should match with helper text, max length and hideM
},
]
}
testID="input"
typed={false}
value=""
/>
Expand Down Expand Up @@ -597,6 +603,7 @@ exports[`<Input /> Snapshots should match with label 1`] = `
},
]
}
testID="input"
typed={false}
value=""
/>
Expand Down
1 change: 1 addition & 0 deletions packages/yoga/src/Input/native/__snapshots__/Number.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ exports[`<Input.Number /> Snapshots should match with default input 1`] = `
},
]
}
testID="input"
typed={false}
value=""
/>
Expand Down
3 changes: 3 additions & 0 deletions packages/yoga/src/Input/native/__snapshots__/Password.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -273,6 +273,7 @@ exports[`<Input.Password /> Snapshots should match with default input 1`] = `
},
]
}
testID="input"
textContentType="password"
typed={false}
value=""
Expand Down Expand Up @@ -446,6 +447,7 @@ exports[`<Input.Password /> Snapshots should match with disabled input 1`] = `
},
]
}
testID="input"
textContentType="password"
typed={false}
value=""
Expand Down Expand Up @@ -619,6 +621,7 @@ exports[`<Input.Password /> Snapshots should match with full width 1`] = `
},
]
}
testID="input"
textContentType="password"
typed={false}
value=""
Expand Down
1 change: 1 addition & 0 deletions packages/yoga/src/Input/native/__snapshots__/Tel.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ exports[`<Input.Tel /> Snapshots should match with default input 1`] = `
},
]
}
testID="input"
textContentType="telephoneNumber"
typed={false}
value=""
Expand Down
6 changes: 5 additions & 1 deletion packages/yoga/src/Input/web/Input.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,7 @@ const Input = React.forwardRef(
closeAriaLabel,
includeAriaAttributes,
leftElement,
dataTestId,
...props
},
ref,
Expand Down Expand Up @@ -189,7 +190,7 @@ const Input = React.forwardRef(
maxLength,
}}
ref={inputRef}
data-testid="input"
data-testid={dataTestId}
value={value}
onChange={onChange}
{...a11yFieldProps}
Expand Down Expand Up @@ -285,6 +286,8 @@ Input.propTypes = {

/** element on the left */
leftElement: node,

dataTestId: string,
};

Input.defaultProps = {
Expand All @@ -310,6 +313,7 @@ Input.defaultProps = {
closeAriaLabel: 'Clear',
includeAriaAttributes: true,
leftElement: undefined,
dataTestId: 'input',
matheus-wh marked this conversation as resolved.
Show resolved Hide resolved
};

export default Input;
10 changes: 10 additions & 0 deletions packages/yoga/src/Input/web/Input.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,16 @@ describe('<Input />', () => {

expect(container).toMatchSnapshot();
});

it('should render with custom dataTestId', () => {
render(
<ThemeProvider>
<Input label="Input" dataTestId="custom-input" />
</ThemeProvider>,
);

expect(screen.getByTestId('custom-input')).toBeInTheDocument();
});
});

describe('Events', () => {
Expand Down
5 changes: 5 additions & 0 deletions packages/yoga/src/Snackbar/native/Snackbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ const Snackbar = forwardRef((props, ref) => {
onSnackbarClose,
duration,
bottomOffset,
dataTestId,
...rest
} = props;
const wrapperRef = useRef();
Expand Down Expand Up @@ -149,6 +150,7 @@ const Snackbar = forwardRef((props, ref) => {
<SnackbarContainer
variant={currentProps.variant}
bottomOffset={bottomOffset}
testID={dataTestId}
{...rest}
{...panResponder.panHandlers}
>
Expand Down Expand Up @@ -201,6 +203,8 @@ Snackbar.propTypes = {
duration: oneOf(['fast', 'default', 'slow', 'indefinite']),
/** Add extra margin to Snackbar. Can be useful for SafeAreaView or button cases. */
bottomOffset: number,
/* A unique identifier for the Snackbar component, used for testing purposes with tools like Jest and Testing Library. */
dataTestId: string,
};

Snackbar.defaultProps = {
Expand All @@ -212,6 +216,7 @@ Snackbar.defaultProps = {
onSnackbarClose: undefined,
duration: 'default',
bottomOffset: 0,
dataTestId: 'snackbar',
};

export default Snackbar;
8 changes: 8 additions & 0 deletions packages/yoga/src/Snackbar/native/Snackbar.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,14 @@ describe('<Snackbar />', () => {
expect(toJSON()).toMatchSnapshot();
});

it('should render with custom dataTestId', () => {
const { getByTestId } = render(<Component dataTestId="custom-snackbar" />);

fireEvent.press(getByTestId('custom-snackbar'));

expect(getByTestId('custom-snackbar')).toBeTruthy();
});

it('should match snapshot when have an icon and action', () => {
const overrideProps = {
icon: CheckedFull,
Expand Down
4 changes: 4 additions & 0 deletions packages/yoga/src/Snackbar/native/__snapshots__/Snackbar.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,7 @@ exports[`<Snackbar /> should match snapshot when have a long text 1`] = `
},
]
}
testID="snackbar"
variant="success"
>
<RNSVGSvgView
Expand Down Expand Up @@ -457,6 +458,7 @@ exports[`<Snackbar /> should match snapshot when have a variant informative or a
},
]
}
testID="snackbar"
variant="informative"
>
<Text
Expand Down Expand Up @@ -621,6 +623,7 @@ exports[`<Snackbar /> should match snapshot when have an icon and action 1`] = `
},
]
}
testID="snackbar"
variant="success"
>
<RNSVGSvgView
Expand Down Expand Up @@ -946,6 +949,7 @@ exports[`<Snackbar /> should match snapshot when snackbar is default 1`] = `
},
]
}
testID="snackbar"
variant="success"
>
<Text
Expand Down
5 changes: 5 additions & 0 deletions packages/yoga/src/Snackbar/web/Snackbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,7 @@ const Snackbar = React.forwardRef(
onClose,
hideCloseButton,
ariaLabelClose,
dataTestId,
theme: {
yoga: {
components: { snackbar },
Expand Down Expand Up @@ -152,6 +153,7 @@ const Snackbar = React.forwardRef(
aria-label={variant}
variant={variant}
ref={ref}
data-testid={dataTestId}
{...props}
>
{!hideIcon && (
Expand Down Expand Up @@ -221,6 +223,8 @@ Snackbar.propTypes = {
hideCloseButton: bool,
/** Custom aria label for close button. */
ariaLabelClose: string,
/* A unique identifier for the Snackbar component, used for testing purposes with tools like Jest and Testing Library. */
dataTestId: string,
};

Snackbar.defaultProps = {
Expand All @@ -232,6 +236,7 @@ Snackbar.defaultProps = {
variant: 'success',
hideCloseButton: false,
ariaLabelClose: undefined,
dataTestId: 'snackbar',
};

export default memo(withTheme(Snackbar));
15 changes: 15 additions & 0 deletions packages/yoga/src/Snackbar/web/Snackbar.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,21 @@ describe('<Snackbar />', () => {
expect(container).toMatchSnapshot();
});

it('should render with custom dataTestId', () => {
render(
<ThemeProvider>
<Snackbar
open
message="Make wellbeing universal"
onClose={jest.fn()}
dataTestId="custom-snackbar"
/>
</ThemeProvider>,
);

expect(screen.getByTestId('custom-snackbar')).toBeInTheDocument();
});

it('should render a minimal snackbar', () => {
render(
<ThemeProvider>
Expand Down
1 change: 1 addition & 0 deletions packages/yoga/src/Snackbar/web/__snapshots__/Snackbar.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,7 @@ exports[`<Snackbar /> should match snapshot 1`] = `
<div
aria-label="success"
class="c0"
data-testid="snackbar"
role="alert"
>
<div
Expand Down
Loading
Loading