- 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
Twenty end-to-end (E2E) Testing
Prerequisite
Installing the browsers:
npx nx setup twenty-e2e-testing
Run end-to-end tests
npx nx test twenty-e2e-testing
Start the interactive UI mode
npx nx test:ui twenty-e2e-testing
Run test in specific file
npx nx test twenty-e2e-testing <filename>
Example (location of the test must be specified from the root of twenty-e2e-testing package):
npx nx test twenty-e2e-testing tests/login.spec.ts
Runs the tests in debug mode.
npx nx test:debug twenty-e2e-testing
Show report after tests
npx nx test:report twenty-e2e-testing
Q&A
Why there's path.resolve() everywhere?
That's thanks to differences in root directory when running tests using commands and using IDE. When running tests with commands,
the root directory is twenty/packages/twenty-e2e-testing, for IDE it depends on how someone sets the configuration. This way, it
ensures that no matter which IDE or OS Shell is used, the result will be the same.