diff --git a/packages/vkui/src/components/Alert/Alert.test.tsx b/packages/vkui/src/components/Alert/Alert.test.tsx
index f8f1f327c8..60f78c8949 100644
--- a/packages/vkui/src/components/Alert/Alert.test.tsx
+++ b/packages/vkui/src/components/Alert/Alert.test.tsx
@@ -2,6 +2,7 @@ import { act } from 'react';
import { render, screen } from '@testing-library/react';
import { noop } from '@vkontakte/vkjs';
import { ViewWidth } from '../../lib/adaptivity';
+import { getDocumentBody } from '../../lib/dom';
import { Platform } from '../../lib/platform';
import {
baselineComponent,
@@ -12,6 +13,12 @@ import {
import { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';
import { ConfigProvider } from '../ConfigProvider/ConfigProvider';
import { Alert, type AlertProps } from './Alert';
+import styles from './Alert.module.css';
+import buttonStyles from '../Button/Button.module.css';
+import captionStyles from '../Typography/Caption/Caption.module.css';
+import footnoteStyles from '../Typography/Footnote/Footnote.module.css';
+import titleStyles from '../Typography/Title/Title.module.css';
+import typographyStyles from '../Typography/Typography.module.css';
describe('Alert', () => {
fakeTimers();
@@ -129,6 +136,91 @@ describe('Alert', () => {
expect(screen.getByTestId('allow-test-id')).toHaveTextContent('Allow');
expect(screen.getByTestId('deny-test-id')).toHaveTextContent('Deny');
});
+ it.each([
+ {
+ href: '#',
+ expectedTag: 'A',
+ },
+ {
+ href: undefined,
+ expectedTag: 'BUTTON',
+ },
+ ])(
+ 'action should use "$expectedTag" tag when use href "$href" ',
+ async ({ href, expectedTag }) => {
+ const result = render(
+
+
+ ,
+ );
+ await waitCSSKeyframesAnimation(result.getByRole('alertdialog'), {
+ runOnlyPendingTimers: true,
+ });
+ expect(screen.getByTestId('allow-test-id').tagName).toBe(expectedTag);
+ },
+ );
+
+ it.each([
+ {
+ mode: 'destructive' as const,
+ className: styles['Alert__action--mode-destructive'],
+ },
+ {
+ mode: 'cancel' as const,
+ className: styles['Alert__action--mode-cancel'],
+ },
+ ])(
+ 'should have className "$className" with mode "$mode" in IOS platform',
+ async ({ mode, className }) => {
+ const result = render(
+
+
+ ,
+ );
+ await waitCSSKeyframesAnimation(result.getByRole('alertdialog'), {
+ runOnlyPendingTimers: true,
+ });
+ expect(screen.getByTestId('allow-test-id')).toHaveClass(className);
+ },
+ );
+
+ it.each([
+ {
+ mode: 'cancel' as const,
+ className: styles['Alert__button--mode-cancel'],
+ buttonClassName: buttonStyles['Button--mode-secondary'],
+ },
+ {
+ mode: 'destructive' as const,
+ className: undefined,
+ buttonClassName: buttonStyles['Button--mode-primary'],
+ },
+ ])(
+ 'should have className "$className" ans "$buttonClassName" with mode "$mode" in VKCOM platform',
+ async ({ mode, className, buttonClassName }) => {
+ const result = render(
+
+
+ ,
+ );
+ await waitCSSKeyframesAnimation(result.getByRole('alertdialog'), {
+ runOnlyPendingTimers: true,
+ });
+ className && expect(screen.getByTestId('allow-test-id')).toHaveClass(className);
+ expect(screen.getByTestId('allow-test-id')).toHaveClass(buttonClassName);
+ },
+ );
it.each(['outside', 'inside'])(
'passes data-testid to dismiss button in %s dismissButtonMode',
@@ -149,4 +241,70 @@ describe('Alert', () => {
);
},
);
+
+ it.each([
+ {
+ align: 'left' as const,
+ className: styles['Alert__actions--align-left'],
+ },
+ {
+ align: 'center' as const,
+ className: styles['Alert__actions--align-center'],
+ },
+ {
+ align: 'right' as const,
+ className: styles['Alert__actions--align-right'],
+ },
+ ])(
+ 'actions wrapper should have className "$className" when use align "$align"',
+ async ({ align, className }) => {
+ const result = render();
+ await waitCSSKeyframesAnimation(result.getByRole('alertdialog'), {
+ runOnlyPendingTimers: true,
+ });
+ const actionsWrapper = getDocumentBody().getElementsByClassName(styles['Alert__actions'])[0];
+ expect(actionsWrapper).toHaveClass(className);
+ },
+ );
+
+ it.each([
+ {
+ header: 'Header',
+ headerClassNames: [titleStyles['Title--level-3'], typographyStyles['Typography--weight-1']],
+ text: 'Text',
+ textClassNames: [captionStyles['Caption--level-1']],
+ platform: Platform.IOS,
+ },
+ {
+ header: 'Header',
+ headerClassNames: [titleStyles['Title--level-2'], typographyStyles['Typography--weight-2']],
+ text: 'Text',
+ textClassNames: [footnoteStyles['Footnote']],
+ platform: Platform.VKCOM,
+ },
+ {
+ header: 'Header',
+ headerClassNames: [titleStyles['Title--level-2'], typographyStyles['Typography--weight-2']],
+ text: 'Text',
+ textClassNames: [typographyStyles['Typography--weight-3']],
+ platform: Platform.ANDROID,
+ },
+ ])(
+ `should have header classNames "$headerClassNames" and text classNames "$textClassNames" when use platform "$platform"`,
+ async ({ header, text, headerClassNames, textClassNames, platform }) => {
+ const result = render(
+
+
+ ,
+ );
+ await waitCSSKeyframesAnimation(result.getByRole('alertdialog'), {
+ runOnlyPendingTimers: true,
+ });
+ const headerElement = result.container.getElementsByClassName(styles['Alert__header'])[0];
+ const textElement = result.container.getElementsByClassName(styles['Alert__text'])[0];
+
+ headerClassNames.forEach((className) => expect(headerElement).toHaveClass(className));
+ textClassNames.forEach((className) => expect(textElement).toHaveClass(className));
+ },
+ );
});