[karma-viewport] Added a type definition and tests of it.

types/karma-viewport/index.d.ts

@@ -2,12 +2,125 @@
 // Project: https://github.com/squidfunk/karma-viewport
 // Definitions by: My Self <https://github.com/me>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// Type definition file for 'karma-viewport'
+// https://www.npmjs.com/package/karma-viewport
 
-export = karma_viewport;
+declare namespace KarmaViewport {
+    interface Breakpoint {
+        name: string;
+        size: {
+            width: number,
+            height: number,
+        };
+    }
 
-declare const karma_viewport: {
-    "framework:viewport": string[];
-    "middleware:viewport": string[];
-    "preprocessor:viewport": string[];
-};
+    interface Config {
+        /** Context selector */
+        context: string;
+        /** Breakpoints */
+        breakpoints: Breakpoint[];
+    }
 
+    class Viewport {
+        /**
+         * Create viewport resizer
+         *
+         * @param config - Configuration
+         * @param context - Initialization context
+         */
+        constructor(config: Config, context: Window);
+
+        /**
+         * Load and embed document into viewport
+         *
+         * @param url - URL of document to load
+         * @param cb - Callback to execute after document was loaded
+         */
+        load(url: string, cb: () => void): void;
+
+        /**
+         * Set viewport to number or array
+         */
+        set(width: number, height?: number): void;
+
+        /**
+         * Set viewport to breakpoint identifier
+         */
+        set(name: string): void;
+
+        /**
+         * Reset viewport
+         */
+        reset(): void;
+
+        /**
+         * Execute a callback for all breakpoints between the first and last given
+         *
+         * @example
+         *   viewport.between("mobile", "tablet", name => {
+         *     ...
+         *   })
+         *
+         * @param first - First breakpoint name
+         * @param last - Last breakpoint name
+         * @param cb - Callback to execute after resizing
+         */
+        between(first: string, last: string, cb: (name: string) => void): void;
+
+        /**
+         * Execute a callback for all breakpoints
+         *
+         * @example
+         *   viewport.each(name => {
+         *     ...
+         *   })
+         *
+         * @param cb - Callback to execute after resizing
+         */
+        each(cb: (name: string) => void): void;
+
+        /**
+         * Execute a callback starting at the given breakpoint
+         *
+         * @example
+         *   viewport.from("tablet", name => {
+         *     ...
+         *   })
+         *
+         * @param first - First breakpoint name
+         * @param cb - Callback to execute after resizing
+         */
+        from(first: string, cb: (name: string) => void): void;
+
+        /**
+         * Execute a callback ending at the given breakpoint
+         *
+         * @example
+         *   viewport.to("tablet", name => {
+         *     ...
+         *   })
+         *
+         * @param last - Last breakpoint name
+         * @param cb - Callback to execute after resizing
+         */
+        to(last: string, cb: (name: string) => void): void;
+
+        /**
+         * Retrieve configuration
+         *
+         * @return Configuration
+         */
+        readonly config: Config; // get config()
+
+        /**
+         * Retrieve context element
+         *
+         * @return context element
+         */
+        readonly element: HTMLIFrameElement; // get element()
+    }
+}
+
+declare const viewport: KarmaViewport.Viewport;
+
+export = viewport;

types/karma-viewport/karma-viewport-tests.ts

@@ -0,0 +1,48 @@
+import * as viewport from 'karma-viewport';
+
+// Set to 320px x 100%
+viewport.set(320);
+
+// Set to 320px x 480px
+viewport.set(320, 480);
+
+// Set to 320px x 480px by breakpoints
+viewport.set("mobile");
+
+// Reset to 100% x 100%
+viewport.reset();
+
+// Load entire webpages for testing:
+viewport.load("/path/to/fixture.html", () => console.log('done'));
+
+// Run tests for mobile, tablet and screen
+viewport.each(name => {
+    // ...
+});
+
+// Run tests for tablet and screen
+viewport.from("tablet", name => {
+    // ...
+});
+
+// Run tests for mobile and tablet
+viewport.to("tablet", name => {
+    // ...
+});
+
+// Run tests for tablet and screen
+viewport.between("tablet", "screen", name => {
+    // ...
+});
+
+// get config
+viewport.config.breakpoints.forEach(breakpoint => {
+    const name: string = breakpoint.name;
+    const width: number = breakpoint.size.width;
+    const height: number = breakpoint.size.height;
+});
+
+const contextSelector: string = viewport.config.context;
+
+// get element
+const iframe: HTMLIFrameElement = viewport.element;

types/karma-viewport/tsconfig.json

@@ -2,11 +2,13 @@
     "compilerOptions": {
         "module": "commonjs",
         "lib": [
-            "es6"
+            "es6",
+            "dom"
         ],
         "noImplicitAny": true,
         "noImplicitThis": true,
         "strictNullChecks": true,
+        "strictFunctionTypes": true,
         "baseUrl": "../",
         "typeRoots": [
             "../"