test: client: e2e: all jpg files are opened with text viewer (#477)

Author: coderaiser

.github/workflows/nodejs.yml

@@ -42,6 +42,10 @@ jobs:
           message: "chore: ${{ env.NAME }}: actions: lint ☘️"
       - name: Build
         run: redrun build
+      - name: Install Playwright browsers
+        run: npx playwright install chromium --with-deps
+      - name: Test E2E Client
+        run: redrun test:e2e:client
       - name: Test
         run: redrun test
       - name: Coverage

.madrun.js

@@ -30,6 +30,7 @@ export default {
     'lint:stream': () => run('lint', '-f stream'),
     'test': () => [testEnv, `tape '{test}/**/*.js' '{bin,client,static,common,server}/**/*.spec.js' -f fail`],
     'test:e2e': () => `tape 'test-e2e/**/*.js'`,
+    'test:e2e:client': () => 'playwright test',
     'test:client': () => `tape 'test/client/**/*.js'`,
     'test:server': () => `tape 'test/**/*.js' 'server/**/*.spec.js' 'common/**/*.spec.js'`,
     'wisdom': async () => await run(['lint:all', 'build', 'test'], null, {

.npmignore

@@ -27,3 +27,4 @@ coverage
 css
 html
 client
+playwright.config.*

client/modules/view/index.js

@@ -147,6 +147,8 @@ export async function show(data, options = {}) {
     return await viewFile();
 }
 
+export {show as _show};
+
 export const _createIframe = createIframe;
 
 function createIframe(src, overrides = {}) {

package.json

@@ -162,6 +162,7 @@
     "@cloudcmd/stub": "^5.0.0",
     "@iocmd/wait": "^2.1.0",
     "@putout/eslint-flat": "^4.0.0",
+    "@playwright/test": "^1.63.0",
     "@rspack/cli": "^2.1.4",
     "@rspack/core": "^2.1.4",
     "@supertape/loader-css": "^1.0.0",

playwright.config.js

@@ -0,0 +1,17 @@
+import {defineConfig} from '@playwright/test';
+
+export default defineConfig({
+    testDir: './test-e2e',
+    testMatch: '**/*.spec.js',
+    timeout: 30_000,
+    use: {
+        baseURL: 'http://localhost:3002',
+        headless: true,
+    },
+    webServer: {
+        command: 'node bin/cloudcmd.js --port 3002 --root test/fixture',
+        url: 'http://localhost:3002',
+        reuseExistingServer: false,
+        timeout: 15_000,
+    },
+});

test-e2e/view-image.spec.js

@@ -0,0 +1,58 @@
+import {test, expect} from '@playwright/test';
+
+const getModal = (page) => page.locator('[data-name="modal-main"]');
+
+test('F3 on a .jpg file opens the image viewer', async ({page}) => {
+    await page.goto('/');
+    await page.getByText('photo.jpg').first().click();
+    await page.keyboard.press('F3');
+
+    const modal = getModal(page);
+    await expect(modal).toBeVisible();
+});
+
+test('F3 on a .jpg file does not open the text viewer', async ({page}) => {
+    await page.goto('/');
+    await page.getByText('photo.jpg').first().click();
+    await page.keyboard.press('F3');
+
+    const modal = getModal(page);
+    const modalText = await modal.textContent();
+    await expect(modalText).not.toContain('JFIF');
+});
+
+test('double-click on a .jpg file opens the image viewer', async ({page}) => {
+    await page.goto('/');
+    await page.getByText('photo.jpg').first().dblclick();
+
+    const modal = getModal(page);
+    await expect(modal).toBeVisible();
+});
+
+test('double-click on a .jpg file does not open the text viewer', async ({page}) => {
+    await page.goto('/');
+    await page.getByText('photo.jpg').first().dblclick();
+
+    const modal = getModal(page);
+    const modalText = await modal.textContent();
+    await expect(modalText).not.toContain('JFIF');
+});
+
+test('F3 on a .txt file opens the text viewer', async ({page}) => {
+    await page.goto('/');
+    await page.getByText('copy.txt').first().click();
+    await page.keyboard.press('F3');
+
+    const modal = getModal(page);
+    await expect(modal).toBeVisible();
+});
+
+test('F3 on a .txt file shows file content', async ({page}) => {
+    await page.goto('/');
+    await page.getByText('copy.txt').first().click();
+    await page.keyboard.press('F3');
+
+    const modal = getModal(page);
+    const modalText = await modal.textContent();
+    await expect(modalText.length).toBeGreaterThan(0);
+});