diff --git a/packages/react/src/components/Notification/Notification-test.js b/packages/react/src/components/Notification/__tests__/Notification-test.js
similarity index 94%
rename from packages/react/src/components/Notification/Notification-test.js
rename to packages/react/src/components/Notification/__tests__/Notification-test.js
index 33f482a43a64..f4173f7d9da2 100644
--- a/packages/react/src/components/Notification/Notification-test.js
+++ b/packages/react/src/components/Notification/__tests__/Notification-test.js
@@ -12,7 +12,7 @@ import {
ToastNotification,
InlineNotification,
ActionableNotification,
-} from './Notification';
+} from '../Notification';
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
@@ -55,6 +55,14 @@ describe('NotificationButton', () => {
});
describe('ToastNotification', () => {
+ it('should render', () => {
+ const { asFragment } = render(
+
+ );
+
+ expect(asFragment()).toMatchSnapshot();
+ });
+
it('should have role=status by default', () => {
const { container } = render(
@@ -178,6 +186,14 @@ describe('ToastNotification', () => {
});
describe('InlineNotification', () => {
+ it('should render', () => {
+ const { asFragment } = render(
+
+ );
+
+ expect(asFragment()).toMatchSnapshot();
+ });
+
it('should have role=status by default', () => {
const { container } = render(
@@ -300,6 +316,14 @@ describe('InlineNotification', () => {
});
describe('ActionableNotification', () => {
+ it('should render', () => {
+ const { asFragment } = render(
+
+ );
+
+ expect(asFragment()).toMatchSnapshot();
+ });
+
it('uses role=alertdialog', () => {
const { container } = render(
diff --git a/packages/react/src/components/Notification/__tests__/__snapshots__/Notification-test.js.snap b/packages/react/src/components/Notification/__tests__/__snapshots__/Notification-test.js.snap
new file mode 100644
index 000000000000..df3b8a6c8922
--- /dev/null
+++ b/packages/react/src/components/Notification/__tests__/__snapshots__/Notification-test.js.snap
@@ -0,0 +1,230 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ActionableNotification should render 1`] = `
+
+
+
+ Focus sentinel
+
+
+
+
+
+
+
+ Focus sentinel
+
+
+
+`;
+
+exports[`InlineNotification should render 1`] = `
+
+
+
+
+
+
+ Notification title
+
+
+
+
+
+
+`;
+
+exports[`ToastNotification should render 1`] = `
+
+
+
+
+
+ Notification title
+
+
+
+
+
+`;
diff --git a/packages/styles/scss/components/notification/_toast-notification.scss b/packages/styles/scss/components/notification/_toast-notification.scss
index 2c055d2e0cf2..b87338ff3542 100644
--- a/packages/styles/scss/components/notification/_toast-notification.scss
+++ b/packages/styles/scss/components/notification/_toast-notification.scss
@@ -145,6 +145,7 @@
}
.#{$prefix}--toast-notification__details {
+ margin-block-end: $spacing-05;
margin-inline-end: $spacing-05;
}
@@ -212,7 +213,6 @@
@include type-style('body-compact-01');
color: $text-inverse;
- margin-block-end: $spacing-05;
padding-block-start: $spacing-03;
}