commit test that fails

src/app/work/WorkTabs.tsx

@@ -2,7 +2,7 @@
 
 import { useState, SyntheticEvent } from 'react';
 import Box from '@mui/material/Box';
-import Tabs from '@mui/material/Tabs';
+import Tabs, { TabsProps } from '@mui/material/Tabs';
 import Tab from '@mui/material/Tab';
 
 import { WorkItemType } from './constants';
@@ -17,27 +17,32 @@ type TabsOnChange = (event: SyntheticEvent, value: any) => void;
 
 interface WorkTabsProps {
   items: WorkItemType[];
+  scrollable: boolean;
 }
 
-const WorkTabs: React.FC<WorkTabsProps> = ({ items }) => {
+const WorkTabs: React.FC<WorkTabsProps> = ({ items, scrollable }) => {
   const [value, setValue] = useState(0);
 
   const handleChange: TabsOnChange = (_, newValue) => {
     setValue(newValue);
   };
 
+  const scrollableProps: TabsProps = {
+    variant: 'scrollable',
+    scrollButtons: true,
+    allowScrollButtonsMobile: true,
+  };
+
   return (
     <Box sx={{ width: '100%' }}>
       <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
         <Tabs
           value={value}
           onChange={handleChange}
           aria-label="work experience tabs"
-          variant="scrollable"
-          scrollButtons
-          allowScrollButtonsMobile
           // https://mui.com/base-ui/react-tabs/#keyboard-navigation
           selectionFollowsFocus
+          {...(scrollable && scrollableProps)}
         >
           {items.map((item, index) => {
             return (

src/app/work/page.test.tsx

@@ -7,7 +7,7 @@ import {
   screen,
   renderSnapshotWithLayout,
 } from 'test-utils';
-// import userEvent from '@testing-library/user-event';
+import userEvent from '@testing-library/user-event';
 
 import WorkPage from './page';
 
@@ -46,10 +46,10 @@ describe('The Work Page', () => {
     }
   );
 
-  test('works as expected', () => {
-    // const user = userEvent.setup();
+  test('works as expected', async () => {
+    const user = userEvent.setup();
 
-    render(<WorkPage />);
+    render(<WorkPage scrollable={false} />);
 
     const heading = screen.getByRole('heading', { level: 1 });
     expect(heading).toBeVisible();
@@ -65,7 +65,8 @@ describe('The Work Page', () => {
     expect(imperfectTab).toBeVisible();
 
     // TODO https://github.com/nicholeuf/zen-site-next/issues/30
-    // await user.click(imperfectTab);
+    // This triggers an error, which only happens while under test
+    await user.click(imperfectTab);
 
     // const imperfectHeading2 = screen.getByRole('heading', { level: 2 });
     // expect(imperfectHeading2).toBeVisible();

src/app/work/page.tsx

@@ -9,7 +9,11 @@ export const metadata: Metadata = {
   title: 'Work',
 };
 
-const Work: React.FC = () => {
+interface WorkProps {
+  scrollable?: boolean;
+}
+
+const Work: React.FC<WorkProps> = ({ scrollable = true }) => {
   return (
     <PageContainer data-testid="work-page">
       <Typography variant="h1" gutterBottom>
@@ -24,7 +28,7 @@ const Work: React.FC = () => {
         mentorship to colleagues, and collaborating within agile,
         cross-functional teams.
       </Typography>
-      <WorkTabs items={items} />
+      <WorkTabs items={items} scrollable={scrollable} />
     </PageContainer>
   );
 };