Skip to content

Add E2E tests for File, Image, and Binary fields in Edit Content Screen #36123

@nicobytes

Description

@nicobytes

Description

The Edit Content Screen GTM epic (#35846) requires confidence in field-level behavior before release. File, Image, and Binary fields are rendered by two components that currently have no Playwright E2E coverage:

Field type Component Selector in form
File dot-edit-content-file-field data-testid="field-{variable}"
Image dot-edit-content-file-field data-testid="field-{variable}"
Binary dot-binary-field-wrapper data-testid="field-{variable}"

Other Edit Content field types already have E2E tests under core-web/apps/dotcms-ui-e2e/src/tests/edit-content/fields/ (e.g. text-field/, host-folder-field/, relationship-field/). This task adds equivalent coverage for file-based fields, following the same conventions documented in core-web/apps/dotcms-ui-e2e/AGENTS.md.

Reference implementations to follow:

  • tests/edit-content/fields/text-field/text-field.spec.ts — minimal save + persistence pattern
  • tests/edit-content/fields/host-folder-field/ — field helper class + fixture + multiple journeys
  • tests/edit-content/fields/relationship-field/ — helper encapsulating locators and dialog flows

Utilities already available:

  • createFakePayloadFileField, createFakePayloadImageField, createFakePayloadBinaryField in @utils/dot-content-types.mock
  • NewEditContentFormPage in @pages
  • Content type API helpers in @requests/contentType

Acceptance Criteria

Structure & conventions

  • New test folders exist under core-web/apps/dotcms-ui-e2e/src/tests/edit-content/fields/:
    • file-field/ (File field journeys)
    • image-field/ (Image field journeys)
    • binary-field/ (Binary field journeys)
  • Each folder includes a helpers/ locator wrapper class (e.g. FileField, ImageField, BinaryField) that scopes interactions to getByTestId('field-{variable}') and uses data-testid selectors per E2E conventions.
  • Content types are created via API in beforeEach and cleaned up in afterEach; test data uses unique names (Date.now() / test suffix) for isolation.
  • Tests follow naming conventions: test('action description @critical') with action-oriented titles.

File field (dot-edit-content-file-field)

  • Upload and persist: User can upload a file, save content, reload the edit screen, and the file field still shows the uploaded asset.
  • Required validation: When the field is required and empty, saving shows an error state with helper text on the field.
  • Import from URL/dialog: File import dialog opens with header, footer, and close button; import completes without a 400 Bad Request (regression for epic Binary Field AC).

Image field (dot-edit-content-file-field)

  • Upload and persist: User can upload an image, save, reload, and the image preview/thumbnail is still displayed.
  • Required validation: Required empty image field shows error helper text on save attempt.

Binary field (dot-binary-field-wrapper)

  • Upload and persist: User can attach a binary file, save, reload, and the field retains the uploaded value/file name.
  • Required validation: Required empty binary field shows error helper text.
  • Disabled primary action: When the primary action button is disabled (e.g. no file selected), a tooltip explains why it is disabled.

CI readiness

  • All new specs pass locally with yarn nx e2e dotcms-ui-e2e --grep "<field-pattern>".
  • At least one journey per field type is tagged @critical.

Priority

Medium — GTM blocker for Edit Content Screen field confidence; aligns with epic #35846 Binary Field acceptance criteria.

Additional Context

  • Epic parent: #35846 — Edit Content Screen — GTM
  • Component locations:
    • core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/
    • core-web/libs/edit-content/src/lib/fields/dot-edit-content-binary-field/components/dot-binary-field-wrapper/
  • Field routing in dot-edit-content-field.component.html: FILE and IMAGEdot-edit-content-file-field; BINARYdot-binary-field-wrapper
  • E2E guide: core-web/apps/dotcms-ui-e2e/AGENTS.md

Metadata

Metadata

Assignees

Type

No fields configured for Task.

Projects

Status
In Progress

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions