external-repos/squoosh
1
0
Fork 1
mirror of https://github.com/GoogleChromeLabs/squoosh.git synced 2025-11-16 02:29:50 +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",
"build": "webpack -p",
"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": {
"extends": [
@@ -26,6 +28,11 @@
"always"
],
"prefer-const": 1
},
"settings": {
"react": {
"pragma": "h"
}
}
},
"eslintIgnore": [
@@ -71,6 +78,7 @@
"karma-chrome-launcher": "^2.2.0",
"karma-mocha": "^1.3.0",
"karma-typescript": "^3.0.12",
"karmatic": "^1.1.7",
"loader-utils": "^1.1.0",
"mini-css-extract-plugin": "^0.3.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>

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

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

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

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

@@ -13,10 +13,10 @@ class Finger {
x: Math.floor(x),
y: Math.floor(y)
});
this._page.touchscreen._client.send("Input.dispatchTouchEvent", {
type: "touchMove",
this._page.touchscreen._client.send('Input.dispatchTouchEvent', {
type: 'touchMove',
touchPoints,
modifiers: page._keyboard._modifiers
modifiers: this._page._keyboard._modifiers
});
}
@@ -26,13 +26,13 @@ class Finger {
touchPoints = touchPoints.splice(idx, 1);
this._point = null;
if (touchPoints.length === 0) {
this._page.touchscreen._client.send("Input.dispatchTouchEvent", {
type: "touchEnd",
this._page.touchscreen._client.send('Input.dispatchTouchEvent', {
type: 'touchEnd',
modifiers: this._page._keyboard._modifiers
});
} else {
this._page.touchscreen._client.send("Input.dispatchTouchEvent", {
type: "touchMove",
this._page.touchscreen._client.send('Input.dispatchTouchEvent', {
type: 'touchMove',
touchPoints,
modifiers: this._page._keyboard._modifiers
});
@@ -48,8 +48,8 @@ function fingerDown(page, x, y) {
id
};
touchPoints.push(point);
page.touchscreen._client.send("Input.dispatchTouchEvent", {
type: "touchStart",
page.touchscreen._client.send('Input.dispatchTouchEvent', {
type: 'touchStart',
touchPoints,
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>`
);
});
});