opensource/AppFlowy-Web
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy-Web.git synced 2025-12-02 04:18:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: add selector

Browse Source
This commit is contained in:
nathan
2025-09-10 16:04:25 +08:00
parent b6c973355d
commit 85ff89e1e9
4 changed files with 77 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
cypress/e2e/database/checkbox-column.cy.ts
View File

@@ -3,6 +3,7 @@ import { AuthTestUtils } from '../../support/auth-utils';
import {
AddPageSelectors,
DatabaseGridSelectors,
CheckboxSelectors,
waitForReactUpdate
} from '../../support/selectors';
@@ -47,7 +48,7 @@ describe('Checkbox Column Type', () => {
// Verify cells exist
cy.log('[STEP 7] Verifying cells exist');
cy.get('[data-testid^="grid-cell-"]', { timeout: 10000 }).should('exist');
DatabaseGridSelectors.cells().should('exist');
// Click on first cell
cy.log('[STEP 8] Clicking on first cell');
@@ -63,7 +64,7 @@ describe('Checkbox Column Type', () => {
cy.log(`[STEP 10] Found ${checkboxCells.length} checkbox cells`);
// Click first checkbox cell
cy.get('[data-testid^="checkbox-cell-"]').first().click();
CheckboxSelectors.allCheckboxCells().first().click();
waitForReactUpdate(500);
cy.log('[STEP 11] Clicked checkbox cell');
} else {

25
cypress/e2e/database/datetime-column.cy.ts
View File

@@ -3,12 +3,15 @@ import { AuthTestUtils } from '../../support/auth-utils';
import {
AddPageSelectors,
DatabaseGridSelectors,
DateTimeSelectors,
PropertyMenuSelectors,
GridFieldSelectors,
FieldType,
waitForReactUpdate
} from '../../support/selectors';
describe('DateTime Column Type', () => {
const generateRandomEmail = () => `${uuidv4()}@appflowy.io`;
const DATETIME_FIELD_TYPE = 2; // From FieldType enum
beforeEach(() => {
cy.on('uncaught:exception', (err) => {
@@ -56,8 +59,8 @@ describe('DateTime Column Type', () => {
// Add new column
cy.log('[STEP 7] Adding new column by clicking new property button');
cy.get('[data-testid="grid-new-property-button"]').should('be.visible');
cy.get('[data-testid="grid-new-property-button"]').first().scrollIntoView().click({ force: true });
PropertyMenuSelectors.newPropertyButton().should('be.visible');
PropertyMenuSelectors.newPropertyButton().first().scrollIntoView().click({ force: true });
waitForReactUpdate(3000);
// The new column is created and the property menu should be open automatically
@@ -67,26 +70,26 @@ describe('DateTime Column Type', () => {
// Check if property type trigger exists
if ($body.find('[data-testid="property-type-trigger"]').length > 0) {
cy.log('[STEP 9] Property type trigger found, changing to DateTime');
cy.get('[data-testid="property-type-trigger"]').first().click({ force: true });
PropertyMenuSelectors.propertyTypeTrigger().first().click({ force: true });
waitForReactUpdate(1000);
// Select DateTime option
cy.log('[STEP 10] Selecting DateTime option');
cy.get(`[data-testid="property-type-option-${DATETIME_FIELD_TYPE}"]`).click({ force: true });
PropertyMenuSelectors.propertyTypeOption(FieldType.DateTime).click({ force: true });
waitForReactUpdate(2000);
} else {
cy.log('[STEP 9] Property type trigger not found, looking for field header');
// Try clicking on the new field header first
cy.get('[data-testid^="grid-field-header-"]').last().scrollIntoView().click({ force: true });
GridFieldSelectors.allFieldHeaders().last().scrollIntoView().click({ force: true });
waitForReactUpdate(1000);
// Now try to find the property type trigger
cy.get('[data-testid="property-type-trigger"]').first().click({ force: true });
PropertyMenuSelectors.propertyTypeTrigger().first().click({ force: true });
waitForReactUpdate(1000);
// Select DateTime option
cy.log('[STEP 10] Selecting DateTime option');
cy.get(`[data-testid="property-type-option-${DATETIME_FIELD_TYPE}"]`).click({ force: true });
PropertyMenuSelectors.propertyTypeOption(FieldType.DateTime).click({ force: true });
waitForReactUpdate(2000);
}
});
@@ -104,7 +107,7 @@ describe('DateTime Column Type', () => {
cy.log(`[STEP 13] Found ${datetimeCells.length} datetime cells`);
// Try to interact with the first datetime cell
cy.get('[data-testid^="datetime-cell-"]').first().scrollIntoView().click({ force: true });
DateTimeSelectors.allDateTimeCells().first().scrollIntoView().click({ force: true });
waitForReactUpdate(1000);
// Check if picker opens
@@ -117,8 +120,8 @@ describe('DateTime Column Type', () => {
const dateStr = `${(today.getMonth() + 1).toString().padStart(2, '0')}/${today.getDate().toString().padStart(2, '0')}/${today.getFullYear()}`;
cy.log(`[STEP 15] Entering date: ${dateStr}`);
cy.get('[data-testid="datetime-date-input"]').clear().type(dateStr);
cy.get('[data-testid="datetime-date-input"]').type('{enter}');
DateTimeSelectors.dateTimeDateInput().clear().type(dateStr);
DateTimeSelectors.dateTimeDateInput().type('{enter}');
waitForReactUpdate(1000);
cy.log('[STEP 16] Date entered successfully');

2
cypress/e2e/database/single-select-column.cy.ts
View File

@@ -47,7 +47,7 @@ describe('Single Select Column Type', () => {
// Verify cells exist
cy.get('[data-testid^="grid-cell-"]', { timeout: 10000 }).should('exist');
DatabaseGridSelectors.cells().should('exist');
// Get all cells and verify interaction
DatabaseGridSelectors.cells().then($cells => {

67
cypress/support/selectors.ts
View File

@@ -243,14 +243,8 @@ export const GridFieldSelectors = {
// Field header by field ID
fieldHeader: (fieldId: string) => cy.get(byTestId(`grid-field-header-${fieldId}`)),
// Edit property menu item
editPropertyMenuItem: () => cy.get(byTestId('grid-field-edit-property')),
// Property type trigger in property menu
propertyTypeTrigger: () => cy.get(byTestId('property-type-trigger')),
// Property type option (e.g. SingleSelect = 3)
propertyTypeOption: (fieldType: number) => cy.get(byTestId(`property-type-option-${fieldType}`)),
// All field headers
allFieldHeaders: () => cy.get('[data-testid^="grid-field-header-"]'),
// Add select option button
addSelectOptionButton: () => cy.get(byTestId('add-select-option')),
@@ -294,6 +288,63 @@ export const CheckboxSelectors = {
/**
* Helper function to wait for React to re-render after state changes
*/
/**
* DateTime Column selectors
*/
export const DateTimeSelectors = {
// DateTime cell by row and field ID
dateTimeCell: (rowId: string, fieldId: string) => cy.get(byTestId(`datetime-cell-${rowId}-${fieldId}`)),
// All datetime cells
allDateTimeCells: () => cy.get('[data-testid^="datetime-cell-"]'),
// DateTime picker popover
dateTimePickerPopover: () => cy.get(byTestId('datetime-picker-popover')),
// DateTime date input field
dateTimeDateInput: () => cy.get(byTestId('datetime-date-input')),
// DateTime time input field
dateTimeTimeInput: () => cy.get(byTestId('datetime-time-input')),
};
/**
* Property Menu selectors
*/
export const PropertyMenuSelectors = {
// Property type trigger button
propertyTypeTrigger: () => cy.get(byTestId('property-type-trigger')),
// Property type option by field type number
propertyTypeOption: (fieldType: number) => cy.get(byTestId(`property-type-option-${fieldType}`)),
// Grid new property button
newPropertyButton: () => cy.get(byTestId('grid-new-property-button')),
// Edit property menu item
editPropertyMenuItem: () => cy.get(byTestId('grid-field-edit-property')),
};
/**
* Field Types enum for database columns
*/
export const FieldType = {
RichText: 0,
Number: 1,
DateTime: 2,
SingleSelect: 3,
MultiSelect: 4,
Checkbox: 5,
URL: 6,
Checklist: 7,
LastEditedTime: 8,
CreatedTime: 9,
Relation: 10,
AISummaries: 11,
AITranslations: 12,
FileMedia: 14
};
export function waitForReactUpdate(ms: number = 500) {
return cy.wait(ms);
}