Skip to content

Commit fd61512

Browse files
leecalcoteleecalcote
authored
Merge pull request #1120 from ianrwhitney/modal-data-test-ids
feat: added test ids for design page
2 parents ce86cc0 + efa8742 commit fd61512

File tree

5 files changed

+87
-36
lines changed

5 files changed

+87
-36
lines changed

‎src/custom/Modal/index.tsx

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -176,22 +176,31 @@ export const Modal: React.FC<ModalProps> = ({
176176
{...props}
177177
>
178178
{title && (
179-
<ModalStyledHeader>
180-
{headerIcon && headerIcon}
181-
<Typography component={'div'} variant="h6">
179+
<ModalStyledHeader data-testid="modal-header">
180+
{headerIcon && <Box data-testid="modal-header-icon">{headerIcon}</Box>}
181+
<Typography component={'div'} variant="h6" data-testid="modal-title">
182182
{title}
183183
</Typography>
184-
<div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
184+
<div
185+
style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}
186+
data-testid="modal-header-actions"
187+
>
185188
{isFullScreenModeAllowed && (
186189
<CustomTooltip title={fullScreen ? 'Exit Fullscreen' : 'Enter Fullscreen'}>
187190
{fullScreen ? (
188-
<FullscreenExitButton onClick={toggleFullScreen} />
191+
<FullscreenExitButton
192+
onClick={toggleFullScreen}
193+
data-testid="modal-exit-fullscreen-btn"
194+
/>
189195
) : (
190-
<FullscreenButton onClick={toggleFullScreen} />
196+
<FullscreenButton
197+
onClick={toggleFullScreen}
198+
data-testid="modal-enter-fullscreen-btn"
199+
/>
191200
)}
192201
</CustomTooltip>
193202
)}
194-
<CloseBtn onClick={closeModal}>
203+
<CloseBtn onClick={closeModal} data-testid="modal-close-btn">
195204
<CloseIcon {...iconLarge} fill="#fff"></CloseIcon>
196205
</CloseBtn>
197206
</div>

‎src/custom/ModalCard/ModalCard.tsx

Lines changed: 29 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export interface CustomDialogProps {
2121
closeComponent: React.ReactNode;
2222
maxWidth?: DialogProps['maxWidth'];
2323
onClose: () => void;
24+
'data-testid'?: string;
2425
}
2526

2627
function ModalCard({
@@ -31,29 +32,42 @@ function ModalCard({
3132
actions,
3233
hideActions = false,
3334
content,
34-
closeComponent
35+
closeComponent,
36+
'data-testid': testId = 'modal-card-wrapper'
3537
}: CustomDialogProps): JSX.Element {
3638
return (
37-
<ModalWrapper>
38-
<HeaderModal>
39+
<ModalWrapper data-testid={testId}>
40+
<HeaderModal data-testid="modal-card-header">
3941
{leftHeaderIcon && (
40-
<div style={{ display: 'flex', alignItems: 'center' }}>{leftHeaderIcon}</div>
42+
<div
43+
style={{ display: 'flex', alignItems: 'center' }}
44+
data-testid="modal-card-header-icon"
45+
>
46+
{leftHeaderIcon}
47+
</div>
4148
)}
4249
{title && (
43-
<>
44-
<div style={{ display: 'flex', alignItems: 'center', color: 'white' }}>
45-
<HeaderTypography>{title}</HeaderTypography>
46-
</div>
47-
</>
50+
<div
51+
style={{ display: 'flex', alignItems: 'center', color: 'white' }}
52+
data-testid="modal-card-title"
53+
>
54+
<HeaderTypography>{title}</HeaderTypography>
55+
</div>
4856
)}
49-
50-
<div style={{ display: 'flex', alignItems: 'center' }}>
51-
{helpText && <>{helpArea}</>}
52-
{closeComponent}
57+
<div
58+
style={{ display: 'flex', alignItems: 'center' }}
59+
data-testid="modal-card-header-right"
60+
>
61+
{helpText && <div data-testid="modal-card-help-area">{helpArea}</div>}
62+
<div data-testid="modal-card-close-button">{closeComponent}</div>
5363
</div>
5464
</HeaderModal>
55-
<ContentContainer>{content}</ContentContainer>
56-
{!hideActions && <ButtonContainer>{actions}</ButtonContainer>}
65+
66+
<ContentContainer data-testid="modal-card-content">{content}</ContentContainer>
67+
68+
{!hideActions && (
69+
<ButtonContainer data-testid="modal-card-actions">{actions}</ButtonContainer>
70+
)}
5771
</ModalWrapper>
5872
);
5973
}

‎src/custom/Prompt/promt-component.tsx

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -108,10 +108,16 @@ const PromptComponent = forwardRef<PromptRef, PromptProps>(({ variant }, ref) =>
108108
id="searchClick"
109109
headerIcon={headerIcon}
110110
reactNode={undefined}
111+
data-testid="prompt-modal"
111112
>
112113
{subtitle && (
113-
<ModalBody>
114-
<Subtitle id="alert-dialog-description" variant="body1" component="div">
114+
<ModalBody data-testid="prompt-body">
115+
<Subtitle
116+
id="alert-dialog-description"
117+
variant="body1"
118+
component="div"
119+
data-testid="prompt-subtitle"
120+
>
115121
<Typography
116122
variant="body1"
117123
component="div"
@@ -124,21 +130,24 @@ const PromptComponent = forwardRef<PromptRef, PromptProps>(({ variant }, ref) =>
124130
</Subtitle>
125131
{showCheckbox && (
126132
<FormControlLabel
133+
data-testid="prompt-checkbox-label"
127134
control={
128135
<Checkbox
129136
checked={getCheckboxState()}
130137
onChange={handleCheckboxChange}
131138
color="primary"
139+
data-testid="prompt-checkbox"
132140
/>
133141
}
134142
label={<span style={{ fontSize: '1rem' }}>Do not show again</span>}
135143
/>
136144
)}
137145
</ModalBody>
138146
)}
139-
<ModalFooter variant="filled" helpText={showInfoIcon}>
140-
<ActionComponent>
147+
<ModalFooter variant="filled" helpText={showInfoIcon} data-testid="prompt-footer">
148+
<ActionComponent data-testid="prompt-actions">
141149
<ModalButtonSecondary
150+
data-testid="prompt-secondary-button"
142151
onClick={() => {
143152
hide();
144153
resolve('CANCEL');
@@ -147,6 +156,7 @@ const PromptComponent = forwardRef<PromptRef, PromptProps>(({ variant }, ref) =>
147156
Cancel
148157
</ModalButtonSecondary>
149158
<ModalButtonPrimary
159+
data-testid="prompt-primary-button"
150160
onClick={() => {
151161
hide();
152162
resolve(primaryOption);

‎src/custom/SearchBar.tsx

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -75,14 +75,16 @@ export interface SearchBarProps {
7575
onClear?: () => void;
7676
expanded: boolean;
7777
setExpanded: (expanded: boolean) => void;
78+
'data-testid'?: string;
7879
}
7980

8081
function SearchBar({
8182
onSearch,
8283
placeholder,
8384
onClear,
8485
expanded,
85-
setExpanded
86+
setExpanded,
87+
'data-testid': testId = 'search-bar-wrapper'
8688
}: SearchBarProps): JSX.Element {
8789
const [searchText, setSearchText] = React.useState('');
8890
const searchRef = React.useRef<HTMLInputElement | null>(null);
@@ -142,14 +144,15 @@ function SearchBar({
142144
}
143145
}}
144146
>
145-
<div style={{ display: 'flex' }}>
147+
<div style={{ display: 'flex' }} data-testid={testId}>
146148
<ThemeProvider theme={customTheme(theme)}>
147149
<TextField
148150
variant="standard"
149151
value={searchText}
150152
onChange={handleSearchChange} // Updated to use the new handler
151153
inputRef={searchRef}
152154
placeholder={placeholder}
155+
data-testid="searchbar-input"
153156
style={{
154157
width: expanded ? '150px' : '0',
155158
opacity: expanded ? 1 : 0,
@@ -161,14 +164,18 @@ function SearchBar({
161164
<TooltipIcon
162165
title="Close"
163166
onClick={handleClearIconClick}
164-
icon={<CloseIcon fill={theme.palette.icon.default} />}
167+
icon={
168+
<CloseIcon fill={theme.palette.icon.default} data-testid="searchbar-clear-button" />
169+
}
165170
arrow
166171
/>
167172
) : (
168173
<TooltipIcon
169174
title="Search"
170175
onClick={handleSearchIconClick}
171-
icon={<SearchIcon fill={theme.palette.icon.default} />}
176+
icon={
177+
<SearchIcon fill={theme.palette.icon.default} data-testid="searchbar-search-button" />
178+
}
172179
arrow
173180
/>
174181
)}

‎src/custom/Stepper/index.tsx

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ interface CustomizedStepperPropsI {
2525
stepLabels: string[];
2626
children: React.ReactNode;
2727
icons: React.ComponentType<IconProps>[];
28+
'data-testid'?: string;
2829
ContentWrapper?: React.ComponentType<{ children: React.ReactNode }>;
2930
}
3031

@@ -116,21 +117,29 @@ const CustomizedStepper: React.FC<CustomizedStepperPropsI> = ({
116117
activeStep,
117118
children,
118119
icons,
119-
ContentWrapper = StepContentWrapper
120+
ContentWrapper = StepContentWrapper,
121+
'data-testid': testId = 'customized-stepper'
120122
}) => {
121123
const theme = useTheme();
122124

123125
return (
124-
<Stack>
126+
<Stack data-testid={testId}>
125127
<Stack
128+
data-testid="stepper-header"
126129
direction="row"
127130
justifyContent="center"
128131
style={{ paddingBlock: '1rem', backgroundColor: theme.palette.background.blur?.heavy }}
129132
>
130-
<Stepper alternativeLabel activeStep={activeStep} connector={<ColorlibConnector />}>
131-
{stepLabels.map((label) => (
132-
<Step key={label}>
133+
<Stepper
134+
alternativeLabel
135+
activeStep={activeStep}
136+
connector={<ColorlibConnector />}
137+
data-testid="stepper-container"
138+
>
139+
{stepLabels.map((label, index) => (
140+
<Step key={label} data-testid={`step-${index}`}>
133141
<StyledStepLabel
142+
data-testid={`step-label-${index}`}
134143
StepIconComponent={(props) => <ColorlibStepIcon {...props} icons={icons} />}
135144
>
136145
{label}
@@ -139,7 +148,9 @@ const CustomizedStepper: React.FC<CustomizedStepperPropsI> = ({
139148
))}
140149
</Stepper>
141150
</Stack>
142-
<ContentWrapper>{children}</ContentWrapper>
151+
<ContentWrapper>
152+
<Box data-testid="stepper-content">{children}</Box>
153+
</ContentWrapper>
143154
</Stack>
144155
);
145156
};

0 commit comments

Comments
 (0)