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; }