Add tests

frontend/app-development/layout/PageHeader/SubHeader/SettingsModalButton/SettingsModal/SettingsModal.tsx

@@ -3,20 +3,21 @@ import React, { forwardRef, useCallback, useImperativeHandle, useRef, useState }
 import classes from './SettingsModal.module.css';
 import { CogIcon } from '@studio/icons';
 import { StudioModal, StudioContentMenu } from '@studio/components';
-import type { SettingsModalTabId } from 'app-development/types/SettingsModalTab';
+import type { SettingsModalTabId } from 'app-development/types/SettingsModalTabId';
 import { useTranslation } from 'react-i18next';
 import { PolicyTab } from './components/Tabs/PolicyTab';
 import { AboutTab } from './components/Tabs/AboutTab';
 import { AccessControlTab } from './components/Tabs/AccessControlTab';
 import { SetupTab } from './components/Tabs/SetupTab';
 import { type SettingsModalHandle } from 'app-development/types/SettingsModalHandle';
-import { getMenuTabConfigs } from './utils/menuTabConfigs';
+import { useSettingsModalMenuTabConfigs } from './hooks/useSettingsModalMenuTabConfigs';
 
 export const SettingsModal = forwardRef<SettingsModalHandle, {}>(({}, ref): ReactElement => {
   const { t } = useTranslation();
 
   const [currentTab, setCurrentTab] = useState<SettingsModalTabId>('about');
   const dialogRef = useRef<HTMLDialogElement>();
+  const { getMenuTabConfigs } = useSettingsModalMenuTabConfigs();
 
   const openSettings = useCallback(
     (tab: SettingsModalTabId = currentTab) => {

frontend/app-development/layout/PageHeader/SubHeader/SettingsModalButton/SettingsModal/hooks/useSettingsModalMenuTabConfigs.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import type { SettingsModalTabId } from '../../../../../../types/SettingsModalTabId';
+import {
+  InformationSquareIcon,
+  SidebarBothIcon,
+  ShieldLockIcon,
+  TimerStartIcon,
+} from '@studio/icons';
+import { useTranslation } from 'react-i18next';
+import type { StudioMenuTabType } from '@studio/components';
+
+const aboutTabId: SettingsModalTabId = 'about';
+const setupTabId: SettingsModalTabId = 'setup';
+const policyTabId: SettingsModalTabId = 'policy';
+const accessControlTabId: SettingsModalTabId = 'access_control';
+
+export const useSettingsModalMenuTabConfigs = () => {
+  const { t } = useTranslation();
+
+  const getMenuTabConfigs = (): StudioMenuTabType<SettingsModalTabId>[] => {
+    return [
+      {
+        tabId: aboutTabId,
+        tabName: t(`settings_modal.left_nav_tab_${aboutTabId}`),
+        icon: <InformationSquareIcon />,
+      },
+      {
+        tabId: setupTabId,
+        tabName: t(`settings_modal.left_nav_tab_${setupTabId}`),
+        icon: <SidebarBothIcon />,
+      },
+      {
+        tabId: policyTabId,
+        tabName: t(`settings_modal.left_nav_tab_${policyTabId}`),
+        icon: <ShieldLockIcon />,
+      },
+      {
+        tabId: accessControlTabId,
+        tabName: t(`settings_modal.left_nav_tab_${accessControlTabId}`),
+        icon: <TimerStartIcon />,
+      },
+    ];
+  };
+
+  return { getMenuTabConfigs };
+};

frontend/app-development/types/SettingsModalHandle.ts

@@ -1,5 +1,5 @@
-import type { SettingsModalTab } from './SettingsModalTab';
+import type { SettingsModalTabId } from './SettingsModalTabId';
 
 export type SettingsModalHandle = {
-  openSettings: (tab?: SettingsModalTab) => void;
+  openSettings: (tab?: SettingsModalTabId) => void;
 };

frontend/libs/studio-components/src/components/StudioContentMenu/StudioContentMenu.module.css

@@ -1,4 +1,4 @@
-.pagesRouterContainer {
+.tabsContainer {
   background-color: var(--fds-semantic-surface-action-second-subtle);
   height: 100%;
 }

frontend/libs/studio-components/src/components/StudioContentMenu/StudioContentMenu.stories.tsx

@@ -1,15 +1,30 @@
 import React from 'react';
 import type { Meta, StoryFn } from '@storybook/react';
 import { StudioContentMenu } from './StudioContentMenu';
-import { BookIcon, VideoIcon, QuestionmarkDiamondIcon } from '@studio/icons';
+import { BookIcon, VideoIcon, QuestionmarkDiamondIcon, ExternalLinkIcon } from '@studio/icons';
 import { StudioContentMenuWrapper } from './StudioContentMenuWrapper';
 
 type Story = StoryFn<typeof StudioContentMenu>;
 
 const meta: Meta = {
   title: 'Components/StudioContentMenu',
   component: StudioContentMenu,
-  argTypes: {},
+  argTypes: {
+    contentTabs: {
+      control: 'object',
+      description:
+        'Array of menu tabs with icons, names, and ids. Add prop `to` if tab should navigate to a different url',
+      table: {
+        type: { summary: 'StudioMenuTabType<TabId>[]' },
+      },
+    },
+    selectedTabId: {
+      table: { disable: true },
+    },
+    onChangeTab: {
+      table: { disable: true },
+    },
+  },
 };
 
 export default meta;
@@ -35,7 +50,11 @@ Preview.args = {
       tabName: 'LoremIpsumLoremIpsumLoremIpsum',
       icon: <QuestionmarkDiamondIcon />,
     },
+    {
+      tabId: 'tabAsLink',
+      tabName: 'Gå til Designsystemet',
+      icon: <ExternalLinkIcon />,
+      to: 'https://next.storybook.designsystemet.no',
+    },
   ],
-  selectedTabId: undefined,
-  onChangeTab: (tabId) => {},
 };

frontend/libs/studio-components/src/components/StudioContentMenu/StudioContentMenu.test.tsx

@@ -0,0 +1,157 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import type { StudioContentMenuProps } from './StudioContentMenu';
+import { StudioContentMenu } from './StudioContentMenu';
+import type { StudioMenuTabType } from './types/StudioMenuTabType';
+
+type StudioMenuTabName = 'tab1' | 'tab2' | 'tab3';
+
+const onChangeTabMock = jest.fn();
+
+const tab1Name = 'My tab';
+const tab1Id: StudioMenuTabName = 'tab1';
+const tab1: StudioMenuTabType<StudioMenuTabName> = {
+  tabName: tab1Name,
+  tabId: tab1Id,
+  icon: <svg></svg>,
+};
+const tab2Name = 'My second tab';
+const tab2: StudioMenuTabType<StudioMenuTabName> = {
+  tabName: tab2Name,
+  tabId: 'tab2',
+  icon: <svg></svg>,
+};
+
+describe('StudioContentMenu', () => {
+  afterEach(jest.clearAllMocks);
+
+  it('renders an empty contentMenu when there is no provided tabs', () => {
+    renderStudioContentMenu({ contentTabs: [] });
+    const emptyMenu = screen.getByRole('tablist');
+    expect(emptyMenu).toBeInTheDocument();
+  });
+
+  it('renders the title and icon of a given menu tab', () => {
+    const iconTitle = 'My icon';
+    renderStudioContentMenu({
+      contentTabs: [
+        {
+          ...tab1,
+          icon: <svg data-testid={iconTitle}></svg>,
+        },
+      ],
+    });
+    const menuTab = screen.getByRole('tab', { name: tab1Name });
+    const menuIcon = screen.getByTestId(iconTitle);
+    expect(menuTab).toBeInTheDocument();
+    expect(menuIcon).toBeInTheDocument();
+  });
+
+  it('renders a tab with "to" prop as a link element', () => {
+    const link = 'url-link';
+    renderStudioContentMenu({
+      contentTabs: [
+        {
+          ...tab1,
+          to: link,
+        },
+      ],
+    });
+    const menuTab = screen.getByRole('tab', { name: tab1Name });
+    const linkTab = screen.getByRole('link', { name: tab1Name });
+    expect(menuTab).toBeInTheDocument();
+    expect(linkTab).toBeInTheDocument();
+    expect(linkTab).toHaveAttribute('href', link);
+  });
+
+  it('allows changing focus to next tab using keyboard', async () => {
+    const user = userEvent.setup();
+    renderStudioContentMenu({
+      contentTabs: [tab1, tab2],
+    });
+    const tab1Element = screen.getByRole('tab', { name: tab1Name });
+    await user.click(tab1Element);
+    const tab2Element = screen.getByRole('tab', { name: tab2Name });
+    expect(tab2Element).not.toHaveFocus();
+    await user.keyboard('{ArrowDown}');
+    expect(tab2Element).toHaveFocus();
+  });
+
+  it('keeps focus on current tab if pressing keyDown when focus is on last tab in menu', async () => {
+    const user = userEvent.setup();
+    renderStudioContentMenu({
+      contentTabs: [tab1, tab2],
+    });
+    const tab2Element = screen.getByRole('tab', { name: tab2Name });
+    await user.click(tab2Element);
+    expect(tab2Element).toHaveFocus();
+    await user.keyboard('{ArrowDown}');
+    expect(tab2Element).toHaveFocus();
+  });
+
+  it('allows changing focus to previous tab using keyboard', async () => {
+    const user = userEvent.setup();
+    renderStudioContentMenu({
+      contentTabs: [tab1, tab2],
+    });
+    const tab2Element = screen.getByRole('tab', { name: tab2Name });
+    await user.click(tab2Element);
+    const tab1Element = screen.getByRole('tab', { name: tab1Name });
+    expect(tab1Element).not.toHaveFocus();
+    await user.keyboard('{ArrowUp}');
+    expect(tab1Element).toHaveFocus();
+  });
+
+  it('keeps focus on current tab if pressing keyUp when focus is on first tab in menu', async () => {
+    const user = userEvent.setup();
+    renderStudioContentMenu({
+      contentTabs: [tab1, tab2],
+    });
+    const tab1Element = screen.getByRole('tab', { name: tab1Name });
+    await user.click(tab1Element);
+    expect(tab1Element).toHaveFocus();
+    await user.keyboard('{ArrowUp}');
+    expect(tab1Element).toHaveFocus();
+  });
+
+  it('calls onChangeTab when clicking on a menu tab', async () => {
+    const user = userEvent.setup();
+    renderStudioContentMenu({
+      contentTabs: [tab1],
+    });
+    const menuTab = screen.getByRole('tab', { name: tab1Name });
+    await user.click(menuTab);
+    expect(onChangeTabMock).toHaveBeenCalledTimes(1);
+    expect(onChangeTabMock).toHaveBeenCalledWith(tab1Id);
+  });
+
+  it('calls onChangeTab when clicking on a menu tab with link', async () => {
+    const link = 'url-link';
+    const user = userEvent.setup();
+    renderStudioContentMenu({
+      contentTabs: [
+        {
+          ...tab1,
+          to: link,
+        },
+      ],
+    });
+    const menuTab = screen.getByRole('tab', { name: tab1Name });
+    await user.click(menuTab);
+    expect(onChangeTabMock).toHaveBeenCalledTimes(1);
+    expect(onChangeTabMock).toHaveBeenCalledWith(tab1Id);
+  });
+});
+
+const renderStudioContentMenu = ({
+  contentTabs,
+}: Partial<StudioContentMenuProps<StudioMenuTabName>> = {}) => {
+  render(
+    <StudioContentMenu
+      contentTabs={contentTabs}
+      selectedTabId={undefined}
+      onChangeTab={onChangeTabMock}
+    />,
+  );
+};

frontend/libs/studio-components/src/components/StudioContentMenu/StudioContentMenu.tsx

@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
 import type { ReactElement } from 'react';
 import classes from './StudioContentMenu.module.css';
-import { StudioMenuTab } from './StudioMenuTab';
-import type { StudioMenuTabType } from './StudioMenuTab';
+import { StudioMenuTabContainer } from './StudioMenuTab';
+import type { StudioMenuTabType } from './types/StudioMenuTabType';
 
-type StudioContentMenuProps<TabId extends string> = {
+export type StudioContentMenuProps<TabId extends string> = {
   contentTabs: StudioMenuTabType<TabId>[];
   selectedTabId: TabId;
   onChangeTab: (tabId: TabId) => void;
@@ -22,9 +22,9 @@ export function StudioContentMenu<TabId extends string>({
   };
 
   return (
-    <div className={classes.pagesRouterContainer} role='tablist'>
+    <div className={classes.tabsContainer} role='tablist'>
       {contentTabs.map((contentTab) => (
-        <StudioMenuTab
+        <StudioMenuTabContainer
           key={contentTab.tabId}
           contentTab={contentTab}
           isTabSelected={contentTab.tabId === selectedTab}

frontend/libs/studio-components/src/components/StudioContentMenu/StudioContentMenuWrapper.tsx

@@ -1,19 +1,15 @@
 import React from 'react';
+import type { StudioContentMenuProps } from './StudioContentMenu';
 import { StudioContentMenu } from './StudioContentMenu';
-import type { MenuTab } from './StudioMenuTab/StudioMenuTab';
 import classes from './StudioContentMenuWrapper.module.css';
 
-export type StudioContentMenuWrapperProps = {
-  contentTabs: MenuTab<string>[];
-  selectedTabId: string | undefined;
-  onChangeTab: (tabId: string) => void;
-};
+export type StudioContentMenuWrapperProps<TabId extends string> = StudioContentMenuProps<TabId>;
 
-export function StudioContentMenuWrapper({
+export function StudioContentMenuWrapper<TabId extends string>({
   contentTabs,
   selectedTabId,
   onChangeTab,
-}: StudioContentMenuWrapperProps) {
+}: StudioContentMenuWrapperProps<TabId>) {
   return (
     <div className={classes.contentMenuWrapper}>
       <StudioContentMenu