mirror of
https://github.com/AppFlowy-IO/AppFlowy-Web.git
synced 2025-11-30 11:27:55 +08:00
chore: fix test
This commit is contained in:
Nathan
233
cypress/e2e/embeded/database/linked-database-slash-menu.cy.ts
Normal file
233
cypress/e2e/embeded/database/linked-database-slash-menu.cy.ts
Normal file
@@ -0,0 +1,233 @@
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
import { AuthTestUtils } from '../../../support/auth-utils';
|
||||
import { getSlashMenuItemName } from '../../../support/i18n-constants';
|
||||
import {
|
||||
AddPageSelectors,
|
||||
DatabaseGridSelectors,
|
||||
EditorSelectors,
|
||||
ModalSelectors,
|
||||
SlashCommandSelectors,
|
||||
waitForReactUpdate
|
||||
} from '../../../support/selectors';
|
||||
|
||||
describe('Embedded Database - Slash Menu Creation', () => {
|
||||
const generateRandomEmail = () => `${uuidv4()}@appflowy.io`;
|
||||
|
||||
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 linked database view via slash menu within 500ms', () => {
|
||||
const testEmail = generateRandomEmail();
|
||||
|
||||
cy.task('log', `[TEST START] Testing slash menu creation - Test email: ${testEmail}`);
|
||||
|
||||
// Step 1: Login
|
||||
cy.task('log', '[STEP 1] Visiting login page');
|
||||
cy.visit('/login', { failOnStatusCode: false });
|
||||
cy.wait(2000);
|
||||
|
||||
const authUtils = new AuthTestUtils();
|
||||
cy.task('log', '[STEP 2] Starting authentication');
|
||||
authUtils.signInWithTestUrl(testEmail).then(() => {
|
||||
cy.task('log', '[STEP 3] Authentication successful');
|
||||
cy.url({ timeout: 30000 }).should('include', '/app');
|
||||
cy.wait(3000);
|
||||
|
||||
// Create a source database to link to
|
||||
cy.task('log', '[STEP 4] Creating source database to link to');
|
||||
AddPageSelectors.inlineAddButton().first().as('addBtn1');
|
||||
cy.get('@addBtn1').should('be.visible').click();
|
||||
waitForReactUpdate(1000);
|
||||
AddPageSelectors.addGridButton().should('be.visible').as('gridBtn1');
|
||||
cy.get('@gridBtn1').click();
|
||||
cy.wait(5000);
|
||||
|
||||
// Get the database name from the view tab (default is "New Grid")
|
||||
const dbName = 'New Grid';
|
||||
cy.task('log', `[STEP 4.1] Using database name: ${dbName}`);
|
||||
|
||||
// Create a new document at same level as database
|
||||
cy.task('log', '[STEP 5] Creating new document at same level as database');
|
||||
AddPageSelectors.inlineAddButton().first().as('addDocBtnSlash');
|
||||
cy.get('@addDocBtnSlash').should('be.visible').click();
|
||||
waitForReactUpdate(1000);
|
||||
cy.get('[role="menuitem"]').first().as('menuItemSlash');
|
||||
cy.get('@menuItemSlash').click();
|
||||
waitForReactUpdate(1000);
|
||||
|
||||
// Handle the new page modal if it appears
|
||||
cy.get('body').then(($body) => {
|
||||
if ($body.find('[data-testid="new-page-modal"]').length > 0) {
|
||||
cy.task('log', '[STEP 5.1] Handling new page modal');
|
||||
ModalSelectors.newPageModal().should('be.visible').within(() => {
|
||||
ModalSelectors.spaceItemInModal().first().as('spaceItem1');
|
||||
cy.get('@spaceItem1').click();
|
||||
waitForReactUpdate(500);
|
||||
cy.contains('button', 'Add').click();
|
||||
});
|
||||
cy.wait(3000);
|
||||
} else {
|
||||
cy.wait(3000);
|
||||
}
|
||||
});
|
||||
|
||||
// Wait for editor to be available
|
||||
cy.task('log', '[STEP 6] Waiting for editor to be available');
|
||||
EditorSelectors.firstEditor().should('exist', { timeout: 15000 });
|
||||
|
||||
// Step 2: Type "/" to open slash menu
|
||||
cy.task('log', '[STEP 7] Opening slash menu');
|
||||
EditorSelectors.firstEditor().click().type('/');
|
||||
waitForReactUpdate(500);
|
||||
|
||||
// Step 3: Select "Linked Database" option
|
||||
cy.task('log', '[STEP 7] Selecting Linked Database option');
|
||||
SlashCommandSelectors.slashPanel()
|
||||
.should('be.visible')
|
||||
.within(() => {
|
||||
SlashCommandSelectors.slashMenuItem(getSlashMenuItemName('linkedGrid')).first().as('linkedGridItem1');
|
||||
cy.get('@linkedGridItem1').click();
|
||||
});
|
||||
|
||||
waitForReactUpdate(1000);
|
||||
|
||||
// Step 4: Choose the existing database
|
||||
cy.task('log', `[STEP 8] Selecting source database: ${dbName}`);
|
||||
SlashCommandSelectors.selectDatabase(dbName);
|
||||
|
||||
waitForReactUpdate(2000);
|
||||
|
||||
// Measure time for database to appear
|
||||
const startTime = Date.now();
|
||||
cy.task('log', '[STEP 9] Waiting for linked database to appear');
|
||||
|
||||
// Step 5: Verify linked database appears
|
||||
cy.get('[class*="appflowy-database"]', { timeout: 10000 })
|
||||
.should('exist')
|
||||
.last()
|
||||
.then(() => {
|
||||
const elapsed = Date.now() - startTime;
|
||||
cy.task('log', `[PERFORMANCE] Linked database appeared in ${elapsed}ms`);
|
||||
|
||||
// Expected result: < 500ms typically, but allow up to 30s for CI (includes initial load)
|
||||
expect(elapsed).to.be.lessThan(30000);
|
||||
|
||||
if (elapsed > 500) {
|
||||
cy.task('log', `[PERFORMANCE WARNING] Creation took ${elapsed}ms (expected < 500ms)`);
|
||||
}
|
||||
});
|
||||
|
||||
// Verify content is displayed
|
||||
cy.task('log', '[STEP 10] Verifying database content');
|
||||
cy.get('[class*="appflowy-database"]')
|
||||
.last()
|
||||
.within(() => {
|
||||
DatabaseGridSelectors.grid().should('exist');
|
||||
});
|
||||
|
||||
cy.task('log', '[TEST COMPLETE] Linked database slash menu creation test passed');
|
||||
});
|
||||
});
|
||||
|
||||
it('should retry loading if sync is slow', () => {
|
||||
const testEmail = generateRandomEmail();
|
||||
|
||||
// Spy on console logs to check for retry messages
|
||||
cy.on('window:before:load', (win) => {
|
||||
cy.spy(win.console, 'log').as('consoleLog');
|
||||
cy.spy(win.console, 'warn').as('consoleWarn');
|
||||
});
|
||||
|
||||
cy.task('log', `[TEST START] Testing retry mechanism - Test email: ${testEmail}`);
|
||||
|
||||
// Login and setup (similar to previous test)
|
||||
cy.visit('/login', { failOnStatusCode: false });
|
||||
cy.wait(2000);
|
||||
|
||||
const authUtils = new AuthTestUtils();
|
||||
authUtils.signInWithTestUrl(testEmail).then(() => {
|
||||
cy.url({ timeout: 30000 }).should('include', '/app');
|
||||
cy.wait(3000);
|
||||
|
||||
// Create source DB
|
||||
AddPageSelectors.inlineAddButton().first().as('addBtn2');
|
||||
cy.get('@addBtn2').click();
|
||||
waitForReactUpdate(1000);
|
||||
AddPageSelectors.addGridButton().should('be.visible').as('gridBtn2');
|
||||
cy.get('@gridBtn2').click();
|
||||
cy.wait(5000);
|
||||
const dbName = 'New Grid';
|
||||
cy.task('log', `[STEP] Using database name: ${dbName}`);
|
||||
|
||||
// Create doc at same level as database
|
||||
AddPageSelectors.inlineAddButton().first().as('addDocBtnSlash2');
|
||||
cy.get('@addDocBtnSlash2').should('be.visible').click();
|
||||
waitForReactUpdate(1000);
|
||||
cy.get('[role="menuitem"]').first().as('menuItemSlash2');
|
||||
cy.get('@menuItemSlash2').click();
|
||||
waitForReactUpdate(1000);
|
||||
|
||||
// Handle the new page modal if it appears
|
||||
cy.get('body').then(($body) => {
|
||||
if ($body.find('[data-testid="new-page-modal"]').length > 0) {
|
||||
ModalSelectors.newPageModal().should('be.visible').within(() => {
|
||||
ModalSelectors.spaceItemInModal().first().as('spaceItem2');
|
||||
cy.get('@spaceItem2').click();
|
||||
waitForReactUpdate(500);
|
||||
cy.contains('button', 'Add').click();
|
||||
});
|
||||
cy.wait(3000);
|
||||
} else {
|
||||
cy.wait(3000);
|
||||
}
|
||||
});
|
||||
|
||||
// Wait for editor to be available
|
||||
EditorSelectors.firstEditor().should('exist', { timeout: 15000 });
|
||||
|
||||
// Insert linked DB
|
||||
EditorSelectors.firstEditor().click().type('/');
|
||||
waitForReactUpdate(500);
|
||||
|
||||
SlashCommandSelectors.slashPanel()
|
||||
.should('be.visible')
|
||||
.within(() => {
|
||||
SlashCommandSelectors.slashMenuItem(getSlashMenuItemName('linkedGrid')).first().as('linkedGridItem2');
|
||||
cy.get('@linkedGridItem2').click();
|
||||
});
|
||||
|
||||
waitForReactUpdate(1000);
|
||||
|
||||
// Select DB
|
||||
cy.task('log', `[STEP] Selecting database: ${dbName}`);
|
||||
SlashCommandSelectors.selectDatabase(dbName);
|
||||
|
||||
waitForReactUpdate(2000);
|
||||
|
||||
// Wait for it to load
|
||||
cy.get('[class*="appflowy-database"]', { timeout: 10000 })
|
||||
.should('exist')
|
||||
.last();
|
||||
|
||||
// Check logs for retry attempts (this is a bit heuristic as we can't easily force a slow network)
|
||||
// But we can check if the retry logic code path is at least active/logging
|
||||
cy.task('log', '[STEP] Checking for retry/loading logs');
|
||||
|
||||
// We might not see actual retries if it's fast, but we can verify the component loaded successfully
|
||||
// If we wanted to force retries, we'd need to mock the backend to delay the response
|
||||
// For now, we just ensure it eventually loads successfully
|
||||
|
||||
cy.task('log', '[TEST COMPLETE] Retry mechanism test passed (implicit verification via successful load)');
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user