1010 [ gitter-image ] : https://img.shields.io/gitter/room/squidfunk/karma-viewport.svg
1111 [ gitter-link ] : https://gitter.im/squidfunk/karma-viewport
1212 [ npm-image ] : https://img.shields.io/npm/v/karma-viewport.svg
13- [ npm-link ] : https://npmjs.com/packages /karma-viewport
13+ [ npm-link ] : https://npmjs.com/package /karma-viewport
1414
1515# karma-viewport
1616
17- Karma viewport resizer for testing responsive features and layout.
17+ Karma viewport resizer for testing responsive features and layout
1818
1919## Installation
2020
@@ -24,8 +24,6 @@ npm install karma-viewport
2424
2525## Usage
2626
27- ### Basic configuration
28-
2927Add ` viewport ` to the list of frameworks inside your Karma configuration:
3028
3129``` js
@@ -37,8 +35,8 @@ module.exports = function(config) {
3735}
3836```
3937
40- This will expose the global variable ` viewport ` which allows setting the
41- dimensions of the viewport within tests , e.g.:
38+ This will expose the global variable ` viewport ` to your tests, which allows
39+ setting the dimensions of the viewport, e.g.:
4240
4341``` js
4442// Set to 320px x 100%
@@ -51,24 +49,12 @@ viewport.set(320, 480)
5149viewport .reset ()
5250```
5351
54- Remember to call ` viewport.reset() ` after each test, e.g. for [ Jasmine] [ 1 ] or
55- [ Mocha] [ 2 ] :
56-
57- ``` js
58- afterEach (() => {
59- viewport .reset ()
60- })
61- ```
62-
63- [ 1 ] : https://jasmine.github.io
64- [ 2 ] : https://mochajs.org/
65-
66- ### Advanced configuration
52+ ### Configuration
6753
6854#### ` config.viewport.context `
6955
7056By default, ` viewport ` will target the default ` iframe#context ` of Karma,
71- which is enabled through ` client.useIframe ` (see the [ configuration guide] [ 3 ] ).
57+ which is enabled through ` client.useIframe ` (see the [ configuration guide] [ 1 ] ).
7258This will also wrap the ` debug ` context to run inside the ` iframe#context ` .
7359
7460To run tests within a custom, separate context, e.g. ` iframe#viewport ` :
@@ -88,16 +74,15 @@ module.exports = function(config) {
8874```
8975
9076Note that the ` iframe#viewport ` element must be present in the ` context.html `
91- and ` debug.html ` files that are served by Karma. Using a separate, custom
92- context makes it possible to load entire webpages for testing:
77+ and ` debug.html ` files that are served by Karma. You can override the files, or
78+ add an ` iframe ` element dynamically before running the tests. Using a separate,
79+ custom context makes it possible to load entire webpages for testing:
9380
9481``` js
95- beforeEach (done => {
96- viewport .load (" /path/to/fixture.html" , done)
97- })
82+ viewport .load (" /path/to/fixture.html" ).then (() => { /* webpage was loaded */ })
9883```
9984
100- [ 3 ] : http://karma-runner.github.io/1.0/config/configuration-file.html
85+ [ 1 ] : http://karma-runner.github.io/1.0/config/configuration-file.html
10186
10287#### ` config.viewport.breakpoints `
10388
@@ -176,7 +161,19 @@ viewport.between("tablet", "screen", name => {
176161})
177162```
178163
179- After breakpoint iteration, ` viewport.reset() ` is called internally.
164+ After breakpoint iteration, ` viewport.reset() ` is called internally. If the
165+ callback provided to the breakpoint returns a ` Promise ` , the return value of
166+ the function will also be a ` Promise ` . This enables asynchronous tests.
167+
168+ ### TypeScript
169+
170+ ` karma-viewport ` is written in TypeScript and comes with its own typings. Don't
171+ include the package using an ` import ` statement, but instead include its types
172+ via ` tsconfig.json ` or a reference within ` karma.conf.ts ` or tests:
173+
174+ ``` ts
175+ /// <reference types = " karma-viewport" />
176+ ```
180177
181178## License
182179
0 commit comments