Skip to content

Commit 18c4a2d

Browse files
hans-lizihanhans-lizihan
authored
Updated devtools + use karma to replace wct (#153)
* Updated devtools + use wtr to replace wtc * Updated package-lock.json for fsevents * Remove skip in the component test * Fixed build * Fixed perf testing * Fixed test-server * Use w3c protocol for saucelab * Updated browser matrix * Modify the test matric * Try out firefox 74 * Prevent default for onerror handler * Use error.message * Removed build/index.html * Use wtr to run testcases so we could have coverage * Use --coverage for collecting coverage * Saucelab with coverage as well * Re-export jsx from snabbdom instead of snabbdom-lite * Upgrade cuid to bypass restrictions * Pin ff to 100 for now * Bring back Chrome * Revive the branch * Use webdriver protocol * Use karma for test running * Remove wtr config * Remove console.log * Fixed typo * Updated os for 10.13 * Fixed typo * Use chrome 75 to be capatible with wdio * Bring back the disconnect config * Remove disconnect tolerance * Try to fix chrome old tests * Use snabbdom-jsx-lite instead * Manually specify target for babel build target * Fixed safari version to 13
1 parent 74dc4c2 commit 18c4a2d

14 files changed

+19578
-21136
lines changed

‎.babelrc

+10-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
11
{
2-
"presets": ["es2015"]
2+
"presets": [
3+
["@babel/preset-env", {
4+
"targets": {
5+
"chrome": "90",
6+
"firefox": "91",
7+
"edge": "90",
8+
"safari": "13"
9+
}
10+
}]
11+
]
312
}

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,5 @@ npm-debug.log
77
yarn.lock
88
/.vscode
99
/isorender
10+
/coverage
11+
.nyc_output

‎karma.config.js

+126
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
/* eslint-env node */
2+
3+
const path = require(`path`);
4+
5+
process.env.CHROME_BIN = require(`puppeteer`).executablePath();
6+
process.env.FIREFOX_BIN = require(`playwright`).firefox.executablePath();
7+
const SAUCE = parseInt(process.env.SAUCE, 10) >= 1;
8+
9+
// Check out https://saucelabs.com/platforms for all browser/platform combos
10+
const sauceLaunchers = {
11+
sl_chrome_latest: {
12+
base: `SauceLabs`,
13+
browserName: `chrome`,
14+
browserVersion: `latest`,
15+
platformName: `macOS 12`,
16+
'sauce:options': {
17+
extendedDebugging: true,
18+
},
19+
},
20+
sl_chrome_old: {
21+
base: `SauceLabs`,
22+
browserName: `chrome`,
23+
browserVersion: `90`,
24+
platformName: `macOS 10.13`,
25+
'sauce:options': {
26+
extendedDebugging: true,
27+
},
28+
},
29+
sl_firefox_latest: {
30+
base: `SauceLabs`,
31+
browserName: `firefox`,
32+
browserVersion: `latest`,
33+
platformName: `macOS 12`,
34+
'sauce:options': {
35+
extendedDebugging: true,
36+
},
37+
},
38+
sl_firefox_old: {
39+
base: `SauceLabs`,
40+
browserName: `firefox`,
41+
browserVersion: `91`,
42+
platformName: `macOS 10.13`,
43+
'sauce:options': {
44+
extendedDebugging: true,
45+
},
46+
},
47+
sl_safari_latest: {
48+
base: `SauceLabs`,
49+
browserName: `safari`,
50+
browserVersion: `latest`,
51+
platformName: `macOS 12`,
52+
},
53+
sl_safari_old: {
54+
base: `SauceLabs`,
55+
browserName: `safari`,
56+
browserVersion: `13`,
57+
platformName: `macOS 10.13`,
58+
},
59+
sl_edge_latest: {
60+
base: `SauceLabs`,
61+
browserName: `MicrosoftEdge`,
62+
browserVersion: `latest`,
63+
platformName: `Windows 10`,
64+
},
65+
sl_edge_old: {
66+
base: `SauceLabs`,
67+
browserName: `MicrosoftEdge`,
68+
browserVersion: `90`,
69+
platformName: `Windows 10`,
70+
},
71+
};
72+
73+
const sauceBrowsers = Object.keys(sauceLaunchers);
74+
75+
// shared config for all unit tests
76+
module.exports = function (config) {
77+
config.set({
78+
frameworks: [`mocha`],
79+
preprocessors: {
80+
'**/*.js': [`sourcemap`],
81+
},
82+
basePath: path.resolve(__dirname, `test/browser/build`),
83+
retryLimit: 2,
84+
files: [`bundle.js`],
85+
client: {
86+
clientDisplayNone: true,
87+
mocha: {
88+
timeout: 30000, // 300s
89+
},
90+
},
91+
sauceLabs: {
92+
public: `team`,
93+
build: `panel ${process.env.GITHUB_REF || `local`} build ${process.env.GITHUB_RUN_NUMBER || ``}`,
94+
testName: `Panel tests`,
95+
},
96+
plugins: [
97+
require(`karma-mocha`),
98+
require(`karma-spec-reporter`),
99+
require(`karma-chrome-launcher`),
100+
require(`karma-firefox-launcher`),
101+
require(`karma-sauce-launcher`),
102+
require(`karma-sourcemap-loader`),
103+
],
104+
browsers: SAUCE ? sauceBrowsers : [`ChromeHeadless`, `Firefox`],
105+
reporters: SAUCE ? [`spec`, `saucelabs`] : [`spec`],
106+
singleRun: true,
107+
customLaunchers: {
108+
...sauceLaunchers,
109+
ChromeHeadless: {
110+
base: `Chrome`,
111+
flags: [
112+
`--headless`,
113+
`--disable-gpu`,
114+
`--disable-dev-shm-usage`,
115+
`--remote-debugging-port=9222`,
116+
`--window-size=1280,800`,
117+
`--no-sandbox`,
118+
],
119+
},
120+
FirefoxHeadless: {
121+
base: `Firefox`,
122+
flags: [`-headless`],
123+
},
124+
},
125+
});
126+
};

‎lib/component-utils/perf.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,11 @@
22
* Attempt to use a high resolution timestamp when in the browswer environment, but fallback to Date.now
33
* When the performance API is not available.
44
*/
5-
export function getNow() {
5+
export const Perf = {
6+
getNow,
7+
};
8+
9+
function getNow() {
610
if (typeof performance !== `undefined`) {
711
return performance.now();
812
}

‎lib/component.js

+9-9
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import WebComponent from 'webcomponent';
44
import {EMPTY_DIV, DOMPatcher, h} from './dom-patcher';
55
import Router from './router';
66
import * as hookHelpers from './component-utils/hook-helpers';
7-
import {getNow} from './component-utils/perf';
7+
import {Perf} from './component-utils/perf';
88

99
const DOCUMENT_FRAGMENT_NODE = 11;
1010
const ATTR_TYPE_DEFAULTS = {
@@ -245,7 +245,7 @@ class Component extends WebComponent {
245245
* myWidget.update({name: 'Bob'});
246246
*/
247247
update(stateUpdate = {}) {
248-
this.timings.lastUpdateAt = getNow();
248+
this.timings.lastUpdateAt = Perf.getNow();
249249

250250
const stateUpdateResult = typeof stateUpdate === `function` ? stateUpdate(this.state) : stateUpdate;
251251
return this._updateStore(stateUpdateResult, {
@@ -271,7 +271,7 @@ class Component extends WebComponent {
271271
constructor() {
272272
super();
273273
this.timings = {
274-
createdAt: getNow(),
274+
createdAt: Perf.getNow(),
275275
};
276276

277277
this.panelID = cuid();
@@ -325,11 +325,11 @@ class Component extends WebComponent {
325325
}
326326

327327
this.postRenderCallback = (elapsedMs) => {
328-
this.timings.lastRenderAt = getNow();
328+
this.timings.lastRenderAt = Perf.getNow();
329329
if (elapsedMs > this.getConfig(`slowThreshold`)) {
330330
const shouldBroadcast =
331331
!this.lastSlowRender || // SHOULD because we've never slow rendered
332-
this.lastSlowRender.time - getNow() > 3000 || // SHOULD because last time was more than three seconds ago
332+
this.lastSlowRender.time - Perf.getNow() > 3000 || // SHOULD because last time was more than three seconds ago
333333
elapsedMs > (this.slowestRenderMs || 0); // SHOULD because this time is slower
334334

335335
if (shouldBroadcast) {
@@ -344,7 +344,7 @@ class Component extends WebComponent {
344344
: undefined;
345345

346346
this.lastSlowRender = {
347-
time: getNow(),
347+
time: Perf.getNow(),
348348
elapsedMs,
349349
};
350350
this.slowestRenderMs = Math.max(this.slowestRenderMs || 0, elapsedMs);
@@ -371,7 +371,7 @@ class Component extends WebComponent {
371371
return;
372372
}
373373
this.initializing = true;
374-
this.timings.initializingStartedAt = getNow();
374+
this.timings.initializingStartedAt = Perf.getNow();
375375

376376
for (const attrsSchemaKey of Object.keys(this._attrsSchema)) {
377377
if (
@@ -452,7 +452,7 @@ class Component extends WebComponent {
452452

453453
this.initialized = true;
454454
this.initializing = false;
455-
this.timings.initializingCompletedAt = getNow();
455+
this.timings.initializingCompletedAt = Perf.getNow();
456456
this.dispatchEvent(
457457
new CustomEvent(`componentInitialized`, {
458458
detail: {
@@ -544,7 +544,7 @@ class Component extends WebComponent {
544544
}
545545

546546
attributeChangedCallback(attr, oldVal, newVal) {
547-
this.timings.lastAttributeChangedAt = getNow();
547+
this.timings.lastAttributeChangedAt = Perf.getNow();
548548
this._updateAttr(attr);
549549

550550
if (attr === `style-override`) {

‎lib/dom-patcher.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import {
1616
} from 'snabbdom';
1717

1818
import delayedClassModule from 'snabbdom-delayed-class';
19-
import {getNow} from './component-utils/perf';
19+
import {Perf} from './component-utils/perf';
2020

2121
const patch = initSnabbdom([
2222
datasetModule,
@@ -93,7 +93,7 @@ export class DOMPatcher {
9393
return;
9494
}
9595

96-
const startedAt = getNow();
96+
const startedAt = Perf.getNow();
9797
this.rendering = true;
9898
this.pending = false;
9999
this.state = this.pendingState;
@@ -104,7 +104,7 @@ export class DOMPatcher {
104104
this.vnode = newVnode;
105105
this.el = this.vnode.elm;
106106
if (this.postRenderCallback) {
107-
this.postRenderCallback(getNow() - startedAt);
107+
this.postRenderCallback(Perf.getNow() - startedAt);
108108
}
109109
}
110110

0 commit comments

Comments
 (0)