Skip to content

Commit

Permalink
Updated devtools + use karma to replace wct (#153)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
hans-lizihan authored Sep 1, 2022
1 parent 74dc4c2 commit 18c4a2d
Show file tree
Hide file tree
Showing 14 changed files with 19,578 additions and 21,136 deletions.
11 changes: 10 additions & 1 deletion .babelrc
Original file line number Diff line number Diff line change
@@ -1,3 +1,12 @@
{
"presets": ["es2015"]
"presets": [
["@babel/preset-env", {
"targets": {
"chrome": "90",
"firefox": "91",
"edge": "90",
"safari": "13"
}
}]
]
}
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,5 @@ npm-debug.log
yarn.lock
/.vscode
/isorender
/coverage
.nyc_output
126 changes: 126 additions & 0 deletions karma.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
/* eslint-env node */

const path = require(`path`);

process.env.CHROME_BIN = require(`puppeteer`).executablePath();
process.env.FIREFOX_BIN = require(`playwright`).firefox.executablePath();
const SAUCE = parseInt(process.env.SAUCE, 10) >= 1;

// Check out https://saucelabs.com/platforms for all browser/platform combos
const sauceLaunchers = {
sl_chrome_latest: {
base: `SauceLabs`,
browserName: `chrome`,
browserVersion: `latest`,
platformName: `macOS 12`,
'sauce:options': {
extendedDebugging: true,
},
},
sl_chrome_old: {
base: `SauceLabs`,
browserName: `chrome`,
browserVersion: `90`,
platformName: `macOS 10.13`,
'sauce:options': {
extendedDebugging: true,
},
},
sl_firefox_latest: {
base: `SauceLabs`,
browserName: `firefox`,
browserVersion: `latest`,
platformName: `macOS 12`,
'sauce:options': {
extendedDebugging: true,
},
},
sl_firefox_old: {
base: `SauceLabs`,
browserName: `firefox`,
browserVersion: `91`,
platformName: `macOS 10.13`,
'sauce:options': {
extendedDebugging: true,
},
},
sl_safari_latest: {
base: `SauceLabs`,
browserName: `safari`,
browserVersion: `latest`,
platformName: `macOS 12`,
},
sl_safari_old: {
base: `SauceLabs`,
browserName: `safari`,
browserVersion: `13`,
platformName: `macOS 10.13`,
},
sl_edge_latest: {
base: `SauceLabs`,
browserName: `MicrosoftEdge`,
browserVersion: `latest`,
platformName: `Windows 10`,
},
sl_edge_old: {
base: `SauceLabs`,
browserName: `MicrosoftEdge`,
browserVersion: `90`,
platformName: `Windows 10`,
},
};

const sauceBrowsers = Object.keys(sauceLaunchers);

// shared config for all unit tests
module.exports = function (config) {
config.set({
frameworks: [`mocha`],
preprocessors: {
'**/*.js': [`sourcemap`],
},
basePath: path.resolve(__dirname, `test/browser/build`),
retryLimit: 2,
files: [`bundle.js`],
client: {
clientDisplayNone: true,
mocha: {
timeout: 30000, // 300s
},
},
sauceLabs: {
public: `team`,
build: `panel ${process.env.GITHUB_REF || `local`} build ${process.env.GITHUB_RUN_NUMBER || ``}`,
testName: `Panel tests`,
},
plugins: [
require(`karma-mocha`),
require(`karma-spec-reporter`),
require(`karma-chrome-launcher`),
require(`karma-firefox-launcher`),
require(`karma-sauce-launcher`),
require(`karma-sourcemap-loader`),
],
browsers: SAUCE ? sauceBrowsers : [`ChromeHeadless`, `Firefox`],
reporters: SAUCE ? [`spec`, `saucelabs`] : [`spec`],
singleRun: true,
customLaunchers: {
...sauceLaunchers,
ChromeHeadless: {
base: `Chrome`,
flags: [
`--headless`,
`--disable-gpu`,
`--disable-dev-shm-usage`,
`--remote-debugging-port=9222`,
`--window-size=1280,800`,
`--no-sandbox`,
],
},
FirefoxHeadless: {
base: `Firefox`,
flags: [`-headless`],
},
},
});
};
6 changes: 5 additions & 1 deletion lib/component-utils/perf.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,11 @@
* Attempt to use a high resolution timestamp when in the browswer environment, but fallback to Date.now
* When the performance API is not available.
*/
export function getNow() {
export const Perf = {
getNow,
};

function getNow() {
if (typeof performance !== `undefined`) {
return performance.now();
}
Expand Down
18 changes: 9 additions & 9 deletions lib/component.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import WebComponent from 'webcomponent';
import {EMPTY_DIV, DOMPatcher, h} from './dom-patcher';
import Router from './router';
import * as hookHelpers from './component-utils/hook-helpers';
import {getNow} from './component-utils/perf';
import {Perf} from './component-utils/perf';

const DOCUMENT_FRAGMENT_NODE = 11;
const ATTR_TYPE_DEFAULTS = {
Expand Down Expand Up @@ -245,7 +245,7 @@ class Component extends WebComponent {
* myWidget.update({name: 'Bob'});
*/
update(stateUpdate = {}) {
this.timings.lastUpdateAt = getNow();
this.timings.lastUpdateAt = Perf.getNow();

const stateUpdateResult = typeof stateUpdate === `function` ? stateUpdate(this.state) : stateUpdate;
return this._updateStore(stateUpdateResult, {
Expand All @@ -271,7 +271,7 @@ class Component extends WebComponent {
constructor() {
super();
this.timings = {
createdAt: getNow(),
createdAt: Perf.getNow(),
};

this.panelID = cuid();
Expand Down Expand Up @@ -325,11 +325,11 @@ class Component extends WebComponent {
}

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

if (shouldBroadcast) {
Expand All @@ -344,7 +344,7 @@ class Component extends WebComponent {
: undefined;

this.lastSlowRender = {
time: getNow(),
time: Perf.getNow(),
elapsedMs,
};
this.slowestRenderMs = Math.max(this.slowestRenderMs || 0, elapsedMs);
Expand All @@ -371,7 +371,7 @@ class Component extends WebComponent {
return;
}
this.initializing = true;
this.timings.initializingStartedAt = getNow();
this.timings.initializingStartedAt = Perf.getNow();

for (const attrsSchemaKey of Object.keys(this._attrsSchema)) {
if (
Expand Down Expand Up @@ -452,7 +452,7 @@ class Component extends WebComponent {

this.initialized = true;
this.initializing = false;
this.timings.initializingCompletedAt = getNow();
this.timings.initializingCompletedAt = Perf.getNow();
this.dispatchEvent(
new CustomEvent(`componentInitialized`, {
detail: {
Expand Down Expand Up @@ -544,7 +544,7 @@ class Component extends WebComponent {
}

attributeChangedCallback(attr, oldVal, newVal) {
this.timings.lastAttributeChangedAt = getNow();
this.timings.lastAttributeChangedAt = Perf.getNow();
this._updateAttr(attr);

if (attr === `style-override`) {
Expand Down
6 changes: 3 additions & 3 deletions lib/dom-patcher.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import {
} from 'snabbdom';

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

const patch = initSnabbdom([
datasetModule,
Expand Down Expand Up @@ -93,7 +93,7 @@ export class DOMPatcher {
return;
}

const startedAt = getNow();
const startedAt = Perf.getNow();
this.rendering = true;
this.pending = false;
this.state = this.pendingState;
Expand All @@ -104,7 +104,7 @@ export class DOMPatcher {
this.vnode = newVnode;
this.el = this.vnode.elm;
if (this.postRenderCallback) {
this.postRenderCallback(getNow() - startedAt);
this.postRenderCallback(Perf.getNow() - startedAt);
}
}

Expand Down
Loading

0 comments on commit 18c4a2d

Please sign in to comment.