Paragon 10: Updating Dropdown and Button usages. (#187)

* Updating Dropdown and Button.

* Fixing broken tests and test warnings.

* Remove comment block.

* Using variant=“link” on the Tabs Dropdown.Toggle.

* Fixing some merge conflicts.

src/courseware/course/bookmark/BookmarkButton.jsx

@@ -40,7 +40,8 @@ export default function BookmarkButton({
 
   return (
     <StatefulButton
-      className="btn-link px-1 ml-n1 btn-sm"
+      variant="link"
+      className="px-1 ml-n1 btn-sm"
       onClick={toggleBookmark}
       state={state}
       disabledStates={['defaultProcessing', 'bookmarkedProcessing']}

src/courseware/course/sequence/content-lock/ContentLock.jsx

@@ -29,7 +29,7 @@ function ContentLock({
         })}
       </p>
       <p>
-        <Button className="btn-primary" onClick={handleClick}>{intl.formatMessage(messages['learn.contentLock.goToSection'])}</Button>
+        <Button variant="primary" onClick={handleClick}>{intl.formatMessage(messages['learn.contentLock.goToSection'])}</Button>
       </p>
     </>
   );

src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx

@@ -51,7 +51,7 @@ export default function SequenceNavigation({
 
   return sequenceStatus === LOADED && (
     <nav className={classNames('sequence-navigation', className)}>
-      <Button className="previous-btn" onClick={previousSequenceHandler} disabled={isFirstUnit}>
+      <Button variant="link" className="previous-btn" onClick={previousSequenceHandler} disabled={isFirstUnit}>
         <FontAwesomeIcon icon={faChevronLeft} className="mr-2" size="sm" />
         <FormattedMessage
           defaultMessage="Previous"
@@ -60,7 +60,7 @@ export default function SequenceNavigation({
         />
       </Button>
       {renderUnitButtons()}
-      <Button className="next-btn" onClick={nextSequenceHandler} disabled={isLastUnit}>
+      <Button variant="link" className="next-btn" onClick={nextSequenceHandler} disabled={isLastUnit}>
         <FormattedMessage
           defaultMessage="Next"
           id="learn.sequence.navigation.next.button"

src/courseware/course/sequence/sequence-navigation/SequenceNavigationDropdown.jsx

@@ -13,7 +13,7 @@ export default function SequenceNavigationDropdown({
 }) {
   return (
     <Dropdown className="sequence-navigation-dropdown">
-      <Dropdown.Button className="dropdown-button font-weight-normal w-100 border-right-0">
+      <Dropdown.Toggle variant="link" className="font-weight-normal w-100 border-right-0">
         <FormattedMessage
           defaultMessage="{current} of {total}"
           description="The title of the mobile menu for sequence navigation of units"
@@ -23,10 +23,11 @@ export default function SequenceNavigationDropdown({
             total: unitIds.length,
           }}
         />
-      </Dropdown.Button>
+      </Dropdown.Toggle>
       <Dropdown.Menu className="w-100">
         {unitIds.map(buttonUnitId => (
-          <UnitButton
+          <Dropdown.Item
+            as={UnitButton}
             className="w-100"
             isActive={unitId === buttonUnitId}
             key={buttonUnitId}

src/courseware/course/sequence/sequence-navigation/SequenceNavigationDropdown.test.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Factory } from 'rosie';
 import { getAllByRole } from '@testing-library/dom';
+import { act } from '@testing-library/react';
 import SequenceNavigationDropdown from './SequenceNavigationDropdown';
 import {
   render, screen, fireEvent, initializeTestStore,
@@ -37,10 +38,13 @@ describe('Sequence Navigation Dropdown', () => {
     });
   });
 
-  unitBlocks.forEach((unit, indedx) => {
-    it(`marks unit ${indedx + 1} as active`, () => {
+  unitBlocks.forEach((unit, index) => {
+    it(`marks unit ${index + 1} as active`, async () => {
       const { container } = render(<SequenceNavigationDropdown {...mockData} unitId={unit.id} />);
-
+      const dropdownToggle = container.querySelector('.dropdown-toggle');
+      await act(async () => {
+        await fireEvent.click(dropdownToggle);
+      });
       const dropdownMenu = container.querySelector('.dropdown-menu');
       // Only the current unit should be marked as active.
       getAllByRole(dropdownMenu, 'button', { hidden: true }).forEach(button => {
@@ -57,6 +61,10 @@ describe('Sequence Navigation Dropdown', () => {
     const onNavigate = jest.fn();
     const { container } = render(<SequenceNavigationDropdown {...mockData} onNavigate={onNavigate} />);
 
+    const dropdownToggle = container.querySelector('.dropdown-toggle');
+    act(() => {
+      fireEvent.click(dropdownToggle);
+    });
     const dropdownMenu = container.querySelector('.dropdown-menu');
     getAllByRole(dropdownMenu, 'button', { hidden: true }).forEach(button => fireEvent.click(button));
     expect(onNavigate).toHaveBeenCalledTimes(unitBlocks.length);

src/courseware/course/sequence/sequence-navigation/SequenceNavigationTabs.test.jsx

@@ -1,5 +1,7 @@
 import React from 'react';
 import { Factory } from 'rosie';
+import { act, fireEvent, getAllByRole } from '@testing-library/react';
+
 import { initializeTestStore, render, screen } from '../../../../setupTest';
 import SequenceNavigationTabs from './SequenceNavigationTabs';
 import useIndexOfLastVisibleChild from '../../../../generic/tabs/useIndexOfLastVisibleChild';
@@ -44,12 +46,23 @@ describe('Sequence Navigation Tabs', () => {
     expect(screen.getAllByRole('button')).toHaveLength(unitBlocks.length);
   });
 
-  it('renders unit buttons and dropdown button', () => {
-    useIndexOfLastVisibleChild.mockReturnValue([-1, null, null]);
-    render(<SequenceNavigationTabs {...mockData} />);
+  it('renders unit buttons and dropdown button', async () => {
+    let container = null;
+    await act(async () => {
+      useIndexOfLastVisibleChild.mockReturnValue([-1, null, null]);
+      const booyah = render(<SequenceNavigationTabs {...mockData} />);
+      container = booyah.container;
 
-    expect(screen.getAllByRole('button')).toHaveLength(unitBlocks.length + 1);
+      const dropdownToggle = container.querySelector('.dropdown-toggle');
+      // We need to await this click here, which requires us to await the `act` as well above.
+      // https://github.com/testing-library/react-testing-library/issues/535
+      // Without doing this, we get a warning about using `act` even though we are.
+      await fireEvent.click(dropdownToggle);
+    });
+    const dropdownMenu = container.querySelector('.dropdown');
+    const dropdownButtons = getAllByRole(dropdownMenu, 'button');
+    expect(dropdownButtons).toHaveLength(unitBlocks.length + 1);
     expect(screen.getByRole('button', { name: `${activeBlockNumber} of ${unitBlocks.length}` }))
-      .toHaveClass('dropdown-button');
+      .toHaveClass('dropdown-toggle');
   });
 });

src/courseware/course/sequence/sequence-navigation/UnitButton.jsx

@@ -30,6 +30,7 @@ function UnitButton({
         active: isActive,
         complete: showCompletion && complete,
       }, className)}
+      variant="link"
       onClick={handleClick}
       title={title}
     >

src/courseware/course/sequence/sequence-navigation/UnitNavigation.jsx

@@ -19,7 +19,8 @@ export default function UnitNavigation(props) {
   return (
     <div className="unit-navigation d-flex">
       <Button
-        className="btn-outline-secondary previous-button mr-2"
+        variant="outline-secondary"
+        className="previous-button mr-2"
         disabled={isFirstUnit}
         onClick={onClickPrevious}
       >
@@ -42,7 +43,8 @@ export default function UnitNavigation(props) {
         </div>
       ) : (
         <Button
-          className="btn-outline-primary next-button"
+          variant="outline-primary"
+          className="next-button"
           onClick={onClickNext}
           disabled={isLastUnit}
         >