squidfunk / karma-viewport Goto Github PK

"karma-viewport": "^0.4.1"

Getting: No provider for "framework:viewport"!, on angular 4 project.

Do I need to configure something else?

Cab we have window resize event to be triggered when the size of changed?

Description

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.

Expected behavior

No 404 should occur and the sourcemap should load successfully.

Actual behavior

A 404 error is generated in the Chrome dev tools:

And in the Karma log:

Steps to reproduce the bug

1. Open Karma in "Watch" mode with Chrome.
2. In the Chrome tab, click "Debug" to open the Karma debug runner.
3. Press F12 to open the Chrome Dev Tools. This triggers the request to the source map.
4. Observe the 404 error.

Package versions

• karma-viewport: 1.0.6
• karma: 4.4.1

System information

• OS: Windows 10
• Chrome 83.0.4103.116

#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

Description

When I'm trying to use this plugin, I end up on ReferenceError: viewport is not defined error.

Expected behavior

It runs test.

Actual behavior

It fails running test.

Steps to reproduce the bug

1. add karma-viewport with your package manager
2. add viewport into frameworks array in karma.config.js
3. run test:

   /// <reference types="karma-viewport" />    
   viewport.set(1000, 1000);

Package versions

• karma-viewport: 1.0.7
• karma: 5.1.1

System information

• OS: Windows 10 (2004)
• Browser: [email protected], [email protected] – Chrome or ChromiumHeadless through puppeteer as described in karma-chrome-launcher docs

Description

Test runs successfully and passes when running ng test in angular 4, but when debugging the tests through karma, viewport is undefined

Expected behavior

For viewport to be defined and tests to pass in debug mode.

Actual behavior

viewport is not being defined

Steps to reproduce the bug

1. install karma-viewport using npm to an ng4 project
2. add karma-viewport to karma.conf requirements
3. add 'viewport' to karma frameworks array
4. create a test and import viewport using 'declare const viewport'
5. run test (success)
6. click debug in karma window
7. once successful tests will fail.

Package versions

• karma-viewport: ^0.1.2

System information

• Browser: Chrome

Description

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

Package versions

• karma-viewport: 1.0.4
• karma: 4.0.1

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"

Description

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?

Expected behavior

To have non-vulnerable dependencies.

Actual behavior

There’s a vulnerable version of log4js.

Steps to reproduce the bug

1. Install karma-viewport in a project. You’ll see the npm audit alert.

Package versions

• karma-viewport: 1.0.8
• karma: 6.3.17

System information

• OS: macOS / Linux 20.04
• Browser: Chromium

Description

I'm trying to configure karma-viewport with nwb

It uses the same configuration as karma. Reference here

Expected behavior

Should be able to run tests

Actual behavior

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.

Steps to reproduce the bug

1. Create package with nwb
2. Include in nwb.config.js:

  karma: {
    frameworks: [
      'viewport'
    ],
    plugins: [
      require('karma-viewport')
    ]
  }

3. Run npm test
4. Observe

Package versions

   "karma-viewport": "^0.4.2",
    "nwb": "0.21.x",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",

System information

• OS: Linux debian sid amd64
• Browser: PhantomJS (?)

Thanks a lot!!

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.

Description

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):

I can workaround this by manually adding beforeMiddleware: ['viewport'] to my karma.conf.js.

Expected behavior

Middleware to automatically be initialized (or clear instructions on how to enable it).

Actual behavior

Middleware setup is skipped.

Steps to reproduce the bug

1. Follow setup instructions on README.
2. Run tests in debug context
3. Notice the debug.html doesn't have any iframe

Package versions

• karma-viewport: 0.4.1

System information

• OS: Ubuntu
• Browser: Chrome