forked from apex-enterprise-patterns/fflib-apex-common
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request apex-enterprise-patterns#4 from OrtooApps/feature/…
…add-initial-base-lwcs Feature/add initial base lwcs
- Loading branch information
Showing
37 changed files
with
22,380 additions
and
9 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,2 @@ | ||
#!/bin/sh | ||
. "$(dirname "$0")/_/husky.sh" | ||
|
||
npm run precommit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
152 changes: 152 additions & 0 deletions
152
...rk/default/ortoo-core/default/lwc/confirmationDialog/__tests__/confirmationDialog.test.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,152 @@ | ||
import { createElement } from 'lwc'; | ||
import ConfirmationDialog from 'c/confirmationDialog'; | ||
|
||
describe('c-confirmation-dialog', () => { | ||
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('When set to visible, with a title, contains a div with the title, directing it to the title slot of the modal', () => { | ||
const element = createElement('c-confirmation-dialog', { | ||
is: ConfirmationDialog | ||
}); | ||
element.visible = true; | ||
element.title = 'A title'; | ||
document.body.appendChild(element); | ||
|
||
return Promise.resolve() | ||
.then( () => { | ||
const expectedElement = element.shadowRoot.querySelector( 'c-modal div[slot="title"]' ); | ||
expect( expectedElement ).not.toBe( null ); | ||
}); | ||
}); | ||
|
||
it('When set to visible, contains a div containing a message slot, directing it to the contents slot of the modal', () => { | ||
const element = createElement('c-confirmation-dialog', { | ||
is: ConfirmationDialog | ||
}); | ||
element.visible = true; | ||
document.body.appendChild(element); | ||
|
||
const expectedElement = element.shadowRoot.querySelector( 'c-modal div[slot="contents"]' ); | ||
expect( expectedElement ).not.toBe( null ); | ||
}); | ||
|
||
it('When set to visible and no button labels provided contains a div containing cancel and confirm buttons with the defaulted labels, directing them to the modal footer slot', () => { | ||
const element = createElement('c-confirmation-dialog', { | ||
is: ConfirmationDialog | ||
}); | ||
element.visible = true; | ||
document.body.appendChild(element); | ||
|
||
const expectedElement = element.shadowRoot.querySelector( 'c-modal div[slot="footer"]' ); | ||
expect( expectedElement ).not.toBe( null ); | ||
|
||
expect( expectedElement.querySelector( '[data-name="confirm"]' ).title ).not.toBe( null ); | ||
expect( expectedElement.querySelector( '[data-name="confirm"]' ).label ).not.toBe( null ); | ||
expect( expectedElement.querySelector( '[data-name="cancel"]' ).title ).not.toBe( null ); | ||
expect( expectedElement.querySelector( '[data-name="cancel"]' ).label ).not.toBe( null ); | ||
}); | ||
|
||
it('When set to visible, contains a div containing cancel and confirm buttons with the specified labels, directing them to the modal footer slot', () => { | ||
const element = createElement('c-confirmation-dialog', { | ||
is: ConfirmationDialog | ||
}); | ||
element.type = 'save'; | ||
element.confirmLabel = 'Confirm thing'; | ||
element.cancelLabel = 'Cancel thing'; | ||
element.visible = true; | ||
document.body.appendChild(element); | ||
|
||
const expectedElement = element.shadowRoot.querySelector( 'c-modal div[slot="footer"]' ); | ||
expect( expectedElement ).not.toBe( null ); | ||
|
||
expect( expectedElement.querySelector( '[data-name="confirm"]' ).title ).toBe( 'Confirm thing' ); | ||
expect( expectedElement.querySelector( '[data-name="confirm"]' ).label ).toBe( 'Confirm thing' ); | ||
expect( expectedElement.querySelector( '[data-name="cancel"]' ).title ).toBe( 'Cancel thing' ); | ||
expect( expectedElement.querySelector( '[data-name="cancel"]' ).label ).toBe( 'Cancel thing' ); | ||
}); | ||
|
||
it('When set to visible and passed a valid type, contains a div containing cancel and confirm buttons with the specified labels, directing them to the modal footer slot', () => { | ||
const element = createElement('c-confirmation-dialog', { | ||
is: ConfirmationDialog | ||
}); | ||
element.type = 'save'; | ||
element.visible = true; | ||
document.body.appendChild(element); | ||
|
||
const expectedElement = element.shadowRoot.querySelector( 'c-modal div[slot="footer"]' ); | ||
expect( expectedElement ).not.toBe( null ); | ||
|
||
expect( expectedElement.querySelector( '[data-name="confirm"]' ).label ).not.toBe( null ); | ||
expect( expectedElement.querySelector( '[data-name="cancel"]' ).label ).not.toBe( null ); | ||
}); | ||
|
||
it('When set to an invalid type, will throw an error', () => { | ||
const element = createElement('c-confirmation-dialog', { | ||
is: ConfirmationDialog | ||
}); | ||
expect( () => element.type = 'invalid' ).toThrowError( 'Invalid type specified, should be one of confirm, yesNo, save' ); | ||
}); | ||
|
||
it('Clicking the confirm button will issue an event containing the confirm event message', () => { | ||
|
||
const CONFIRM_MESSAGE = 'The confirm message'; | ||
const CANCEL_MESSAGE = 'The cancel message'; | ||
|
||
const element = createElement('c-confirmation-dialog', { | ||
is: ConfirmationDialog | ||
}); | ||
|
||
element.confirmEventMessage = CONFIRM_MESSAGE; | ||
element.cancelEventMessage = CANCEL_MESSAGE; | ||
|
||
element.visible = true; | ||
document.body.appendChild(element); | ||
|
||
const confirmHandler = jest.fn(); | ||
element.addEventListener( 'confirm', confirmHandler ) ; | ||
|
||
const cancelHandler = jest.fn(); | ||
element.addEventListener( 'cancel', cancelHandler ) ; | ||
|
||
element.shadowRoot.querySelector( '[data-name="confirm"]' ).click(); | ||
|
||
expect( confirmHandler ).toHaveBeenCalled(); | ||
expect( confirmHandler.mock.calls[0][0].detail ).toBe( CONFIRM_MESSAGE ); | ||
|
||
expect( cancelHandler ).not.toHaveBeenCalled(); | ||
}); | ||
|
||
it('Clicking the cancel button will issue an event containing the cancel event message', () => { | ||
|
||
const CONFIRM_MESSAGE = 'The confirm message'; | ||
const CANCEL_MESSAGE = 'The cancel message'; | ||
|
||
const element = createElement('c-confirmation-dialog', { | ||
is: ConfirmationDialog | ||
}); | ||
|
||
element.confirmEventMessage = CONFIRM_MESSAGE; | ||
element.cancelEventMessage = CANCEL_MESSAGE; | ||
|
||
element.visible = true; | ||
document.body.appendChild(element); | ||
|
||
const confirmHandler = jest.fn(); | ||
element.addEventListener( 'confirm', confirmHandler ) ; | ||
|
||
const cancelHandler = jest.fn(); | ||
element.addEventListener( 'cancel', cancelHandler ) ; | ||
|
||
element.shadowRoot.querySelector( '[data-name="cancel"]' ).click(); | ||
|
||
expect( cancelHandler ).toHaveBeenCalled(); | ||
expect( cancelHandler.mock.calls[0][0].detail ).toBe( CANCEL_MESSAGE ); | ||
|
||
expect( confirmHandler ).not.toHaveBeenCalled(); | ||
}); | ||
}); |
36 changes: 36 additions & 0 deletions
36
framework/default/ortoo-core/default/lwc/confirmationDialog/confirmationDialog.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
<template> | ||
<c-modal | ||
visible={visible} | ||
oncancel={handleCancel} | ||
> | ||
|
||
<div slot="title"> | ||
<slot name="title"></slot> | ||
</div> | ||
|
||
<div slot="contents"> | ||
<slot name="message"></slot> | ||
</div> | ||
|
||
<div slot="footer"> | ||
<lightning-button-group> | ||
<lightning-button | ||
variant="neutral" | ||
name="cancel" | ||
data-name="cancel" | ||
label={cancelLabel} | ||
title={cancelLabel} | ||
onclick={handleCancel} | ||
></lightning-button> | ||
<lightning-button | ||
variant="brand" | ||
name="confirm" | ||
data-name="confirm" | ||
label={confirmLabel} | ||
title={confirmLabel} | ||
onclick={handleConfirm} | ||
></lightning-button> | ||
</lightning-button-group> | ||
</div> | ||
</c-modal> | ||
</template> |
Oops, something went wrong.