diff --git a/framework/default/ortoo-core/default/lwc/message/__tests__/message.test.js b/framework/default/ortoo-core/default/lwc/message/__tests__/message.test.js new file mode 100644 index 00000000000..267d1f75e69 --- /dev/null +++ b/framework/default/ortoo-core/default/lwc/message/__tests__/message.test.js @@ -0,0 +1,129 @@ +import { createElement } from 'lwc'; +import Message from 'c/message'; + +const MESSAGE_SELECTOR = '[data-ortoo-elem-id="messagebox-message"]'; +const ICON_SELECTOR = '[data-ortoo-elem-id="messagebox-icon"]'; +const CONTAINER_SELECTOR = '[data-ortoo-elem-id="messagebox-container"]'; + +describe('c-message', () => { + + beforeEach(() => { + const element = createElement('c-message', { + is: Message + }); + document.body.appendChild( element ); + }); + + afterEach(() => { + // The jsdom instance is shared across test cases in a single file so reset the DOM + while (document.body.firstChild) { + document.body.removeChild(document.body.firstChild); + } + }); + + it( 'Will render the message given', () => { + + const element = document.body.querySelector( 'c-message' ); + element.message = 'the message'; + + return Promise.resolve() + .then( () => + expect( element.shadowRoot.querySelector( MESSAGE_SELECTOR ).innerHTML ).toBe( 'the message' ) + ); + }); + + it( 'When no message is set, will not render anything', () => { + + const element = document.body.querySelector( 'c-message' ); + + return Promise.resolve() + .then( () => + expect( element.shadowRoot.querySelector( MESSAGE_SELECTOR ) ).toBe( null ) + ); + }); + + it( 'When message is set to an empty string, will not render anything', () => { + + const element = document.body.querySelector( 'c-message' ); + element.message = ''; + + return Promise.resolve() + .then( () => + expect( element.shadowRoot.querySelector( MESSAGE_SELECTOR ) ).toBe( null ) + ); + }); + + it( 'When message is set to a blank string, will not render anything', () => { + + const element = document.body.querySelector( 'c-message' ); + element.message = ' '; + + return Promise.resolve() + .then( () => + expect( element.shadowRoot.querySelector( MESSAGE_SELECTOR ) ).toBe( null ) + ); + }); + + it( 'When message is set to a 0 string, will render it', () => { + + const element = document.body.querySelector( 'c-message' ); + element.message = '0'; + + return Promise.resolve() + .then( () => + expect( element.shadowRoot.querySelector( MESSAGE_SELECTOR ).innerHTML ).toBe( '0' ) + ); + }); + + it( 'When variant is set to error, will set up an error message', () => { + + const element = document.body.querySelector( 'c-message' ); + element.message = 'unimportant'; + element.variant = 'error'; + + return Promise.resolve() + .then( () => { + expect( element.shadowRoot.querySelector( ICON_SELECTOR ).iconName ).toBe( 'utility:error' ) + expect( element.shadowRoot.querySelector( CONTAINER_SELECTOR ).className ).toContain( 'slds-theme--error' ) + }); + }); + + it( 'When variant is set to info, will set up an info message', () => { + + const element = document.body.querySelector( 'c-message' ); + element.message = 'unimportant'; + element.variant = 'info'; + + return Promise.resolve() + .then( () => { + expect( element.shadowRoot.querySelector( ICON_SELECTOR ).iconName ).toBe( 'utility:info' ) + expect( element.shadowRoot.querySelector( CONTAINER_SELECTOR ).className ).toContain( 'slds-theme--info' ) + }); + }); + + it( 'When variant is set to warning, will set up an warning message', () => { + + const element = document.body.querySelector( 'c-message' ); + element.message = 'unimportant'; + element.variant = 'warning'; + + return Promise.resolve() + .then( () => { + expect( element.shadowRoot.querySelector( ICON_SELECTOR ).iconName ).toBe( 'utility:warning' ) + expect( element.shadowRoot.querySelector( CONTAINER_SELECTOR ).className ).toContain( 'slds-theme--warning' ) + }); + }); + + it( 'When variant is set to success, will set up an success message', () => { + + const element = document.body.querySelector( 'c-message' ); + element.message = 'unimportant'; + element.variant = 'success'; + + return Promise.resolve() + .then( () => { + expect( element.shadowRoot.querySelector( ICON_SELECTOR ).iconName ).toBe( 'utility:success' ) + expect( element.shadowRoot.querySelector( CONTAINER_SELECTOR ).className ).toContain( 'slds-theme--success' ) + }); + }); +}); \ No newline at end of file diff --git a/framework/default/ortoo-core/default/lwc/message/message.html b/framework/default/ortoo-core/default/lwc/message/message.html new file mode 100644 index 00000000000..e1c35f9a3e7 --- /dev/null +++ b/framework/default/ortoo-core/default/lwc/message/message.html @@ -0,0 +1,13 @@ + diff --git a/framework/default/ortoo-core/default/lwc/message/message.js b/framework/default/ortoo-core/default/lwc/message/message.js new file mode 100644 index 00000000000..ccf0d3d4cb0 --- /dev/null +++ b/framework/default/ortoo-core/default/lwc/message/message.js @@ -0,0 +1,50 @@ +import { LightningElement, api } from 'lwc'; +import configureElementIdGenerator from 'c/elementIdGenerator'; + +export default class Message extends LightningElement { + + @api message; + @api variant; + + @api ortooElemIdPrefix = 'messagebox'; + + ortooIdConfiguration = { + messageId: 'message', + iconId: 'icon', + containerId: 'container', + } + + connectedCallback() { + configureElementIdGenerator( this ); + } + + variantToClassMapping = { + error: 'slds-theme--error', + warning: 'slds-theme--warning', + info: 'slds-theme--info', + success: 'slds-theme--success', + } + + variantToIconMapping = { + error: 'utility:error', + warning: 'utility:warning', + info: 'utility:info', + success: 'utility:success', + } + + get messagePopulated() { + return ( this.message && !/^\s*$/.test( this.message ) ); + } + + get themeClass() { + return this.variantToClassMapping[ this.variant ]; + } + + get topLevelClasses() { + return this.themeClass+' slds-notify--toast slds-notify slds-notify--toast forceToastMessage'; + } + + get iconName() { + return this.variantToIconMapping[ this.variant ]; + } +} \ No newline at end of file diff --git a/framework/default/ortoo-core/default/lwc/message/message.js-meta.xml b/framework/default/ortoo-core/default/lwc/message/message.js-meta.xml new file mode 100644 index 00000000000..884004a97fa --- /dev/null +++ b/framework/default/ortoo-core/default/lwc/message/message.js-meta.xml @@ -0,0 +1,5 @@ + + + 52.0 + false + \ No newline at end of file