AppFlowy-Web/cypress/e2e/database/single-select-column.cy.ts

import {
  AddPageSelectors,
  DatabaseGridSelectors,
  PropertyMenuSelectors,
  GridFieldSelectors,
  SingleSelectSelectors,
  PageSelectors,
  FieldType,
  waitForReactUpdate
} from '../../support/selectors';
import { AuthTestUtils } from '../../support/auth-utils';
import { generateRandomEmail } from '../../support/test-config';

describe('Single Select Column Type', () => {
  const SINGLE_SELECT_FIELD_TYPE = 3; // From FieldType enum

  beforeEach(() => {
    cy.on('uncaught:exception', (err) => {
      if (err.message.includes('Minified React error') ||
        err.message.includes('View not found') ||
        err.message.includes('No workspace or service found')) {
        return false;
      }
      return true;
    });

    cy.viewport(1280, 720);
  });

  it('should create and edit basic grid cells', () => {
    const testEmail = generateRandomEmail();
    cy.log(`[TEST START] Third test - Test email: ${testEmail}`);

    cy.log('[STEP 1] Visiting login page');
    cy.visit('/login', { failOnStatusCode: false });
    cy.wait(2000);

    const authUtils = new AuthTestUtils();
    cy.log('[STEP 2] Starting authentication');
    authUtils.signInWithTestUrl(testEmail).then(() => {
      cy.log('[STEP 3] Authentication successful');
      cy.url({ timeout: 30000 }).should('include', '/app');
      cy.wait(5000); // Increased wait for CI environment
      
      // Ensure we're on the right page before proceeding
      cy.log('[STEP 3.1] Verifying workspace loaded');
      cy.get('body').should('exist');
      cy.wait(2000);

      // Create a new grid
      cy.log('[STEP 4] Creating new grid');
      cy.log('[STEP 4.1] Waiting for inline add button or new page button');
      
      // Try to find either inline add button or new page button
      AddPageSelectors.inlineAddButton().then($inlineAdd => {
        const inlineAddExists = $inlineAdd.length > 0;
        PageSelectors.newPageButton().then($newPage => {
          const newPageExists = $newPage.length > 0;

          if (inlineAddExists) {
            cy.log('[STEP 4.2] Using inline add button');
            AddPageSelectors.inlineAddButton().first().click({ force: true });
          } else if (newPageExists) {
            cy.log('[STEP 4.2] Using new page button instead');
            PageSelectors.newPageButton().first().click({ force: true });
          } else {
            cy.log('[STEP 4.2] Waiting for UI to stabilize');
            cy.wait(3000);
            AddPageSelectors.inlineAddButton().should('exist', { timeout: 15000 });
            AddPageSelectors.inlineAddButton().first().click({ force: true });
          }
        });
      });
      
      waitForReactUpdate(1000);
      cy.log('[STEP 4.3] Clicking add grid button');
      AddPageSelectors.addGridButton().should('exist', { timeout: 10000 });
      AddPageSelectors.addGridButton().click({ force: true });
      cy.wait(8000);


      // Verify cells exist
      DatabaseGridSelectors.cells().should('exist');

      // Get all cells and verify interaction
      DatabaseGridSelectors.cells().then($cells => {
        cy.log(`[STEP 8] Found ${$cells.length} cells`);

        // Click first cell
        cy.wrap($cells.first()).click();
        waitForReactUpdate(500);
        cy.focused().type('Cell 1 Data');
        cy.focused().type('{enter}');
        waitForReactUpdate(500);

        // Verify data was entered
        cy.wrap($cells.first()).should('contain.text', 'Cell 1 Data');

        // Click second cell if exists
        if ($cells.length > 1) {
          cy.wrap($cells.eq(1)).click();
          waitForReactUpdate(500);
          cy.focused().type('Option One');
          cy.focused().type('{enter}');
          waitForReactUpdate(500);

          // Verify the new option 'Option One' exists in the cell
          cy.wrap($cells.eq(1)).should('contain.text', 'Option One');
        }

        cy.log('[STEP 9] Cell interaction completed successfully');
      });
    });
  });

  it('should convert SingleSelect to RichText and back preserving options', () => {
    const testEmail = generateRandomEmail();
    cy.log(`[TEST START] Testing field type conversion - Test email: ${testEmail}`);

    cy.log('[STEP 1] Visiting login page');
    cy.visit('/login', { failOnStatusCode: false });
    cy.wait(2000);

    const authUtils = new AuthTestUtils();
    cy.log('[STEP 2] Starting authentication');
    authUtils.signInWithTestUrl(testEmail).then(() => {
      cy.log('[STEP 3] Authentication successful');
      cy.url({ timeout: 30000 }).should('include', '/app');
      cy.wait(5000); // Increased wait for CI environment
      
      // Ensure we're on the right page before proceeding
      cy.log('[STEP 3.1] Verifying workspace loaded');
      cy.get('body').should('exist');
      cy.wait(2000);

      // Create a new grid
      cy.log('[STEP 4] Creating new grid');
      cy.log('[STEP 4.1] Waiting for inline add button');
      AddPageSelectors.inlineAddButton().should('exist', { timeout: 15000 });
      AddPageSelectors.inlineAddButton().first().scrollIntoView().click({ force: true });
      waitForReactUpdate(1000);
      cy.log('[STEP 4.2] Clicking add grid button');
      AddPageSelectors.addGridButton().should('exist', { timeout: 10000 });
      AddPageSelectors.addGridButton().click({ force: true });
      cy.wait(8000);

      // Verify grid exists with better error handling
      cy.log('[STEP 5] Verifying grid exists');
      DatabaseGridSelectors.grid().should('exist', { timeout: 15000 });
      
      // Wait for cells to appear
      cy.log('[STEP 5.1] Waiting for cells to appear');
      DatabaseGridSelectors.cells().should('have.length.at.least', 1);

      // Add new column as SingleSelect
      cy.log('[STEP 6] Adding new SingleSelect column');
      PropertyMenuSelectors.newPropertyButton().first().scrollIntoView().click({ force: true });
      waitForReactUpdate(3000);

      // Check if property menu is open and change to SingleSelect
      cy.log('[STEP 7] Changing column type to SingleSelect');
      PropertyMenuSelectors.propertyTypeTrigger().then($trigger => {
        if ($trigger.length > 0) {
          cy.wrap($trigger.first()).click({ force: true });
          waitForReactUpdate(1000);
          PropertyMenuSelectors.propertyTypeOption(FieldType.SingleSelect).click({ force: true });
          waitForReactUpdate(2000);
        } else {
          GridFieldSelectors.allFieldHeaders().last().scrollIntoView().click({ force: true });
          waitForReactUpdate(1000);
          PropertyMenuSelectors.propertyTypeTrigger().first().click({ force: true });
          waitForReactUpdate(1000);
          PropertyMenuSelectors.propertyTypeOption(FieldType.SingleSelect).click({ force: true });
          waitForReactUpdate(2000);
        }
      });

      // Close menu
      cy.get('body').type('{esc}{esc}');
      waitForReactUpdate(1000);

      // Add some select options by clicking on cells
      cy.log('[STEP 8] Adding select options to cells');
      
      // First try to find select cells
      SingleSelectSelectors.allSelectOptionCells().then($cells => {
        if ($cells.length > 0) {
          cy.log(`[STEP 9] Found ${$cells.length} select cells`);
          
          SingleSelectSelectors.allSelectOptionCells().first().click({ force: true });
          waitForReactUpdate(500);
          cy.focused().type('Option A{enter}');
          waitForReactUpdate(1000);
          
          if ($cells.length > 1) {
            SingleSelectSelectors.allSelectOptionCells().eq(1).click({ force: true });
            waitForReactUpdate(500);
            cy.focused().type('Option B{enter}');
            waitForReactUpdate(1000);
          }
        } else {
          cy.log('[STEP 9] No select cells found, using regular cells');
          
          DatabaseGridSelectors.rows().first().within(() => {
            DatabaseGridSelectors.cells().last().click({ force: true });
            waitForReactUpdate(500);
          });
          
          cy.focused().type('Option A{enter}');
          waitForReactUpdate(1000);
          
          DatabaseGridSelectors.rows().eq(1).within(() => {
            DatabaseGridSelectors.cells().last().click({ force: true });
            waitForReactUpdate(500);
          });
          
          cy.focused().type('Option B{enter}');
          waitForReactUpdate(1000);
        }
      });

      // Now open the field header menu to convert to RichText
      cy.log('[STEP 10] Opening field menu to convert to RichText');
      GridFieldSelectors.allFieldHeaders().last().click({ force: true });
      waitForReactUpdate(1000);

      // Click edit property if available
      PropertyMenuSelectors.editPropertyMenuItem().then($edit => {
        if ($edit.length > 0) {
          cy.wrap($edit).click();
          waitForReactUpdate(1000);
        }
      });

      // Change type to RichText
      cy.log('[STEP 11] Converting SingleSelect to RichText');
      PropertyMenuSelectors.propertyTypeTrigger().click({ force: true });
      waitForReactUpdate(500);
      PropertyMenuSelectors.propertyTypeOption(FieldType.RichText).click({ force: true });
      waitForReactUpdate(2000);

      // Close menu
      cy.get('body').type('{esc}{esc}');
      waitForReactUpdate(1000);

      // Verify the cells now show text representation
      cy.log('[STEP 12] Verifying text representation of select options');
      DatabaseGridSelectors.cells().then($cells => {
        // Check if any cell contains "Option A" or "Option B" as text
        let foundOptionA = false;
        let foundOptionB = false;
        
        $cells.each((_, cell) => {
          const text = cell.textContent || '';
          if (text.includes('Option A')) foundOptionA = true;
          if (text.includes('Option B')) foundOptionB = true;
        });
        
        if (foundOptionA || foundOptionB) {
          cy.log('[STEP 13] Text representation confirmed - found option text');
        } else {
          cy.log('[STEP 13] Text representation may be empty or different');
        }
      });

      // Convert back to SingleSelect
      cy.log('[STEP 14] Converting back to SingleSelect');
      GridFieldSelectors.allFieldHeaders().last().click({ force: true });
      waitForReactUpdate(1000);

      // Click edit property if available
      PropertyMenuSelectors.editPropertyMenuItem().then($edit => {
        if ($edit.length > 0) {
          cy.wrap($edit).click();
          waitForReactUpdate(1000);
        }
      });

      // Change type back to SingleSelect
      cy.log('[STEP 15] Changing type back to SingleSelect');
      PropertyMenuSelectors.propertyTypeTrigger().click({ force: true });
      waitForReactUpdate(500);
      PropertyMenuSelectors.propertyTypeOption(FieldType.SingleSelect).click({ force: true });
      waitForReactUpdate(2000);

      // Close menu
      cy.get('body').type('{esc}{esc}');
      waitForReactUpdate(1000);

      // Verify select options are displayed again
      cy.log('[STEP 16] Verifying select options are displayed again');
      SingleSelectSelectors.allSelectOptionCells().then($cells => {
        if ($cells.length > 0) {
          cy.log(`[STEP 17] Success! Found ${$cells.length} select option cells after conversion`);
          
          SingleSelectSelectors.allSelectOptionCells().first().click();
          waitForReactUpdate(500);
          
          SingleSelectSelectors.selectOptionMenu().then($menu => {
            if ($menu.length > 0) {
              cy.log('[STEP 18] Select option menu opened - options preserved!');
            } else {
              cy.log('[STEP 18] Select cells exist but menu behavior may differ');
            }
          });
        } else {
          cy.log('[STEP 17] Select cells may be using different testid or rendering differently');
        }
      });

      cy.log('[STEP 19] Field type conversion test completed');
    });
  });
});