diff --git a/e2e/src/specs/web/asset-viewer/stack.e2e-spec.ts b/e2e/src/specs/web/asset-viewer/stack.e2e-spec.ts deleted file mode 100644 index cb40f82c0a..0000000000 --- a/e2e/src/specs/web/asset-viewer/stack.e2e-spec.ts +++ /dev/null @@ -1,66 +0,0 @@ -import { AssetMediaResponseDto, LoginResponseDto } from '@immich/sdk'; -import { expect, Page, test } from '@playwright/test'; -import { utils } from 'src/utils'; - -async function ensureDetailPanelVisible(page: Page) { - await page.waitForSelector('#immich-asset-viewer'); - - const isVisible = await page.locator('#detail-panel').isVisible(); - if (!isVisible) { - await page.keyboard.press('i'); - await page.waitForSelector('#detail-panel'); - } -} - -test.describe('Asset Viewer stack', () => { - let admin: LoginResponseDto; - let assetOne: AssetMediaResponseDto; - let assetTwo: AssetMediaResponseDto; - - test.beforeAll(async () => { - utils.initSdk(); - await utils.resetDatabase(); - admin = await utils.adminSetup(); - await utils.updateMyPreferences(admin.accessToken, { tags: { enabled: true } }); - - assetOne = await utils.createAsset(admin.accessToken); - assetTwo = await utils.createAsset(admin.accessToken); - await utils.createStack(admin.accessToken, [assetOne.id, assetTwo.id]); - - const tags = await utils.upsertTags(admin.accessToken, ['test/1', 'test/2']); - const tagOne = tags.find((tag) => tag.value === 'test/1')!; - const tagTwo = tags.find((tag) => tag.value === 'test/2')!; - await utils.tagAssets(admin.accessToken, tagOne.id, [assetOne.id]); - await utils.tagAssets(admin.accessToken, tagTwo.id, [assetTwo.id]); - }); - - test('stack slideshow is visible', async ({ page, context }) => { - await utils.setAuthCookies(context, admin.accessToken); - await page.goto(`/photos/${assetOne.id}`); - - const stackAssets = page.locator('#stack-slideshow [data-asset]'); - await expect(stackAssets.first()).toBeVisible(); - await expect(stackAssets.nth(1)).toBeVisible(); - }); - - test('tags of primary asset are visible', async ({ page, context }) => { - await utils.setAuthCookies(context, admin.accessToken); - await page.goto(`/photos/${assetOne.id}`); - await ensureDetailPanelVisible(page); - - const tags = page.getByTestId('detail-panel-tags').getByRole('link'); - await expect(tags.first()).toHaveText('test/1'); - }); - - test('tags of second asset are visible', async ({ page, context }) => { - await utils.setAuthCookies(context, admin.accessToken); - await page.goto(`/photos/${assetOne.id}`); - await ensureDetailPanelVisible(page); - - const stackAssets = page.locator('#stack-slideshow [data-asset]'); - await stackAssets.nth(1).click(); - - const tags = page.getByTestId('detail-panel-tags').getByRole('link'); - await expect(tags.first()).toHaveText('test/2'); - }); -}); diff --git a/e2e/src/ui/specs/asset-viewer/stack.e2e-spec.ts b/e2e/src/ui/specs/asset-viewer/stack.e2e-spec.ts new file mode 100644 index 0000000000..976a44dd9e --- /dev/null +++ b/e2e/src/ui/specs/asset-viewer/stack.e2e-spec.ts @@ -0,0 +1,84 @@ +import { faker } from '@faker-js/faker'; +import type { AssetResponseDto } from '@immich/sdk'; +import { expect, test } from '@playwright/test'; +import { toAssetResponseDto } from 'src/ui/generators/timeline'; +import { + createMockStack, + createMockStackAsset, + MockStack, + setupBrokenAssetMockApiRoutes, +} from 'src/ui/mock-network/broken-asset-network'; +import { assetViewerUtils } from '../timeline/utils'; +import { enableTagsPreference, ensureDetailPanelVisible, setupAssetViewerFixture } from './utils'; + +test.describe.configure({ mode: 'parallel' }); +test.describe('asset-viewer stack', () => { + const fixture = setupAssetViewerFixture(888); + let mockStack: MockStack; + let primaryAssetDto: AssetResponseDto; + let secondAssetDto: AssetResponseDto; + + test.beforeAll(async () => { + primaryAssetDto = toAssetResponseDto(fixture.primaryAsset); + primaryAssetDto.tags = [ + { + id: faker.string.uuid(), + name: '1', + value: 'test/1', + createdAt: new Date().toISOString(), + updatedAt: new Date().toISOString(), + }, + ]; + + secondAssetDto = createMockStackAsset(fixture.adminUserId); + secondAssetDto.tags = [ + { + id: faker.string.uuid(), + name: '2', + value: 'test/2', + createdAt: new Date().toISOString(), + updatedAt: new Date().toISOString(), + }, + ]; + + mockStack = createMockStack(primaryAssetDto, [secondAssetDto], new Set()); + }); + + test.beforeEach(async ({ context }) => { + await setupBrokenAssetMockApiRoutes(context, mockStack); + }); + + test('stack slideshow is visible', async ({ page }) => { + await page.goto(`/photos/${fixture.primaryAsset.id}`); + await assetViewerUtils.waitForViewerLoad(page, fixture.primaryAsset); + + const stackSlideshow = page.locator('#stack-slideshow'); + await expect(stackSlideshow).toBeVisible(); + + const stackAssets = stackSlideshow.locator('[data-asset]'); + await expect(stackAssets).toHaveCount(mockStack.assets.length); + }); + + test('tags of primary asset are visible', async ({ context, page }) => { + await enableTagsPreference(context); + + await page.goto(`/photos/${fixture.primaryAsset.id}`); + await ensureDetailPanelVisible(page); + + const tags = page.getByTestId('detail-panel-tags').getByRole('link'); + await expect(tags.first()).toHaveText('test/1'); + }); + + test('tags of second asset are visible', async ({ context, page }) => { + await enableTagsPreference(context); + + await page.goto(`/photos/${fixture.primaryAsset.id}`); + await ensureDetailPanelVisible(page); + + const stackAssets = page.locator('#stack-slideshow [data-asset]'); + await stackAssets.nth(1).click(); + + const tags = page.getByTestId('detail-panel-tags').getByRole('link'); + await expect(tags.first()).toHaveText('test/2'); + }); +});