Files
twenty/packages/twenty-e2e-testing/tests/workflow-creation.spec.ts
Raphaël Bosi 8213995887 Open showpage on workflow creation (#9714)
- Created an new component state
`isRecordEditableNameRenamingComponentState`
- Updated `useCreateNewTableRecord` to open the ShowPage on workflow
creation
- Refactored `RecordEditableName` and its components to remove the
useEffect (This was causing the recordName state to be updated after the
focus on `NavigationDrawerInput`, but we want the text so be selected
after the update).
- Introduced a new component `EditableBreadcrumbItem`
- Created an autosizing text input: This is done by a hack using a span
inside a div and the input position is set to absolute and takes the
size of the div. There are two problems that I didn't manage to fix:
If the text is too long, the title overflows, and the letter spacing is
different between the span and the input creating a small offset.


https://github.com/user-attachments/assets/4aa1e177-7458-4691-b0c8-96567b482206


New text input component:


https://github.com/user-attachments/assets/94565546-fe2b-457d-a1d8-907007e0e2ce
2025-01-22 14:44:10 +01:00

53 lines
1.4 KiB
TypeScript

import { expect, test } from '@playwright/test';
import { deleteWorkflow } from '../lib/requests/delete-workflow';
import { destroyWorkflow } from '../lib/requests/destroy-workflow';
test('Create workflow', async ({ page }) => {
const NEW_WORKFLOW_NAME = 'Test Workflow';
await page.goto('/');
const workflowsLink = page.getByRole('link', { name: 'Workflows' });
await workflowsLink.click();
const createWorkflowButton = page.getByRole('button', { name: 'New record' });
const [createWorkflowResponse] = await Promise.all([
page.waitForResponse(async (response) => {
if (!response.url().endsWith('/graphql')) {
return false;
}
const requestBody = response.request().postDataJSON();
return requestBody.operationName === 'CreateOneWorkflow';
}),
await createWorkflowButton.click(),
]);
const nameInput = page.getByRole('textbox');
await nameInput.fill(NEW_WORKFLOW_NAME);
await nameInput.press('Enter');
const body = await createWorkflowResponse.json();
const newWorkflowId = body.data.createWorkflow.id;
try {
const workflowName = page.getByRole('button', { name: NEW_WORKFLOW_NAME });
await expect(workflowName).toBeVisible();
await expect(page).toHaveURL(`/object/workflow/${newWorkflowId}`);
} finally {
await deleteWorkflow({
page,
workflowId: newWorkflowId,
});
await destroyWorkflow({
page,
workflowId: newWorkflowId,
});
}
});