issue #419: added tests to cover the multi init stuff

Vonage · Nov 2, 2020 · 4d72478 · 4d72478
1 parent fbf956a
commit 4d72478
Show file tree

Hide file tree

Showing 7 changed files with 98 additions and 13 deletions.
diff --git a/common/scheme/src/vvd-scheme-style-tag-handler.ts b/common/scheme/src/vvd-scheme-style-tag-handler.ts
@@ -19,7 +19,7 @@ const getSchemeModule: (scheme: PredefinedScheme) => Promise<ModuleType> = (
 };
 
 const STYLE_ELEMENT_CLASS = 'vvd-scheme-style';
-const style = ensureStyleMount(STYLE_ELEMENT_CLASS);
+ensureStyleMount(STYLE_ELEMENT_CLASS);
 
 function ensureStyleMount(sseClass: string): HTMLStyleElement {
  let result;
@@ -31,6 +31,7 @@ function ensureStyleMount(sseClass: string): HTMLStyleElement {
  result = existing[0] as HTMLStyleElement;
  } else {
  result = document.createElement('style');
+ result.className = STYLE_ELEMENT_CLASS;
  result.innerHTML = preSchemeLoadingCssText;
  document.head.appendChild(result);
  }
@@ -39,9 +40,10 @@ function ensureStyleMount(sseClass: string): HTMLStyleElement {
 
 export async function applySchemeCSS(scheme: PredefinedScheme): Promise<void> {
  const schemeModule = await getSchemeModule(scheme);
+ const styleElement = ensureStyleMount(STYLE_ELEMENT_CLASS);
 
  const cssResult: CSSResult | undefined = schemeModule?.style;
  if (cssResult) {
- style.innerHTML = cssResult.cssText || '';
+ styleElement.innerHTML = cssResult.cssText || '';
  }
 }
diff --git a/common/scheme/test/scheme-setup.test.html b/common/scheme/test/scheme-setup.test.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <title>Vivid - injectable isolated document as testing playground</title>
+ <script type="module">
+ window.executeSetup = async (src) => {
+ window.vvdScheme = (await import(src)).default;
+ await window.vvdScheme.set();
+ };
+ </script>
+</head>
+
+<body></body>
+
+</html>
diff --git a/common/scheme/test/scheme.test.js b/common/scheme/test/scheme.test.js
@@ -1,4 +1,7 @@
-import { randomAlpha } from '../../../test/test-helpers.js';
+import {
+ getFrameLoadedInjected,
+ randomAlpha,
+} from '../../../test/test-helpers.js';
 import {
  getBaseVarNames,
  assertBaseVarsMatch,
@@ -9,6 +12,7 @@ import schemeService from '../vvd-scheme.js';
 import { getPreferedColorScheme } from '../os-sync.utils.js';
 
 // const SYNC_WITH_OS = 'syncWithOSSettings',
+const SCHEME_SETUP_HTML_TAG = 'schemeSetupTestHTML';
 const LIGHT = 'light';
 const DARK = 'dark';
 
@@ -127,6 +131,28 @@ describe('vvd-scheme service', () => {
  assert.equal(r2, r1);
  });
 
+ it('should install style element only once', async () => {
+ await getFrameLoadedInjected(SCHEME_SETUP_HTML_TAG, async (iframe) => {
+ const iframeWindow = iframe.contentWindow;
+ const tmpErrorHolder = iframeWindow.console.error;
+ let expectedError;
+ iframeWindow.console.error = (m) => {
+ expectedError = m;
+ };
+ await Promise.all([
+ iframeWindow.executeSetup('../vvd-scheme.js?instance=1'),
+ iframeWindow.executeSetup('../vvd-scheme.js?instance=2'),
+ ]);
+ iframeWindow.console.error = tmpErrorHolder;
+ const sseCount = iframe.contentDocument.querySelectorAll('.vvd-scheme-style')
+ .length;
+ expect(sseCount).equal(1);
+ expect(expectedError).equal(
+ 'found 1 scheme styles upon init while expected for 1, check your dependencies configuration'
+ );
+ });
+ });
+
  describe('variables setup functionality', () => {
  it('should have light variables set when light scheme set', async () => {
  const r = randomAlpha();

diff --git a/karma.conf.js b/karma.conf.js
@@ -9,27 +9,26 @@ module.exports = config => {
  { pattern: config.grep ? config.grep : '{common,components}/**/test/**/*.test.js', type: 'module' },
  ],
  preprocessors: {
- 'common/design-tokens/build/scss/schemes/**/*.scss': ['file-fixtures']
+ 'common/design-tokens/build/scss/schemes/**/*.scss': ['file-fixtures'],
+ '{common,components}/**/*.js': ['coverage']
  },
  esm: {
  nodeResolve: true,
  },
  frameworks: ['chai'],
+ reporters: ['karmaHTML'],
  browserDisconnectTimeout: 300000,
  browserNoActivityTimeout: 360000,
  singleRun: true,
  autoWatch: false,
  restartOnFileChange: true,
  captureTimeout: 420000,
- coverageIstanbulReporter: {
- thresholds: {
- global: {
- statements: 10,
- lines: 10,
- branches: 3,
- functions: 10,
- },
- },
+ client: {
+ karmaHTML: {
+ source: [
+ { tag: 'schemeSetupTestHTML', src: 'common/scheme/test/scheme-setup.test.html' }
+ ]
+ }
  }
  });
 

diff --git a/package.json b/package.json
@@ -88,6 +88,7 @@
  "karma-coverage-istanbul-reporter": "^3.0.3",
  "karma-firefox-launcher": "^1.3.0",
  "karma-file-fixtures-preprocessor": "^3.0.1",
+ "karma-html": "^1.0.5",
  "karma-mocha": "^2.0.1",
  "karma-mocha-reporter": "^2.2.5",
  "karma-safarinative-launcher": "^1.1.0",

diff --git a/test/test-helpers.js b/test/test-helpers.js
@@ -147,6 +147,40 @@ export function isSafari() {
  !window.navigator.userAgent.toLowerCase().includes('chrome');
 }
 
+/**
+ * creates iFrame with the specified HTML (via karmaHTML framework)
+ * waits until the iFrame is loaded
+ * executes testCode on the iFrame's window object
+ * resolves as soon as all of those operations done
+ *
+ * @param {string} htmlTag
+ * @param {function} testCode logic to run on the contentWindow of the newly created iframe
+ * @returns created and initialised iFrame element
+ */
+export async function getFrameLoadedInjected(htmlTag, testCode) {
+ if (!htmlTag || typeof htmlTag !== 'string') {
+ throw new Error(`htmlTag MUST be a non-null nor-empty string, got '${htmlTag}'`);
+ }
+ if (!testCode && typeof testCode !== 'function') {
+ throw new Error(`test code MUST be a function`);
+ }
+
+ const loader = karmaHTML[htmlTag];
+ loader.reload();
+ return new Promise((resolve, reject) => {
+ loader.onstatechange = ready => {
+ if (!ready) { return; }
+ const result = loader.iframe;
+
+ // test logic
+ Promise
+ .resolve(testCode.call(result.contentWindow, result))
+ .catch(reject)
+ .finally(() => resolve(result));
+ };
+ });
+}
+
 class TestComponent extends HTMLElement {
  connectedCallback() {
  this.attachShadow({ mode: 'open' });

diff --git a/yarn.lock b/yarn.lock
@@ -10834,6 +10834,13 @@ karma-firefox-launcher@^1.3.0:
  dependencies:
  is-wsl "^2.1.0"
 
+karma-html@^1.0.5:
+ version "1.0.5"
+ resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/karma-html/-/karma-html-1.0.5.tgz#08d47d8afb374f9e100efe5f38694d2efd56b46a"
+ integrity sha1-CNR9ivs3T54QDv5fOGlNLv1WtGo=
+ dependencies:
+ glob "^7.1.2"
+
 karma-mocha-reporter@^2.0.0, karma-mocha-reporter@^2.2.5:
  version "2.2.5"
  resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/karma-mocha-reporter/-/karma-mocha-reporter-2.2.5.tgz#15120095e8ed819186e47a0b012f3cd741895560"