@widergy/mobile-ui 1.50.1 → 1.51.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/lib/components/UTHeader/index.js +17 -9
  3. package/lib/components/UTModal/index.js +2 -3
  4. package/lib/components/UTModal/styles.js +1 -2
  5. package/lib/components/UTTopbar/index.js +8 -3
  6. package/lib/components/UTWorkflowContainer/versions/V1/components/BottomActions/components/ActionButton/index.js +4 -2
  7. package/lib/components/UTWorkflowContainer/versions/V1/components/BottomActions/index.js +15 -2
  8. package/lib/constants/testIds.js +30 -7
  9. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,10 @@
1
+ # [1.51.0](https://github.com/widergy/mobile-ui/compare/v1.50.1...v1.51.0) (2025-09-18)
2
+
3
+
4
+ ### Features
5
+
6
+ * [AUTO-47] Testids for workflowContainer components ([#452](https://github.com/widergy/mobile-ui/issues/452)) ([1fc2bb5](https://github.com/widergy/mobile-ui/commit/1fc2bb5893380f26186e0d089832b88668b91182))
7
+
1
8
  ## [1.50.1](https://github.com/widergy/mobile-ui/compare/v1.50.0...v1.50.1) (2025-09-18)
2
9
 
3
10
 
package/lib/components/UTHeader/index.js CHANGED
@@ -3,12 +3,15 @@ import { View } from 'react-native';
3
3
  import { string, bool, shape } from 'prop-types';
4
4
  import merge from 'lodash/merge';
5
5
 
6
+ import { TEST_IDS } from '../../constants/testIds';
6
7
  import UTLabel from '../UTLabel';
7
8
  import UTBanner from '../UTBanner';
8
9
  import { useTheme } from '../../theming';
9
10
 
10
11
  import ownStyles from './styles';
11
12
 
13
+ const { workflowContainer } = TEST_IDS;
14
+
12
15
  const UTHeader = ({ tagline, title, subtitle, requiredFieldInfo, helpText, useMarkdown, banner, style }) => {
13
16
  const theme = useTheme();
14
17
  const themedStyles = merge({}, ownStyles, theme?.UTHeader, style);
@@ -19,11 +22,12 @@ const UTHeader = ({ tagline, title, subtitle, requiredFieldInfo, helpText, useMa
19
22
  const Tagline = renderComponent(
20
23
  tagline,
21
24
  <UTLabel
25
+ colorTheme={themedStyles.taglineColor || 'gray'}
26
+ dataTestId={workflowContainer.header.tagline}
27
+ style={[themedStyles.child, themedStyles.tagline]}
22
28
  variant="small"
23
29
  weight="medium"
24
- colorTheme={themedStyles.taglineColor || 'gray'}
25
30
  withMarkdown={useMarkdown}
26
- style={[themedStyles.child, themedStyles.tagline]}
27
31
  >
28
32
  {tagline?.toUpperCase?.()}
29
33
  </UTLabel>
@@ -32,10 +36,11 @@ const UTHeader = ({ tagline, title, subtitle, requiredFieldInfo, helpText, useMa
32
36
  const Title = renderComponent(
33
37
  title,
34
38
  <UTLabel
35
- variant="title3"
36
- weight="medium"
37
39
  colorTheme={themedStyles.titleColor}
40
+ dataTestId={workflowContainer.header.title}
38
41
  style={themedStyles.title}
42
+ variant="title3"
43
+ weight="medium"
39
44
  withMarkdown={useMarkdown}
40
45
  >
41
46
  {title}
@@ -46,8 +51,9 @@ const UTHeader = ({ tagline, title, subtitle, requiredFieldInfo, helpText, useMa
46
51
  subtitle,
47
52
  <UTLabel
48
53
  colorTheme={themedStyles.subtitleColor || 'gray'}
49
- withMarkdown={useMarkdown}
54
+ dataTestId={workflowContainer.header.subtitle}
50
55
  style={[themedStyles.child, themedStyles.subtitle]}
56
+ withMarkdown={useMarkdown}
51
57
  >
52
58
  {subtitle}
53
59
  </UTLabel>
@@ -56,10 +62,11 @@ const UTHeader = ({ tagline, title, subtitle, requiredFieldInfo, helpText, useMa
56
62
  const RequiredFieldInfo = renderComponent(
57
63
  requiredFieldInfo,
58
64
  <UTLabel
59
- variant="small"
60
65
  colorTheme={themedStyles.requiredFieldInfoColor || 'gray'}
61
- withMarkdown={useMarkdown}
66
+ dataTestId={workflowContainer.header.requiredFieldInfo}
67
+ variant="small"
62
68
  style={[themedStyles.child, themedStyles.requiredFieldInfo]}
69
+ withMarkdown={useMarkdown}
63
70
  >
64
71
  {requiredFieldInfo}
65
72
  </UTLabel>
@@ -68,10 +75,11 @@ const UTHeader = ({ tagline, title, subtitle, requiredFieldInfo, helpText, useMa
68
75
  const HelpText = renderComponent(
69
76
  helpText,
70
77
  <UTLabel
71
- variant="small"
72
78
  colorTheme={themedStyles.helpTextColor || theme.colors.disabled}
73
- withMarkdown={useMarkdown}
79
+ dataTestId={workflowContainer.header.helpText}
74
80
  style={[themedStyles.child, themedStyles.helpText]}
81
+ variant="small"
82
+ withMarkdown={useMarkdown}
75
83
  >
76
84
  {helpText}
77
85
  </UTLabel>
package/lib/components/UTModal/index.js CHANGED
@@ -115,11 +115,10 @@ const UTModal = ({
115
115
  <View style={[styles.headerContainer, !!title && styles.closeButtonContainer]}>
116
116
  {!!title && (
117
117
  <UTLabel
118
- style={styles.title }
119
- variant="title3"
120
- weight="medium"
121
118
  dataTestId={`${dataTestId}.${titleTestId}`}
122
119
  style={styles.title}
120
+ variant="title3"
121
+ weight="medium"
123
122
  >
124
123
  {title}
125
124
  </UTLabel>
package/lib/components/UTModal/styles.js CHANGED
@@ -51,7 +51,6 @@ export default StyleSheet.create({
51
51
  closeButton: {
52
52
  alignSelf: 'flex-end'
53
53
  },
54
- title: { flex: 1 },
55
54
  imageContainer: {
56
55
  alignItems: 'center',
57
56
  height: verticalScale(35),
@@ -61,7 +60,7 @@ export default StyleSheet.create({
61
60
  keyboardAvoidingView: {
62
61
  flex: 1
63
62
  },
64
- title:{
63
+ title: {
65
64
  flexShrink: 1
66
65
  }
67
66
  });
package/lib/components/UTTopbar/index.js CHANGED
@@ -3,6 +3,7 @@ import { BackHandler, View } from 'react-native';
3
3
  import { number } from 'prop-types';
4
4
  import { useFocusEffect } from '@react-navigation/native';
5
5
 
6
+ import { TEST_IDS } from '../../constants/testIds';
6
7
  import UTButton from '../UTButton';
7
8
  import UTStepper from '../UTStepper';
8
9
  import UTProgressBar from '../UTProgressBar';
@@ -12,6 +13,8 @@ import UTLabel from '../UTLabel';
12
13
  import ownStyles, { BAR_HEIGHT } from './styles';
13
14
  import { TopbarPropTypes } from './types';
14
15
 
16
+ const { goBack: goBackTestId, title: titleTestId } = TEST_IDS.topbar;
17
+
15
18
  const UTTopbar = ({
16
19
  currentStage,
17
20
  currentStep,
@@ -41,18 +44,20 @@ const UTTopbar = ({
41
44
  <View>
42
45
  <View style={[ownStyles.container, ownTheme?.container]}>
43
46
  <UTButton
47
+ dataTestId={goBackTestId}
44
48
  Icon={Icon || 'IconArrowLeft'}
45
- variant="text"
49
+ onPress={goBack}
46
50
  style={{
47
51
  root: ownStyles.goBack
48
52
  }}
49
- onPress={goBack}
53
+ variant="text"
50
54
  />
51
55
  <UTLabel
52
56
  colorTheme={ownTheme?.text || 'dark'}
57
+ dataTestId={titleTestId}
58
+ style={ownStyles.child}
53
59
  variant="subtitle1"
54
60
  weight="medium"
55
- style={ownStyles.child}
56
61
  >
57
62
  {title}
58
63
  </UTLabel>
package/lib/components/UTWorkflowContainer/versions/V1/components/BottomActions/components/ActionButton/index.js CHANGED
@@ -8,7 +8,7 @@ import { useTheme } from '../../../../../../../../theming';
8
8
 
9
9
  import ownStyles from './styles';
10
10
 
11
- const ActionButton = ({ colorTheme, disabled, hidden, label, onPress, style, variant, icon }) => {
11
+ const ActionButton = ({ colorTheme, dataTestId, disabled, hidden, label, onPress, style, variant, icon }) => {
12
12
  const theme = useTheme();
13
13
  const themedStyles = merge({}, ownStyles, theme?.UTWorkflowContainer?.actionButton, style);
14
14
 
@@ -16,12 +16,13 @@ const ActionButton = ({ colorTheme, disabled, hidden, label, onPress, style, var
16
16
  <View style={themedStyles.actionButton}>
17
17
  <UTButton
18
18
  colorTheme={colorTheme}
19
+ dataTestId={dataTestId}
19
20
  disabled={disabled || hidden}
21
+ Icon={icon}
20
22
  onPress={onPress}
21
23
  size="large"
22
24
  style={{ root: themedStyles.buttonContainer, childrenContainer: themedStyles.buttonContent }}
23
25
  variant={variant}
24
- Icon={icon}
25
26
  >
26
27
  {label}
27
28
  </UTButton>
@@ -31,6 +32,7 @@ const ActionButton = ({ colorTheme, disabled, hidden, label, onPress, style, var
31
32
 
32
33
  ActionButton.propTypes = {
33
34
  colorTheme: string,
35
+ dataTestId: string,
34
36
  disabled: bool,
35
37
  hidden: bool,
36
38
  icon: string,
package/lib/components/UTWorkflowContainer/versions/V1/components/BottomActions/index.js CHANGED
@@ -3,6 +3,7 @@ import { View } from 'react-native';
3
3
  import merge from 'lodash/merge';
4
4
  import { number } from 'prop-types';
5
5
 
6
+ import { TEST_IDS } from '../../../../../../constants/testIds';
6
7
  import UTLabel from '../../../../../UTLabel';
7
8
  import Surface from '../../../../../Surface';
8
9
  import UTIcon from '../../../../../UTIcon';
@@ -16,6 +17,8 @@ import ActionButtonPropTypes from './components/ActionButton/types';
16
17
  import ownStyles from './styles';
17
18
  import { NEXT, RETURN } from './constants';
18
19
 
20
+ const { workflowContainer } = TEST_IDS;
21
+
19
22
  const BottomActions = ({ bottomSafeArea, message, nextButton, returnButton, summary, style }) => {
20
23
  const messageIcon = message?.Icon;
21
24
  const MESSAGE_ICON_SIZE = 16;
@@ -28,7 +31,10 @@ const BottomActions = ({ bottomSafeArea, message, nextButton, returnButton, summ
28
31
  return (
29
32
  <Surface position="top" style={[themedStyles.bottomNav, themedStyles.bottomSafeArea(bottomSafeArea)]}>
30
33
  {summary && (
31
- <View style={[themedStyles.summary, checkboxProps && themedStyles.summaryCheckbox]}>
34
+ <View
35
+ testID={workflowContainer.bottomActions.summary}
36
+ style={[themedStyles.summary, checkboxProps && themedStyles.summaryCheckbox]}
37
+ >
32
38
  {checkboxProps ? (
33
39
  <Checkbox {...checkboxProps} />
34
40
  ) : (
@@ -75,7 +81,12 @@ const BottomActions = ({ bottomSafeArea, message, nextButton, returnButton, summ
75
81
  themedStyles[`message${message.variant?.charAt(0).toUpperCase()}${message.variant?.slice(1)}`]
76
82
  ]}
77
83
  >
78
- <UTLabel colorTheme="negative" weight="medium" style={themedStyles.messageChild}>
84
+ <UTLabel
85
+ colorTheme="negative"
86
+ dataTestId={workflowContainer.bottomActions.message}
87
+ style={themedStyles.messageChild}
88
+ weight="medium"
89
+ >
79
90
  {message.title}
80
91
  </UTLabel>
81
92
  {messageIcon && <UTIcon colorTheme="negative" name={messageIcon} size={MESSAGE_ICON_SIZE} />}
@@ -84,6 +95,7 @@ const BottomActions = ({ bottomSafeArea, message, nextButton, returnButton, summ
84
95
  <View style={themedStyles.actionsContainer}>
85
96
  {returnButtonEnabled && (
86
97
  <ActionButton
98
+ dataTestId={workflowContainer.bottomActions.returnButton}
87
99
  label={returnButton.label || RETURN}
88
100
  variant="text"
89
101
  style={{
@@ -98,6 +110,7 @@ const BottomActions = ({ bottomSafeArea, message, nextButton, returnButton, summ
98
110
  )}
99
111
  {nextButtonEnabled && (
100
112
  <ActionButton
113
+ dataTestId={workflowContainer.bottomActions.nextButton}
101
114
  label={nextButton.label || NEXT}
102
115
  style={{
103
116
  actionButton: themedStyles.nextActionButton,
package/lib/constants/testIds.js CHANGED
@@ -1,9 +1,3 @@
1
- export const TEST_IDS = {
2
- modal: 'modal',
3
- roundView: 'roundView',
4
- skeletonLoader: 'skeletonLoader'
5
- };
6
-
7
1
  export const TEST_ID_CONSTANTS = {
8
2
  acceptButton: 'acceptButton',
9
3
  additionalInfo: 'additionalInfo',
@@ -11,6 +5,7 @@ export const TEST_ID_CONSTANTS = {
11
5
  areaCode: 'areaCode',
12
6
  attribution: 'attribution',
13
7
  badge: 'badge',
8
+ bottomActions: 'bottomActions',
14
9
  cancelButton: 'cancelButton',
15
10
  characterCount: 'characterCount',
16
11
  checkIcon: 'checkIcon',
@@ -31,15 +26,43 @@ export const TEST_ID_CONSTANTS = {
31
26
  primaryAction: 'primaryAction',
32
27
  required: 'required',
33
28
  right: 'right',
29
+ requiredFieldInfo: 'requiredFieldInfo',
34
30
  searchInput: 'searchInput',
35
31
  secondaryAction: 'secondaryAction',
36
32
  selectAll: 'selectAll',
37
33
  subLabel: 'subLabel',
38
34
  subtitle: 'subtitle',
35
+ tagline: 'tagline',
39
36
  tertiaryAction: 'tertiaryAction',
40
37
  text: 'text',
41
38
  title: 'title',
42
39
  titleText: 'titleText',
43
40
  tooltip: 'tooltip',
44
- validation: 'validation'
41
+ validation: 'validation',
42
+ workflowContainer: 'workflowContainer'
43
+ };
44
+
45
+ export const TEST_IDS = {
46
+ modal: 'modal',
47
+ roundView: 'roundView',
48
+ skeletonLoader: 'skeletonLoader',
49
+ topbar: {
50
+ goBack: 'topbar.goBack',
51
+ title: 'topbar.title'
52
+ },
53
+ workflowContainer: {
54
+ bottomActions: {
55
+ message: `${TEST_ID_CONSTANTS.workflowContainer}.${TEST_ID_CONSTANTS.bottomActions}.message`,
56
+ nextButton: `${TEST_ID_CONSTANTS.workflowContainer}.${TEST_ID_CONSTANTS.bottomActions}.nextButton`,
57
+ returnButton: `${TEST_ID_CONSTANTS.workflowContainer}.${TEST_ID_CONSTANTS.bottomActions}.returnButton`,
58
+ summary: `${TEST_ID_CONSTANTS.workflowContainer}.${TEST_ID_CONSTANTS.bottomActions}.summary`
59
+ },
60
+ header: {
61
+ tagline: `${TEST_ID_CONSTANTS.workflowContainer}.header.${TEST_ID_CONSTANTS.tagline}`,
62
+ title: `${TEST_ID_CONSTANTS.workflowContainer}.header.${TEST_ID_CONSTANTS.title}`,
63
+ subtitle: `${TEST_ID_CONSTANTS.workflowContainer}.header.${TEST_ID_CONSTANTS.subtitle}`,
64
+ requiredFieldInfo: `${TEST_ID_CONSTANTS.workflowContainer}.header.${TEST_ID_CONSTANTS.requiredFieldInfo}`,
65
+ helpText: `${TEST_ID_CONSTANTS.workflowContainer}.header.${TEST_ID_CONSTANTS.helpText}`
66
+ }
67
+ }
45
68
  };
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@widergy/mobile-ui",
3
3
  "description": "Widergy Mobile Components",
4
4
  "author": "widergy",
5
- "version": "1.50.1",
5
+ "version": "1.51.0",
6
6
  "repository": "https://github.com/widergy/mobile-ui.git",
7
7
  "main": "lib/index.js",
8
8
  "files": [