/** * TODO: Versions, 3 separate collections * - drafts * - save draft before publishing * - publish immediately * - validation should be skipped when creating a draft * * - autosave * - versions (no drafts) * - version control shown * - assert version counts increment * - navigate to versions * - versions view accurately shows number of versions * - compare * - iterable * - nested * - relationship * - select w/ i18n options (label: { en: 'example', ... }) * - tabs * - text * - richtext * - restore version * - specify locales to show */ import type { Page } from '@playwright/test' import type { Payload } from 'payload' import { expect, test } from '@playwright/test' import path from 'path' import { fileURLToPath } from 'url' import wait from '../../packages/payload/src/utilities/wait' import { globalSlug } from '../admin/slugs' import { changeLocale, exactText, findTableCell, initPageConsoleErrorCatch, selectTableRow, } from '../helpers' import { AdminUrlUtil } from '../helpers/adminUrlUtil' import { initPayloadE2E } from '../helpers/configHelpers' import config from './config' import { clearAndSeedEverything } from './seed' import { titleToDelete } from './shared' import { autoSaveGlobalSlug, autosaveCollectionSlug, customIDSlug, disablePublishGlobalSlug, disablePublishSlug, draftCollectionSlug, draftGlobalSlug, postCollectionSlug, } from './slugs' const filename = fileURLToPath(import.meta.url) const dirname = path.dirname(filename) const { beforeAll, beforeEach, describe } = test let payload: Payload describe('versions', () => { let page: Page let url: AdminUrlUtil let serverURL: string let autosaveURL: AdminUrlUtil let disablePublishURL: AdminUrlUtil let customIDURL: AdminUrlUtil let postURL: AdminUrlUtil beforeAll(async ({ browser }) => { ;({ payload, serverURL } = await initPayloadE2E({ config, dirname })) const context = await browser.newContext() page = await context.newPage() initPageConsoleErrorCatch(page) }) beforeEach(async () => { await clearAndSeedEverything(payload) }) describe('draft collections', () => { beforeAll(() => { url = new AdminUrlUtil(serverURL, draftCollectionSlug) autosaveURL = new AdminUrlUtil(serverURL, autosaveCollectionSlug) disablePublishURL = new AdminUrlUtil(serverURL, disablePublishSlug) customIDURL = new AdminUrlUtil(serverURL, customIDSlug) }) // This test has to run before bulk updates that will rename the title test('should delete', async () => { await page.goto(url.list) const rows = page.locator(`tr`) const rowToDelete = rows.filter({ hasText: titleToDelete }) await rowToDelete.locator('.cell-_select input').click() await page.locator('.delete-documents__toggle').click() await page.locator('#confirm-delete').click() await expect(page.locator('.Toastify__toast--success')).toContainText( 'Deleted 1 Draft Post successfully.', ) await expect(page.locator('.row-1 .cell-title')).not.toHaveText(titleToDelete) }) test('bulk update - should publish many', async () => { await page.goto(url.list) // Select specific rows by title await selectTableRow(page, 'Published Title') await selectTableRow(page, 'Draft Title') // Bulk edit the selected rows await page.locator('.publish-many__toggle').click() await page.locator('#confirm-publish').click() // Check that the statuses for each row has been updated to `published` await expect(await findTableCell(page, '_status', 'Published Title')).toContainText( 'Published', ) await expect(await findTableCell(page, '_status', 'Draft Title')).toContainText('Published') }) test('bulk update - should unpublish many', async () => { await page.goto(url.list) // Select specific rows by title await selectTableRow(page, 'Published Title') await selectTableRow(page, 'Draft Title') // Bulk edit the selected rows await page.locator('.unpublish-many__toggle').click() await page.locator('#confirm-unpublish').click() // Check that the statuses for each row has been updated to `draft` await expect(await findTableCell(page, '_status', 'Published Title')).toContainText('Draft') await expect(await findTableCell(page, '_status', 'Draft Title')).toContainText('Draft') }) test('bulk update - should publish changes', async () => { const description = 'published document' await page.goto(url.list) // Select specific rows by title await selectTableRow(page, 'Published Title') await selectTableRow(page, 'Draft Title') // Bulk edit the selected rows to `published` status await page.locator('.edit-many__toggle').click() await page.locator('.field-select .rs__control').click() const options = page.locator('.rs__option') const field = options.locator('text=Description') await field.click() await page.locator('#field-description').fill(description) await page.locator('.form-submit .edit-many__publish').click() await expect(page.locator('.Toastify__toast--success')).toContainText( 'Draft Posts successfully.', ) // Check that the statuses for each row has been updated to `published` await expect(await findTableCell(page, '_status', 'Published Title')).toContainText( 'Published', ) await expect(await findTableCell(page, '_status', 'Draft Title')).toContainText('Published') }) test('bulk update - should draft changes', async () => { const description = 'draft document' await page.goto(url.list) // Select specific rows by title await selectTableRow(page, 'Published Title') await selectTableRow(page, 'Draft Title') // Bulk edit the selected rows to `draft` status await page.locator('.edit-many__toggle').click() await page.locator('.field-select .rs__control').click() const options = page.locator('.rs__option') const field = options.locator('text=Description') await field.click() await page.locator('#field-description').fill(description) await page.locator('.form-submit .edit-many__draft').click() await expect(page.locator('.Toastify__toast--success')).toContainText( 'Draft Posts successfully.', ) // Check that the statuses for each row has been updated to `draft` await expect(await findTableCell(page, '_status', 'Published Title')).toContainText('Draft') await expect(await findTableCell(page, '_status', 'Draft Title')).toContainText('Draft') }) test('collection - has versions tab', async () => { await page.goto(url.list) await page.locator('tbody tr .cell-title a').first().click() const docURL = page.url() const pathname = new URL(docURL).pathname const versionsTab = page.locator('.doc-tab', { hasText: 'Versions', }) expect(versionsTab).toBeTruthy() const href = await versionsTab.locator('a').first().getAttribute('href') expect(href).toBe(`${pathname}/versions`) }) test('collection - tab displays proper number of versions', async () => { await page.goto(url.list) const linkToDoc = page .locator('tbody tr .cell-title a', { hasText: exactText('Title With Many Versions 11'), }) .first() expect(linkToDoc).toBeTruthy() await linkToDoc.click() const versionsTab = page.locator('.doc-tab', { hasText: 'Versions', }) const versionCount = await versionsTab.locator('.doc-tab__count').first().textContent() expect(versionCount).toBe('11') }) test('collection - has versions route', async () => { await page.goto(url.list) await page.locator('tbody tr .cell-title a').first().click() await page.goto(`${page.url()}/versions`) expect(page.url()).toMatch(/\/versions$/) }) test('should show collection versions view level action in collection versions view', async () => { await page.goto(url.list) await page.locator('tbody tr .cell-title a').first().click() await page.goto(`${page.url()}/versions`) await expect(page.locator('.app-header .collection-versions-button')).toHaveCount(1) }) test('should show global versions view level action in globals versions view', async () => { const global = new AdminUrlUtil(serverURL, draftGlobalSlug) await page.goto(`${global.global(draftGlobalSlug)}/versions`) await expect(page.locator('.app-header .global-versions-button')).toHaveCount(1) }) // TODO: Check versions/:version-id view for collections / globals test('global - has versions tab', async () => { const global = new AdminUrlUtil(serverURL, draftGlobalSlug) await page.goto(global.global(draftGlobalSlug)) const docURL = page.url() const pathname = new URL(docURL).pathname const versionsTab = page.locator('.doc-tab', { hasText: 'Versions', }) expect(versionsTab).toBeTruthy() const href = await versionsTab.locator('a').first().getAttribute('href') expect(href).toBe(`${pathname}/versions`) }) test('global - has versions route', async () => { const global = new AdminUrlUtil(serverURL, globalSlug) const versionsURL = `${global.global(globalSlug)}/versions` await page.goto(versionsURL) expect(page.url()).toMatch(/\/versions$/) }) // TODO: This test is flaky and fails sometimes test('global - should autosave', async () => { const url = new AdminUrlUtil(serverURL, autoSaveGlobalSlug) // fill out global title and wait for autosave await page.goto(url.global(autoSaveGlobalSlug)) await page.locator('#field-title').fill('global title') await wait(1000) // refresh the page and ensure value autosaved await page.goto(url.global(autoSaveGlobalSlug)) await expect(page.locator('#field-title')).toHaveValue('global title') }) test('should retain localized data during autosave', async () => { const locale = 'en' const spanishLocale = 'es' const title = 'english title' const spanishTitle = 'spanish title' const description = 'description' const newDescription = 'new description' await page.goto(autosaveURL.create) await page.locator('#field-title').fill(title) await page.locator('#field-description').fill(description) await wait(500) // wait for autosave await changeLocale(page, spanishLocale) await page.locator('#field-title').fill(spanishTitle) await wait(500) // wait for autosave await changeLocale(page, locale) await page.locator('#field-description').fill(newDescription) await wait(500) // wait for autosave await changeLocale(page, spanishLocale) await wait(500) // wait for autosave await page.reload() await expect(page.locator('#field-title')).toHaveValue(spanishTitle) await expect(page.locator('#field-description')).toHaveValue(newDescription) }) test('should restore localized docs correctly', async () => { const spanishLocale = 'es' const spanishTitle = 'spanish title' const englishTitle = 'english title' await page.goto(url.create) // fill out doc in english await page.locator('#field-title').fill(englishTitle) await page.locator('#field-description').fill('unchanged description') await page.locator('#action-save').click() // change locale to spanish await changeLocale(page, spanishLocale) // fill out doc in spanish await page.locator('#field-title').fill(spanishTitle) await page.locator('#action-save').click() // fill out draft content in spanish await page.locator('#field-title').fill(`${spanishTitle}--draft`) await page.locator('#action-save-draft').click() // revert to last published version await page.locator('#action-revert-to-published').click() await page.locator('#action-revert-to-published-confirm').click() // verify that spanish content is reverted correctly await expect(page.locator('#field-title')).toHaveValue(spanishTitle) }) test('collection - autosave should only update the current document', async () => { // create and save first doc await page.goto(autosaveURL.create) await page.locator('#field-title').fill('first post title') await page.locator('#field-description').fill('first post description') await page.locator('#action-save').click() // create and save second doc await page.goto(autosaveURL.create) await page.locator('#field-title').fill('second post title') await page.locator('#field-description').fill('second post description') await page.locator('#action-save').click() // update second doc and wait for autosave await page.locator('#field-title').fill('updated second post title') await page.locator('#field-description').fill('updated second post description') await wait(1000) // verify that the first doc is unchanged await page.goto(autosaveURL.list) await page.locator('tbody tr .cell-title a').nth(1).click() await expect(page.locator('#field-title')).toHaveValue('first post title') await expect(page.locator('#field-description')).toHaveValue('first post description') }) test('should save versions with custom IDs', async () => { await page.goto(customIDURL.create) await page.locator('#field-id').fill('custom') await page.locator('#field-title').fill('title') await page.locator('#action-save').click() await page.goto(customIDURL.list) await page.locator('tbody tr .cell-id a').click() await expect(page.locator('div.id-label')).toHaveText(/custom/) await expect(page.locator('#field-title')).toHaveValue('title') }) test('should hide publish when access control prevents updating on globals', async () => { const url = new AdminUrlUtil(serverURL, disablePublishGlobalSlug) await page.goto(url.global(disablePublishGlobalSlug)) await expect(page.locator('#action-save')).not.toBeAttached() }) test('should hide publish when access control prevents create operation', async () => { await page.goto(disablePublishURL.create) await expect(page.locator('#action-save')).not.toBeAttached() }) test('should hide publish when access control prevents update operation', async () => { const publishedDoc = await payload.create({ collection: disablePublishSlug, data: { _status: 'published', title: 'title', }, overrideAccess: true, }) await page.goto(disablePublishURL.edit(String(publishedDoc.id))) await expect(page.locator('#action-save')).not.toBeAttached() }) }) describe('posts collection', () => { beforeAll(() => { url = new AdminUrlUtil(serverURL, draftCollectionSlug) autosaveURL = new AdminUrlUtil(serverURL, autosaveCollectionSlug) disablePublishURL = new AdminUrlUtil(serverURL, disablePublishSlug) customIDURL = new AdminUrlUtil(serverURL, customIDSlug) postURL = new AdminUrlUtil(serverURL, postCollectionSlug) }) test('should show documents title in relationship even if draft document', async () => { await payload.create({ collection: autosaveCollectionSlug, data: { title: 'some title', }, draft: true, }) await page.goto(postURL.create) const field = page.locator('#field-relationToAutosaves') await field.click() await expect(page.locator('.rs__option')).toHaveCount(1) await expect(page.locator('.rs__option')).toHaveText('some title') }) }) })