Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-12 12:28:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(component): keyboard navigation for image-viewer (#2334)

Browse Source 
Co-authored-by: Himself65 <himself65@outlook.com>
This commit is contained in:
Aditya Sharma
2023-05-23 15:05:11 +05:30
committed by GitHub
parent 259d7988d9
commit 48c109e149
4 changed files with 216 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
tests/parallels/image-preview.spec.ts
View File

@@ -1,3 +1,4 @@
import type { Page } from '@playwright/test';
import { expect, test } from '@playwright/test';
import { openHomePage } from '../libs/load-page';
@@ -7,6 +8,38 @@ import {
waitMarkdownImported,
} from '../libs/page-logic';
async function importImage(page: Page, url: string) {
await page.evaluate(
([url]) => {
const clipData = {
'text/html': `<img src=${url} />`,
};
const e = new ClipboardEvent('paste', {
clipboardData: new DataTransfer(),
});
Object.defineProperty(e, 'target', {
writable: false,
value: document.body,
});
Object.entries(clipData).forEach(([key, value]) => {
e.clipboardData?.setData(key, value);
});
document.body.dispatchEvent(e);
},
[url]
);
await page.waitForTimeout(500);
}
async function closeImagePreviewModal(page: Page) {
await page
.getByTestId('image-preview-modal')
.locator('button')
.first()
.click();
await page.waitForTimeout(500);
}
test('image preview should be shown', async ({ page }) => {
await openHomePage(page);
await waitMarkdownImported(page);
@@ -14,31 +47,57 @@ test('image preview should be shown', async ({ page }) => {
const title = await getBlockSuiteEditorTitle(page);
await title.click();
await page.keyboard.press('Enter');
await page.evaluate(() => {
const clipData = {
'text/html': `<img src="http://localhost:8081/large-image.png" />`,
};
const e = new ClipboardEvent('paste', {
clipboardData: new DataTransfer(),
});
Object.defineProperty(e, 'target', {
writable: false,
value: document.body,
});
Object.entries(clipData).forEach(([key, value]) => {
e.clipboardData?.setData(key, value);
});
document.body.dispatchEvent(e);
});
await page.waitForTimeout(500);
await importImage(page, 'http://localhost:8081/large-image.png');
await page.locator('img').first().dblclick();
const locator = page.getByTestId('image-preview-modal');
expect(locator.isVisible()).toBeTruthy();
await page
.getByTestId('image-preview-modal')
.locator('button')
.first()
.click();
await page.waitForTimeout(500);
await closeImagePreviewModal(page);
expect(await locator.isVisible()).toBeFalsy();
});
test('image go left and right', async ({ page }) => {
await openHomePage(page);
await waitMarkdownImported(page);
await newPage(page);
let blobId: string;
{
const title = await getBlockSuiteEditorTitle(page);
await title.click();
await page.keyboard.press('Enter');
await importImage(page, 'http://localhost:8081/large-image.png');
await page.locator('img').first().dblclick();
await page.waitForTimeout(500);
blobId = (await page
.locator('img')
.nth(1)
.getAttribute('data-blob-id')) as string;
expect(blobId).toBeTruthy();
await closeImagePreviewModal(page);
}
{
const title = await getBlockSuiteEditorTitle(page);
await title.click();
await page.keyboard.press('Enter');
await importImage(page, 'http://localhost:8081/affine-preview.png');
}
const locator = page.getByTestId('image-preview-modal');
expect(locator.isVisible()).toBeTruthy();
await page.locator('img').first().dblclick();
await page.waitForTimeout(5000);
{
const newBlobId = (await page
.locator('img[data-blob-id]')
.first()
.getAttribute('data-blob-id')) as string;
expect(newBlobId).not.toBe(blobId);
}
await page.keyboard.press('ArrowRight');
await page.waitForTimeout(5000);
{
const newBlobId = (await page
.locator('img[data-blob-id]')
.first()
.getAttribute('data-blob-id')) as string;
expect(newBlobId).toBe(blobId);
}
});