fix: turn experiments on

Author: Anton Standrik

tests/suites/sidebar/Sidebar.ts

@@ -8,11 +8,19 @@ export class Sidebar {
     private documentationButton: Locator;
     private accountButton: Locator;
     private collapseButton: Locator;
+    private drawer: Locator;
+    private drawerMenu: Locator;
+    private experimentsSection: Locator;
 
     constructor(page: Page) {
         this.sidebarContainer = page.locator('.gn-aside-header__aside-content');
         this.logoButton = this.sidebarContainer.locator('.gn-logo__btn-logo');
         this.footer = this.sidebarContainer.locator('.gn-aside-header__footer');
+        this.drawer = page.locator('.gn-drawer');
+        this.drawerMenu = page.locator('.gn-settings-menu');
+        this.experimentsSection = this.drawerMenu
+            .locator('.gn-settings-menu__item')
+            .filter({hasText: 'Experiments'});
 
         // Footer buttons with specific icons
         const footerItems = this.sidebarContainer.locator('.gn-footer-item');
@@ -94,4 +102,41 @@ export class Sidebar {
         const item = items.nth(index);
         return item.locator('.gn-composite-bar-item__title-text').innerText();
     }
+
+    async isDrawerVisible() {
+        return this.drawer.isVisible();
+    }
+
+    async getDrawerMenuItems(): Promise<string[]> {
+        const items = this.drawerMenu.locator('.gn-settings-menu__item >> span');
+        const count = await items.count();
+        const texts: string[] = [];
+        for (let i = 0; i < count; i++) {
+            texts.push(await items.nth(i).innerText());
+        }
+        return texts;
+    }
+
+    async clickExperimentsSection() {
+        await this.experimentsSection.click();
+    }
+
+    async toggleExperimentByTitle(title: string) {
+        const experimentItem = this.drawer
+            .locator('.gn-settings__item-title')
+            .filter({hasText: title});
+        // Click the label element which wraps the switch, avoiding the slider that intercepts events
+        const switchLabel = experimentItem.locator(
+            'xpath=../../..//label[contains(@class, "g-control-label")]',
+        );
+        await switchLabel.click();
+    }
+
+    async isExperimentEnabled(title: string): Promise<boolean> {
+        const experimentItem = this.drawer
+            .locator('.gn-settings__item-title')
+            .filter({hasText: title});
+        const switchControl = experimentItem.locator('xpath=../../..//input[@type="checkbox"]');
+        return switchControl.isChecked();
+    }
 }

tests/suites/sidebar/sidebar.test.ts

@@ -31,6 +31,25 @@ test.describe('Test Sidebar', async () => {
         await sidebar.clickSettings();
     });
 
+    test('Settings button click opens drawer with correct sections', async ({page}) => {
+        const sidebar = new Sidebar(page);
+        await sidebar.waitForSidebarToLoad();
+
+        // Initially drawer should not be visible
+        await expect(sidebar.isDrawerVisible()).resolves.toBe(false);
+
+        // Click settings button
+        await sidebar.clickSettings();
+        await page.waitForTimeout(500); // Wait for animation
+
+        // Drawer should become visible
+        await expect(sidebar.isDrawerVisible()).resolves.toBe(true);
+
+        // Verify drawer menu items
+        const menuItems = await sidebar.getDrawerMenuItems();
+        expect(menuItems).toEqual(['General', 'Editor', 'Experiments', 'About']);
+    });
+
     test('Documentation button is visible and clickable', async ({page}) => {
         const sidebar = new Sidebar(page);
         await sidebar.waitForSidebarToLoad();
@@ -70,4 +89,35 @@ test.describe('Test Sidebar', async () => {
         const itemsCount = await sidebar.getFooterItemsCount();
         expect(itemsCount).toBeGreaterThan(0);
     });
+
+    test('Can toggle experiments in settings', async ({page}) => {
+        const sidebar = new Sidebar(page);
+        await sidebar.waitForSidebarToLoad();
+
+        // Open settings
+        await sidebar.clickSettings();
+        await page.waitForTimeout(500); // Wait for animation
+
+        // Click experiments section
+        await sidebar.clickExperimentsSection();
+        await page.waitForTimeout(500); // Wait for animation
+
+        // Toggle "Use paginated tables" experiment
+        const experimentTitle = 'Use paginated tables';
+        const initialState = await sidebar.isExperimentEnabled(experimentTitle);
+        await sidebar.toggleExperimentByTitle(experimentTitle);
+        await page.waitForTimeout(500); // Wait for animation
+
+        // Verify the state has changed
+        const newState = await sidebar.isExperimentEnabled(experimentTitle);
+        expect(newState).not.toBe(initialState);
+
+        // Toggle back
+        await sidebar.toggleExperimentByTitle(experimentTitle);
+        await page.waitForTimeout(500); // Wait for animation
+
+        // Verify it's back to initial state
+        const finalState = await sidebar.isExperimentEnabled(experimentTitle);
+        expect(finalState).toBe(initialState);
+    });
 });