Merge pull request #458 from facultyai/dropdownmenuitem-external-link

Fix bug in DropdownMenuItem

Author: tcbegley

src/components/__tests__/Badge.test.js

@@ -59,4 +59,34 @@ describe('Badge', () => {
     expect(mockSetProps.mock.calls).toHaveLength(1);
     expect(mockSetProps.mock.calls[0][0].n_clicks).toBe(1);
   });
+
+    test('relative links are internal by default', () => {
+      const badge = render(
+        <Badge href="/relative">Clickable</Badge>
+      );
+
+      const mockEventListener = jest.fn();
+      window.addEventListener('_dashprivate_pushstate', mockEventListener);
+      window.scrollTo = jest.fn();
+
+      expect(mockEventListener.mock.calls).toHaveLength(0);
+      userEvent.click(badge.getByText('Clickable'));
+      expect(mockEventListener.mock.calls).toHaveLength(1);
+    });
+
+    test('relative links are external with external_link=true', () => {
+      const badge = render(
+        <Badge href="/relative" external_link>
+          Clickable
+        </Badge>
+      );
+
+      const mockEventListener = jest.fn();
+      window.addEventListener('_dashprivate_pushstate', mockEventListener);
+      window.scrollTo = jest.fn();
+
+      expect(mockEventListener.mock.calls).toHaveLength(0);
+      userEvent.click(badge.getByText('Clickable'));
+      expect(mockEventListener.mock.calls).toHaveLength(0);
+    });
 });

src/components/__tests__/Button.test.js

@@ -113,4 +113,32 @@ describe('Button', () => {
 
     expect(mockSetProps.mock.calls).toHaveLength(0);
   });
+
+  test('relative links are internal by default', () => {
+    const button = render(<Button href="/relative">Clickable</Button>);
+
+    const mockEventListener = jest.fn();
+    window.addEventListener('_dashprivate_pushstate', mockEventListener);
+    window.scrollTo = jest.fn();
+
+    expect(mockEventListener.mock.calls).toHaveLength(0);
+    userEvent.click(button.getByText('Clickable'));
+    expect(mockEventListener.mock.calls).toHaveLength(1);
+  });
+
+  test('relative links are external with external_link=true', () => {
+    const button = render(
+      <Button href="/relative" external_link>
+        Clickable
+      </Button>
+    );
+
+    const mockEventListener = jest.fn();
+    window.addEventListener('_dashprivate_pushstate', mockEventListener);
+    window.scrollTo = jest.fn();
+
+    expect(mockEventListener.mock.calls).toHaveLength(0);
+    userEvent.click(button.getByText('Clickable'));
+    expect(mockEventListener.mock.calls).toHaveLength(0);
+  });
 });

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

@@ -44,4 +44,34 @@ describe('CardLink', () => {
 
     expect(mockSetProps.mock.calls).toHaveLength(0);
   });
+
+  test('relative links are internal by default', () => {
+    const cardLink = render(
+      <CardLink href="/relative">Clickable</CardLink>
+    );
+
+    const mockEventListener = jest.fn();
+    window.addEventListener('_dashprivate_pushstate', mockEventListener);
+    window.scrollTo = jest.fn();
+
+    expect(mockEventListener.mock.calls).toHaveLength(0);
+    userEvent.click(cardLink.getByText('Clickable'));
+    expect(mockEventListener.mock.calls).toHaveLength(1);
+  });
+
+  test('relative links are external with external_link=true', () => {
+    const cardLink = render(
+      <CardLink href="/relative" external_link>
+        Clickable
+      </CardLink>
+    );
+
+    const mockEventListener = jest.fn();
+    window.addEventListener('_dashprivate_pushstate', mockEventListener);
+    window.scrollTo = jest.fn();
+
+    expect(mockEventListener.mock.calls).toHaveLength(0);
+    userEvent.click(cardLink.getByText('Clickable'));
+    expect(mockEventListener.mock.calls).toHaveLength(0);
+  });
 });

src/components/dropdownmenu/DropdownMenuItem.js

@@ -13,7 +13,6 @@ const DropdownMenuItem = props => {
   let {
     children,
     href,
-    external_link,
     loading_state,
     target,
     disabled,

src/components/dropdownmenu/__tests__/DropdownMenuItem.test.js

@@ -28,6 +28,36 @@ describe('DropdownMenuItem', () => {
     ).not.toBe(null);
   });
 
+  test('relative links are internal by default', () => {
+    const dropdownMenuItem = render(
+      <DropdownMenuItem href="/relative">Clickable</DropdownMenuItem>
+    );
+
+    const mockEventListener = jest.fn();
+    window.addEventListener('_dashprivate_pushstate', mockEventListener);
+    window.scrollTo = jest.fn();
+
+    expect(mockEventListener.mock.calls).toHaveLength(0);
+    userEvent.click(dropdownMenuItem.getByText('Clickable'));
+    expect(mockEventListener.mock.calls).toHaveLength(1);
+  });
+
+  test('relative links are external with external_link=true', () => {
+    const dropdownMenuItem = render(
+      <DropdownMenuItem href="/relative" external_link>
+        Clickable
+      </DropdownMenuItem>
+    );
+
+    const mockEventListener = jest.fn();
+    window.addEventListener('_dashprivate_pushstate', mockEventListener);
+    window.scrollTo = jest.fn();
+
+    expect(mockEventListener.mock.calls).toHaveLength(0);
+    userEvent.click(dropdownMenuItem.getByText('Clickable'));
+    expect(mockEventListener.mock.calls).toHaveLength(0);
+  });
+
   test('renders its content', () => {
     const dropdownMenuItem = render(
       <DropdownMenuItem>Some dropdown item content</DropdownMenuItem>

src/components/listgroup/__tests__/ListGroupItem.test.js

@@ -78,4 +78,34 @@ describe('ListGroupItem', () => {
 
     expect(mockSetProps.mock.calls).toHaveLength(0);
   });
+
+  test('relative links are internal by default', () => {
+    const listGroupItem = render(
+      <ListGroupItem href="/relative">Clickable</ListGroupItem>
+    );
+
+    const mockEventListener = jest.fn();
+    window.addEventListener('_dashprivate_pushstate', mockEventListener);
+    window.scrollTo = jest.fn();
+
+    expect(mockEventListener.mock.calls).toHaveLength(0);
+    userEvent.click(listGroupItem.getByText('Clickable'));
+    expect(mockEventListener.mock.calls).toHaveLength(1);
+  });
+
+  test('relative links are external with external_link=true', () => {
+    const listGroupItem = render(
+      <ListGroupItem href="/relative" external_link>
+        Clickable
+      </ListGroupItem>
+    );
+
+    const mockEventListener = jest.fn();
+    window.addEventListener('_dashprivate_pushstate', mockEventListener);
+    window.scrollTo = jest.fn();
+
+    expect(mockEventListener.mock.calls).toHaveLength(0);
+    userEvent.click(listGroupItem.getByText('Clickable'));
+    expect(mockEventListener.mock.calls).toHaveLength(0);
+  });
 });

src/components/nav/__tests__/NavLink.test.js

@@ -61,4 +61,32 @@ describe('NavLink', () => {
 
     expect(mockSetProps.mock.calls).toHaveLength(0);
   });
+
+  test('relative links are internal by default', () => {
+    const navLink = render(<NavLink href="/relative">Clickable</NavLink>);
+
+    const mockEventListener = jest.fn();
+    window.addEventListener('_dashprivate_pushstate', mockEventListener);
+    window.scrollTo = jest.fn();
+
+    expect(mockEventListener.mock.calls).toHaveLength(0);
+    userEvent.click(navLink.getByText('Clickable'));
+    expect(mockEventListener.mock.calls).toHaveLength(1);
+  });
+
+  test('relative links are external with external_link=true', () => {
+    const navLink = render(
+      <NavLink href="/relative" external_link>
+        Clickable
+      </NavLink>
+    );
+
+    const mockEventListener = jest.fn();
+    window.addEventListener('_dashprivate_pushstate', mockEventListener);
+    window.scrollTo = jest.fn();
+
+    expect(mockEventListener.mock.calls).toHaveLength(0);
+    userEvent.click(navLink.getByText('Clickable'));
+    expect(mockEventListener.mock.calls).toHaveLength(0);
+  });
 });

src/components/nav/__tests__/NavbarBrand.test.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import {render} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import NavbarBrand from '../NavbarBrand';
 
 describe('NavbarBrand', () => {
@@ -28,4 +29,34 @@ describe('NavbarBrand', () => {
     } = render(<NavbarBrand href={href} />);
     expect(navbarBrand.getAttribute('href')).toBe(href);
   });
+
+  test('relative links are internal by default', () => {
+    const navbarBrand = render(
+      <NavbarBrand href="/relative">Clickable</NavbarBrand>
+    );
+
+    const mockEventListener = jest.fn();
+    window.addEventListener('_dashprivate_pushstate', mockEventListener);
+    window.scrollTo = jest.fn();
+
+    expect(mockEventListener.mock.calls).toHaveLength(0);
+    userEvent.click(navbarBrand.getByText('Clickable'));
+    expect(mockEventListener.mock.calls).toHaveLength(1);
+  });
+
+  test('relative links are external with external_link=true', () => {
+    const navbarBrand = render(
+      <NavbarBrand href="/relative" external_link>
+        Clickable
+      </NavbarBrand>
+    );
+
+    const mockEventListener = jest.fn();
+    window.addEventListener('_dashprivate_pushstate', mockEventListener);
+    window.scrollTo = jest.fn();
+
+    expect(mockEventListener.mock.calls).toHaveLength(0);
+    userEvent.click(navbarBrand.getByText('Clickable'));
+    expect(mockEventListener.mock.calls).toHaveLength(0);
+  });
 });