chore: add e2e tests

box · Jun 13, 2019 · 50ef733 · 50ef733
1 parent e93b455
commit 50ef733
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 9 deletions.
diff --git a/src/components/sidebar-toggle-button/SidebarToggleButton.js b/src/components/sidebar-toggle-button/SidebarToggleButton.js
@@ -33,15 +33,9 @@ const SidebarToggleButton = ({
     const isCollapsed = !isOpen ? 'collapsed' : '';
     const intlMessage = isOpen ? messages.sidebarHide : messages.sidebarShow;
     const intlText = intl.formatMessage(intlMessage);
-    const classes = classNames(
-        {
-            [className]: !!className,
-        },
-        'bdl-SidebarToggleButton',
-        {
-            'bdl-is-collapsed': isCollapsed,
-        },
-    );
+    const classes = classNames(className, 'bdl-SidebarToggleButton', {
+        'bdl-is-collapsed': isCollapsed,
+    });
 
     const renderButton = () => {
         if (direction === DIRECTION_LEFT) {

diff --git a/src/elements/common/interactionTargets.js b/src/elements/common/interactionTargets.js
@@ -3,6 +3,7 @@ export const SIDEBAR_NAV_TARGETS = {
     DETAILS: 'sidebardetails',
     SKILLS: 'sidebarskills',
     METADATA: 'sidebarmetadata',
+    TOGGLE: 'sidebartoggle',
 };
 
 export const SECTION_TARGETS = {

diff --git a/src/elements/content-sidebar/SidebarNav.js b/src/elements/content-sidebar/SidebarNav.js
@@ -97,6 +97,8 @@ const SidebarNav = ({
         </div>
         <div className="bcs-SidebarNav-footer">
             <SidebarToggleButton
+                data-resin-target={SIDEBAR_NAV_TARGETS.TOGGLE}
+                data-testid={SIDEBAR_NAV_TARGETS.TOGGLE}
                 isOpen={isOpen}
                 onClick={event => {
                     if (onNavigate) {

diff --git a/src/elements/content-sidebar/__tests__/__snapshots__/SidebarNav-test.js.snap b/src/elements/content-sidebar/__tests__/__snapshots__/SidebarNav-test.js.snap
@@ -135,9 +135,13 @@ exports[`elements/content-sidebar/SidebarNav should render the additional tabs l
       className="bcs-SidebarNav-footer"
     >
       <SidebarToggleButton
+        data-resin-target="sidebartoggle"
+        data-testid="sidebartoggle"
         onClick={[Function]}
       >
         <SidebarToggleButton
+          data-resin-target="sidebartoggle"
+          data-testid="sidebartoggle"
           intl={
             Object {
               "formatDate": [Function],
@@ -174,6 +178,8 @@ exports[`elements/content-sidebar/SidebarNav should render the additional tabs l
               <PlainButton
                 aria-label="Show Sidebar"
                 className="bdl-SidebarToggleButton bdl-is-collapsed"
+                data-resin-target="sidebartoggle"
+                data-testid="sidebartoggle"
                 key=".0"
                 onBlur={[Function]}
                 onClick={[Function]}
@@ -187,6 +193,8 @@ exports[`elements/content-sidebar/SidebarNav should render the additional tabs l
                 <button
                   aria-label="Show Sidebar"
                   className="btn-plain bdl-SidebarToggleButton bdl-is-collapsed"
+                  data-resin-target="sidebartoggle"
+                  data-testid="sidebartoggle"
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}

diff --git a/test/integration/content-sidebar/ContentSidebar.e2e.test.js b/test/integration/content-sidebar/ContentSidebar.e2e.test.js
@@ -42,6 +42,32 @@ describe('ContentSidebar', () => {
             cy.getByTestId('sidebaractivity').should('have.class', 'bcs-is-selected');
             cy.getByTestId('sidebarskills').should('not.have.class', 'bcs-is-selected');
         });
+
+        it('should toggle sidebar content when a user clicks the toggle sidebar button', () => {
+            cy.getByTestId('bcs-content').should('exist');
+            cy.getByTestId('sidebarskills').should('have.class', 'bcs-is-selected');
+
+            cy.getByTestId('sidebartoggle').click();
+            cy.getByTestId('sidebarskills').should('not.have.class', 'bcs-is-selected');
+            cy.getByTestId('bcs-content').should('not.exist');
+
+            cy.getByTestId('sidebartoggle').click();
+            cy.getByTestId('sidebarskills').should('have.class', 'bcs-is-selected');
+            cy.getByTestId('bcs-content').should('exist');
+        });
+
+        it('should toggle sidebar content when using a combination of toggle sidebar button and sidebar tab', () => {
+            cy.getByTestId('bcs-content').should('exist');
+            cy.getByTestId('sidebarskills').should('have.class', 'bcs-is-selected');
+
+            cy.getByTestId('sidebartoggle').click();
+            cy.getByTestId('sidebarskills').should('not.have.class', 'bcs-is-selected');
+            cy.getByTestId('bcs-content').should('not.exist');
+
+            cy.getByTestId('sidebaractivity').click();
+            cy.getByTestId('sidebaractivity').should('have.class', 'bcs-is-selected');
+            cy.getByTestId('sidebarskills').should('not.have.class', 'bcs-is-selected');
+        });
     });
 
     describe('version history', () => {