Add data-testid attributes for improved testing in modals

This commit is contained in:
2025-05-31 20:23:15 +02:00
parent e279cd4535
commit e642b73556
7 changed files with 70 additions and 11 deletions

View File

@@ -39,12 +39,17 @@ const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({
<PasswordInput <PasswordInput
label="Current Password" label="Current Password"
placeholder="Enter your current password" placeholder="Enter your current password"
data-testid="delete-account-password-input"
value={password} value={password}
onChange={(e) => setPassword(e.currentTarget.value)} onChange={(e) => setPassword(e.currentTarget.value)}
required required
/> />
<Group justify="flex-end" mt="md"> <Group justify="flex-end" mt="md">
<Button variant="default" onClick={onClose}> <Button
variant="default"
onClick={onClose}
data-testid="cancel-delete-button"
>
Cancel Cancel
</Button> </Button>
<Button <Button
@@ -53,6 +58,7 @@ const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({
void onConfirm(password); void onConfirm(password);
setPassword(''); setPassword('');
}} }}
data-testid="confirm-delete-button"
> >
Delete Account Delete Account
</Button> </Button>

View File

@@ -38,12 +38,17 @@ const EmailPasswordModal: React.FC<EmailPasswordModalProps> = ({
<PasswordInput <PasswordInput
label="Current Password" label="Current Password"
placeholder="Enter your current password" placeholder="Enter your current password"
data-testid="email-password-input"
value={password} value={password}
onChange={(e) => setPassword(e.currentTarget.value)} onChange={(e) => setPassword(e.currentTarget.value)}
required required
/> />
<Group justify="flex-end" mt="md"> <Group justify="flex-end" mt="md">
<Button variant="default" onClick={onClose}> <Button
variant="default"
onClick={onClose}
data-testid="cancel-email-password-button"
>
Cancel Cancel
</Button> </Button>
<Button <Button
@@ -51,6 +56,7 @@ const EmailPasswordModal: React.FC<EmailPasswordModalProps> = ({
void onConfirm(password); void onConfirm(password);
setPassword(''); setPassword('');
}} }}
data-testid="confirm-email-password-button"
> >
Confirm Confirm
</Button> </Button>

View File

@@ -54,12 +54,14 @@ const CreateUserModal: React.FC<CreateUserModalProps> = ({
label="Email" label="Email"
required required
value={email} value={email}
data-testid="create-user-email-input"
onChange={(e) => setEmail(e.currentTarget.value)} onChange={(e) => setEmail(e.currentTarget.value)}
placeholder="user@example.com" placeholder="user@example.com"
/> />
<TextInput <TextInput
label="Display Name" label="Display Name"
value={displayName} value={displayName}
data-testid="create-user-display-name-input"
onChange={(e) => setDisplayName(e.currentTarget.value)} onChange={(e) => setDisplayName(e.currentTarget.value)}
placeholder="John Doe" placeholder="John Doe"
/> />
@@ -67,6 +69,7 @@ const CreateUserModal: React.FC<CreateUserModalProps> = ({
label="Password" label="Password"
required required
value={password} value={password}
data-testid="create-user-password-input"
onChange={(e) => setPassword(e.currentTarget.value)} onChange={(e) => setPassword(e.currentTarget.value)}
placeholder="Enter password" placeholder="Enter password"
/> />
@@ -74,6 +77,7 @@ const CreateUserModal: React.FC<CreateUserModalProps> = ({
label="Role" label="Role"
required required
value={role} value={role}
data-testid="create-user-role-select"
onChange={(value) => value && setRole(value as UserRole)} onChange={(value) => value && setRole(value as UserRole)}
data={[ data={[
{ value: UserRole.Admin, label: 'Admin' }, { value: UserRole.Admin, label: 'Admin' },
@@ -82,10 +86,18 @@ const CreateUserModal: React.FC<CreateUserModalProps> = ({
]} ]}
/> />
<Group justify="flex-end" mt="md"> <Group justify="flex-end" mt="md">
<Button variant="default" onClick={onClose}> <Button
variant="default"
onClick={onClose}
data-testid="cancel-create-user-button"
>
Cancel Cancel
</Button> </Button>
<Button onClick={() => void handleSubmit} loading={loading}> <Button
onClick={() => void handleSubmit}
loading={loading}
data-testid="confirm-create-user-button"
>
Create User Create User
</Button> </Button>
</Group> </Group>

View File

@@ -31,10 +31,19 @@ const DeleteUserModal: React.FC<DeleteUserModalProps> = ({
deleted. deleted.
</Text> </Text>
<Group justify="flex-end" mt="xl"> <Group justify="flex-end" mt="xl">
<Button variant="default" onClick={onClose}> <Button
variant="default"
onClick={onClose}
data-testid="cancel-delete-user-button"
>
Cancel Cancel
</Button> </Button>
<Button color="red" onClick={() => void onConfirm()} loading={loading}> <Button
color="red"
onClick={() => void onConfirm()}
loading={loading}
data-testid="confirm-delete-user-button"
>
Delete User Delete User
</Button> </Button>
</Group> </Group>

View File

@@ -72,6 +72,7 @@ const EditUserModal: React.FC<EditUserModalProps> = ({
label="Email" label="Email"
required required
value={formData.email} value={formData.email}
data-testid="edit-user-email-input"
onChange={(e) => onChange={(e) =>
setFormData({ ...formData, email: e.currentTarget.value }) setFormData({ ...formData, email: e.currentTarget.value })
} }
@@ -80,6 +81,7 @@ const EditUserModal: React.FC<EditUserModalProps> = ({
<TextInput <TextInput
label="Display Name" label="Display Name"
value={formData.displayName} value={formData.displayName}
data-testid="edit-user-display-name-input"
onChange={(e) => onChange={(e) =>
setFormData({ ...formData, displayName: e.currentTarget.value }) setFormData({ ...formData, displayName: e.currentTarget.value })
} }
@@ -89,6 +91,7 @@ const EditUserModal: React.FC<EditUserModalProps> = ({
label="Role" label="Role"
required required
value={formData.role ? formData.role.toString() : null} value={formData.role ? formData.role.toString() : null}
data-testid="edit-user-role-select"
onChange={(value) => onChange={(value) =>
setFormData({ ...formData, role: value as UserRole }) setFormData({ ...formData, role: value as UserRole })
} }
@@ -101,6 +104,7 @@ const EditUserModal: React.FC<EditUserModalProps> = ({
<PasswordInput <PasswordInput
label="New Password" label="New Password"
value={formData.password} value={formData.password}
data-testid="edit-user-password-input"
onChange={(e) => onChange={(e) =>
setFormData({ ...formData, password: e.currentTarget.value }) setFormData({ ...formData, password: e.currentTarget.value })
} }
@@ -110,10 +114,18 @@ const EditUserModal: React.FC<EditUserModalProps> = ({
Leave password empty to keep the current password Leave password empty to keep the current password
</Text> </Text>
<Group justify="flex-end" mt="md"> <Group justify="flex-end" mt="md">
<Button variant="default" onClick={onClose}> <Button
variant="default"
onClick={onClose}
data-testid="cancel-edit-user-button"
>
Cancel Cancel
</Button> </Button>
<Button onClick={() => void handleSubmit} loading={loading}> <Button
onClick={() => void handleSubmit}
loading={loading}
data-testid="confirm-edit-user-button"
>
Save Changes Save Changes
</Button> </Button>
</Group> </Group>

View File

@@ -63,6 +63,7 @@ const CreateWorkspaceModal: React.FC<CreateWorkspaceModalProps> = ({
<TextInput <TextInput
label="Workspace Name" label="Workspace Name"
placeholder="Enter workspace name" placeholder="Enter workspace name"
data-testid="workspace-name-input"
value={name} value={name}
onChange={(event) => setName(event.currentTarget.value)} onChange={(event) => setName(event.currentTarget.value)}
mb="md" mb="md"
@@ -74,10 +75,15 @@ const CreateWorkspaceModal: React.FC<CreateWorkspaceModalProps> = ({
variant="default" variant="default"
onClick={() => setCreateWorkspaceModalVisible(false)} onClick={() => setCreateWorkspaceModalVisible(false)}
disabled={loading} disabled={loading}
data-testid="cancel-create-workspace-button"
> >
Cancel Cancel
</Button> </Button>
<Button onClick={() => void handleSubmit} loading={loading}> <Button
onClick={() => void handleSubmit}
loading={loading}
data-testid="confirm-create-workspace-button"
>
Create Create
</Button> </Button>
</Group> </Group>

View File

@@ -28,10 +28,18 @@ const DeleteWorkspaceModal: React.FC<DeleteUserModalProps> = ({
permanently deleted. permanently deleted.
</Text> </Text>
<Group justify="flex-end" mt="xl"> <Group justify="flex-end" mt="xl">
<Button variant="default" onClick={onClose}> <Button
variant="default"
onClick={onClose}
data-testid="cancel-delete-workspace-button"
>
Cancel Cancel
</Button> </Button>
<Button color="red" onClick={() => void onConfirm}> <Button
color="red"
onClick={() => void onConfirm}
data-testid="confirm-delete-workspace-button"
>
Delete Workspace Delete Workspace
</Button> </Button>
</Group> </Group>