squidfunk / karma-viewport Goto Github PK
View Code? Open in Web Editor NEWA Karma plugin for testing responsive features and layout
License: MIT License
A Karma plugin for testing responsive features and layout
License: MIT License
Hello.
I just want to test scrolling behavior on different viewport sizes.
Right now i'm scrolling viewport content with viewport.el_.contentWindow.scrollTo(0,101). But then i need also to reset scrollTop after each test.
I'm just curious if there is a better approach for this.
I can't figure out how to get the debug context middleware to be automatically registered.
This line returns false
for me (I think config.context
as well as client
are undefined
in my environment):
Line 62 in fe92794
I can workaround this by manually adding beforeMiddleware: ['viewport']
to my karma.conf.js.
Middleware to automatically be initialized (or clear instructions on how to enable it).
Middleware setup is skipped.
I'm probably overlooking something simple, but I'm following the documentation as far as I can tell and I'm getting a "Cannot find name 'viewport'" error.
I added "viewport" to my frameworks as stated. Do I need to import "Viewport" in my test?
Or is this an issue with typescripting? I wasn't sure where or what to do with the line from documentation that stated: ///
I also ran across this on the web and wasn't sure if this should be installed: @types/karma-viewport
I'm using Angular-cli and just installed karma-viewport 1.0.2
This utility looks like it will be super useful in testing my responsive code.
"@angular/cli": "1.7.4",
"@angular/compiler-cli": "5.2.0",
"@angular/language-service": "5.2.0",
"@types/jasmine": "2.8.3",
"@types/jasminewd2": "2.0.2",
"@types/node": "6.0.60",
"codelyzer": "4.0.1",
"jasmine-core": "2.8.0",
"jasmine-spec-reporter": "4.2.1",
"karma": "2.0.0",
"karma-chrome-launcher": "2.2.0",
"karma-coverage-istanbul-reporter": "1.2.1",
"karma-jasmine": "1.1.0",
"karma-jasmine-html-reporter": "0.2.2",
"protractor": "5.1.2",
"ts-node": "4.1.0",
"tslint": "5.9.1",
"typescript": "2.5.3"
#458 doesn't look like the correct solution:
pattern: file,
included: true,
served,
watched: false
served: false
means that the request to this file will lead to 404, and indeed that's what happens for me.
13 10 2020 15:25:17.700:WARN [middleware:karma]: Unable to determine file type from the file extension, defaulting to js.
To silence the warning specify a valid type for <...>/node_modules/karma-viewport/dist/adapter/index.js.map in the configuration file.
See http://karma-runner.github.io/latest/config/files.html
13 10 2020 15:25:18.044:WARN [web-server]: 404: /base/node_modules/karma-viewport/dist/adapter/index.js.map?666b2c333d842e2f4a6850c5c8454da4de299797
13 10 2020 15:25:18.453:WARN [web-server]: 404: /base/node_modules/karma-viewport/dist/adapter/index.js.map?666b2c333d842e2f4a6850c5c8454da4de299797
Overall, the combo included: true, served: false
doesn't seem to make sense:
included
- Should the files be included in the browser using<script>
tag?
Why would we want to load a source map using a script tag?
served
- Should the files be served by Karma's webserver?
Yes, we want this file. Why set served
to false
?
cc: @altearius
Cab we have window resize event to be triggered when the size of changed?
When using Karma's debug runner, the Chrome devtools makes a request to load the adapter.js file's sourcemap, adapter\index.js.map
.
The adapter\index.js.map
file has not been included as one of the files that Karma is allowed to serve, so this generates a 404 error, both in the Chrome dev tools and in the Karma log.
No 404 should occur and the sourcemap should load successfully.
A 404 error is generated in the Chrome dev tools:
And in the Karma log:
1.0.6
4.4.1
83.0.4103.116
Running Karma tests with this module enabled I get the following warning:
01 04 2019 14:36:33.724:WARN [middleware:karma]: Invalid file type, defaulting to js. json
1.0.4
4.0.1
I'm trying to configure karma-viewport with nwb
It uses the same configuration as karma. Reference here
Should be able to run tests
I get this error:
13 02 2018 20:00:34.010:INFO [karma]: Karma v2.0.0 server started at http://0.0.0.0:9876/
13 02 2018 20:00:34.011:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
13 02 2018 20:00:34.032:INFO [launcher]: Starting browser PhantomJS
13 02 2018 20:00:34.260:INFO [PhantomJS 2.1.1 (Linux 0.0.0)]: Connected on socket _DmFXaxpo6oUgeICAAAA with id 25650588
PhantomJS 2.1.1 (Linux 0.0.0) ERROR
{
"message": "ReferenceError: Can't find variable: describe\nat webpack:///tests/index-test.js:12:0 <- tests/index-test.js:23099:9",
"str": "ReferenceError: Can't find variable: describe\nat webpack:///tests/index-test.js:12:0 <- tests/index-test.js:23099:9"
}
PhantomJS 2.1.1 (Linux 0.0.0): Executed 0 of 0 ERROR (0.134 secs / 0 secs)
Karma exit code was 1
error Command failed with exit code 1.
nwb
nwb.config.js
: karma: {
frameworks: [
'viewport'
],
plugins: [
require('karma-viewport')
]
}
npm test
"karma-viewport": "^0.4.2",
"nwb": "0.21.x",
"react": "^16.2.0",
"react-dom": "^16.2.0",
Thanks a lot!!
When I'm trying to use this plugin, I end up on ReferenceError: viewport is not defined
error.
It runs test.
It fails running test.
karma-viewport
with your package managerviewport
into frameworks
array in karma.config.js
/// <reference types="karma-viewport" />
viewport.set(1000, 1000);
1.0.7
5.1.1
[email protected]
, [email protected]
– Chrome
or ChromiumHeadless
through puppeteer
as described in karma-chrome-launcher
docs"karma-viewport": "^0.4.1"
Getting: No provider for "framework:viewport"!, on angular 4 project.
Do I need to configure something else?
Test runs successfully and passes when running ng test in angular 4, but when debugging the tests through karma, viewport is undefined
For viewport to be defined and tests to pass in debug mode.
viewport is not being defined
^0.1.2
Looks like the current version of karma-viewport depends on a vulnerable version of log4js. It also seems that karma-viewport depends on quite a few outdated packages. I know this isn’t production dependency so it’s probably not critical, but it would be really great to have updated sub-dependencies & dependencies… Is there any chance they (or at least log4js) can be upgraded, @squidfunk?
To have non-vulnerable dependencies.
There’s a vulnerable version of log4js.
1.0.8
6.3.17
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.