test: update snackbar with variant and data-test attributes
This commit is contained in:
@@ -14,11 +14,12 @@ export class BasePage {
|
||||
*/
|
||||
constructor(page) {
|
||||
this.page = page;
|
||||
this.snackbar = this.page.locator('.notistack-MuiContent');
|
||||
this.snackbar = page.locator('*[data-test^="snackbar"]');
|
||||
}
|
||||
|
||||
/**
|
||||
* Finds the latest snackbar message and extracts relevant data
|
||||
* @param {string | undefined} testId
|
||||
* @returns {(
|
||||
* null | {
|
||||
* variant: SnackbarVariant,
|
||||
@@ -27,25 +28,13 @@ export class BasePage {
|
||||
* }
|
||||
* )}
|
||||
*/
|
||||
async getSnackbarData () {
|
||||
if (await this.snackbar.count() === 0) {
|
||||
return null;
|
||||
}
|
||||
const snack = this.snackbar.first(); // uses flex: column-reverse
|
||||
const classList = await snack.evaluate(node => Array.from(node.classList));
|
||||
/** @type SnackbarVariant */
|
||||
let variant = 'default';
|
||||
if (classList.includes('notistack-MuiContent-success')) {
|
||||
variant = 'success'
|
||||
} else if (classList.includes('notistack-MuiContent-warning')) {
|
||||
variant = 'warning'
|
||||
} else if (classList.includes('notistack-MuiContent-error')) {
|
||||
variant = 'error'
|
||||
} else if (classList.includes('notistack-MuiContent-info')) {
|
||||
variant = 'info'
|
||||
async getSnackbarData (testId) {
|
||||
if (!testId) {
|
||||
testId = 'snackbar';
|
||||
}
|
||||
const snack = this.page.getByTestId(testId);
|
||||
return {
|
||||
variant,
|
||||
variant: await snack.getAttribute('data-snackbar-variant'),
|
||||
text: await snack.evaluate(node => node.innerText),
|
||||
dataset: await snack.evaluate(node => {
|
||||
function getChildren (n) {
|
||||
|
@@ -35,10 +35,9 @@ test.describe('User management page', () => {
|
||||
'option', { name: 'Admin' }
|
||||
).click();
|
||||
await adminCreateUserPage.createButton.click();
|
||||
await adminUsersPage.snackbar.waitFor({
|
||||
state: 'attached'
|
||||
});
|
||||
const snackbar = await adminUsersPage.getSnackbarData();
|
||||
const snackbar = await adminUsersPage.getSnackbarData(
|
||||
'snackbar-create-user-success'
|
||||
);
|
||||
await expect(snackbar.variant).toBe('success');
|
||||
await adminUsersPage.closeSnackbar();
|
||||
}
|
||||
@@ -65,10 +64,9 @@ test.describe('User management page', () => {
|
||||
await adminEditUserPage.fullNameInput.fill(newUserInfo.fullName);
|
||||
await adminEditUserPage.updateButton.click();
|
||||
|
||||
await adminUsersPage.snackbar.waitFor({
|
||||
state: 'attached'
|
||||
});
|
||||
const snackbar = await adminUsersPage.getSnackbarData();
|
||||
const snackbar = await adminUsersPage.getSnackbarData(
|
||||
'snackbar-edit-user-success'
|
||||
);
|
||||
await expect(snackbar.variant).toBe('success');
|
||||
await adminUsersPage.closeSnackbar();
|
||||
|
||||
@@ -86,10 +84,10 @@ test.describe('User management page', () => {
|
||||
await adminUsersPage.clickDeleteUser(userRow);
|
||||
const modal = adminUsersPage.deleteUserModal;
|
||||
await modal.deleteButton.click();
|
||||
await adminUsersPage.snackbar.waitFor({
|
||||
state: 'attached'
|
||||
});
|
||||
const snackbar = await adminUsersPage.getSnackbarData();
|
||||
|
||||
const snackbar = await adminUsersPage.getSnackbarData(
|
||||
'snackbar-delete-user-success'
|
||||
);
|
||||
await expect(snackbar.variant).toBe('success');
|
||||
await adminUsersPage.closeSnackbar();
|
||||
await expect(userRow).not.toBeVisible(false);
|
||||
@@ -115,10 +113,9 @@ test.describe('User management page', () => {
|
||||
'option', { name: 'Admin' }
|
||||
).click();
|
||||
await adminCreateUserPage.createButton.click();
|
||||
await adminUsersPage.snackbar.waitFor({
|
||||
state: 'attached'
|
||||
});
|
||||
const snackbar = await adminUsersPage.getSnackbarData();
|
||||
const snackbar = await adminUsersPage.getSnackbarData(
|
||||
'snackbar-create-user-success'
|
||||
);
|
||||
await expect(snackbar.variant).toBe('success');
|
||||
await adminUsersPage.closeSnackbar();
|
||||
}
|
||||
@@ -132,10 +129,9 @@ test.describe('User management page', () => {
|
||||
await adminUsersPage.clickDeleteUser(userRow);
|
||||
const modal = adminUsersPage.deleteUserModal;
|
||||
await modal.deleteButton.click();
|
||||
await adminUsersPage.snackbar.waitFor({
|
||||
state: 'attached'
|
||||
});
|
||||
const snackbar = await adminUsersPage.getSnackbarData();
|
||||
const snackbar = await adminUsersPage.getSnackbarData(
|
||||
'snackbar-delete-user-success'
|
||||
);
|
||||
await expect(snackbar).not.toBeNull();
|
||||
await expect(snackbar.variant).toBe('success');
|
||||
await adminUsersPage.closeSnackbar();
|
||||
@@ -163,6 +159,7 @@ test.describe('User management page', () => {
|
||||
happen here, i.e. if this should create a new user, stay the
|
||||
same, un-delete the user, or something else
|
||||
*/
|
||||
// await adminUsersPage.getSnackbarData('snackbar-error');
|
||||
await adminUsersPage.closeSnackbar();
|
||||
}
|
||||
);
|
||||
@@ -187,10 +184,9 @@ test.describe('User management page', () => {
|
||||
'option', { name: 'Admin' }
|
||||
).click();
|
||||
await adminCreateUserPage.createButton.click();
|
||||
await adminUsersPage.snackbar.waitFor({
|
||||
state: 'attached'
|
||||
});
|
||||
const snackbar = await adminUsersPage.getSnackbarData();
|
||||
const snackbar = await adminUsersPage.getSnackbarData(
|
||||
'snackbar-create-user-success'
|
||||
);
|
||||
await expect(snackbar.variant).toBe('success');
|
||||
await adminUsersPage.closeSnackbar();
|
||||
}
|
||||
@@ -209,11 +205,9 @@ test.describe('User management page', () => {
|
||||
'option', { name: 'Admin' }
|
||||
).click();
|
||||
await adminCreateUserPage.createButton.click();
|
||||
await adminCreateUserPage.snackbar.waitFor({
|
||||
state: 'attached'
|
||||
});
|
||||
|
||||
await expect(page.url()).toBe(createUserPageUrl);
|
||||
const snackbar = await adminUsersPage.getSnackbarData();
|
||||
const snackbar = await adminUsersPage.getSnackbarData('snackbar-error');
|
||||
await expect(snackbar.variant).toBe('error');
|
||||
await adminUsersPage.closeSnackbar();
|
||||
}
|
||||
@@ -241,10 +235,9 @@ test.describe('User management page', () => {
|
||||
'option', { name: 'Admin' }
|
||||
).click();
|
||||
await adminCreateUserPage.createButton.click();
|
||||
await adminUsersPage.snackbar.waitFor({
|
||||
state: 'attached'
|
||||
});
|
||||
const snackbar = await adminUsersPage.getSnackbarData();
|
||||
const snackbar = await adminUsersPage.getSnackbarData(
|
||||
'snackbar-create-user-success'
|
||||
);
|
||||
await expect(snackbar.variant).toBe('success');
|
||||
await adminUsersPage.closeSnackbar();
|
||||
}
|
||||
@@ -262,10 +255,9 @@ test.describe('User management page', () => {
|
||||
'option', { name: 'Admin' }
|
||||
).click();
|
||||
await adminCreateUserPage.createButton.click();
|
||||
await adminUsersPage.snackbar.waitFor({
|
||||
state: 'attached'
|
||||
});
|
||||
const snackbar = await adminUsersPage.getSnackbarData();
|
||||
const snackbar = await adminUsersPage.getSnackbarData(
|
||||
'snackbar-create-user-success'
|
||||
);
|
||||
await expect(snackbar.variant).toBe('success');
|
||||
await adminUsersPage.closeSnackbar();
|
||||
}
|
||||
@@ -282,10 +274,9 @@ test.describe('User management page', () => {
|
||||
const editPageUrl = page.url();
|
||||
await adminEditUserPage.updateButton.click();
|
||||
|
||||
await adminUsersPage.snackbar.waitFor({
|
||||
state: 'attached'
|
||||
});
|
||||
const snackbar = await adminUsersPage.getSnackbarData();
|
||||
const snackbar = await adminUsersPage.getSnackbarData(
|
||||
'snackbar-error'
|
||||
);
|
||||
await expect(snackbar.variant).toBe('error');
|
||||
await adminUsersPage.closeSnackbar();
|
||||
await expect(page.url()).toBe(editPageUrl);
|
||||
|
@@ -6,13 +6,13 @@ import Paper from '@mui/material/Paper';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import LoadingButton from '@mui/lab/LoadingButton';
|
||||
import { useMutation } from '@apollo/client';
|
||||
import { useSnackbar } from 'notistack';
|
||||
|
||||
import { CREATE_APP_CONFIG } from 'graphql/mutations/create-app-config';
|
||||
import { UPDATE_APP_CONFIG } from 'graphql/mutations/update-app-config';
|
||||
|
||||
import Form from 'components/Form';
|
||||
import { Switch } from './style';
|
||||
import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
|
||||
|
||||
type AdminApplicationSettingsProps = {
|
||||
appKey: string;
|
||||
@@ -36,7 +36,7 @@ function AdminApplicationSettings(
|
||||
);
|
||||
|
||||
const formatMessage = useFormatMessage();
|
||||
const { enqueueSnackbar } = useSnackbar();
|
||||
const enqueueSnackbar = useEnqueueSnackbar();
|
||||
|
||||
const handleSubmit = async (values: any) => {
|
||||
try {
|
||||
@@ -55,6 +55,9 @@ function AdminApplicationSettings(
|
||||
}
|
||||
enqueueSnackbar(formatMessage('adminAppsSettings.successfullySaved'), {
|
||||
variant: 'success',
|
||||
SnackbarProps: {
|
||||
'data-test': 'snackbar-save-admin-apps-settings-success'
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
throw new Error('Failed while saving!');
|
||||
|
@@ -15,7 +15,12 @@ const ApolloProvider = (props: ApolloProviderProps): React.ReactElement => {
|
||||
|
||||
const onError = React.useCallback(
|
||||
(message) => {
|
||||
enqueueSnackbar(message, { variant: 'error' });
|
||||
enqueueSnackbar(message, {
|
||||
variant: 'error',
|
||||
SnackbarProps: {
|
||||
'data-test': 'snackbar-error'
|
||||
}
|
||||
});
|
||||
},
|
||||
[enqueueSnackbar]
|
||||
);
|
||||
|
@@ -82,6 +82,9 @@ function AppConnectionRow(props: AppConnectionRowProps): React.ReactElement {
|
||||
|
||||
enqueueSnackbar(formatMessage('connection.deletedMessage'), {
|
||||
variant: 'success',
|
||||
SnackbarProps: {
|
||||
'data-test': 'snackbar-delete-connection-success'
|
||||
}
|
||||
});
|
||||
} else if (action.type === 'test') {
|
||||
setVerificationVisible(true);
|
||||
|
@@ -31,6 +31,9 @@ export default function DeleteRoleButton(props: DeleteRoleButtonProps) {
|
||||
setShowConfirmation(false);
|
||||
enqueueSnackbar(formatMessage('deleteRoleButton.successfullyDeleted'), {
|
||||
variant: 'success',
|
||||
SnackbarProps: {
|
||||
'data-test': 'snackbar-delete-role-success'
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
throw new Error('Failed while deleting!');
|
||||
|
@@ -29,6 +29,9 @@ export default function DeleteUserButton(props: DeleteUserButtonProps) {
|
||||
setShowConfirmation(false);
|
||||
enqueueSnackbar(formatMessage('deleteUserButton.successfullyDeleted'), {
|
||||
variant: 'success',
|
||||
SnackbarProps: {
|
||||
'data-test': 'snackbar-delete-user-success'
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
throw new Error('Failed while deleting!');
|
||||
|
@@ -36,6 +36,9 @@ export default function ContextMenu(
|
||||
|
||||
enqueueSnackbar(formatMessage('flow.successfullyDuplicated'), {
|
||||
variant: 'success',
|
||||
SnackbarProps: {
|
||||
'data-test': 'snackbar-duplicate-flow-success'
|
||||
}
|
||||
});
|
||||
|
||||
onClose();
|
||||
|
@@ -43,6 +43,9 @@ export default function ResetPasswordForm() {
|
||||
|
||||
enqueueSnackbar(formatMessage('resetPasswordForm.passwordUpdated'), {
|
||||
variant: 'success',
|
||||
SnackbarProps: {
|
||||
'data-test': 'snackbar-reset-password-success'
|
||||
}
|
||||
});
|
||||
|
||||
navigate(URLS.LOGIN);
|
||||
|
@@ -20,7 +20,11 @@ export default function useEnqueueSnackbar() {
|
||||
...(options || {}) as Record<string, unknown>,
|
||||
SnackbarProps: {
|
||||
onClick: () => closeSnackbar(key),
|
||||
...(options.SnackbarProps || {}) as Record<string, unknown>
|
||||
...({
|
||||
'data-test': 'snackbar', // keep above options.snackbarProps
|
||||
'data-snackbar-variant': `${options.variant}` || 'default',
|
||||
}) as Record<string, string>,
|
||||
...(options.SnackbarProps || {}) as Record<string, unknown>,
|
||||
}
|
||||
}
|
||||
);
|
||||
|
@@ -64,6 +64,9 @@ function RoleMappings({ provider, providerLoading }: RoleMappingsProps) {
|
||||
});
|
||||
enqueueSnackbar(formatMessage('roleMappingsForm.successfullySaved'), {
|
||||
variant: 'success',
|
||||
SnackbarProps: {
|
||||
'data-test': 'snackbar-update-role-mappings-success'
|
||||
}
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
|
@@ -93,6 +93,9 @@ function SamlConfiguration({
|
||||
|
||||
enqueueSnackbar(formatMessage('authenticationForm.successfullySaved'), {
|
||||
variant: 'success',
|
||||
SnackbarProps: {
|
||||
'data-test': 'snackbar-save-saml-provider-success'
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
throw new Error('Failed while saving!');
|
||||
|
@@ -43,6 +43,9 @@ export default function CreateRole(): React.ReactElement {
|
||||
|
||||
enqueueSnackbar(formatMessage('createRole.successfullyCreated'), {
|
||||
variant: 'success',
|
||||
SnackbarProps: {
|
||||
'data-test': 'snackbar-create-role-success'
|
||||
}
|
||||
});
|
||||
|
||||
navigate(URLS.ROLES);
|
||||
|
@@ -47,6 +47,10 @@ export default function CreateUser(): React.ReactElement {
|
||||
|
||||
enqueueSnackbar(formatMessage('createUser.successfullyCreated'), {
|
||||
variant: 'success',
|
||||
persist: true,
|
||||
SnackbarProps: {
|
||||
'data-test': 'snackbar-create-user-success',
|
||||
}
|
||||
});
|
||||
|
||||
navigate(URLS.USERS);
|
||||
|
@@ -53,6 +53,9 @@ export default function EditRole(): React.ReactElement {
|
||||
|
||||
enqueueSnackbar(formatMessage('editRole.successfullyUpdated'), {
|
||||
variant: 'success',
|
||||
SnackbarProps: {
|
||||
'data-test': 'snackbar-edit-role-success'
|
||||
}
|
||||
});
|
||||
|
||||
navigate(URLS.ROLES);
|
||||
|
@@ -55,6 +55,10 @@ export default function EditUser(): React.ReactElement {
|
||||
|
||||
enqueueSnackbar(formatMessage('editUser.successfullyUpdated'), {
|
||||
variant: 'success',
|
||||
SnackbarProps: {
|
||||
'data-test': 'snackbar-edit-user-success',
|
||||
persist: true
|
||||
}
|
||||
});
|
||||
|
||||
navigate(URLS.USERS);
|
||||
|
@@ -78,6 +78,9 @@ function ProfileSettings() {
|
||||
|
||||
enqueueSnackbar(formatMessage('profileSettings.updatedProfile'), {
|
||||
variant: 'success',
|
||||
SnackbarProps: {
|
||||
'data-test': 'snackbar-update-profile-settings-success'
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
|
@@ -128,6 +128,9 @@ export default function UserInterface(): React.ReactElement {
|
||||
|
||||
enqueueSnackbar(formatMessage('userInterfacePage.successfullyUpdated'), {
|
||||
variant: 'success',
|
||||
SnackbarProps: {
|
||||
'data-test': 'snackbar-update-user-interface-success'
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
throw new Error('Failed while updating!');
|
||||
|
Reference in New Issue
Block a user