Update: wdio

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: <span>No results for Hospital Info</span>,
+  },
+  {
+    key: 'subsubmenu1', text: 'Imaging', id: 'test-item-2',
+  },
+  { key: 'subsubmenu2', text: 'Laboratory' },
+  {
+    key: 'subsubmenu3', text: 'Rehabilitation services', childKeys: ['rehab1', 'rehab2', 'rehab3'], icon: <IconHospital />,
+  },
+  { key: 'rehab1', text: 'Rehabilitation services 1' },
+  {
+    key: 'rehab2', text: 'Rehabilitation services 2', childKeys: [], isLoading: true, customStatusDisplay: <span>Loading...</span>,
+  },
+  { 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 = (
         <NavigationSideMenu
           id="test-menu"
-          menuItems={[
-            {
-              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: <span>No results for Hospital Info</span>,
-            },
-            {
-              key: 'subsubmenu1', text: 'Imaging', id: 'test-item-2',
-            },
-            { key: 'subsubmenu2', text: 'Laboratory' },
-            {
-              key: 'subsubmenu3', text: 'Rehabilitation services', childKeys: ['rehab1', 'rehab2', 'rehab3'], icon: <IconHospital />,
-            },
-            { key: 'rehab1', text: 'Rehabilitation services 1' },
-            { key: 'rehab2', text: 'Rehabilitation services 2', childKeys: [], isLoading: true, customStatusDisplay: <span>Loading...</span>, },
-            { key: 'rehab3', text: 'Rehabilitation services 3', childKeys: [] },
-          ]}
+          menuItems={this.state.data}
           onChange={this.handleOnChange}
           routingStackBack={this.fakeRoutingBack}
           selectedMenuKey={this.state.selectedMenuKey}

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' });
     });
   });
 });