Testing Instructions

Testing Instructions

• Testing Instructions
  • Deploy
  • Header
  • Examples
    • ex Card CMS
  • Navigation Menus
    • Navigation menu with sub-menu items
    • Footer Nav Menu
    • Footer Nav Menu Justification
  • Footer
    • Footer Component Dropzone
    • Contact Us
  • 404 Page Template

Deploy

• Follow Installation Instructions
• deploy all examples and follow guidance
  • ant deployCode -Dsf.deployRoot /examples/uswdsCard
  • ant deployCode -Dsf.deployRoot /examples/uswdsPagination
  • ant deployCode -Dsf.deployRoot /examples/themeColorStyleGuide
• drag all onto page
  • ex Cards - USWDS
  • ex Cards CMS - USWDS
  • ex Pagination - USWDS
  • ex Theme Style Guide

Header

• deploy code. Navigate to Experience Builder > Theme Settings
• select a 1:1 aspect ratio image , upload as logo, observe alignment to left of "Website/ Application Name"
• Select "Wide" from Logo Type, "Website/ Application Name" should disappear
• Upload a wide image , set image as Company Logo
• observe image occupying header space
• observe new wide image in footer Identifier section
• change Logo Type back to "Square" observe image shrinking to fit space to left of "Website/ Application Name" text (which has also reappeared)

Examples

ex Card CMS

• Assign ManagedContentControllerForLex to the guest user profile of the test community
• Before creating content, you may need to assign Salesforce CMS tab access to your user profile.
• Create CMS Content
• Edit profile and update each of the following tabs to "Default On"
  • CMS Channels
  • CMS Experiences
  • CMS Home
  • CMS Workspaces
• Turn on app visibility for Salesforce CMS under Custom App Settings
• SAVE
• Navigate to Salesforce CMS App from App Picker
• Create new CMS Workspace (give it any name you like)
• Associate the new Workspace to your existing community.
• Skip adding Contributors
• Select language and default
• DONE
• Create one or more new CMS articles of the News content type. Enter data and images into all fields and publish. No new - fields need to be created.
• Navigate to the Community Workspace (CMS Home > All Experiences > Workspace)
• Click "Content Management"
• Click "Collections" tab
• Create new collection specific to the News content type
• How would you like to curate your collection? >> Conditionally
• Filter By: Publish Date, When: Greater Than, Value: 01/01/2021
• SAVE
• Navigate to Experience Builder
• Publish
• Click "Get Content" button, articles should appear as cards with click-through to full article.

Navigation Menus

Navigation menu with sub-menu items

• Create Navigation menu with sub-menu items

- menu-label 1
  - sub-item 1
  - sub-item 2
- item 1
- menu-label 2
  - sub-item 1
- item 2

• Override Navigation Menu and use custom Mega Menu Header
• Set navigation menu to display in header
• Publish
• Menu should display without sub-menu items visible

Footer Nav Menu

• Create two navigation menus. All items should be publicly visible
• NavMenu1 (menu with sub-items)

- label 1
  - sub-item 1
  - sub-item 2
  - sub-item 3
- label 2
  - sub-item 1
  - sub-item 2
  - sub-item 3
- label 3
  - sub-item 1
  - sub-item 2
  - sub-item 3

• NavMenu2 (no sub-items)

- Item 1
- Item 2
- Longer Item 3 w/ Text
- Item 4
- Item 5

• Select "Big" as "Footer Navigation Menu Type" in theme settings
• Assign NavMenu1 to "Footer Main Nav Menu Name" in theme settings
• Assign NavMenu2 to "Footer Secondary Nav Menu Name" in theme settings
  • NavMenu 1 should display above agency logo/name and show all items. NavMenu2 should appear below Agency logo/name and be centered on the page.
• Go to theme settings and select "Small" as "Footer Navigation Menu Type" in theme settings
• Assign NavMenu2 to "Footer Main Nav Menu Name" in theme settings
  • Single-level menu items should display across the top lighter section

Footer Nav Menu Justification

• Drag uswdsFooterNavMenuSmall to page
• Go through each component setting for Justification (Left, Right, Center) when selecting a horizontal alignment. Observe updates

Footer

Footer Component Dropzone

• Toggle "Footer Region Toggle" to On in theme settings
• new drop zone called "footerEmailSignup" appears to right of social media nav and Contact Us section in footer.
• Place component into footer (any type). It should fit the width of the section (4 cols)
• when resized to mobile width (<=480px) margin above section should appear to provide spacing between it and section above

Contact Us

• Add all options for Contact Us section of footer, verify each links appropriately.
  • Contact Center Name: "Contact Us"
  • Phone: 202-555-5309
  • Email: [email protected]
  • Contact Center URL: https://gsa.gov
  • Contact Center Link Text: Create Support Case

404 Page Template

• Drag component onto page
• Enter text for Form Name, validate that button appears
• Enter relative URL for Form URL. Publish. From public link, verify navigation occurs
• test relative URL
• test external URL
• If Contact Email and Contact Phone are not filled out, the "For immediate assistance:" text should not display
• enter email address in Contact Email. Publish. Verify email address loads native email application
• enter phone number in Contact Phone. Publish. Verify phone number loads or prompts for native phone application