Migrate unicode-graphemes api tests to playwright

addons/addon-unicode-graphemes/test/UnicodeGraphemesAddon.api.ts

@@ -1,73 +0,0 @@
-/**
- * Copyright (c) 2019 The xterm.js authors. All rights reserved.
- * @license MIT
- */
-
-import { assert } from 'chai';
-import { openTerminal, launchBrowser } from '../../../out-test/api/TestUtils';
-import { Browser, Page } from '@playwright/test';
-
-const APP = 'http://127.0.0.1:3001/test';
-
-let browser: Browser;
-let page: Page;
-const width = 800;
-const height = 600;
-
-describe('UnicodeGraphemesAddon', () => {
-  before(async function(): Promise<any> {
-    browser = await launchBrowser();
-    page = await (await browser.newContext()).newPage();
-    await page.setViewportSize({ width, height });
-  });
-
-  after(async () => {
-    await browser.close();
-  });
-
-  beforeEach(async function(): Promise<any> {
-    await page.goto(APP);
-    await openTerminal(page);
-  });
-  async function evalWidth(str: string): Promise<number> {
-    return page.evaluate(`window.term._core.unicodeService.getStringCellWidth('${str}')`);
-  }
-  const ourVersion = '15-graphemes';
-  it('wcwidth V15 emoji test', async () => {
-    await page.evaluate(`
-      window.unicode = new UnicodeGraphemesAddon();
-      window.term.loadAddon(window.unicode);
-    `);
-    // should have loaded '15-graphemes'
-    assert.deepEqual(await page.evaluate(`window.term.unicode.versions`), ['6', '15', '15-graphemes']);
-    // switch should not throw
-    await page.evaluate(`window.term.unicode.activeVersion = '${ourVersion}';`);
-    assert.equal(await page.evaluate(`window.term.unicode.activeVersion`), ourVersion);
-    assert.equal(await evalWidth('🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣'), 20,
-      '10 emoji - width 10 in V6; 20 in V11 or later');
-    assert.equal(await evalWidth('\u{1F476}\u{1F3FF}\u{1F476}'), 4,
-      'baby with emoji modifier fitzpatrick type-6; baby');
-    assert.equal(await evalWidth('\u{1F469}\u200d\u{1f469}\u200d\u{1f466}'), 2,
-      'woman+zwj+woman+zwj+boy');
-    assert.equal(await evalWidth('=\u{1F3CB}\u{FE0F}=\u{F3CB}\u{1F3FE}\u200D\u2640='), 7,
-      'person lifting weights (plain, emoji); woman lighting weights, medium dark');
-    assert.equal(await evalWidth('\u{1F469}\u{1F469}\u{200D}\u{1F393}\u{1F468}\u{1F3FF}\u{200D}\u{1F393}'), 6,
-      'woman; woman student; man student dark');
-    assert.equal(await evalWidth('\u{1f1f3}\u{1f1f4}/'), 3,
-      'regional indicator symbol letters N and O, cluster');
-    assert.equal(await evalWidth('\u{1f1f3}/\u{1f1f4}'), 3,
-      'regional indicator symbol letters N and O, separated');
-    assert.equal(await evalWidth('\u0061\u0301'), 1,
-      'letter a with acute accent');
-    assert.equal(await evalWidth('{\u1100\u1161\u11a8\u1100\u1161}'), 6,
-      'Korean Jamo');
-    assert.equal(await evalWidth('\uAC00=\uD685='), 6,
-      'Hangul syllables (pre-composed)');
-    assert.equal(await evalWidth('(\u26b0\ufe0e)'), 3,
-      'coffin with text presentation');
-    assert.equal(await evalWidth('(\u26b0\ufe0f)'), 4,
-      'coffin with emoji presentation');
-    assert.equal(await evalWidth('<E\u0301\ufe0fg\ufe0fa\ufe0fl\ufe0fi\ufe0f\ufe0ft\ufe0fe\u0301\ufe0f>'), 16,
-      'Égalité (using separate acute) emoij_presentation');
-  });
-});

addons/addon-unicode-graphemes/test/UnicodeGraphemesAddon.test.ts

@@ -0,0 +1,71 @@
+/**
+ * Copyright (c) 2019 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import test from '@playwright/test';
+import { deepStrictEqual, strictEqual } from 'assert';
+import { readFile } from 'fs';
+import { resolve } from 'path';
+import { ITestContext, createTestContext, openTerminal, timeout } from '../../../out-test/playwright/TestUtils';
+
+let ctx: ITestContext;
+test.beforeAll(async ({ browser }) => {
+  ctx = await createTestContext(browser);
+  await openTerminal(ctx);
+});
+test.afterAll(async () => await ctx.page.close());
+
+test.describe('UnicodeGraphemesAddon', () => {
+
+  test.beforeEach(async () => {
+    await ctx.page.evaluate(`
+      window.term.reset()
+      window.search?.dispose();
+      window.search = new SearchAddon();
+      window.term.loadAddon(window.search);
+    `);
+  });
+
+  async function evalWidth(str: string): Promise<number> {
+    return ctx.page.evaluate(`window.term._core.unicodeService.getStringCellWidth('${str}')`);
+  }
+  const ourVersion = '15-graphemes';
+  test('wcwidth V15 emoji test', async () => {
+    await ctx.page.evaluate(`
+      window.unicode = new UnicodeGraphemesAddon();
+      window.term.loadAddon(window.unicode);
+    `);
+    // should have loaded '15-graphemes'
+    deepStrictEqual(await ctx.page.evaluate(`window.term.unicode.versions`), ['6', '15', '15-graphemes']);
+    // switch should not throw
+    await ctx.page.evaluate(`window.term.unicode.activeVersion = '${ourVersion}';`);
+    strictEqual(await ctx.page.evaluate(`window.term.unicode.activeVersion`), ourVersion);
+    strictEqual(await evalWidth('🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣'), 20,
+      '10 emoji - width 10 in V6; 20 in V11 or later');
+    strictEqual(await evalWidth('\u{1F476}\u{1F3FF}\u{1F476}'), 4,
+      'baby with emoji modifier fitzpatrick type-6; baby');
+    strictEqual(await evalWidth('\u{1F469}\u200d\u{1f469}\u200d\u{1f466}'), 2,
+      'woman+zwj+woman+zwj+boy');
+    strictEqual(await evalWidth('=\u{1F3CB}\u{FE0F}=\u{F3CB}\u{1F3FE}\u200D\u2640='), 7,
+      'person lifting weights (plain, emoji); woman lighting weights, medium dark');
+    strictEqual(await evalWidth('\u{1F469}\u{1F469}\u{200D}\u{1F393}\u{1F468}\u{1F3FF}\u{200D}\u{1F393}'), 6,
+      'woman; woman student; man student dark');
+    strictEqual(await evalWidth('\u{1f1f3}\u{1f1f4}/'), 3,
+      'regional indicator symbol letters N and O, cluster');
+    strictEqual(await evalWidth('\u{1f1f3}/\u{1f1f4}'), 3,
+      'regional indicator symbol letters N and O, separated');
+    strictEqual(await evalWidth('\u0061\u0301'), 1,
+      'letter a with acute accent');
+    strictEqual(await evalWidth('{\u1100\u1161\u11a8\u1100\u1161}'), 6,
+      'Korean Jamo');
+    strictEqual(await evalWidth('\uAC00=\uD685='), 6,
+      'Hangul syllables (pre-composed)');
+    strictEqual(await evalWidth('(\u26b0\ufe0e)'), 3,
+      'coffin with text presentation');
+    strictEqual(await evalWidth('(\u26b0\ufe0f)'), 4,
+      'coffin with emoji presentation');
+    strictEqual(await evalWidth('<E\u0301\ufe0fg\ufe0fa\ufe0fl\ufe0fi\ufe0f\ufe0ft\ufe0fe\u0301\ufe0f>'), 16,
+      'Égalité (using separate acute) emoij_presentation');
+  });
+});

addons/addon-unicode-graphemes/test/playwright.config.ts

@@ -0,0 +1,35 @@
+import { PlaywrightTestConfig } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+  testDir: '.',
+  timeout: 10000,
+  projects: [
+    {
+      name: 'Chrome Stable',
+      use: {
+        browserName: 'chromium',
+        channel: 'chrome'
+      }
+    },
+    {
+      name: 'Firefox Stable',
+      use: {
+        browserName: 'firefox'
+      }
+    },
+    {
+      name: 'WebKit',
+      use: {
+        browserName: 'webkit'
+      }
+    }
+  ],
+  reporter: 'list',
+  webServer: {
+    command: 'npm run start-server-only',
+    port: 3000,
+    timeout: 120000,
+    reuseExistingServer: !process.env.CI
+  }
+};
+export default config;

addons/addon-unicode-graphemes/test/tsconfig.json

@@ -1,26 +1,27 @@
 {
   "compilerOptions": {
     "module": "commonjs",
-    "target": "es2015",
+    "target": "es2021",
     "lib": [
-      "dom",
+      "es2021",
-      "es2015"
     ],
     "rootDir": ".",
     "outDir": "../out-test",
     "sourceMap": true,
     "removeComments": true,
-    "strict": true,
     "baseUrl": ".",
     "paths": {
       "common/*": [
         "../../../src/common/*"
+      ],
+      "browser/*": [
+        "../../../src/browser/*"
       ]
     },
+    "strict": true,
     "types": [
-      "../../../node_modules/@types/mocha",
       "../../../node_modules/@types/node",
-      "../../../out-test/api/TestUtils"
+      "../../../out-test/playwright/TestUtils"
     ]
   },
   "include": [
@@ -30,6 +31,9 @@
   "references": [
     {
       "path": "../../../src/common"
+    },
+    {
+      "path": "../../../src/browser"
     }
   ]
 }

bin/test_playwright.js

@@ -18,14 +18,15 @@ while (argv.some(e => e.startsWith('--suite='))) {
 }
 
 let configs = [
-  { name: 'core',            path: 'out-test/playwright/playwright.config.js' },
+  { name: 'core',                    path: 'out-test/playwright/playwright.config.js' },
-  { name: 'addon-attach',    path: 'addons/addon-attach/out-test/playwright.config.js' },
+  { name: 'addon-attach',            path: 'addons/addon-attach/out-test/playwright.config.js' },
-  { name: 'addon-canvas',    path: 'addons/addon-canvas/out-test/playwright.config.js' },
+  { name: 'addon-canvas',            path: 'addons/addon-canvas/out-test/playwright.config.js' },
-  { name: 'addon-clipboard', path: 'addons/addon-clipboard/out-test/playwright.config.js' },
+  { name: 'addon-clipboard',         path: 'addons/addon-clipboard/out-test/playwright.config.js' },
-  { name: 'addon-fit',       path: 'addons/addon-fit/out-test/playwright.config.js' },
+  { name: 'addon-fit',               path: 'addons/addon-fit/out-test/playwright.config.js' },
-  { name: 'addon-search',    path: 'addons/addon-search/out-test/playwright.config.js' },
+  { name: 'addon-search',            path: 'addons/addon-search/out-test/playwright.config.js' },
-  { name: 'addon-serialize', path: 'addons/addon-serialize/out-test/playwright.config.js' },
+  { name: 'addon-serialize',         path: 'addons/addon-serialize/out-test/playwright.config.js' },
-  { name: 'addon-webgl',     path: 'addons/addon-webgl/out-test/playwright.config.js' }
+  { name: 'addon-unicode-graphemes', path: 'addons/addon-unicode-graphemes/out-test/playwright.config.js' },
+  { name: 'addon-webgl',             path: 'addons/addon-webgl/out-test/playwright.config.js' }
 ];
 
 if (suiteFilter) {