{"id":15646415,"url":"https://github.com/squidfunk/karma-viewport","last_synced_at":"2025-04-05T02:10:33.009Z","repository":{"id":22507521,"uuid":"95536365","full_name":"squidfunk/karma-viewport","owner":"squidfunk","description":"A Karma plugin for testing responsive features and layout","archived":false,"fork":false,"pushed_at":"2023-09-21T06:22:18.000Z","size":4228,"stargazers_count":51,"open_issues_count":10,"forks_count":14,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-29T01:12:13.230Z","etag":null,"topics":["karma","karma-plugin","responsive","testing","viewport"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/squidfunk.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"squidfunk"}},"created_at":"2017-06-27T08:36:38.000Z","updated_at":"2025-02-04T21:06:16.000Z","dependencies_parsed_at":"2024-06-18T13:45:31.437Z","dependency_job_id":"768a9193-9b4c-4da0-be27-68aa1e04d97f","html_url":"https://github.com/squidfunk/karma-viewport","commit_stats":{"total_commits":594,"total_committers":10,"mean_commits":59.4,"dds":"0.45959595959595956","last_synced_commit":"f18cefbd9515cc38fcac64c7c8bcd281aac19d72"},"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/squidfunk%2Fkarma-viewport","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/squidfunk%2Fkarma-viewport/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/squidfunk%2Fkarma-viewport/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/squidfunk%2Fkarma-viewport/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/squidfunk","download_url":"https://codeload.github.com/squidfunk/karma-viewport/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247276189,"owners_count":20912288,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["karma","karma-plugin","responsive","testing","viewport"],"created_at":"2024-10-03T12:12:48.504Z","updated_at":"2025-04-05T02:10:32.991Z","avatar_url":"https://github.com/squidfunk.png","language":"TypeScript","funding_links":["https://github.com/sponsors/squidfunk"],"categories":[],"sub_categories":[],"readme":"[![Github Action][action-image]][action-link]\n[![Codecov][codecov-image]][codecov-link]\n![Downloads][npm-downloads]\n[![npm][npm-image]][npm-link]\n\n  [action-image]: https://github.com/squidfunk/karma-viewport/workflows/ci/badge.svg?branch=master\n  [action-link]: https://github.com/squidfunk/karma-viewport/actions\n  [codecov-image]: https://img.shields.io/codecov/c/github/squidfunk/karma-viewport/master.svg\n  [codecov-link]: https://codecov.io/gh/squidfunk/karma-viewport\n  [npm-image]: https://img.shields.io/npm/v/karma-viewport.svg\n  [npm-link]: https://npmjs.com/package/karma-viewport\n  [npm-downloads]: https://img.shields.io/npm/dm/karma-viewport\n\n# karma-viewport\n\nKarma viewport resizer for testing responsive features and layout\n\n## Installation\n\n``` sh\nnpm install karma-viewport\n```\n\n## Usage\n\nAdd `viewport` to the list of frameworks inside your Karma configuration:\n\n``` js\n// karma.conf.js\nmodule.exports = function(config) {\n  config.set({\n    frameworks: [\"viewport\"]\n  })\n}\n```\n\nThis will expose the global variable `viewport` to your tests, which allows\nsetting the dimensions of the viewport, e.g.:\n\n``` js\n// Set to 320px x 100%\nviewport.set(320)\n\n// Set to 320px x 480px\nviewport.set(320, 480)\n\n// Reset to 100% x 100%\nviewport.reset()\n```\n\n_Note that you (probably) cannot use `viewport` in the top-level scope of your\ntests, as Karma might not have initialized all plugins until all files were\nread, so makes sure to call the respective functions from the setup hooks of\nyour test framework or from within your tests._\n\n### Browser support\n\nChrome, Firefox, Safari, Edge 13-15, IE 9-11 and possibly some more.\n\n### Configuration\n\n#### `config.viewport.context`\n\nBy default, `viewport` will target the default `iframe#context` of Karma,\nwhich is enabled through `client.useIframe` (see the [configuration guide][1]).\nThis will also wrap the `debug` context to run inside the `iframe#context`.\n\nTo run tests within a custom, separate context, e.g. `iframe#viewport`:\n\n``` js\n// karma.conf.js\nmodule.exports = function(config) {\n  config.set({\n    frameworks: [\"viewport\"]\n\n    // Viewport configuration\n    viewport: {\n      context: \"#viewport\"\n    }\n  })\n}\n```\n\nNote that the `iframe#viewport` element must be present in the `context.html`\nand `debug.html` files that are served by Karma. You can override the files, or\nadd an `iframe` element dynamically before running the tests. Using a separate,\ncustom context makes it possible to load entire webpages for testing:\n\n``` js\nawait viewport.load(\"/path/to/fixture.html\")\n```\n\n  [1]: http://karma-runner.github.io/1.0/config/configuration-file.html\n\n#### `config.viewport.breakpoints`\n\nFor easier, and less repetitive testing, named breakpoints can be easily set:\n\n``` js\n// karma.conf.js\nmodule.exports = function(config) {\n  config.set({\n    frameworks: [\"viewport\"]\n\n    // Viewport configuration\n    viewport: {\n      breakpoints: [\n        {\n          name: \"mobile\",\n          size: {\n            width: 320,\n            height: 480\n          }\n        },\n        {\n          name: \"tablet\",\n          size: {\n            width: 768,\n            height: 1024\n          }\n        },\n        {\n          name: \"screen\",\n          size: {\n            width: 1440,\n            height: 900\n          }\n        }\n      ]\n    }\n  })\n}\n```\n\nThe viewport dimensions can then be set using the names of the breakpoints:\n\n``` js\n// Set to 320px x 480px\nviewport.set(\"mobile\")\n\n// Set to 1440px x 900px\nviewport.set(\"screen\")\n\n// Reset to 100% x 100%\nviewport.reset()\n```\n\nFurthermore, breakpoints can be iterated:\n\n``` js\n// Run tests for mobile, tablet and screen\nviewport.each(name =\u003e {\n  // ...\n})\n\n// Run tests for tablet and screen\nviewport.from(\"tablet\", name =\u003e {\n  // ...\n})\n\n// Run tests for mobile and tablet\nviewport.to(\"tablet\", name =\u003e {\n  // ...\n})\n\n// Run tests for tablet and screen\nviewport.between(\"tablet\", \"screen\", name =\u003e {\n  // ...\n})\n```\n\nAfter breakpoint iteration, `viewport.reset()` is called internally. If the\ncallback provided to the breakpoint returns a `Promise`, the return value of\nthe function will also be a `Promise`. This enables asynchronous tests:\n\n``` js\nviewport.each(async name =\u003e {\n  // await ...\n})\n```\n\n### TypeScript\n\n`karma-viewport` is written in TypeScript and comes with its own typings. Don't\ninclude the package using an `import` statement, but instead include its types\nvia `tsconfig.json` or a reference within `karma.conf.ts` or tests:\n\n``` ts\n/// \u003creference types=\"karma-viewport\" /\u003e\n```\n\n## License\n\n**MIT License**\n\nCopyright (c) 2017-2020 Martin Donath\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to\ndeal in the Software without restriction, including without limitation the\nrights to use, copy, modify, merge, publish, distribute, sublicense, and/or\nsell copies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\nFROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS\nIN THE SOFTWARE.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsquidfunk%2Fkarma-viewport","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsquidfunk%2Fkarma-viewport","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsquidfunk%2Fkarma-viewport/lists"}