fix(controls): Make badge part of SettingsToggle button (#1403)

box · Jun 23, 2021 · ff7dbfb · ff7dbfb
1 parent 6d04ebc
commit ff7dbfb
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 9 deletions.
diff --git a/src/lib/viewers/controls/settings/SettingsToggle.tsx b/src/lib/viewers/controls/settings/SettingsToggle.tsx
@@ -22,8 +22,8 @@ function SettingsToggle({ badge, isOpen, onClick }: Props, ref: React.Ref<Ref>):
                 type="button"
             >
                 <IconGear24 className="bp-SettingsToggle-icon" />
+                {React.isValidElement(badge) && <div className="bp-SettingsToggle-badge">{badge}</div>}
             </button>
-            {React.isValidElement(badge) && <div className="bp-SettingsToggle-badge">{badge}</div>}
         </div>
     );
 }

diff --git a/src/lib/viewers/controls/settings/__tests__/SettingsToggle-test.tsx b/src/lib/viewers/controls/settings/__tests__/SettingsToggle-test.tsx
@@ -21,5 +21,12 @@ describe('SettingsToggle', () => {
 
             expect(wrapper.hasClass('bp-is-open')).toBe(isOpen);
         });
+
+        test('should render badge if provided', () => {
+            const Badge = (): JSX.Element => <div className="badge">Badge</div>;
+            const wrapper = getWrapper({ badge: <Badge /> });
+
+            expect(wrapper.exists(Badge)).toBe(true);
+        });
     });
 });
diff --git a/test/integration/media/DashViewer.e2e.test.js b/test/integration/media/DashViewer.e2e.test.js
@@ -20,7 +20,7 @@ describe('Dash Viewer', () => {
                 cy.showMediaControls();
 
                 // Open the menu
-                cy.getByTitle('Settings').click({ force: true });
+                cy.getByTitle('Settings').click();
             });
 
             runBaseMediaSettingsTests();
@@ -42,7 +42,7 @@ describe('Dash Viewer', () => {
                 cy.showMediaControls();
 
                 // Open the menu
-                cy.getByTitle('Settings').click({ force: true });
+                cy.getByTitle('Settings').click();
             });
 
             runBaseMediaSettingsTests();

diff --git a/test/integration/media/MP3Viewer.e2e.test.js b/test/integration/media/MP3Viewer.e2e.test.js
@@ -15,7 +15,7 @@ describe('MP3 Viewer', () => {
                 cy.showMediaControls();
 
                 // Open the menu
-                cy.getByTitle('Settings').click({ force: true });
+                cy.getByTitle('Settings').click();
             });
 
             runBaseMediaSettingsTests();
@@ -31,7 +31,7 @@ describe('MP3 Viewer', () => {
                 cy.showMediaControls();
 
                 // Open the menu
-                cy.getByTitle('Settings').click({ force: true });
+                cy.getByTitle('Settings').click();
             });
 
             runBaseMediaSettingsTests();

diff --git a/test/integration/media/MP4Viewer.e2e.test.js b/test/integration/media/MP4Viewer.e2e.test.js
@@ -15,7 +15,7 @@ describe('MP4 Viewer', () => {
                 cy.showMediaControls();
 
                 // Open the menu
-                cy.getByTitle('Settings').click({ force: true });
+                cy.getByTitle('Settings').click();
             });
 
             runBaseMediaSettingsTests();
@@ -31,7 +31,7 @@ describe('MP4 Viewer', () => {
                 cy.showMediaControls();
 
                 // Open the menu
-                cy.getByTitle('Settings').click({ force: true });
+                cy.getByTitle('Settings').click();
             });
 
             runBaseMediaSettingsTests();

diff --git a/test/integration/media/Video360Viewer.e2e.test.js b/test/integration/media/Video360Viewer.e2e.test.js
@@ -15,7 +15,7 @@ describe('Video360 Viewer', () => {
                 cy.showMediaControls();
 
                 // Open the menu
-                cy.getByTitle('Settings').click({ force: true });
+                cy.getByTitle('Settings').click();
             });
 
             runBaseMediaSettingsTests();

diff --git a/test/support/mediaSettingsTests.js b/test/support/mediaSettingsTests.js
@@ -6,7 +6,7 @@ export function runBaseMediaSettingsTests() {
             cy.getByTestId('bp-media-settings-speed').contains('Normal');
 
             // Close the menu
-            cy.getByTitle('Settings').click({ force: true });
+            cy.getByTitle('Settings').click();
             cy.getByTestId('bp-settings-flyout').should('not.be.visible');
         });