10
10
[ gitter-image ] : https://img.shields.io/gitter/room/squidfunk/karma-viewport.svg
11
11
[ gitter-link ] : https://gitter.im/squidfunk/karma-viewport
12
12
[ 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
14
14
15
15
# karma-viewport
16
16
17
- Karma viewport resizer for testing responsive features and layout.
17
+ Karma viewport resizer for testing responsive features and layout
18
18
19
19
## Installation
20
20
@@ -24,8 +24,6 @@ npm install karma-viewport
24
24
25
25
## Usage
26
26
27
- ### Basic configuration
28
-
29
27
Add ` viewport ` to the list of frameworks inside your Karma configuration:
30
28
31
29
``` js
@@ -37,8 +35,8 @@ module.exports = function(config) {
37
35
}
38
36
```
39
37
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.:
42
40
43
41
``` js
44
42
// Set to 320px x 100%
@@ -51,24 +49,12 @@ viewport.set(320, 480)
51
49
viewport .reset ()
52
50
```
53
51
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
67
53
68
54
#### ` config.viewport.context `
69
55
70
56
By 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 ] ).
72
58
This will also wrap the ` debug ` context to run inside the ` iframe#context ` .
73
59
74
60
To run tests within a custom, separate context, e.g. ` iframe#viewport ` :
@@ -88,16 +74,15 @@ module.exports = function(config) {
88
74
```
89
75
90
76
Note 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:
93
80
94
81
``` js
95
- beforeEach (done => {
96
- viewport .load (" /path/to/fixture.html" , done)
97
- })
82
+ viewport .load (" /path/to/fixture.html" ).then (() => { /* webpage was loaded */ })
98
83
```
99
84
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
101
86
102
87
#### ` config.viewport.breakpoints `
103
88
@@ -176,7 +161,19 @@ viewport.between("tablet", "screen", name => {
176
161
})
177
162
```
178
163
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
+ ```
180
177
181
178
## License
182
179
0 commit comments