Skip to content

Commit 631ba2f

Browse files
committed
add browser testing using karma - as some SVG features can't be easily testing in jsdom environment
1 parent f3aaf3a commit 631ba2f

19 files changed

+9694
-26
lines changed

README.md

+81-1
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,84 @@
22

33
![GitHub package.json version](https://img.shields.io/github/package-json/v/mzusin/mz-svg)
44

5-
The TypeScript-based library for manipulating and animating SVG.
5+
The TypeScript-based library for manipulating and animating SVG.
6+
7+
## Table of contents
8+
- [TypeScript Usage](#typescript-usage)
9+
- [Browser Usage](#browser-usage)
10+
- [Node.js Usage](#nodejs-usage)
11+
12+
## TypeScript Usage
13+
14+
To use the library with TypeScript, you need to install the module from npm:
15+
16+
```
17+
npm install mz-svg
18+
```
19+
20+
The import any function like **v2Sum**:
21+
```js
22+
import { v2Sum, Vector2 } from 'mz-svg';
23+
24+
const v1: Vector2 = [1, 2];
25+
const v2: Vector2 = [3, 4];
26+
const sum = v2Sum(v1, v2); // [4, 6]
27+
```
28+
29+
-----------------------------------------------
30+
31+
## Browser Usage
32+
33+
Any function can also be used in the browser using the **mz-svg.min.js** file. All functions are located in the **mzSVG** namespace:
34+
35+
```html
36+
<script src="mz-svg.min.js"></script>
37+
<script>
38+
const sum = mzSVG.v2Sum([1, 2], [3, 4]);
39+
console.log(sum);
40+
</script>
41+
```
42+
43+
The library is also available on the [jsDelivr CND](https://www.jsdelivr.com/package/npm/mz-svg):
44+
45+
```html
46+
<script src="https://cdn.jsdelivr.net/npm/mzusin/dist/mz-svg.min.js"></script>
47+
<script>
48+
const sum = mzSVG.v2Sum([1, 2], [3, 4]);
49+
console.log(sum);
50+
</script>
51+
```
52+
-----------------------------------------------
53+
54+
## Node.js Usage
55+
56+
The library can also be used in Node.js.
57+
58+
```
59+
npm install mz-svg
60+
```
61+
62+
```js
63+
const { setDecimalPlaces } = require('mz-svg/dist/mz-svg.node.cjs');
64+
65+
const rounded = setDecimalPlaces(Math.PI, 2);
66+
console.log(rounded);
67+
```
68+
69+
-----------------------------------------------
70+
71+
## Constants
72+
73+
The library has the following constants that can be used externally:
74+
75+
- SVG_NAMESPACE
76+
- XMLNS_NAMESPACE
77+
78+
```js
79+
import { SVG_NAMESPACE, XMLNS_NAMESPACE } from 'mz-svg';
80+
81+
console.log(SVG_NAMESPACE); // 'http://www.w3.org/2000/svg';
82+
console.log(XMLNS_NAMESPACE); // 'http://www.w3.org/2000/xmlns/';
83+
```
84+
85+
-----------------------------------------------

dist/index.d.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
declare module 'mz-svg' {
22

3+
export const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
4+
export const XMLNS_NAMESPACE = "http://www.w3.org/2000/xmlns/";
5+
36
// export type Vector2 = [number, number];
47

5-
// export const vSum: (vector1: Vector, vector2: Vector, decimalPlaces?: number) => Vector;
8+
export const createSVG: (width: number, height: number) => SVGSVGElement;
69
}

karma.conf.cjs

+75
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
const path = require('path');
2+
3+
module.exports = function(config) {
4+
config.set({
5+
6+
// base path that will be used to resolve all patterns (eg. files, exclude)
7+
basePath: '',
8+
9+
10+
// frameworks to use
11+
// available frameworks: https://www.npmjs.com/search?q=keywords:karma-adapter
12+
frameworks: [
13+
'qunit', // https://www.npmjs.com/package/karma-qunit
14+
],
15+
plugins: [
16+
'karma-qunit',
17+
'karma-chrome-launcher',
18+
'karma-spec-reporter',
19+
],
20+
21+
// list of files / patterns to load in the browser
22+
files: [
23+
path.join(__dirname, './dist/mz-svg.min.js'),
24+
'./test-browser/helpers/*.js',
25+
'./test-browser/modules/**/*.test.js',
26+
// './test-browser/index.html',
27+
],
28+
29+
// list of files / patterns to exclude
30+
exclude: [
31+
],
32+
33+
// preprocess matching files before serving them to the browser
34+
// available preprocessors: https://www.npmjs.com/search?q=keywords:karma-preprocessor
35+
36+
// test results reporter to use
37+
// possible values: 'dots', 'progress'
38+
// available reporters: https://www.npmjs.com/search?q=keywords:karma-reporter
39+
reporters: [
40+
// 'progress',
41+
'spec',
42+
],
43+
44+
45+
// web server port
46+
port: 9876,
47+
48+
49+
// enable / disable colors in the output (reporters and logs)
50+
colors: true,
51+
52+
53+
// level of logging
54+
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
55+
logLevel: config.LOG_INFO,
56+
57+
58+
// enable / disable watching file and executing tests whenever any file changes
59+
autoWatch: true,
60+
61+
62+
// start these browsers
63+
// available browser launchers: https://www.npmjs.com/search?q=keywords:karma-launcher
64+
browsers: ['ChromeHeadless'],
65+
66+
67+
// Continuous Integration mode
68+
// if true, Karma captures browsers, runs the tests and exits
69+
singleRun: false,
70+
71+
// Concurrency level
72+
// how many browser instances should be started simultaneously
73+
concurrency: Infinity
74+
})
75+
}

0 commit comments

Comments
 (0)