chore(test): migrate invisible-prehydration-false to wdio (#5597)

* move test to wdio (not passing) * inject iframe
ionic-team · Mar 27, 2024 · 404d2ba · 404d2ba
1 parent f107e0f
commit 404d2ba
Show file tree

Hide file tree

Showing 17 changed files with 87 additions and 109 deletions.
diff --git a/.gitignore b/.gitignore
@@ -57,3 +57,4 @@ test/wdio/src/components.d.ts
 test/wdio/www-global-script/
 test/wdio/test-components
 test/wdio/www-prerender-script
+test/wdio/www-invisible-prehydration/
diff --git a/test/karma/package.json b/test/karma/package.json
@@ -7,10 +7,9 @@
   "scripts": {
     "clean": "rm -rf test-output tmp-compiled-tests",
     "start": "node ../../bin/stencil build --dev --watch --serve --es5",
-    "build.all": "npm run clean && npm run build.invisible-prehydration.false && npm run build.app",
+    "build.all": "npm run clean && npm run build.app",
     "build.app": "npm run compile.test-app && node ../../bin/stencil build --debug --es5",
     "compile.test-app": "node ../../node_modules/typescript/lib/tsc -p tsconfig.json",
-    "build.invisible-prehydration.false": "node ../../bin/stencil build --config test-invisible-prehydration/stencil.invisiblePrehydrationFalse.config.ts --debug",
     "karma": "karma start karma.config.js",
     "karma.prod": "npm run build.all && npm run karma",
     "karma.chrome": "karma start karma.config.js --browsers=Chrome --single-run=false",

diff --git a/test/karma/test-app/invisible-prehydration-false/index.html b/test/karma/test-app/invisible-prehydration-false/index.html
diff --git a/test/karma/test-app/invisible-prehydration-false/karma.spec.ts b/test/karma/test-app/invisible-prehydration-false/karma.spec.ts
diff --git a/test/karma/test-invisible-prehydration/.gitignore b/test/karma/test-invisible-prehydration/.gitignore
diff --git a/test/karma/test-invisible-prehydration/package-lock.json b/test/karma/test-invisible-prehydration/package-lock.json
diff --git a/test/karma/test-invisible-prehydration/package.json b/test/karma/test-invisible-prehydration/package.json
diff --git a/test/karma/test-invisible-prehydration/stencil.invisiblePrehydrationFalse.config.ts b/test/karma/test-invisible-prehydration/stencil.invisiblePrehydrationFalse.config.ts
diff --git a/test/karma/test-invisible-prehydration/tsconfig.json b/test/karma/test-invisible-prehydration/tsconfig.json
diff --git a/test/wdio/invisible-prehydration.stencil.config.ts b/test/wdio/invisible-prehydration.stencil.config.ts
@@ -0,0 +1,16 @@
+import type { Config } from '../../internal/index.js';
+
+export const config: Config = {
+  namespace: 'TestInvisiblePrehydrationFalse',
+  tsconfig: 'tsconfig-invisible-prehydration.json',
+  invisiblePrehydration: false,
+  outputTargets: [
+    {
+      type: 'www',
+      empty: false,
+      serviceWorker: null,
+      dir: 'www-invisible-prehydration',
+    },
+  ],
+  srcDir: 'invisible-prehydration',
+};
diff --git a/...prehydrated-styles/prehydrated-styles.tsx → test/wdio/invisible-prehydration/cmp.tsx b/...prehydrated-styles/prehydrated-styles.tsx → test/wdio/invisible-prehydration/cmp.tsx
diff --git a/...nvisible-prehydration/src/components.d.ts → ...io/invisible-prehydration/components.d.ts b/...nvisible-prehydration/src/components.d.ts → ...io/invisible-prehydration/components.d.ts
diff --git a/test/wdio/invisible-prehydration/index.html b/test/wdio/invisible-prehydration/index.html
@@ -0,0 +1,6 @@
+<!doctype html>
+<meta charset="utf8" />
+<script src="./build/testinvisibleprehydrationfalse.esm.js" type="module"></script>
+<script src="./build/testinvisibleprehydrationfalse.js" nomodule></script>
+
+<prehydrated-styles></prehydrated-styles>
diff --git a/test/wdio/invisible-prehydration/invisible-prehydration.test.tsx b/test/wdio/invisible-prehydration/invisible-prehydration.test.tsx
@@ -0,0 +1,50 @@
+/**
+ * Note: this file is meant to be run in the browser, not in Node.js. WebdriverIO
+ * injects some basic polyfills for Node.js to make the following possible.
+ */
+import path from 'node:path';
+
+async function setupTest(htmlFile: string): Promise<Document> {
+  if (document.querySelector('iframe')) {
+    document.body.removeChild(document.querySelector('iframe'));
+  }
+
+  const htmlFilePath = path.resolve(
+    path.dirname(globalThis.__wdioSpec__),
+    '..',
+    'www-invisible-prehydration',
+    htmlFile.slice(htmlFile.startsWith('/') ? 1 : 0),
+  );
+  const iframe = document.createElement('iframe');
+
+  /**
+   * Note: prefixes the absolute path to the html file with `/@fs` is a ViteJS (https://vitejs.dev/)
+   * feature which allows to serve static content from files this way
+   */
+  iframe.src = `/@fs${htmlFilePath}`;
+  iframe.width = '600px';
+  iframe.height = '600px';
+  document.body.appendChild(iframe);
+
+  /**
+   * wait for the iframe to load
+   */
+  await new Promise((resolve) => (iframe.onload = resolve));
+  return iframe.contentDocument;
+}
+
+describe('invisible-prehydration-false', () => {
+  let iframe: Document;
+
+  beforeEach(async () => {
+    iframe = await setupTest('index.html');
+
+    // Tried using the `browser.waitUntil()` pattern here, but it was flakey and throwing errors on occasion
+    await browser.pause(100);
+  });
+
+  it('the style element will not be placed in the head', async () => {
+    expect(iframe.body.querySelector('prehydrated-styles').innerHTML).toEqual('<div>prehydrated-styles</div>');
+    expect(iframe.head.querySelectorAll('style[data-styles]').length).toBe(0);
+  });
+});
diff --git a/test/wdio/package.json b/test/wdio/package.json
@@ -3,11 +3,12 @@
   "type": "module",
   "version": "0.0.0",
   "scripts": {
-    "build": "run-s build.global-script build.test-sibling build.main build.prerender",
+    "build": "run-s build.global-script build.test-sibling build.main build.prerender build.invisible-prehydration",
     "build.main": "node ../../bin/stencil build --debug --es5",
     "build.global-script": "node ../../bin/stencil build --debug --es5 --config global-script.stencil.config.ts",
     "build.test-sibling": "cd test-sibling && npm run build",
     "build.prerender": "node ../../bin/stencil build --config prerender.stencil.config.ts --prerender --debug && node ./test-prerender/prerender.js && node ./test-prerender/no-script-build.js",
+    "build.invisible-prehydration": "node ../../bin/stencil build --debug --es5 --config invisible-prehydration.stencil.config.ts",
     "test": "run-s build wdio",
     "wdio": "wdio run ./wdio.conf.ts"
   },

diff --git a/test/wdio/tsconfig-invisible-prehydration.json b/test/wdio/tsconfig-invisible-prehydration.json
@@ -0,0 +1,5 @@
+{
+  "extends": "./tsconfig-stencil.json",
+  "include": ["invisible-prehydration"],
+  "exclude": ["invisible-prehydration/*.test.tsx"]
+}
diff --git a/test/wdio/tsconfig-stencil.json b/test/wdio/tsconfig-stencil.json
@@ -10,10 +10,7 @@
     "forceConsistentCasingInFileNames": true,
     "jsx": "react",
     "jsxFactory": "h",
-    "lib": [
-      "dom",
-      "es2017"
-    ],
+    "lib": ["dom", "es2017"],
     "module": "esnext",
     "moduleResolution": "node",
     "strictPropertyInitialization": false,
@@ -30,20 +27,17 @@
       "@test-sibling": ["./test-sibling"]
     }
   },
-  "include": [
-    "./src/components.d.ts",
-    "./**/*.spec.ts",
-    "./**/*.tsx",
-    "./util.ts",
-    "./global.ts"
-  ],
+  "include": ["./src/components.d.ts", "./**/*.spec.ts", "./**/*.tsx", "./util.ts", "./global.ts"],
   "exclude": [
     "./**/*.test.tsx",
     // we exclude the files in the global-script directory here since they're
     // compiled separately
     "./global-script/**/*.tsx",
     "./global-script/**/*.ts",
     // we also exclude the files in the test-sibling directory
-    "./test-sibling/**/*.tsx"
+    "./test-sibling/**/*.tsx",
+    // we also exclude the files in the invisible-prehydration directory
+    "./invisible-prehydration/**/*.tsx",
+    "./invisible-prehydration/**/*.ts"
   ]
 }