DOP-3523: VersionSelector select navigates to correct page (#18)

src/components/VersionSelector/Option.tsx

@@ -9,12 +9,12 @@ export const Option = ({ option, selected, onClick }: OptionProps) => {
 
   const handleKeyPress = (event: React.KeyboardEvent) => {
     if (event.key === KEY_ENTER || event.key === KEY_SPACE) {
-      onClick();
+      onClick(option);
     }
   };
 
   return (
-    <StyledLi onClick={onClick} onKeyPress={handleKeyPress} selected={selected}>
+    <StyledLi onClick={() => onClick(option)} onKeyPress={handleKeyPress} selected={selected}>
       {selected ? <Checkmark /> : <StyledPlaceholder />}
       <StyledOptionText>{option}</StyledOptionText>
     </StyledLi>

src/components/VersionSelector/VersionSelector.tsx

@@ -21,19 +21,22 @@ import { useOutsideClick } from './use-outside-click';
 const VersionSelectorComponent = ({
   resourceVersions,
   active,
+  rootUrl,
   description,
 }: VersionSelectorProps): JSX.Element => {
-  const initialSelectedIdx = resourceVersions.indexOf(active.resourceVersion);
+  const selectedIdx = resourceVersions.indexOf(active.resourceVersion);
   const [open, setOpen] = React.useState<boolean>(false);
-  const [selectedIdx, setSelectedIdx] = React.useState<number>(initialSelectedIdx);
   const menuListRef = React.useRef(null);
   useOutsideClick(menuListRef, () => {
     if (open) setOpen(false);
   });
 
-  const handleClick = (idx: number) => {
+  const handleClick = (idx: number, resourceVersion: string) => {
-    setSelectedIdx(idx);
+    if (idx === selectedIdx) return setOpen(false);
-    setOpen(false);
+
+    // navigate to resource version spec
+    const selectedResourceVersionUrl = `${rootUrl}/${resourceVersion}`;
+    window.location.href = selectedResourceVersionUrl;
   };
 
   return (
@@ -57,7 +60,7 @@ const VersionSelectorComponent = ({
                 key={`option-${i}`}
                 selected={i === selectedIdx}
                 option={option}
-                onClick={() => handleClick(i)}
+                onClick={option => handleClick(i, option)}
               />
             ))}
           </StyledMenuList>

src/components/VersionSelector/types.ts

@@ -12,7 +12,7 @@ export interface VersionSelectorProps {
 export interface OptionProps {
   option: string;
   selected: boolean;
-  onClick: () => void;
+  onClick: (option: string) => void;
 }
 
 export interface ArrowIconProps {

src/components/__tests__/VersionSelector.test.tsx

@@ -1,10 +1,24 @@
 /* eslint-disable import/no-internal-modules */
 import * as React from 'react';
-import { render } from 'enzyme';
+import { mount, render } from 'enzyme';
 import { VersionSelector } from '../VersionSelector';
 import * as versionData from './data/mockVersionData.json';
 
 describe('VersionSelector', () => {
+  const { location } = window;
+
+  beforeEach((): void => {
+    Object.defineProperty(window, 'location', {
+      configurable: true,
+      enumerable: true,
+      value: new URL(window.location.href),
+    });
+  });
+
+  afterEach((): void => {
+    window.location.href = location.href;
+  });
+
   it('should correctly render VersionSelector', () => {
     const wrapper = render(<VersionSelector {...versionData} />);
     expect(wrapper).toMatchSnapshot();
@@ -13,4 +27,27 @@ describe('VersionSelector', () => {
     );
     expect(wrapper.find('button').text()).toBe(versionData.resourceVersions.slice(-1)[0]);
   });
+
+  it('should navigate to spec after select change', async () => {
+    const wrapper = mount(<VersionSelector {...versionData} />);
+    wrapper.find('button').simulate('click');
+    expect(wrapper.find('li')).toHaveLength(3);
+
+    wrapper.find('li').at(0).simulate('click');
+    expect(JSON.stringify(window.location)).toBe(
+      JSON.stringify(`${versionData.rootUrl}/${versionData.resourceVersions[0]}`),
+    );
+  });
+
+  it('should not navigate after selecting active resource version', () => {
+    const wrapper = mount(<VersionSelector {...versionData} />);
+    wrapper.find('button').simulate('click');
+    expect(wrapper.find('li')).toHaveLength(3);
+
+    wrapper.find('li').at(2).simulate('click');
+    expect(JSON.stringify(window.location)).not.toBe(
+      JSON.stringify(`${versionData.rootUrl}/${versionData.resourceVersions[2]}`),
+    );
+    expect(JSON.stringify(window.location)).toBe(JSON.stringify(location.href));
+  });
 });