external-repos/squoosh
1
0
Fork 1
mirror of https://github.com/GoogleChromeLabs/squoosh.git synced 2025-11-16 10:39:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Try karmatic! +test reorg

Browse Source
This commit is contained in:
Jason Miller
2018-06-29 20:12:40 +00:00
parent e9dad3d884
commit 10de559a0c
10 changed files with 3607 additions and 3578 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
karma.conf.js
View File

@@ -1,114 +0,0 @@
const fs = require("fs");
process.env.CHROME_BIN = require('puppeteer').executablePath();
// TypeScript puts lots of comments in the default `tsconfig.json`, so you
// can’t use `require()` to read it. Hence this hack.
return eval("(" + fs.readFileSync(path).toString("utf-8") + ")");
}
const typeScriptConfig = readJsonFile("./tsconfig.json");
const babel = readJsonFile("./.babelrc");
module.exports = function(config) {
const options = {
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: "",
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ["mocha", "chai", "karma-typescript"],
// list of files / patterns to load in the browser
files: [
{
pattern: "test/**/*.ts",
type: "module"
},
{
pattern: "src/**/*.ts",
included: false
}
],
// list of files / patterns to exclude
exclude: [],
// preprocess matching files before serving them to the browser // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
"src/**/*.ts": ["karma-typescript", "babel"],
"test/**/*.ts": ["karma-typescript", "babel"]
},
babelPreprocessor: {
options: babel
},
karmaTypescriptConfig: {
// Inline `tsconfig.json` so that the right TS libs are loaded
...typeScriptConfig,
// Coverage is a thing that karma-typescript forces on you and only
// creates problems. This is the simplest way of disabling it that I
// could find.
coverageOptions: {
exclude: /.*/
}
},
mime: {
// Default mimetype for .ts files is video/mp2t but we need
// text/javascript for modules to work.
"text/javascript": ["ts"]
},
plugins: [
// Load all modules whose name starts with "karma" (usually the default).
"karma-*",
// We don’t have file extensions on our imports as they are primarily
// consumed by webpack. With Karma, however, this turns into a real HTTP
// request for a non-existent file. This inline plugin is a middleware
// that appends `.ts` to the request URL.
{
"middleware:redirect_to_ts": [
"value",
(req, res, next) => {
if (req.url.startsWith("/base/src")) {
req.url += '.ts';
}
next();
}
]
}
],
// Run our middleware before all other middlewares.
beforeMiddleware: ["redirect_to_ts"],
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ["progress"],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: false,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ["ChromeHeadless"],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: true,
// These custom files allow us to use ES6 modules in our tests.
// Remove these 2 lines (and files) once https://github.com/karma-runner/karma/pull/2834 lands.
customContextFile: "test/context.html",
customDebugFile: "test/debug.html"
};
config.set(options);
};

6880
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

10
package.json
View File

@@ -9,7 +9,9 @@
"start": "webpack serve --host 0.0.0.0 --hot", "start": "webpack serve --host 0.0.0.0 --hot",
"build": "webpack -p", "build": "webpack -p",
"lint": "eslint src", "lint": "eslint src",
"test": "npm run build && mocha -R spec && karma start" "test": "npm run build && npm run test:e2e && npm run test:unit",
"test:e2e": "mocha -R spec test/e2e",
"test:unit": "karmatic"
}, },
"eslintConfig": { "eslintConfig": {
"extends": [ "extends": [
@@ -26,6 +28,11 @@
"always" "always"
], ],
"prefer-const": 1 "prefer-const": 1
},
"settings": {
"react": {
"pragma": "h"
}
} }
}, },
"eslintIgnore": [ "eslintIgnore": [
@@ -71,6 +78,7 @@
"karma-chrome-launcher": "^2.2.0", "karma-chrome-launcher": "^2.2.0",
"karma-mocha": "^1.3.0", "karma-mocha": "^1.3.0",
"karma-typescript": "^3.0.12", "karma-typescript": "^3.0.12",
"karmatic": "^1.1.7",
"loader-utils": "^1.1.0", "loader-utils": "^1.1.0",
"mini-css-extract-plugin": "^0.3.0", "mini-css-extract-plugin": "^0.3.0",
"mocha": "^5.2.0", "mocha": "^5.2.0",

41
test/context.html
View File

@@ -1,41 +0,0 @@
<!DOCTYPE html>
<!--
This file is taken from https://github.com/karma-runner/karma/pull/2834. It allows us to use ES6 module imports in our test suite files.
-->
<!--
This is the execution context.
Loaded within the iframe.
Reloaded before every execution run.
-->
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
</head>
<body>
<!-- The scripts need to be in the body DOM element, as some test running frameworks need the body
to have already been created so they can insert their magic into it. For example, if loaded
before body, Angular Scenario test framework fails to find the body and crashes and burns in
an epic manner. -->
<script src="context.js"></script>
<script type="text/javascript">
// Configure our Karma and set up bindings
%CLIENT_CONFIG%
window.__karma__.setupContext(window);
// All served files with the latest timestamps
%MAPPINGS%
</script>
<!-- Dynamically replaced with <script> tags -->
%SCRIPTS%
<!-- Since %SCRIPTS% might include modules, the `loaded()` call needs to be in a module too.
This ensures all the tests will have been declared before karma tries to run them. -->
<script type="module">
window.__karma__.loaded();
</script>
<script nomodule>
window.__karma__.loaded();
</script>
</body>
</html>

43
test/debug.html
View File

@@ -1,43 +0,0 @@
<!doctype html>
<!--
This file is taken from https://github.com/karma-runner/karma/pull/2834. It allows us to use ES6 module imports in our test suite files.
-->
<!--
This file is almost the same as context.html - loads all source files,
but its purpose is to be loaded in the main frame (not within an iframe),
just for immediate execution, without reporting to Karma server.
-->
<html>
<head>
%X_UA_COMPATIBLE%
<title>Karma DEBUG RUNNER</title>
<link href="favicon.ico" rel="icon" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
</head>
<body>
<!-- The scripts need to be at the end of body, so that some test running frameworks
(Angular Scenario, for example) need the body to be loaded so that it can insert its magic
into it. If it is before body, then it fails to find the body and crashes and burns in an epic
manner. -->
<script src="context.js"></script>
<script src="debug.js"></script>
<script type="text/javascript">
// Configure our Karma
%CLIENT_CONFIG%
// All served files with the latest timestamps
%MAPPINGS%
</script>
<!-- Dynamically replaced with <script> tags -->
%SCRIPTS%
<!-- Since %SCRIPTS% might include modules, the `loaded()` call needs to be in a module too.
This ensures all the tests will have been declared before karma tries to run them. -->
<script type="module">
window.__karma__.loaded();
</script>
<script nomodule>
window.__karma__.loaded();
</script>
</body>
</html>

42
test/e2etest.js → test/e2e/index.js
View File

@@ -1,40 +1,42 @@
const express = require("express"); /* eslint-env mocha */
const app = express();
const http = require("http");
const puppeteer = require("puppeteer");
const { fingerDown } = require("./finger.js");
const { expect } = require("chai");
async function staticWebServer(path) { const path = require('path');
const express = require('express');
const http = require('http');
const puppeteer = require('puppeteer');
const { fingerDown } = require('../lib/finger');
const { expect } = require('chai');
async function staticWebServer (path) {
// Start a static web server // Start a static web server
const app = express(); const app = express();
app.use(express.static(path)); app.use(express.static(path));
// Port 0 means let the OS select a port // Port 0 means let the OS select a port
const server = http.createServer(app).listen(0, "localhost"); const server = http.createServer(app).listen(0, 'localhost');
await new Promise(resolve => server.on("listening", resolve)); await new Promise(resolve => server.on('listening', resolve));
// Read back the bound address // Read back the bound address
const address = server.address(); const address = server.address();
return { server, address }; return { server, address };
} }
describe("some e2e test", function() { describe('some e2e test', function () {
before(async function() { before(async function () {
// Start webserver // Start webserver
const { address, server } = await staticWebServer("."); const { address, server } = await staticWebServer(path.resolve(__dirname, '../fixtures'));
this.address = `http://${address.address}:${address.port}`; this.address = `http://${address.address}:${address.port}`;
this.server = server; this.server = server;
// Start browser // Start browser
this.browser = await puppeteer.launch(); this.browser = await puppeteer.launch();
this.page = await this.browser.newPage(); this.page = await this.browser.newPage();
await this.page.goto(`${this.address}/test/sample.html`, { await this.page.goto(`${this.address}/sample.html`, {
waitUntil: "networkidle2" waitUntil: 'networkidle2'
}); });
}); });
it("can tap", async function() { it('can tap', async function () {
const btn = await this.page.$("button"); const btn = await this.page.$('button');
await btn.tap(); await btn.tap();
const result = await this.page.evaluate(_ => { const result = await this.page.evaluate(_ => {
return window.lol; return window.lol;
@@ -42,8 +44,8 @@ describe("some e2e test", function() {
expect(result).to.equal(true); expect(result).to.equal(true);
}); });
it("can tap manually", async function() { it('can tap manually', async function () {
const btn = await this.page.$("button"); const btn = await this.page.$('button');
const box = await btn.boundingBox(); const box = await btn.boundingBox();
const finger = fingerDown( const finger = fingerDown(
this.page, this.page,
@@ -57,9 +59,9 @@ describe("some e2e test", function() {
expect(result).to.equal(true); expect(result).to.equal(true);
}); });
it("does some taps", async function() {}); it('does some taps', async function () {});
after(async function() { after(async function () {
this.server.close(); this.server.close();
await this.browser.close(); await this.browser.close();
}); });

0
test/sample.html → test/fixtures/sample.html vendored
View File

26
test/finger.js → test/lib/finger.js
View File

@@ -2,37 +2,37 @@ let touchPoints = [];
let idCnt = 0; let idCnt = 0;
class Finger { class Finger {
constructor(point, page) { constructor (point, page) {
this._point = point; this._point = point;
this._page = page; this._page = page;
} }
move(x, y) { move (x, y) {
if (!this._point) return; if (!this._point) return;
Object.assign(this._point, { Object.assign(this._point, {
x: Math.floor(x), x: Math.floor(x),
y: Math.floor(y) y: Math.floor(y)
}); });
this._page.touchscreen._client.send("Input.dispatchTouchEvent", { this._page.touchscreen._client.send('Input.dispatchTouchEvent', {
type: "touchMove", type: 'touchMove',
touchPoints, touchPoints,
modifiers: page._keyboard._modifiers modifiers: this._page._keyboard._modifiers
}); });
} }
up() { up () {
if (!this._point) return; if (!this._point) return;
const idx = touchPoints.indexOf(this._point); const idx = touchPoints.indexOf(this._point);
touchPoints = touchPoints.splice(idx, 1); touchPoints = touchPoints.splice(idx, 1);
this._point = null; this._point = null;
if (touchPoints.length === 0) { if (touchPoints.length === 0) {
this._page.touchscreen._client.send("Input.dispatchTouchEvent", { this._page.touchscreen._client.send('Input.dispatchTouchEvent', {
type: "touchEnd", type: 'touchEnd',
modifiers: this._page._keyboard._modifiers modifiers: this._page._keyboard._modifiers
}); });
} else { } else {
this._page.touchscreen._client.send("Input.dispatchTouchEvent", { this._page.touchscreen._client.send('Input.dispatchTouchEvent', {
type: "touchMove", type: 'touchMove',
touchPoints, touchPoints,
modifiers: this._page._keyboard._modifiers modifiers: this._page._keyboard._modifiers
}); });
@@ -40,7 +40,7 @@ class Finger {
} }
} }
function fingerDown(page, x, y) { function fingerDown (page, x, y) {
const id = idCnt++; const id = idCnt++;
const point = { const point = {
x: Math.round(x), x: Math.round(x),
@@ -48,8 +48,8 @@ function fingerDown(page, x, y) {
id id
}; };
touchPoints.push(point); touchPoints.push(point);
page.touchscreen._client.send("Input.dispatchTouchEvent", { page.touchscreen._client.send('Input.dispatchTouchEvent', {
type: "touchStart", type: 'touchStart',
touchPoints, touchPoints,
modifiers: page._keyboard._modifiers modifiers: page._keyboard._modifiers
}); });

27
test/unit/index.test.js Normal file
View File

@@ -0,0 +1,27 @@
/* eslint-env jest */
import { h, Component, render } from 'preact';
import App from '../../src/components/app';
describe('<App />', () => {
let scratch;
beforeEach(() => {
scratch = document.createElement('div');
document.body.appendChild(scratch);
});
afterEach(() => {
render(<span />, scratch, scratch.firstChild);
scratch.remove();
});
it('should render', () => {
let app;
render(<App ref={c => { app = c; }} />, scratch);
expect(app instanceof Component).toBe(true);
expect(scratch.innerHTML).toBe(
`<div id="app" class="app__1wROX"><div><h1>Select an image</h1><input type="file"></div></div>`
);
});
});