[collapsible-menu-view] fix failing wdio tests

packages/terra-collapsible-menu-view/tests/wdio/collapsible-menu-view-spec.js

@@ -6,7 +6,7 @@ const ignoredA11y = {
 Terra.describeViewports('Responsive', ['tiny', 'small', 'medium', 'huge', 'large', 'enormous'], () => {
   it('should display responsive default', () => {
     browser.url('/raw/tests/cerner-terra-framework-docs/collapsible-menu-view/default-collapsible-menu-view');
-    Terra.validates.element('responsive');
+    Terra.validates.element('responsive', { selector: '#collapsible-menu-view-test' });
   });
 });
 

packages/terra-framework-docs/src/terra-dev-site/test/collapsible-menu-view/DefaultCollapsibleMenuView.test.jsx

@@ -47,110 +47,112 @@ class CollapsibleMenuViewDemo extends React.Component {
 
   render() {
     return (
-      <CollapsibleMenuView>
-        <CollapsibleMenuView.Toggle
-          text="Toggle Item 1"
-          className="ToggleItem1"
-          key="toggle1"
-          shouldCloseOnClick={false}
-          onChange={this.handleToggleOneOnChange}
-          isSelected={this.state.toggle1Selection}
-        />
-        <CollapsibleMenuView.Toggle
-          text="Toggle Item 2"
-          className="ToggleItem2"
-          key="toggle2"
-          shouldCloseOnClick={false}
-          onChange={this.handleToggleTwoOnChange}
-          isSelected={this.state.toggle2Selection}
-        />
-        <CollapsibleMenuView.Toggle
-          text="Toggle Item 3"
-          className="ToggleItem3"
-          key="toggle3"
-          shouldCloseOnClick={false}
-          onChange={this.handleToggleThreeOnChange}
-          isSelected={this.state.toggle3Selection}
-        />
-        <CollapsibleMenuView.Divider key="Divider1" />
-        <CollapsibleMenuView.Item
-          text="Menu Button 1"
-          key="MenuButton1"
-          className="MenuButton1"
-          onClick={this.handleMenuButtonClick}
-          shouldCloseOnClick={false}
-          subMenuItems={[
-            <CollapsibleMenuView.Item text="Default Item 1" key="defaultItem1" />,
-            <CollapsibleMenuView.Item text="Default Item 2" key="defaultItem2" />,
-          ]}
-        />
-        <CollapsibleMenuView.Item
-          text="MenuButton 2"
-          key="MenuButton2"
-          className="MenuButton2"
-          shouldCloseOnClick={false}
-          subMenuItems={[
-            <CollapsibleMenuView.Item text="Default Item 1" key="defaultItem1" />,
-            <CollapsibleMenuView.Item text="Default Item 2" key="defaultItem2" />,
-          ]}
-        />
-        <CollapsibleMenuView.Item
-          text="MenuButton 3"
-          key="MenuButton3"
-          className="MenuButton3"
-          shouldCloseOnClick={false}
-          subMenuItems={[
-            <CollapsibleMenuView.Item text="Default Item 1" key="defaultItem1" />,
-            <CollapsibleMenuView.Item text="Default Item 2" key="defaultItem2" />,
-          ]}
-        />
-        <CollapsibleMenuView.Divider key="Divider2" />
-        <CollapsibleMenuView.ItemGroup key="ViewTypeSelection" className="ViewTypeGroup" selectedKeys={[this.state.displayType]} onChange={this.handleDisplayTypeChange}>
+      <div id="collapsible-menu-view-test">
+        <CollapsibleMenuView>
+          <CollapsibleMenuView.Toggle
+            text="Toggle Item 1"
+            className="ToggleItem1"
+            key="toggle1"
+            shouldCloseOnClick={false}
+            onChange={this.handleToggleOneOnChange}
+            isSelected={this.state.toggle1Selection}
+          />
+          <CollapsibleMenuView.Toggle
+            text="Toggle Item 2"
+            className="ToggleItem2"
+            key="toggle2"
+            shouldCloseOnClick={false}
+            onChange={this.handleToggleTwoOnChange}
+            isSelected={this.state.toggle2Selection}
+          />
+          <CollapsibleMenuView.Toggle
+            text="Toggle Item 3"
+            className="ToggleItem3"
+            key="toggle3"
+            shouldCloseOnClick={false}
+            onChange={this.handleToggleThreeOnChange}
+            isSelected={this.state.toggle3Selection}
+          />
+          <CollapsibleMenuView.Divider key="Divider1" />
           <CollapsibleMenuView.Item
-            icon={<IconTable />}
-            text="Table View"
-            className="TableView"
-            key="tableView"
-            isIconOnly
+            text="Menu Button 1"
+            key="MenuButton1"
+            className="MenuButton1"
+            onClick={this.handleMenuButtonClick}
             shouldCloseOnClick={false}
-            isSelected={this.state.displayType === 'tableView'}
+            subMenuItems={[
+              <CollapsibleMenuView.Item text="Default Item 1" key="defaultItem1" />,
+              <CollapsibleMenuView.Item text="Default Item 2" key="defaultItem2" />,
+            ]}
           />
           <CollapsibleMenuView.Item
-            icon={<IconFlowsheet />}
-            text="Expanded View"
-            className="ExpandedView"
-            key="expandedView"
-            isIconOnly
+            text="MenuButton 2"
+            key="MenuButton2"
+            className="MenuButton2"
             shouldCloseOnClick={false}
-            isSelected={this.state.displayType === 'expandedView'}
+            subMenuItems={[
+              <CollapsibleMenuView.Item text="Default Item 1" key="defaultItem1" />,
+              <CollapsibleMenuView.Item text="Default Item 2" key="defaultItem2" />,
+            ]}
           />
           <CollapsibleMenuView.Item
-            icon={<IconVisualization />}
-            text="Trending View"
-            className="TendingView"
-            key="trendingView"
-            isIconOnly
+            text="MenuButton 3"
+            key="MenuButton3"
+            className="MenuButton3"
             shouldCloseOnClick={false}
-            isSelected={this.state.displayType === 'trendingView'}
+            subMenuItems={[
+              <CollapsibleMenuView.Item text="Default Item 1" key="defaultItem1" />,
+              <CollapsibleMenuView.Item text="Default Item 2" key="defaultItem2" />,
+            ]}
           />
-        </CollapsibleMenuView.ItemGroup>
-        <CollapsibleMenuView.Divider key="Divider3" />
-        <CollapsibleMenuView.Item icon={<IconSend />} text="Send Message" className="SendMessage" key="send" isIconOnly />
-        <CollapsibleMenuView.ItemGroup className="MessageActionGroup" key="messageActionGroup">
-          <CollapsibleMenuView.Item icon={<IconPrinter />} text="Print Message" className="Print" key="print" isIconOnly />
-          <CollapsibleMenuView.Item icon={<IconFolder />} text="Move Message to Folder..." className="Move" key="move" isIconOnly />
-          <CollapsibleMenuView.Item icon={<IconTrash />} text="Trash Message" key="trash" className="Trash" isIconOnly />
-        </CollapsibleMenuView.ItemGroup>
-        <CollapsibleMenuView.Divider key="Divider4" />
-        <CollapsibleMenuView.Item text="Button 1" className="Button1" key="button1" />
-        <CollapsibleMenuView.Item text="Button 2" className="Button2" key="button2" />
-        <CollapsibleMenuView.Item text="Button 3" className="Button3" key="button3" />
-        <CollapsibleMenuView.Item text="Button 4" className="Button4" key="button4" />
-        <CollapsibleMenuView.Item text="Button 5" className="Button5" key="button5" />
-        <CollapsibleMenuView.Item text="Button 6" className="Button6" key="button6" />
-        <CollapsibleMenuView.Item text="Button 7" className="Button7" key="button7" />
-        <CollapsibleMenuView.Item text="Button 8" className="Button8" key="button8" />
-      </CollapsibleMenuView>
+          <CollapsibleMenuView.Divider key="Divider2" />
+          <CollapsibleMenuView.ItemGroup key="ViewTypeSelection" className="ViewTypeGroup" selectedKeys={[this.state.displayType]} onChange={this.handleDisplayTypeChange}>
+            <CollapsibleMenuView.Item
+              icon={<IconTable />}
+              text="Table View"
+              className="TableView"
+              key="tableView"
+              isIconOnly
+              shouldCloseOnClick={false}
+              isSelected={this.state.displayType === 'tableView'}
+            />
+            <CollapsibleMenuView.Item
+              icon={<IconFlowsheet />}
+              text="Expanded View"
+              className="ExpandedView"
+              key="expandedView"
+              isIconOnly
+              shouldCloseOnClick={false}
+              isSelected={this.state.displayType === 'expandedView'}
+            />
+            <CollapsibleMenuView.Item
+              icon={<IconVisualization />}
+              text="Trending View"
+              className="TendingView"
+              key="trendingView"
+              isIconOnly
+              shouldCloseOnClick={false}
+              isSelected={this.state.displayType === 'trendingView'}
+            />
+          </CollapsibleMenuView.ItemGroup>
+          <CollapsibleMenuView.Divider key="Divider3" />
+          <CollapsibleMenuView.Item icon={<IconSend />} text="Send Message" className="SendMessage" key="send" isIconOnly />
+          <CollapsibleMenuView.ItemGroup className="MessageActionGroup" key="messageActionGroup">
+            <CollapsibleMenuView.Item icon={<IconPrinter />} text="Print Message" className="Print" key="print" isIconOnly />
+            <CollapsibleMenuView.Item icon={<IconFolder />} text="Move Message to Folder..." className="Move" key="move" isIconOnly />
+            <CollapsibleMenuView.Item icon={<IconTrash />} text="Trash Message" key="trash" className="Trash" isIconOnly />
+          </CollapsibleMenuView.ItemGroup>
+          <CollapsibleMenuView.Divider key="Divider4" />
+          <CollapsibleMenuView.Item text="Button 1" className="Button1" key="button1" />
+          <CollapsibleMenuView.Item text="Button 2" className="Button2" key="button2" />
+          <CollapsibleMenuView.Item text="Button 3" className="Button3" key="button3" />
+          <CollapsibleMenuView.Item text="Button 4" className="Button4" key="button4" />
+          <CollapsibleMenuView.Item text="Button 5" className="Button5" key="button5" />
+          <CollapsibleMenuView.Item text="Button 6" className="Button6" key="button6" />
+          <CollapsibleMenuView.Item text="Button 7" className="Button7" key="button7" />
+          <CollapsibleMenuView.Item text="Button 8" className="Button8" key="button8" />
+        </CollapsibleMenuView>
+      </div>
     );
   }
 }