wip tests

Author: tcbegley

docs/requirements.txt

@@ -1,5 +1,5 @@
-dash>=2.0.0
-dash_bootstrap_components==ci-fixes
+dash==3.0.0rc1
+# dash_bootstrap_components==1.7.1-dev
 gunicorn
 markdown
 pandas

src/components/accordion/__tests__/Accordion.test.js

@@ -3,7 +3,7 @@
  */
 
 import React from 'react';
-import {render} from '@testing-library/react';
+import {act, render, screen, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import Accordion from '../Accordion';
 import AccordionItem from '../AccordionItem';
@@ -91,7 +91,8 @@ describe('Accordion', () => {
     ).not.toHaveClass('show');
   });
 
-  test('tracks most recently clicked item with "active_item" prop', () => {
+  test('tracks most recently clicked item with "active_item" prop', async () => {
+    const user = userEvent.setup({advanceTimers: jest.advanceTimersByTime});
     const mockSetProps = jest.fn();
     const {container, rerender} = render(
       <Accordion setProps={mockSetProps} active_item="item-0">
@@ -109,9 +110,7 @@ describe('Accordion', () => {
       accordionItems.children[1].querySelector('div.accordion-collapse')
     ).not.toHaveClass('show');
 
-    userEvent.click(
-      accordionItems.children[1].querySelector('h2.accordion-header > button')
-    );
+    await user.click(await screen.findByText('item-title-2'));
     expect(mockSetProps.mock.calls).toHaveLength(1);
 
     rerender(
@@ -120,7 +119,7 @@ describe('Accordion', () => {
         <AccordionItem title="item-title-2">item-content-2</AccordionItem>
       </Accordion>
     );
-    jest.runAllTimers();
+    act(() => jest.runAllTimers());
 
     expect(
       accordionItems.children[0].querySelector('div.accordion-collapse')
@@ -130,9 +129,7 @@ describe('Accordion', () => {
     ).toHaveClass('show');
 
     // clicking on an open item closes it
-    userEvent.click(
-      accordionItems.children[1].querySelector('h2.accordion-header > button')
-    );
+    await user.click(await screen.findByText('item-title-2'));
     expect(mockSetProps.mock.calls).toHaveLength(2);
 
     rerender(
@@ -141,7 +138,7 @@ describe('Accordion', () => {
         <AccordionItem title="item-title-2">item-content-2</AccordionItem>
       </Accordion>
     );
-    jest.runAllTimers();
+    act(() => jest.runAllTimers());
 
     expect(
       accordionItems.children[0].querySelector('div.accordion-collapse')
@@ -151,7 +148,8 @@ describe('Accordion', () => {
     ).not.toHaveClass('show');
   });
 
-  test('keeps item open with "always_open" prop', () => {
+  test('keeps item open with "always_open" prop', async () => {
+    const user = userEvent.setup({advanceTimers: jest.advanceTimersByTime});
     const mockSetProps = jest.fn();
 
     const {container} = render(
@@ -172,34 +170,31 @@ describe('Accordion', () => {
     ).not.toHaveClass('show');
 
     // Click on the second item
-    userEvent.click(
-      accordionItems.children[1].querySelector('h2.accordion-header > button')
-    );
+    await user.click(await screen.findByText('item-title-2'));
     expect(mockSetProps.mock.calls).toHaveLength(1);
 
-    // Allow the click to take effect
-    jest.runAllTimers();
+    // wait for transition to complete
+    await waitFor(() =>
+      expect(
+        accordionItems.children[1].querySelector('div.accordion-collapse')
+      ).toHaveClass('show')
+    );
 
     // Check just the second item is open
     expect(
       accordionItems.children[0].querySelector('div.accordion-collapse')
     ).not.toHaveClass('show');
-    expect(
-      accordionItems.children[1].querySelector('div.accordion-collapse')
-    ).toHaveClass('show');
 
     // Click on the first item
-    userEvent.click(
-      accordionItems.children[0].querySelector('h2.accordion-header > button')
-    );
+    await user.click(await screen.findByText('item-title-1'));
     expect(mockSetProps.mock.calls).toHaveLength(2);
-    // Allow the click to take effect
-    jest.runAllTimers();
 
     // Check that the first child is now open, and the second remains open
-    expect(
-      accordionItems.children[0].querySelector('div.accordion-collapse')
-    ).toHaveClass('show');
+    await waitFor(() =>
+      expect(
+        accordionItems.children[0].querySelector('div.accordion-collapse')
+      ).toHaveClass('show')
+    );
     expect(
       accordionItems.children[1].querySelector('div.accordion-collapse')
     ).toHaveClass('show');
@@ -224,7 +219,8 @@ describe('Accordion', () => {
     ).toHaveClass('show');
   });
 
-  test('tracks most recently clicked item with "active_item" prop when always_open', () => {
+  test('tracks most recently clicked item with "active_item" prop when always_open', async () => {
+    const user = userEvent.setup({advanceTimers: jest.advanceTimersByTime});
     const mockSetProps = jest.fn();
     const {container, rerender} = render(
       <Accordion setProps={mockSetProps} active_item={['item-0']} always_open>
@@ -248,9 +244,7 @@ describe('Accordion', () => {
     ).not.toHaveClass('show');
 
     // Click the middle option
-    userEvent.click(
-      accordionItems.children[1].querySelector('h2.accordion-header > button')
-    );
+    await user.click(await screen.getByText('item-title-2'));
     expect(mockSetProps.mock.calls).toHaveLength(1);
 
     rerender(
@@ -264,7 +258,7 @@ describe('Accordion', () => {
         <AccordionItem title="item-title-3">item-content-3</AccordionItem>
       </Accordion>
     );
-    jest.runAllTimers();
+    act(() => jest.runAllTimers());
 
     // Check first option stayed open, middle option now open but third still
     // closed
@@ -279,9 +273,7 @@ describe('Accordion', () => {
     ).not.toHaveClass('show');
 
     // clicking on 1st item closes it, but keeps second item open and 3rd closed
-    userEvent.click(
-      accordionItems.children[0].querySelector('h2.accordion-header > button')
-    );
+    await user.click(await screen.getByText('item-title-1'));
     expect(mockSetProps.mock.calls).toHaveLength(2);
 
     rerender(
@@ -295,7 +287,7 @@ describe('Accordion', () => {
         <AccordionItem title="item-title-3">item-content-3</AccordionItem>
       </Accordion>
     );
-    jest.runAllTimers();
+    act(() => jest.runAllTimers());
 
     // Check that 1 and 3 now closed, and 2 is open
     expect(

src/components/badge/__tests__/Badge.test.js

@@ -56,13 +56,14 @@ describe('Badge', () => {
     expect(badge.getAttribute('href')).toBe(href);
   });
 
-  test('tracks clicks with n_clicks', () => {
+  test('tracks clicks with n_clicks', async () => {
+    const user = userEvent.setup();
     const mockSetProps = jest.fn();
     const badge = render(<Badge setProps={mockSetProps}>Clickable</Badge>);
 
     expect(mockSetProps.mock.calls).toHaveLength(0);
 
-    userEvent.click(badge.getByText('Clickable'));
+    await user.click(badge.getByText('Clickable'));
 
     expect(mockSetProps.mock.calls).toHaveLength(1);
     expect(mockSetProps.mock.calls[0][0].n_clicks).toBe(1);

src/components/button/Button.js

@@ -12,28 +12,26 @@ import Link from '../../private/Link';
  * Use the `n_clicks` prop to trigger callbacks when the button has been
  * clicked.
  */
-const Button = props => {
-  const {
-    children,
-    disabled,
-    href,
-    loading_state,
-    setProps,
-    n_clicks,
-    target,
-    type,
-    download,
-    name,
-    value,
-    className,
-    class_name,
-    color,
-    outline,
-    onClick,
-    rel,
-    ...otherProps
-  } = props;
-
+const Button = ({
+  children,
+  disabled,
+  href,
+  loading_state,
+  setProps,
+  target,
+  type,
+  download,
+  name,
+  value,
+  className,
+  class_name,
+  color,
+  outline,
+  onClick,
+  rel,
+  n_clicks = 0,
+  ...otherProps
+}) => {
   const incrementClicks = () => {
     if (!disabled && setProps) {
       setProps({
@@ -73,11 +71,6 @@ const Button = props => {
   );
 };
 
-Button.dashPersistence = {
-  n_clicks: 0,
-  n_clicks_timestamp: -1
-};
-
 Button.propTypes = {
   /**
    * The ID of this component, used to identify dash components

src/components/button/__tests__/Button.test.js

@@ -84,13 +84,14 @@ describe('Button', () => {
     );
   });
 
-  test('tracks clicks with n_clicks', () => {
+  test('tracks clicks with n_clicks', async () => {
+    const user = userEvent.setup();
     const mockSetProps = jest.fn();
     const button = render(<Button setProps={mockSetProps}>Clickable</Button>);
 
     expect(mockSetProps.mock.calls).toHaveLength(0);
 
-    userEvent.click(button.getByText('Clickable'));
+    await user.click(button.getByText('Clickable'));
 
     expect(mockSetProps.mock.calls).toHaveLength(1);
     expect(mockSetProps.mock.calls[0][0].n_clicks).toBe(1);

src/components/card/__tests__/CardLink.test.js

@@ -20,15 +20,16 @@ describe('CardLink', () => {
     expect(cardLink.container).toHaveTextContent('Some card link content');
   });
 
-  test('tracks clicks with n_clicks', () => {
+  test('tracks clicks with n_clicks', async () => {
+    const user = userEvent.setup();
     const mockSetProps = jest.fn();
     const cardLink = render(
       <CardLink setProps={mockSetProps}>Clickable</CardLink>
     );
 
     expect(mockSetProps.mock.calls).toHaveLength(0);
 
-    userEvent.click(cardLink.getByText('Clickable'));
+    await user.click(cardLink.getByText('Clickable'));
 
     expect(mockSetProps.mock.calls).toHaveLength(1);
     expect(mockSetProps.mock.calls[0][0].n_clicks).toBe(1);

src/components/carousel/Carousel.js

@@ -10,21 +10,19 @@ import Link from '../../private/Link';
  * Component for creating Bootstrap carousel.  This component is a slideshow
  * for cycling through a series of content.
  */
-const Carousel = props => {
-  const {
-    items,
-    style,
-    class_name,
-    className,
-    loading_state,
-    setProps,
-    interval,
-    active_index = 0,
-    controls = true,
-    indicators = true,
-    ...otherProps
-  } = props;
-
+const Carousel = ({
+  items,
+  style,
+  class_name,
+  className,
+  loading_state,
+  setProps,
+  interval,
+  active_index = 0,
+  controls = true,
+  indicators = true,
+  ...otherProps
+}) => {
   const slides = items.map(item => {
     // note - the default 'd-block w-100' is from the examples in the Bootstrap docs.
     item.imgClassName =

src/components/carousel/__tests__/Carousel.test.js

@@ -46,7 +46,8 @@ describe('Carousel', () => {
     expect(items.children[1]).not.toHaveClass('active');
   });
 
-  test('tracks most recently clicked slide with "active_index" prop', () => {
+  test('tracks most recently clicked slide with "active_index" prop', async () => {
+    const user = userEvent.setup();
     const mockSetProps = jest.fn();
     const {container} = render(
       <Carousel items={slides} setProps={mockSetProps} active_index={0} />
@@ -59,7 +60,7 @@ describe('Carousel', () => {
 
     const nextButton = container.querySelector('a.carousel-control-next');
 
-    userEvent.click(nextButton);
+    await user.click(nextButton);
     expect(mockSetProps.mock.calls).toHaveLength(1);
     expect(mockSetProps.mock.calls[0][0].active_index).toBe(1);
   });
@@ -82,7 +83,7 @@ describe('Carousel', () => {
       {
         key: '0',
         src: '',
-        alt: 'z',
+        alt: 'this is the blank one',
         href: 'http://www.example.com',
         target: '_blank'
       },
@@ -99,13 +100,13 @@ describe('Carousel', () => {
         src: '',
         alt: 'z',
         href: 'http://www.example.com'
-      },
-      ...slides
+      }
     ];
 
     const carousel = render(<Carousel items={linkedSlides} />);
     const carouselItems = carousel.container.querySelectorAll('.carousel-item');
     const blankTargetItem = carouselItems[0];
+
     expect(blankTargetItem).toHaveAttribute('target', '_blank');
     expect(blankTargetItem.tagName.toLowerCase()).toEqual('a');
 

src/components/collapse/__tests__/Collapse.test.js

@@ -3,7 +3,7 @@
  */
 
 import React from 'react';
-import {render} from '@testing-library/react';
+import {act, render} from '@testing-library/react';
 import Collapse from '../Collapse';
 
 jest.useFakeTimers();
@@ -44,7 +44,7 @@ describe('Collapse', () => {
       </Collapse>
     );
     expect(collapse.container.querySelector('div.collapsing')).not.toBe(null);
-    jest.runAllTimers();
+    act(() => jest.runAllTimers());
 
     expect(collapse.container.querySelector('div.collapse.show')).not.toBe(
       null