Fix flakes in fit addon integration tests

Author: Tyriar

addons/addon-fit/test/FitAddon.test.ts

@@ -10,12 +10,14 @@ import { ITestContext, createTestContext, openTerminal, timeout } from '../../..
 let ctx: ITestContext;
 test.beforeAll(async ({ browser }) => {
   ctx = await createTestContext(browser);
+  ctx.page.setViewportSize({ width: 1024, height: 768 });
   await openTerminal(ctx);
 });
 test.afterAll(async () => await ctx.page.close());
 
 test.describe('FitAddon', () => {
   test.beforeEach(async function(): Promise<any> {
+    await ctx.page.evaluate(`document.querySelector('#terminal-container').style.display=''`);
     await ctx.page.evaluate(`
       window.term.reset()
       window.fit?.dispose();
@@ -38,15 +40,14 @@ test.describe('FitAddon', () => {
   // });
 
   test('no terminal', async function(): Promise<any> {
-    await ctx.page.evaluate(`window.fit = new FitAddon();`);
-    strictEqual(await ctx.page.evaluate(`window.fit.proposeDimensions()`), undefined);
+    await ctx.page.evaluate(`window.fit2 = new FitAddon();`);
+    strictEqual(await ctx.page.evaluate(`window.fit2.proposeDimensions()`), undefined);
+    await ctx.page.evaluate(`window.fit2.dispose();`);
   });
 
   test.describe('proposeDimensions', () => {
-    // test.afterEach(() => unloadFit());
-
     test('default', async function(): Promise<any> {
-      await loadFit();
+      await setDimensions();
       const dimensions: {cols: number, rows: number} = await ctx.page.evaluate(`window.fit.proposeDimensions()`);
       ok(dimensions.cols > 85);
       ok(dimensions.cols < 88);
@@ -55,7 +56,7 @@ test.describe('FitAddon', () => {
     });
 
     test('width', async function(): Promise<any> {
-      await loadFit(1008);
+      await setDimensions(1008);
       const dimensions: {cols: number, rows: number} = await ctx.page.evaluate(`window.fit.proposeDimensions()`);
       ok(dimensions.cols > 108);
       ok(dimensions.cols < 111);
@@ -64,7 +65,7 @@ test.describe('FitAddon', () => {
     });
 
     test('small', async function(): Promise<any> {
-      await loadFit(1, 1);
+      await setDimensions(1, 1);
       deepEqual(await ctx.page.evaluate(`window.fit.proposeDimensions()`), {
         cols: 2,
         rows: 1
@@ -76,7 +77,7 @@ test.describe('FitAddon', () => {
       await ctx.page.evaluate(`document.querySelector('#terminal-container').style.display='none'`);
       await ctx.page.evaluate(`window.term = new Terminal()`);
       await ctx.page.evaluate(`window.term.open(document.querySelector('#terminal-container'))`);
-      await loadFit();
+      await setDimensions();
       const dimensions: { cols: number, rows: number } | undefined = await ctx.page.evaluate(`window.fit.proposeDimensions()`);
       // The value of dims will be undefined if the char measure strategy falls back to the DOM
       // method, so only assert if it's not undefined.
@@ -86,15 +87,12 @@ test.describe('FitAddon', () => {
         ok(dimensions.rows > 24);
         ok(dimensions.rows < 29);
       }
-      await ctx.page.evaluate(`document.querySelector('#terminal-container').style.display='block'`);
     });
   });
 
   test.describe('fit', () => {
-    test.afterEach(() => unloadFit());
-
     test('default', async function(): Promise<any> {
-      await loadFit();
+      await setDimensions();
       await ctx.page.evaluate(`window.fit.fit()`);
       const cols: number = await ctx.proxy.cols;
       const rows: number = await ctx.proxy.rows;
@@ -105,7 +103,7 @@ test.describe('FitAddon', () => {
     });
 
     test('width', async function(): Promise<any> {
-      await loadFit(1008);
+      await setDimensions(1008);
       await ctx.page.evaluate(`window.fit.fit()`);
       const cols: number = await ctx.proxy.cols;
       const rows: number = await ctx.proxy.rows;
@@ -116,23 +114,20 @@ test.describe('FitAddon', () => {
     });
 
     test('small', async function(): Promise<any> {
-      await loadFit(1, 1);
+      await setDimensions(1, 1);
       await ctx.page.evaluate(`window.fit.fit()`);
       strictEqual(await ctx.proxy.cols, 2);
       strictEqual(await ctx.proxy.rows, 1);
     });
   });
 });
 
-async function loadFit(width: number = 800, height: number = 450): Promise<void> {
+async function setDimensions(width: number = 800, height: number = 450): Promise<void> {
   await ctx.page.evaluate(`
-    window.fit = new FitAddon();
-    window.term.loadAddon(window.fit);
     document.querySelector('#terminal-container').style.width='${width}px';
     document.querySelector('#terminal-container').style.height='${height}px';
+    document.querySelector('#terminal-container').style.display='';
   `);
-}
-
-async function unloadFit(): Promise<void> {
-  await ctx.page.evaluate(`window.fit.dispose();`);
+  // HACK: Await a short period as hiding #terminal-container can mess with other tests
+  await timeout(500);
 }