Standardized trigger messages in action buttons with undefined ids

packages/obonode/obojobo-chunks-action-button/__snapshots__/editor-component.test.js.snap

@@ -116,7 +116,7 @@ exports[`ActionButton Editor Node builds the expected component when selected 1`
             className="trigger"
           >
             <span>
-              Go to "undefined"
+              Go to ""
             </span>
           </div>
           <div
@@ -137,7 +137,7 @@ exports[`ActionButton Editor Node builds the expected component when selected 1`
             className="trigger"
           >
             <span>
-              Open undefined
+              Open ""
             </span>
           </div>
           <div
@@ -309,6 +309,6 @@ Object {
 }
 `;
 
-exports[`ActionButton Editor Node handles tabbing 1`] = `"<div><div class=\\"text-chunk obojobo-draft--chunks--action-button pad\\"><div class=\\"obojobo-draft--components--button align-center\\"><div class=\\"button\\"></div></div><div class=\\"trigger-box\\" contenteditable=\\"false\\"><div class=\\"box-border\\"><div class=\\"trigger-list\\"><div class=\\"title\\">When the button is clicked:</div><div class=\\"trigger\\"><span>Go to \\"undefined\\"</span></div><div class=\\"trigger\\"><span>Go to the previous page</span></div><div class=\\"trigger\\"><span>Go to the next page</span></div><div class=\\"trigger\\"><span>Open undefined</span></div><div class=\\"trigger\\"><span>Lock navigation</span></div><div class=\\"trigger\\"><span>Unlock navigation</span></div><div class=\\"trigger\\"><span>Toggle the navigation drawer</span></div><div class=\\"trigger\\"><span>Close the navigation menu</span></div><div class=\\"trigger\\"><span>Open the navigation menu</span></div><div class=\\"trigger\\"><span>Start an attempt for \\"undefined\\"</span></div><div class=\\"trigger\\"><span>End an attempt for \\"undefined\\"</span></div><div class=\\"trigger\\"><span>Display a popup message</span></div><div class=\\"trigger\\"><span>Scroll to the top of the page</span></div><div class=\\"trigger\\"><span>Focus on \\"undefined\\"</span></div></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center add-action\\" contenteditable=\\"false\\"><button class=\\"button\\" contenteditable=\\"false\\">Edit Triggers</button></div></div></div></div></div>"`;
+exports[`ActionButton Editor Node handles tabbing 1`] = `"<div><div class=\\"text-chunk obojobo-draft--chunks--action-button pad\\"><div class=\\"obojobo-draft--components--button align-center\\"><div class=\\"button\\"></div></div><div class=\\"trigger-box\\" contenteditable=\\"false\\"><div class=\\"box-border\\"><div class=\\"trigger-list\\"><div class=\\"title\\">When the button is clicked:</div><div class=\\"trigger\\"><span>Go to \\"\\"</span></div><div class=\\"trigger\\"><span>Go to the previous page</span></div><div class=\\"trigger\\"><span>Go to the next page</span></div><div class=\\"trigger\\"><span>Open \\"\\"</span></div><div class=\\"trigger\\"><span>Lock navigation</span></div><div class=\\"trigger\\"><span>Unlock navigation</span></div><div class=\\"trigger\\"><span>Toggle the navigation drawer</span></div><div class=\\"trigger\\"><span>Close the navigation menu</span></div><div class=\\"trigger\\"><span>Open the navigation menu</span></div><div class=\\"trigger\\"><span>Start an attempt for \\"undefined\\"</span></div><div class=\\"trigger\\"><span>End an attempt for \\"undefined\\"</span></div><div class=\\"trigger\\"><span>Display a popup message</span></div><div class=\\"trigger\\"><span>Scroll to the top of the page</span></div><div class=\\"trigger\\"><span>Focus on \\"undefined\\"</span></div></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center add-action\\" contenteditable=\\"false\\"><button class=\\"button\\" contenteditable=\\"false\\">Edit Triggers</button></div></div></div></div></div>"`;
 
-exports[`ActionButton Editor Node opens modal 1`] = `"<div><div class=\\"text-chunk obojobo-draft--chunks--action-button pad\\"><div class=\\"obojobo-draft--components--button align-center\\"><div class=\\"button\\"></div></div><div class=\\"trigger-box\\" contenteditable=\\"false\\"><div class=\\"box-border\\"><div class=\\"trigger-list\\"><div class=\\"title\\">When the button is clicked:</div><div class=\\"trigger\\"><span>Go to \\"undefined\\"</span></div><div class=\\"trigger\\"><span>Go to the previous page</span></div><div class=\\"trigger\\"><span>Go to the next page</span></div><div class=\\"trigger\\"><span>Open undefined</span></div><div class=\\"trigger\\"><span>Lock navigation</span></div><div class=\\"trigger\\"><span>Unlock navigation</span></div><div class=\\"trigger\\"><span>Toggle the navigation drawer</span></div><div class=\\"trigger\\"><span>Close the navigation menu</span></div><div class=\\"trigger\\"><span>Open the navigation menu</span></div><div class=\\"trigger\\"><span>Start an attempt for \\"undefined\\"</span></div><div class=\\"trigger\\"><span>End an attempt for \\"undefined\\"</span></div><div class=\\"trigger\\"><span>Display a popup message</span></div><div class=\\"trigger\\"><span>Scroll to the top of the page</span></div><div class=\\"trigger\\"><span>Focus on \\"undefined\\"</span></div></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center add-action\\" contenteditable=\\"false\\"><button class=\\"button\\" contenteditable=\\"false\\">Edit Triggers</button></div></div></div></div></div>"`;
+exports[`ActionButton Editor Node opens modal 1`] = `"<div><div class=\\"text-chunk obojobo-draft--chunks--action-button pad\\"><div class=\\"obojobo-draft--components--button align-center\\"><div class=\\"button\\"></div></div><div class=\\"trigger-box\\" contenteditable=\\"false\\"><div class=\\"box-border\\"><div class=\\"trigger-list\\"><div class=\\"title\\">When the button is clicked:</div><div class=\\"trigger\\"><span>Go to \\"\\"</span></div><div class=\\"trigger\\"><span>Go to the previous page</span></div><div class=\\"trigger\\"><span>Go to the next page</span></div><div class=\\"trigger\\"><span>Open \\"\\"</span></div><div class=\\"trigger\\"><span>Lock navigation</span></div><div class=\\"trigger\\"><span>Unlock navigation</span></div><div class=\\"trigger\\"><span>Toggle the navigation drawer</span></div><div class=\\"trigger\\"><span>Close the navigation menu</span></div><div class=\\"trigger\\"><span>Open the navigation menu</span></div><div class=\\"trigger\\"><span>Start an attempt for \\"undefined\\"</span></div><div class=\\"trigger\\"><span>End an attempt for \\"undefined\\"</span></div><div class=\\"trigger\\"><span>Display a popup message</span></div><div class=\\"trigger\\"><span>Scroll to the top of the page</span></div><div class=\\"trigger\\"><span>Focus on \\"undefined\\"</span></div></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center add-action\\" contenteditable=\\"false\\"><button class=\\"button\\" contenteditable=\\"false\\">Edit Triggers</button></div></div></div></div></div>"`;

packages/obonode/obojobo-chunks-action-button/action-button-editor-action.js

@@ -5,7 +5,12 @@ const ActionButtonEditorAction = props => {
 
 	switch (props.type) {
 		case 'nav:goto':
-			description = `Go to "${props.value.id}"`
+			if (props.value.id) {
+				description = `Go to ${props.value.id}`
+			} else {
+				description = 'Go to ""'
+			}
+
 			break
 		case 'nav:prev':
 			description = 'Go to the previous page'
@@ -14,7 +19,12 @@ const ActionButtonEditorAction = props => {
 			description = 'Go to the next page'
 			break
 		case 'nav:openExternalLink':
-			description = `Open ${props.value.url}`
+			if (props.value.url) {
+				description = `Open ${props.value.url}`
+			} else {
+				description = 'Open ""'
+			}
+
 			break
 		case 'nav:lock':
 			description = 'Lock navigation'

packages/obonode/obojobo-chunks-action-button/editor-component.test.js

@@ -5,6 +5,7 @@ import { Transforms } from 'slate'
 import renderer from 'react-test-renderer'
 
 import ActionButton from './editor-component'
+import ActionButtonEditorAction from './action-button-editor-action'
 import Node from 'obojobo-document-engine/src/scripts/oboeditor/components/node/editor-component'
 
 jest.mock('obojobo-document-engine/src/scripts/oboeditor/util/freeze-unfreeze-editor')
@@ -71,7 +72,7 @@ describe('ActionButton Editor Node', () => {
 
 		expect(tree).toMatchSnapshot()
 
-		// make sure node recieves props since we're mocking it
+		// make sure node receives props since we're mocking it
 		expect(component.root.find(Node).props).toMatchSnapshot()
 	})
 
@@ -171,3 +172,35 @@ describe('ActionButton Editor Node', () => {
 		expect(Transforms.setNodes).not.toHaveBeenCalled()
 	})
 })
+
+test('Action Button Editor displays id for nav:goto trigger', () => {
+	const type = 'nav:goto'
+	const value = { id: 'mockId' }
+
+	const component = mount(<ActionButtonEditorAction type={type} value={value} />)
+	expect(component.find('span').html()).toEqual('<span>Go to mockId</span>')
+})
+
+test('Action Button Editor displays empty id for nav:goto trigger', () => {
+	const type = 'nav:goto'
+	const value = { id: '' }
+
+	const component = mount(<ActionButtonEditorAction type={type} value={value} />)
+	expect(component.find('span').html()).toEqual('<span>Go to ""</span>')
+})
+
+test('Action Button Editor displays id for nav:openExternalLink trigger', () => {
+	const type = 'nav:openExternalLink'
+	const value = { url: 'mockURL' }
+
+	const component = mount(<ActionButtonEditorAction type={type} value={value} />)
+	expect(component.find('span').html()).toEqual('<span>Open mockURL</span>')
+})
+
+test('Action Button Editor displays empty id for nav:openExternalLink trigger', () => {
+	const type = 'nav:openExternalLink'
+	const value = { url: '' }
+
+	const component = mount(<ActionButtonEditorAction type={type} value={value} />)
+	expect(component.find('span').html()).toEqual('<span>Open ""</span>')
+})