Merge pull request #14627 from overleaf/jel-new-alerts

[web] New notification styles

GitOrigin-RevId: ad8a102bbe1ab24be3fccc061f5bbf54912c77e4

services/web/test/frontend/shared/components/notification.test.tsx

@@ -0,0 +1,54 @@
+import { expect } from 'chai'
+import { screen, render } from '@testing-library/react'
+import Notification from '../../../../frontend/js/shared/components/notification'
+import * as eventTracking from '../../../../frontend/js/infrastructure/event-tracking'
+import sinon from 'sinon'
+
+describe('<Notification />', function () {
+  let sendMBSpy: sinon.SinonSpy
+
+  beforeEach(function () {
+    sendMBSpy = sinon.spy(eventTracking, 'sendMB')
+  })
+
+  afterEach(function () {
+    sendMBSpy.restore()
+  })
+
+  it('renders and is not dismissible by default', function () {
+    render(<Notification type="info" content={<p>A notification</p>} />)
+    screen.getByText('A notification')
+    expect(screen.queryByRole('button', { name: 'Close' })).to.be.null
+  })
+
+  it('renders with action', function () {
+    render(
+      <Notification
+        type="info"
+        content={<p>A notification</p>}
+        action={<a href="/">Action</a>}
+      />
+    )
+    screen.getByText('A notification')
+    screen.getByRole('link', { name: 'Action' })
+  })
+
+  it('renders with close button', function () {
+    render(
+      <Notification type="info" content={<p>A notification</p>} isDismissible />
+    )
+    screen.getByText('A notification')
+    screen.getByRole('button', { name: 'Close' })
+  })
+
+  it('renders with title', function () {
+    render(
+      <Notification
+        type="info"
+        content={<p>A notification</p>}
+        title="A title"
+      />
+    )
+    screen.getByText('A title')
+  })
+})