[WIP]feat: add data-testids on all sections in sidebar container

.gitignore

@@ -37,3 +37,8 @@ next-env.d.ts
 /.nuxt/
 /.output/
 
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

package.json

@@ -49,6 +49,7 @@
     "@biomejs/biome": "^2.2.2",
     "@commitlint/cli": "^19.8.1",
     "@commitlint/config-conventional": "^19.8.1",
+    "@playwright/test": "^1.55.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.8.0",
     "@testing-library/react": "^16.3.0",

packages/widget-playground/src/components/Card/ExpandableCard.tsx

@@ -14,6 +14,7 @@ interface ExpandableCardProps {
   title: ReactNode
   value: ReactNode
   alwaysShowTitleValue?: boolean
+  dataTestId?: string
 }
 
 export const ExpandableCard: FC<PropsWithChildren<ExpandableCardProps>> = ({
@@ -22,6 +23,7 @@ export const ExpandableCard: FC<PropsWithChildren<ExpandableCardProps>> = ({
   value,
   children,
   alwaysShowTitleValue,
+  dataTestId,
 }) => {
   const { expanded, toggleExpanded } = useExpandableCard()
   const buttonId = useId()
@@ -36,6 +38,7 @@ export const ExpandableCard: FC<PropsWithChildren<ExpandableCardProps>> = ({
         onClick={toggleExpanded}
         disableRipple
         sx={{ p: 1 }}
+        data-testid={dataTestId}
       >
         <CardTitleContainer sx={{ minHeight: 24 }}>
           {icon}

packages/widget-playground/src/components/DrawerControls/CodeControl/CodeControl.tsx

@@ -46,8 +46,18 @@ export const CodeControl = () => {
           indicatorColor="primary"
           onChange={(_, value) => setCodeControlTab(value)}
         >
-          <Tab label={'Config'} value="config" disableRipple />
-          <Tab label={'Examples'} value="examples" disableRipple />
+          <Tab
+            label={'Config'}
+            value="config"
+            disableRipple
+            data-testid="config-tab"
+          />
+          <Tab
+            label={'Examples'}
+            value="examples"
+            disableRipple
+            data-testid="examples-tab"
+          />
         </Tabs>
       </Box>
       <TabContext value={codeControlTab}>

packages/widget-playground/src/components/DrawerControls/DesignControls/AppearanceControl.tsx

@@ -148,6 +148,7 @@ export const AppearanceControl = () => {
           {colorSchemeMode}
         </BadgableCardValue>
       }
+      dataTestId="appearance-section"
     >
       <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
         {restricted ? (

packages/widget-playground/src/components/DrawerControls/DesignControls/ButtonRaduisControl.tsx

@@ -64,10 +64,14 @@ export const ButtonRadiusControl = () => {
     <ExpandableCard
       title={'Button Radius'}
       value={
-        <CardValue sx={{ textTransform: 'capitalize' }}>
+        <CardValue
+          sx={{ textTransform: 'capitalize' }}
+          data-testid="button-radius-value"
+        >
           {borderRadiusSecondary}
         </CardValue>
       }
+      dataTestId="button-radius-section"
     >
       <TabButtonsContainer sx={{ mt: 0.5 }}>
         {clickableValues.map((value) => {
@@ -76,6 +80,7 @@ export const ButtonRadiusControl = () => {
               key={value.toString()}
               selected={borderRadiusSecondary === value && focused !== 'input'}
               onClick={() => handleButtonClick(value)}
+              data-testid="button-radius-value"
               onFocus={handleFocusButton}
               disableRipple
             >
@@ -93,6 +98,7 @@ export const ButtonRadiusControl = () => {
           onBlur={handleBlurInput}
           inputProps={{ pattern: '[0-9]' }}
           onFocus={handleFocusInput}
+          data-testid="button-radius-custom-input"
           placeholder={focused === 'input' ? '' : 'Custom'}
           value={customValue}
         />

packages/widget-playground/src/components/DrawerControls/DesignControls/CardRadiusControl.tsx

@@ -66,6 +66,7 @@ export const CardRadiusControl = () => {
           {borderRadius}
         </CardValue>
       }
+      dataTestId="card-radius-section"
     >
       <TabButtonsContainer sx={{ mt: 0.5 }}>
         {clickableValues.map((value) => {

packages/widget-playground/src/components/DrawerControls/DesignControls/ColorControls.tsx

@@ -35,7 +35,11 @@ export const ColorControl = () => {
   const { themeMode } = useThemeMode()
   const editableColors = getEditableColors(themeMode)
   return (
-    <ExpandableCard title={'Colors'} value={<Swatches />}>
+    <ExpandableCard
+      title={'Colors'}
+      value={<Swatches />}
+      dataTestId="color-section"
+    >
       {Object.entries(editableColors).map(([colorName, colorConfigPath]) => (
         <ColorSelector
           key={colorConfigPath}

packages/widget-playground/src/components/DrawerControls/DesignControls/FontsControl/FontsControl.tsx

@@ -88,6 +88,7 @@ export const FontsControl = () => {
           )}
         </>
       }
+      dataTestId="fonts-section"
       value={selectedFont?.family}
     >
       {selectedFont && (

packages/widget-playground/src/components/DrawerControls/DesignControls/LayoutControls/LayoutControl.tsx

@@ -176,6 +176,7 @@ export const LayoutControl = () => {
             ?.name || ''}
         </CardValue>
       }
+      dataTestId="layout-section"
     >
       <ControlRowContainer
         sx={selectedLayoutId !== 'default' ? { paddingBottom: 0 } : undefined}

packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl/PlaygroundSettingsControl.tsx

@@ -12,6 +12,7 @@ export const PlaygroundSettingsControl = () => {
       title={'Playground settings'}
       value={<SettingsIcon />}
       alwaysShowTitleValue
+      dataTestId="playground-settings-section"
     >
       <PlaygroundControlsContainer>
         <ViewportColorSelector />

packages/widget-playground/src/components/DrawerControls/DesignControls/SkeletonControl.tsx

@@ -40,6 +40,7 @@ export const SkeletonControl = () => {
           {isSkeletonShown ? 'shown' : 'hidden'}
         </CardValue>
       }
+      dataTestId="skeleton-section"
     >
       <CardRowContainer sx={{ paddingBottom: 0 }}>
         Show skeleton

packages/widget-playground/src/components/DrawerControls/DesignControls/SubvariantControl.tsx

@@ -45,6 +45,7 @@ export const SubvariantControl = () => {
       value={
         <CardValue sx={{ textTransform: 'capitalize' }}>{subvariant}</CardValue>
       }
+      dataTestId="subvariant-section"
     >
       <Tabs
         value={subvariant}

packages/widget-playground/src/components/DrawerControls/DesignControls/ThemeControl.tsx

@@ -38,6 +38,7 @@ export const ThemeControl = () => {
           {selectedThemeItem?.name ? selectedThemeItem?.name : 'default'}
         </CardValue>
       }
+      dataTestId="theme-section"
     >
       <Select
         value={selectedThemeId}

packages/widget-playground/src/components/DrawerControls/DesignControls/VariantControl.tsx

@@ -40,6 +40,7 @@ export const VariantControl = () => {
       value={
         <CardValue sx={{ textTransform: 'capitalize' }}>{variant}</CardValue>
       }
+      dataTestId="variant-section"
     >
       <Tabs
         value={variant}

packages/widget-playground/src/components/DrawerControls/DesignControls/WalletManagementControl.tsx

@@ -51,7 +51,7 @@ export const WalletManagementControl = () => {
   }
 
   return (
-    <Card>
+    <Card data-testid="wallet-management-section">
       <CardRowContainer>
         <CardTitleContainer>
           <CardValue>Manage wallet externally</CardValue>

packages/widget-playground/src/components/DrawerControls/DrawerControls.tsx

@@ -58,12 +58,16 @@ export const DrawerControls = () => {
         open={isDrawerOpen}
         drawerWidth={drawerWidth}
       >
-        <DrawerContentContainer drawerWidth={drawerWidth}>
+        <DrawerContentContainer
+          drawerWidth={drawerWidth}
+          data-testid="sidebar-container"
+        >
           <HeaderRow>
             <Header>LI.FI Widget</Header>
             <Box>
               <Tooltip
                 title="Reset config"
+                data-testid="reset-config-icon"
                 slotProps={{
                   popper: { style: { zIndex: tooltipPopperZIndex } },
                 }}
@@ -75,6 +79,7 @@ export const DrawerControls = () => {
               </Tooltip>
               <Tooltip
                 title="Close tools"
+                data-testid="close-tools-icon"
                 slotProps={{
                   popper: { style: { zIndex: tooltipPopperZIndex } },
                 }}
@@ -97,13 +102,15 @@ export const DrawerControls = () => {
                 icon={<DesignServicesIcon />}
                 iconPosition="start"
                 label={'Design'}
+                data-testid="design-tab"
                 value="design"
                 disableRipple
               />
               <Tab
                 icon={<IntegrationInstructionsIcon />}
                 iconPosition="start"
                 label={'Code'}
+                data-testid="code-tab"
                 value="code"
                 disableRipple
               />

playwright.config.ts

@@ -0,0 +1,84 @@
+import { defineConfig, devices } from '@playwright/test'
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// import path from 'path';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  timeout: 60 * 1000, // Reduced from 120s to 60s
+  expect: {
+    timeout: 30 * 1000, // Reduced from 60s to 30s
+  },
+  testDir: './tests',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://localhost:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    // {
+    //   name: 'firefox',
+    //   use: { ...devices['Desktop Firefox'] },
+    // },
+
+    // {
+    //   name: 'webkit',
+    //   use: { ...devices['Desktop Safari'] },
+    // },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'pnpm dev',
+    url: 'http://localhost:3000',
+    reuseExistingServer: !process.env.CI,
+  },
+})

tests/sideBar.spec.ts

@@ -0,0 +1,9 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('Check sections inside sidebar', () => {
+  test('Check sections inside sidebar', async ({ page }) => {
+    await page.goto('http://localhost:3000')
+    const sidebar = page.getByTestId('sidebar-container')
+    await expect(sidebar).toContainText('LI.FI Widget')
+  })
+})