DOP-4869: set collapsible open if hash found in url (#1185)

src/components/Collapsible/index.js

@@ -1,5 +1,6 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
+import { useLocation } from '@gatsbyjs/reach-router';
 import Box from '@leafygreen-ui/box';
 import Icon from '@leafygreen-ui/icon';
 import IconButton from '@leafygreen-ui/icon-button';
@@ -16,6 +17,7 @@ const Collapsible = ({ nodeData: { children, options }, ...rest }) => {
   const { darkMode } = useDarkMode();
   const { id, heading, sub_heading: subHeading } = options;
   const [open, setOpen] = useState(false);
+  const { hash } = useLocation();
   const headingNodeData = useMemo(
     () => ({
       id,
@@ -32,6 +34,13 @@ const Collapsible = ({ nodeData: { children, options }, ...rest }) => {
     setOpen(!open);
   }, [heading, open]);
 
+  useEffect(() => {
+    const hashId = hash?.slice(1) ?? '';
+    if (id === hashId) {
+      setOpen(true);
+    }
+  }, [hash, id]);
+
   return (
     <Box className={cx('collapsible', collapsibleStyle)}>
       <Box className={cx(headerContainerStyle)}>

tests/unit/Collapsible.test.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, act } from '@testing-library/react';
 
+import { mockLocation } from '../utils/mock-location';
 import Collapsible from '../../src/components/Collapsible';
 import mockData from './data/Collapsible.test.json';
 
@@ -33,4 +34,13 @@ describe('collapsible component', () => {
     expect(icon.getAttribute('aria-label')).toContain('Down');
     expect(collapsedContent).toBeVisible();
   });
+
+  it('opens the collapsible content if hash is found in the URL', async () => {
+    mockLocation(null, '/', '#this-is-a-heading');
+    let renderResult = render(<Collapsible nodeData={mockData}></Collapsible>),
+      button = renderResult.getByRole('button'),
+      icon = button.querySelector('[role=img]');
+    expect(icon.getAttribute('aria-label')).toContain('Chevron');
+    expect(icon.getAttribute('aria-label')).toContain('Down');
+  });
 });

tests/utils/mock-location.js

@@ -4,4 +4,5 @@ jest.mock('@gatsbyjs/reach-router', () => ({
   useLocation: jest.fn(),
 }));
 
-export const mockLocation = (search, pathname) => useLocation.mockImplementation(() => ({ search, pathname }));
+export const mockLocation = (search, pathname, hash) =>
+  useLocation.mockImplementation(() => ({ search, pathname, hash }));