diff --git a/packages/terra-framework-docs/src/terra-dev-site/test/navigation-side-menu/DrillIn.test.jsx b/packages/terra-framework-docs/src/terra-dev-site/test/navigation-side-menu/DrillIn.test.jsx index f5ebb2c97b..6f20972f43 100644 --- a/packages/terra-framework-docs/src/terra-dev-site/test/navigation-side-menu/DrillIn.test.jsx +++ b/packages/terra-framework-docs/src/terra-dev-site/test/navigation-side-menu/DrillIn.test.jsx @@ -6,6 +6,40 @@ import styles from './NavigationSideMenuDocCommon.module.scss'; const cx = classNames.bind(styles); +const data = [ + { + key: 'menu', text: 'Hospital Details', childKeys: ['submenu1', 'submenu2', 'submenu3', 'submenu4', 'submenu5'], + }, + { + key: 'submenu1', + text: 'Hospital services', + childKeys: ['subsubmenu1', 'subsubmenu2', 'subsubmenu3'], + id: 'test-item-1', + }, + { key: 'submenu2', text: 'Hospital events' }, + { + key: 'submenu3', text: 'Hospital Accommodations', + }, + { key: 'submenu4', text: 'Hospital Careers' }, + { + key: 'submenu5', + text: 'Hospital Info', + childKeys: [], + customStatusDisplay: No results for Hospital Info, + }, + { + key: 'subsubmenu1', text: 'Imaging', id: 'test-item-2', + }, + { key: 'subsubmenu2', text: 'Laboratory' }, + { + key: 'subsubmenu3', text: 'Rehabilitation services', childKeys: ['rehab1', 'rehab2', 'rehab3'], icon: , + }, + { key: 'rehab1', text: 'Rehabilitation services 1' }, + { + key: 'rehab2', text: 'Rehabilitation services 2', childKeys: [], isLoading: true, customStatusDisplay: Loading..., + }, + { key: 'rehab3', text: 'Rehabilitation services 3', childKeys: [] }, +]; class DrillInExample extends React.Component { constructor(props) { super(props); @@ -14,19 +48,31 @@ class DrillInExample extends React.Component { this.resetMenuState = this.resetMenuState.bind(this); this.fakeRoutingBack = this.fakeRoutingBack.bind(this); - this.state = { selectedMenuKey: 'menu', selectedChildKey: undefined }; + this.state = { selectedMenuKey: 'menu', selectedChildKey: undefined, data }; } handleOnChange(event, changeData) { + if (changeData.selectedMenuKey === 'rehab2') { + this.setState({ selectedMenuKey: changeData.selectedMenuKey }); + setTimeout(() => { + const modifiedData = [ + { + key: 'rehab2', text: 'Rehabilitation services 2', childKeys: ['rehab1sub'], isLoading: false, + }, + { key: 'rehab1sub', text: 'Rehabilitation services submenu', childKeys: [] }, + ]; + this.setState({ data: modifiedData, selectedMenuKey: 'rehab2' }); + }, 1000); + } this.setState({ selectedMenuKey: changeData.selectedMenuKey, selectedChildKey: changeData.selectedChildKey }); } resetMenuState() { - this.setState({ selectedMenuKey: 'menu', selectedChildKey: undefined }); + this.setState({ selectedMenuKey: 'menu', selectedChildKey: undefined, data }); } fakeRoutingBack() { - this.setState({ selectedMenuKey: 'fake-parent', selectedChildKey: undefined }); + this.setState({ selectedMenuKey: 'fake-parent', selectedChildKey: undefined, data }); } render() { @@ -44,38 +90,7 @@ class DrillInExample extends React.Component { content = ( No results for Hospital Info, - }, - { - key: 'subsubmenu1', text: 'Imaging', id: 'test-item-2', - }, - { key: 'subsubmenu2', text: 'Laboratory' }, - { - key: 'subsubmenu3', text: 'Rehabilitation services', childKeys: ['rehab1', 'rehab2', 'rehab3'], icon: , - }, - { key: 'rehab1', text: 'Rehabilitation services 1' }, - { key: 'rehab2', text: 'Rehabilitation services 2', childKeys: [], isLoading: true, customStatusDisplay: Loading..., }, - { key: 'rehab3', text: 'Rehabilitation services 3', childKeys: [] }, - ]} + menuItems={this.state.data} onChange={this.handleOnChange} routingStackBack={this.fakeRoutingBack} selectedMenuKey={this.state.selectedMenuKey} diff --git a/packages/terra-navigation-side-menu/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/navigation-side-menu-spec/displays_data_after_loading.png b/packages/terra-navigation-side-menu/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/navigation-side-menu-spec/displays_data_after_loading.png new file mode 100644 index 0000000000..5de465996a Binary files /dev/null and b/packages/terra-navigation-side-menu/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/navigation-side-menu-spec/displays_data_after_loading.png differ diff --git a/packages/terra-navigation-side-menu/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/navigation-side-menu-spec/displays_data_after_loading.png b/packages/terra-navigation-side-menu/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/navigation-side-menu-spec/displays_data_after_loading.png new file mode 100644 index 0000000000..6c8cb0ae68 Binary files /dev/null and b/packages/terra-navigation-side-menu/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/navigation-side-menu-spec/displays_data_after_loading.png differ diff --git a/packages/terra-navigation-side-menu/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/navigation-side-menu-spec/displays_data_after_loading.png b/packages/terra-navigation-side-menu/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/navigation-side-menu-spec/displays_data_after_loading.png new file mode 100644 index 0000000000..ce56849d2a Binary files /dev/null and b/packages/terra-navigation-side-menu/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/navigation-side-menu-spec/displays_data_after_loading.png differ diff --git a/packages/terra-navigation-side-menu/tests/wdio/navigation-side-menu-spec.js b/packages/terra-navigation-side-menu/tests/wdio/navigation-side-menu-spec.js index 8432b2b542..d512ebf8fd 100644 --- a/packages/terra-navigation-side-menu/tests/wdio/navigation-side-menu-spec.js +++ b/packages/terra-navigation-side-menu/tests/wdio/navigation-side-menu-spec.js @@ -135,11 +135,13 @@ Terra.describeViewports('DrillIn View', ['medium'], () => { Terra.validates.element('displays no results custom status', { selector: '#root' }); }); - it('Should display custom status when Loading is true', () => { + it('Should display custom status when Loading is true and data when loading is false', () => { browser.url('/#/raw/tests/cerner-terra-framework-docs/navigation-side-menu/drill-in'); browser.keys(['Tab', 'ArrowDown', 'ArrowRight', 'ArrowDown', 'ArrowDown', 'ArrowDown']); browser.keys(['ArrowRight', 'ArrowDown', 'ArrowDown', 'ArrowRight']); Terra.validates.element('displays loading status', { selector: '#root' }); + browser.pause(1000); + Terra.validates.element('displays data after loading', { selector: '#root' }); }); }); });