[INCOMPLETE] Complete test for tabs interaction

.gitignore

@@ -40,3 +40,20 @@ yarn-error.log*
 
 # Sentry Config File
 .sentryclirc
+
+# Created by https://www.gitignore.io/api/visualstudiocode
+# Edit at https://www.gitignore.io/?templates=visualstudiocode
+
+### VisualStudioCode ###
+.vscode/
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+### VisualStudioCode Patch ###
+# Ignore all local history of files
+**/.history
+
+# End of https://www.gitignore.io/api/visualstudiocode
+

.vscode/extensions.json

@@ -1,7 +1,3 @@
 {
-  "recommendations": [
-    "arcanis.vscode-zipfs",
-    "dbaeumer.vscode-eslint",
-    "esbenp.prettier-vscode"
-  ]
+  "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
 }

.vscode/launch.json

@@ -0,0 +1,40 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Next.js: debug server-side",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "yarn dev"
+    },
+    {
+      "name": "Next.js: debug client-side",
+      "type": "chrome",
+      "request": "launch",
+      "url": "http://localhost:3000"
+    },
+    {
+      "name": "Next.js: debug full stack",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "yarn dev",
+      "serverReadyAction": {
+        "pattern": "- Local:.+(https?://.+)",
+        "uriFormat": "%s",
+        "action": "debugWithChrome"
+      }
+    },
+    {
+      "name": "Next.js: tests",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "yarn test"
+    },
+    {
+      "name": "Next.js: watch tests",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "yarn test:watch"
+    }
+  ]
+}

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>
   );
 };