Merge pull request #399 from user-interviews/feature/UIDS-398-toast-object-messages

feature(UIDS-398): Allow Toast component to accept messages with a title prop

Author: frankhock

src/Toast/Toast.jsx

@@ -24,6 +24,7 @@ export default function Toast(props) {
               autoDismiss={props.autoDismiss}
               id={message.id}
               message={message.message}
+              title={message.title}
               type={message.type}
               onDismiss={props.onToastClosed}
             />
@@ -41,6 +42,7 @@ Toast.propTypes = {
     PropTypes.shape({
       id: PropTypes.string,
       message: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+      title: PropTypes.string,
       type: PropTypes.string,
     }),
   ).isRequired,

src/Toast/Toast.test.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { create } from 'react-test-renderer';
 
 import { Toast } from 'src/Toast';
+import { Alert } from 'src/Alert';
 
 describe('Toast', () => {
   test('no header classes', () => {
@@ -17,4 +18,34 @@ describe('Toast', () => {
     expect(props.className).toContain('Toast');
     expect(props.className).toContain('Toast--no-header');
   });
+
+  describe('when building alert props', () => {
+    const setup = (props) => create(
+      <Toast
+        messages={[
+          { id: '1', type: 'success', ...props },
+        ]}
+      />,
+    );
+
+    test('builds props from string message', () => {
+      const { root } = setup({ message: 'hello' });
+
+      expect(root.findByType(Alert).props.message).toBe('hello');
+    });
+
+    test('builds props from node message', () => {
+      const { root } = setup({ message: <div>hello</div> });
+
+      expect(root.findByType(Alert).props.message).toEqual(<div>hello</div>);
+    });
+
+    describe('when title prop is passed', () => {
+      test('builds title prop', () => {
+        const { root } = setup({ title: 'woohoo', message: 'you did it!' });
+
+        expect(root.findByType(Alert).props.title).toBe('woohoo');
+      });
+    });
+  });
 });