SDA-3237 Notifications re-design

2025-02-25 18:55:29 -06:00 · 2021-07-16 17:26:13 +02:00
parent dcf104d748
commit 49c436f60e
16 changed files with 1769 additions and 1247 deletions
--- a/spec/notificationComp.spec.ts
+++ b/spec/notificationComp.spec.ts
@@ -0,0 +1,121 @@
+import { shallow } from 'enzyme';
+import * as React from 'react';
+import NotificationComp from '../src/renderer/components/notification-comp';
+import { Themes } from '../src/renderer/components/notification-settings';
+import { ipcRenderer } from './__mocks__/electron';
+
+const IPC_RENDERER_NOTIFICATION_DATA_CHANNEL = 'notification-data';
+describe('Toast notification component', () => {
+  const defaultProps = {
+    title: 'Oompa Loompa',
+  };
+  const spy = jest.spyOn(NotificationComp.prototype, 'setState');
+  let wrapper;
+  beforeEach(() => {
+    wrapper = shallow(React.createElement(NotificationComp));
+  });
+
+  it('should render correctly', () => {
+    ipcRenderer.send(IPC_RENDERER_NOTIFICATION_DATA_CHANNEL, defaultProps);
+    expect(spy).toBeCalledWith(defaultProps);
+    const container = wrapper.find('.title');
+    expect(container.text()).toBe(defaultProps.title);
+  });
+
+  it('should render Symphony logo if no image provided', () => {
+    const logo = '';
+    ipcRenderer.send(IPC_RENDERER_NOTIFICATION_DATA_CHANNEL, {
+      ...defaultProps,
+      logo,
+    });
+    const defaultLogoContainer = wrapper.find('.default-logo');
+    expect(defaultLogoContainer).toBeTruthy();
+    const imageContainer = wrapper.find('.profile-picture');
+    expect(imageContainer.exists()).toBeFalsy();
+  });
+
+  it('should render Symphony logo if Symphony default image provided', () => {
+    const logo = './default.png';
+    ipcRenderer.send(IPC_RENDERER_NOTIFICATION_DATA_CHANNEL, {
+      ...defaultProps,
+      logo,
+    });
+    const defaultLogoContainer = wrapper.find('.default-logo');
+    expect(defaultLogoContainer).toBeTruthy();
+    const imageContainer = wrapper.find('.profile-picture');
+    expect(imageContainer.exists()).toBeFalsy();
+  });
+
+  it('should flash in a custom way when theme is set', () => {
+    const flash = true;
+    const theme = Themes.DARK;
+    ipcRenderer.send(IPC_RENDERER_NOTIFICATION_DATA_CHANNEL, {
+      ...defaultProps,
+      flash,
+      theme,
+    });
+    const flashingNotification = wrapper.find(`.${theme}-flashing`);
+    expect(flashingNotification.exists()).toBeTruthy();
+  });
+
+  it('should display ext badge when external', () => {
+    let externalBadge = wrapper.find('.ext-badge-container');
+    expect(externalBadge.exists()).toBeFalsy();
+    const isExternal = true;
+    ipcRenderer.send(IPC_RENDERER_NOTIFICATION_DATA_CHANNEL, {
+      ...defaultProps,
+      isExternal,
+    });
+    externalBadge = wrapper.find('.ext-badge-container');
+    expect(externalBadge.exists()).toBeTruthy();
+  });
+
+  it('should flash as a mention when mention sent', () => {
+    const theme = Themes.DARK;
+    const flash = true;
+    const hasMention = true;
+    const themedMentionFlashing = `.${theme}-mention-flashing`;
+    let themedToastNotification = wrapper.find(themedMentionFlashing);
+    expect(themedToastNotification.exists()).toBeFalsy();
+    ipcRenderer.send(IPC_RENDERER_NOTIFICATION_DATA_CHANNEL, {
+      ...defaultProps,
+      hasMention,
+      theme,
+      flash,
+    });
+    themedToastNotification = wrapper.find(themedMentionFlashing);
+    expect(themedToastNotification.exists()).toBeTruthy();
+  });
+
+  it('should flash as mention even if it is a message from an external user', () => {
+    const theme = Themes.DARK;
+    const isExternal = true;
+    const hasMention = true;
+    const flash = true;
+    const themedMentionFlashing = `.${theme}-ext-mention-flashing`;
+    let themedToastNotification = wrapper.find(themedMentionFlashing);
+    expect(themedToastNotification.exists()).toBeFalsy();
+    ipcRenderer.send(IPC_RENDERER_NOTIFICATION_DATA_CHANNEL, {
+      ...defaultProps,
+      hasMention,
+      theme,
+      isExternal,
+      flash,
+    });
+    themedToastNotification = wrapper.find(themedMentionFlashing);
+    expect(themedToastNotification.exists()).toBeTruthy();
+  });
+
+  it('should display reply button when requested', () => {
+    const hasReply = true;
+    const replyButtonSelector = `.action-button`;
+    let toastNotificationReplyButton = wrapper.find(replyButtonSelector);
+    expect(toastNotificationReplyButton.exists()).toBeFalsy();
+    ipcRenderer.send(IPC_RENDERER_NOTIFICATION_DATA_CHANNEL, {
+      ...defaultProps,
+      hasReply,
+    });
+    toastNotificationReplyButton = wrapper.find(replyButtonSelector);
+    expect(toastNotificationReplyButton.exists()).toBeTruthy();
+  });
+});