├── .gitignore ├── .gitpod.yml ├── LICENSE ├── README.md ├── angular.json ├── e2e ├── src │ ├── app.e2e-spec.ts │ └── app.po.ts └── tsconfig.e2e.json ├── package.json ├── src ├── app │ ├── app-routing.module.ts │ ├── app.component.css │ ├── app.component.html │ ├── app.component.spec.ts │ ├── app.component.ts │ └── app.module.ts ├── assets │ └── .gitkeep ├── browserslist ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── favicon.ico ├── index.html ├── karma.conf.js ├── main.ts ├── polyfills.ts ├── styles.css ├── test.ts ├── tsconfig.app.json ├── tsconfig.spec.json └── tslint.json ├── tsconfig.json └── tslint.json /.gitignore: -------------------------------------------------------------------------------- 1 | # File created using '.gitignore Generator' for Visual Studio Code: https://bit.ly/vscode-gig 2 | 3 | # Created by https://www.gitignore.io/api/macos,visualstudiocode,angular,node 4 | # Edit at https://www.gitignore.io/?templates=macos,visualstudiocode,angular,node 5 | 6 | ### Angular ### 7 | ## Angular ## 8 | # compiled output 9 | /dist 10 | /tmp 11 | /app/**/*.js 12 | /app/**/*.js.map 13 | 14 | # dependencies 15 | /node_modules 16 | /bower_components 17 | 18 | # IDEs and editors 19 | /.idea 20 | 21 | # misc 22 | /.sass-cache 23 | /connect.lock 24 | /coverage/* 25 | /libpeerconnection.log 26 | npm-debug.log 27 | testem.log 28 | /typings 29 | package-lock.json 30 | 31 | # e2e 32 | /e2e/*.js 33 | /e2e/*.map 34 | 35 | #System Files 36 | .DS_Store 37 | 38 | ### macOS ### 39 | # General 40 | .AppleDouble 41 | .LSOverride 42 | 43 | # Icon must end with two \r 44 | Icon 45 | 46 | # Thumbnails 47 | ._* 48 | 49 | # Files that might appear in the root of a volume 50 | .DocumentRevisions-V100 51 | .fseventsd 52 | .Spotlight-V100 53 | .TemporaryItems 54 | .Trashes 55 | .VolumeIcon.icns 56 | .com.apple.timemachine.donotpresent 57 | .angular 58 | 59 | # Directories potentially created on remote AFP share 60 | .AppleDB 61 | .AppleDesktop 62 | Network Trash Folder 63 | Temporary Items 64 | .apdisk 65 | 66 | ### Node ### 67 | # Logs 68 | logs 69 | *.log 70 | npm-debug.log* 71 | yarn-debug.log* 72 | yarn-error.log* 73 | 74 | # Runtime data 75 | pids 76 | *.pid 77 | *.seed 78 | *.pid.lock 79 | 80 | # Directory for instrumented libs generated by jscoverage/JSCover 81 | lib-cov 82 | 83 | # Coverage directory used by tools like istanbul 84 | coverage 85 | 86 | # nyc test coverage 87 | .nyc_output 88 | 89 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 90 | .grunt 91 | 92 | # Bower dependency directory (https://bower.io/) 93 | bower_components 94 | 95 | # node-waf configuration 96 | .lock-wscript 97 | 98 | # Compiled binary addons (https://nodejs.org/api/addons.html) 99 | build/Release 100 | 101 | # Dependency directories 102 | node_modules/ 103 | jspm_packages/ 104 | 105 | # TypeScript v1 declaration files 106 | typings/ 107 | 108 | # Optional npm cache directory 109 | .npm 110 | 111 | # Optional eslint cache 112 | .eslintcache 113 | 114 | # Optional REPL history 115 | .node_repl_history 116 | 117 | # Output of 'npm pack' 118 | *.tgz 119 | 120 | # Yarn Integrity file 121 | .yarn-integrity 122 | 123 | # dotenv environment variables file 124 | .env 125 | .env.test 126 | 127 | # parcel-bundler cache (https://parceljs.org/) 128 | .cache 129 | 130 | # next.js build output 131 | .next 132 | 133 | # nuxt.js build output 134 | .nuxt 135 | 136 | # vuepress build output 137 | .vuepress/dist 138 | 139 | # Serverless directories 140 | .serverless/ 141 | 142 | # FuseBox cache 143 | .fusebox/ 144 | 145 | # DynamoDB Local files 146 | .dynamodb/ 147 | 148 | ### VisualStudioCode ### 149 | .vscode/* 150 | !.vscode/settings.json 151 | !.vscode/tasks.json 152 | !.vscode/launch.json 153 | !.vscode/extensions.json 154 | 155 | ### VisualStudioCode Patch ### 156 | # Ignore all local history of files 157 | .history 158 | 159 | # End of https://www.gitignore.io/api/macos,visualstudiocode,angular,node 160 | 161 | # Custom rules (everything added below won't be overriden by 'Generate .gitignore File' if you use 'Update' option) 162 | 163 | /LT 164 | /LT_* -------------------------------------------------------------------------------- /.gitpod.yml: -------------------------------------------------------------------------------- 1 | 2 | # List the start up tasks. You can start them in parallel in multiple terminals. See https://www.gitpod.io/docs/config-start-tasks/ 3 | tasks: 4 | - before: wget https://downloads.lambdatest.com/tunnel/v3/linux/64bit/LT_Linux.zip && unzip LT_Linux.zip 5 | init: npm install -g @angular/cli -y && npm install -y 6 | command: ./LT --user $LT_USERNAME --key $LT_ACCESS_KEY --tunnelName jasmine & 7 | - command: sleep 60 && ng test 8 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 LambdaTest 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Run Selenium Tests With Karma Test Runner On LambdaTest 2 | 3 | ![JavaScript](https://user-images.githubusercontent.com/95698164/172134732-2e9c780e-10ac-4956-b366-86ffc25bf070.png) 4 | 5 |

6 | Blog 7 |   ⋅   8 | Docs 9 |   ⋅   10 | Learning Hub 11 |   ⋅   12 | Newsletter 13 |   ⋅   14 | Certifications 15 |   ⋅   16 | YouTube 17 |

18 |   19 |   20 |   21 | 22 | *Learn how to use Karma Test Runner framework to configure and run your JavaScript automation testing scripts on the LambdaTest platform* 23 | 24 | [](https://accounts.lambdatest.com/register) 25 | 26 | ## Table Of Contents 27 | 28 | * [Pre-requisites](#pre-requisites) 29 | * [Configuring LambdaTest tunnel To Run Karma Tests With LambdaTest](#configuring-lambdatest-tunnel-to-run-karma-tests-with-lambdatest) 30 | * [Integrating Your Karma Testing Framework With LambdaTest](#integrating-your-karma-testing-framework-with-lambdatest) 31 | * [Avoid Timeouts With psuedoActivityInterval](#avoid-timeouts-with-psuedoactivityinterval) 32 | 33 | ## Pre-requisites 34 | 35 | In order to perform tests with LambdaTest using Karma testing framework, you would need the below things to be already set up: 36 | 37 | **1. Global Dependencies** 38 | * Make sure to use the latest version of JavaScript. 39 | * A Git or GitHub repository 40 | * Download and install node.js and node package manager or npm. 41 | To install node.js with homebrew use the below command. 42 | 43 | `$ brew install node` 44 | 45 | * If you have npm already installed, you may want to upgrade it to latest version. Here the code you can run in your terminal to upgrade npm. 46 | 47 | `npm install npm@latest -g` 48 | 49 | * Install [Angular CLI](https://cli.angular.io/)(Command Line Interface) with the below command. 50 | 51 | `$ npm install -g @angular/cli` 52 | 53 | 54 | **2. LambdaTest Authentication Credentials** 55 | 56 | Be aware of your LambdaTest authentication credentials i.e. your LambdaTest username, access key and HubURL. You need to set them up as your environment variables. You can retrieve them from your [LambdaTest automation dashboard](https://automation.lambdatest.com/?utm_source=github&utm_medium=repo&utm_campaign=angular-karma-sample) by clicking on the key icon near the help button. 57 | 58 | ``` 59 | Start tunnel with command from the configure tunnel in your dashboard 60 | this tunnel name will be needed to run the tests 61 | ``` 62 | * For Windows user: 63 | ```bash 64 | set LT_USERNAME=”YOUR_USERNAME” 65 | set LT_ACCESS_KEY=”YOUR ACCESS KEY” 66 | set LT_TUNNEL=”TUNNEL NAME” 67 | ``` 68 | 69 | * For macOS/Linux user: 70 | ```bash 71 | export LT_USERNAME=”YOUR_USERNAME” 72 | export LT_ACCESS_KEY=”YOUR ACCESS KEY” 73 | export LT_TUNNEL=”TUNNEL NAME” 74 | ``` 75 | 76 | ### Setting Up 77 | 78 | Clone the sample project from LambdaTest GitHub repository by using the below command in your cmd/terminal. 79 | 80 | `git clone https://github.com/LambdaTest/angular-karma-sample && cd angular-karma-sample` 81 | 82 | Install the node.js dependencies and Karma CLI globally using the below command. 83 | 84 | `npm install -g karma-cli && npm install` 85 | 86 | > **Change Browsers & Framework For Sample Project:** 87 | > If you wish to add more browsers or change the framework to something other than the one used in our Sample project then you can do so by editing the browser array/ framework array in the *karma.conf.js* file. 88 | 89 | ## Configuring LambdaTest tunnel To Run Karma Tests With LambdaTest 90 | 91 | To help you perform cross browser testing of your locally stored web pages, LambdaTest provides an SSH(Secure Shell) tunnel connection with the name LambdaTest tunnel. With LambdaTest tunnel, you can execute a test your local Karma tests on cloud for performing automated cross browser testing on more than 2000 browsers offered by Selenium Grid on LambdaTest. So you make sure how well your changes look, even before your customers. Curious to know more about LambdaTest tunnel? 92 | 93 | > Follow our documentation on LambdaTest tunnel to know it all. OS specific instructions to download and setup tunnel binary can be found at the following links. 94 | * [Documentation For Windows User](/docs/local-testing-for-windows/) 95 | * [Documentation For Mac User](/docs/local-testing-for-macos/) 96 | * [Documentation For Linux User](/docs/local-testing-for-linux/) 97 | 98 | > Download the binary file of: 99 | * [LambdaTest tunnel for Windows](https://downloads.lambdatest.com/tunnel/v3/windows/64bit/LT_Windows.zip) 100 | * [LambdaTest tunnel for Mac](https://downloads.lambdatest.com/tunnel/v3/mac/64bit/LT_Mac.zip) 101 | * [LambdaTest tunnel for Linux](https://downloads.lambdatest.com/tunnel/v3/linux/64bit/LT_Linux.zip) 102 | 103 | Once, the tunnel is successfully set up. You can add the below code to your capabilities for testing internal servers on your network. 104 | 105 | `tunnel: true,` 106 | 107 | ## Integrating Your Karma Testing Framework With LambdaTest 108 | 109 | To integrate Karma test runner with LambdaTest you need to set up LambdaTest authentication credentials **(access key & username)** as your environment variables in the ***karma.conf.js*** file. 110 | 111 | **Test Scenario:** Check out this sample [karma.conf.js](https://github.com/LambdaTest/angular-karma-sample/blob/master/src/karma.conf.js) file for integrating Karma test runner with LambdaTest. You can use the sample file to test your own automation test suite by replacing the environment variables according to your need. 112 | 113 | After declaring the required environment variable, comes the time to execute your test using the below command. 114 | 115 | karma start karma.conf.js 116 | 117 | `karma start karma.conf.js` 118 | 119 | If you wish to use Jenkins, then [follow this documentation](/docs/jenkins-with-lambdatest/?utm_source=github&utm_medium=repo&utm_campaign=angular-karma-sample). 120 | 121 | ### Parallel Testing 122 | 123 | Parallel testing is one of the most in-demand feature of LambdaTest Selenium Grid. By parallel testing, you can run more than one test case, simultaneously. This means that, parallel testing would allow you to execute numerous automation test cases altogether. So you execute a single test scenario across different browsers or could run different test scenarios across the same browser but with different browser versions. 124 | 125 | To perform parallel testing, navigate to sample project “**angular-karma-sample**” and run the below command. 126 | 127 | `$ ng test` 128 | 129 | Monitor and analyze your test result ont the [LambdaTest Automation Dashboard](https://automation.lambdatest.com/?utm_source=github&utm_medium=repo&utm_campaign=angular-karma-sample). 130 | 131 | ## Avoid Timeouts With psuedoActivityInterval 132 | 133 | To make sure our machines are not hold for long due to some incorrect test, we have come up with a restriction on the number of seconds that our machine is kept reserved for you. In cases, where our servers fail to retrieve a request from your local machine for more than 90 seconds, then your tests are aborted from the queue with the error message related to Timeouts. 134 | 135 | If you wish to avoid such timeouts, you need to make use of the below parameter: 136 | 137 | ``` js 138 | customLaunchers: { chrome: { 139 | pseudoActivityInterval: 5000 // 5000 ms heartbeat to avoid timeouts 140 | } } 141 | ``` 142 | 143 | > **Note**: psuedoActivityInterval is presented as a default parameter with a value set to 0. Make sure to provide a value more than 0 in order to avoid the timeouts. 144 | 145 | ## Tutorials 📙 146 | 147 | Check out our latest tutorials on TestNG automation testing 👇 148 | 149 | * [Angular Testing With Jasmine And Karma Using Selenium [Tutorial]](https://www.lambdatest.com/blog/angular-testing-with-jasmine-and-karma/?utm_source=github&utm_medium=repo&utm_campaign=angular-karma-sample) 150 | 151 | ## Documentation & Resources :books: 152 | 153 | Visit the following links to learn more about LambdaTest's features, setup and tutorials around test automation, mobile app testing, responsive testing, and manual testing. 154 | 155 | * [LambdaTest Documentation](https://www.lambdatest.com/support/docs/?utm_source=github&utm_medium=repo&utm_campaign=angular-karma-sample) 156 | * [LambdaTest Blog](https://www.lambdatest.com/blog/?utm_source=github&utm_medium=repo&utm_campaign=angular-karma-sample) 157 | * [LambdaTest Learning Hub](https://www.lambdatest.com/learning-hub/?utm_source=github&utm_medium=repo&utm_campaign=angular-karma-sample) 158 | 159 | ## LambdaTest Community :busts_in_silhouette: 160 | 161 | The [LambdaTest Community](https://community.lambdatest.com/?utm_source=github&utm_medium=repo&utm_campaign=angular-karma-sample) allows people to interact with tech enthusiasts. Connect, ask questions, and learn from tech-savvy people. Discuss best practises in web development, testing, and DevOps with professionals from across the globe 🌎 162 | 163 | ## What's New At LambdaTest ❓ 164 | 165 | To stay updated with the latest features and product add-ons, visit [Changelog](https://changelog.lambdatest.com/) 166 | 167 | ## About LambdaTest 168 | 169 | [LambdaTest](https://www.lambdatest.com/?utm_source=github&utm_medium=repo&utm_campaign=angular-karma-sample) is a leading test execution and orchestration platform that is fast, reliable, scalable, and secure. It allows users to run both manual and automated testing of web and mobile apps across 3000+ different browsers, operating systems, and real device combinations. Using LambdaTest, businesses can ensure quicker developer feedback and hence achieve faster go to market. Over 500 enterprises and 1 Million + users across 130+ countries rely on LambdaTest for their testing needs. 170 | 171 | ### Features 172 | 173 | * Run Selenium, Cypress, Puppeteer, Playwright, and Appium automation tests across 3000+ real desktop and mobile environments. 174 | * Real-time cross browser testing on 3000+ environments. 175 | * Test on Real device cloud 176 | * Blazing fast test automation with HyperExecute 177 | * Accelerate testing, shorten job times and get faster feedback on code changes with Test At Scale. 178 | * Smart Visual Regression Testing on cloud 179 | * 120+ third-party integrations with your favorite tool for CI/CD, Project Management, Codeless Automation, and more. 180 | * Automated Screenshot testing across multiple browsers in a single click. 181 | * Local testing of web and mobile apps. 182 | * Online Accessibility Testing across 3000+ desktop and mobile browsers, browser versions, and operating systems. 183 | * Geolocation testing of web and mobile apps across 53+ countries. 184 | * LT Browser - for responsive testing across 50+ pre-installed mobile, tablets, desktop, and laptop viewports 185 | 186 | [](https://accounts.lambdatest.com/register) 187 | 188 | ## We are here to help you :headphones: 189 | 190 | * Got a query? we are available 24x7 to help. [Contact Us](support@lambdatest.com/?utm_source=github&utm_medium=repo&utm_campaign=angular-karma-sample) 191 | * For more info, visit - [LambdaTest](https://www.lambdatest.com/?utm_source=github&utm_medium=repo&utm_campaign=angular-karma-sample) 192 | -------------------------------------------------------------------------------- /angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "karma-sample": { 7 | "root": "", 8 | "sourceRoot": "src", 9 | "projectType": "application", 10 | "prefix": "app", 11 | "schematics": {}, 12 | "architect": { 13 | "build": { 14 | "builder": "@angular-devkit/build-angular:browser", 15 | "options": { 16 | "outputPath": "dist/karma-sample", 17 | "index": "src/index.html", 18 | "main": "src/main.ts", 19 | "polyfills": "src/polyfills.ts", 20 | "tsConfig": "src/tsconfig.app.json", 21 | "assets": [ 22 | "src/favicon.ico", 23 | "src/assets" 24 | ], 25 | "styles": [ 26 | "src/styles.css" 27 | ], 28 | "scripts": [], 29 | "es5BrowserSupport": true 30 | }, 31 | "configurations": { 32 | "production": { 33 | "fileReplacements": [ 34 | { 35 | "replace": "src/environments/environment.ts", 36 | "with": "src/environments/environment.prod.ts" 37 | } 38 | ], 39 | "optimization": true, 40 | "outputHashing": "all", 41 | "sourceMap": false, 42 | "extractCss": true, 43 | "namedChunks": false, 44 | "aot": true, 45 | "extractLicenses": true, 46 | "vendorChunk": false, 47 | "buildOptimizer": true, 48 | "budgets": [ 49 | { 50 | "type": "initial", 51 | "maximumWarning": "2mb", 52 | "maximumError": "5mb" 53 | } 54 | ] 55 | } 56 | } 57 | }, 58 | "serve": { 59 | "builder": "@angular-devkit/build-angular:dev-server", 60 | "options": { 61 | "browserTarget": "karma-sample:build" 62 | }, 63 | "configurations": { 64 | "production": { 65 | "browserTarget": "karma-sample:build:production" 66 | } 67 | } 68 | }, 69 | "extract-i18n": { 70 | "builder": "@angular-devkit/build-angular:extract-i18n", 71 | "options": { 72 | "browserTarget": "karma-sample:build" 73 | } 74 | }, 75 | "test": { 76 | "builder": "@angular-devkit/build-angular:karma", 77 | "options": { 78 | "main": "src/test.ts", 79 | "polyfills": "src/polyfills.ts", 80 | "tsConfig": "src/tsconfig.spec.json", 81 | "karmaConfig": "src/karma.conf.js", 82 | "styles": [ 83 | "src/styles.css" 84 | ], 85 | "scripts": [], 86 | "assets": [ 87 | "src/favicon.ico", 88 | "src/assets" 89 | ] 90 | } 91 | }, 92 | "lint": { 93 | "builder": "@angular-devkit/build-angular:tslint", 94 | "options": { 95 | "tsConfig": [ 96 | "src/tsconfig.app.json", 97 | "src/tsconfig.spec.json" 98 | ], 99 | "exclude": [ 100 | "**/node_modules/**" 101 | ] 102 | } 103 | } 104 | } 105 | }, 106 | "karma-sample-e2e": { 107 | "root": "e2e/", 108 | "projectType": "application", 109 | "prefix": "", 110 | "architect": { 111 | "e2e": { 112 | "builder": "@angular-devkit/build-angular:protractor", 113 | "options": { 114 | "protractorConfig": "e2e/protractor.conf.js", 115 | "devServerTarget": "karma-sample:serve" 116 | }, 117 | "configurations": { 118 | "production": { 119 | "devServerTarget": "karma-sample:serve:production" 120 | } 121 | } 122 | }, 123 | "lint": { 124 | "builder": "@angular-devkit/build-angular:tslint", 125 | "options": { 126 | "tsConfig": "e2e/tsconfig.e2e.json", 127 | "exclude": [ 128 | "**/node_modules/**" 129 | ] 130 | } 131 | } 132 | } 133 | } 134 | }, 135 | "defaultProject": "karma-sample", 136 | "cli": { 137 | "analytics": "a9ac2e60-fe04-4b79-8786-c1bde1284268" 138 | } 139 | } -------------------------------------------------------------------------------- /e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | import { browser, logging } from 'protractor'; 3 | 4 | describe('workspace-project App', () => { 5 | let page: AppPage; 6 | 7 | beforeEach(() => { 8 | page = new AppPage(); 9 | }); 10 | 11 | it('should display welcome message', () => { 12 | page.navigateTo(); 13 | expect(page.getTitleText()).toEqual('Welcome to karma-sample!'); 14 | }); 15 | 16 | afterEach(async () => { 17 | // Assert that there are no errors emitted from the browser 18 | const logs = await browser.manage().logs().get(logging.Type.BROWSER); 19 | expect(logs).not.toContain(jasmine.objectContaining({ 20 | level: logging.Level.SEVERE, 21 | } as logging.Entry)); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get(browser.baseUrl) as Promise; 6 | } 7 | 8 | getTitleText() { 9 | return element(by.css('app-root h1')).getText() as Promise; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /e2e/tsconfig.e2e.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "karma-sample", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "ng": "ng", 6 | "start": "ng serve", 7 | "build": "ng build", 8 | "test": "ng test", 9 | "lint": "ng lint", 10 | "e2e": "ng e2e" 11 | }, 12 | "private": true, 13 | "dependencies": { 14 | "@angular/animations": "~7.2.0", 15 | "@angular/common": "~7.2.0", 16 | "@angular/compiler": "~7.2.0", 17 | "@angular/core": "~7.2.0", 18 | "@angular/forms": "~7.2.0", 19 | "@angular/platform-browser": "~7.2.0", 20 | "@angular/platform-browser-dynamic": "~7.2.0", 21 | "@angular/router": "~7.2.0", 22 | "core-js": "^2.5.4", 23 | "jasmine": "^3.3.1", 24 | "karma-requirejs": "^1.1.0", 25 | "requirejs": "^2.3.6", 26 | "rxjs": "~6.3.3", 27 | "tslib": "^1.9.0", 28 | "zone.js": "~0.8.26" 29 | }, 30 | "devDependencies": { 31 | "@angular-devkit/build-angular": "^0.13.9", 32 | "@angular/cli": "~7.3.2", 33 | "@angular/compiler-cli": "^7.2.15", 34 | "@angular/language-service": "~7.2.0", 35 | "@types/jasmine": "~2.8.8", 36 | "@types/jasminewd2": "~2.0.3", 37 | "@types/node": "~8.9.4", 38 | "codelyzer": "~4.5.0", 39 | "jasmine-core": "^2.99.1", 40 | "jasmine-spec-reporter": "~4.2.1", 41 | "karma": "^4.1.0", 42 | "karma-chrome-launcher": "^2.2.0", 43 | "karma-coverage-istanbul-reporter": "^2.0.5", 44 | "karma-jasmine": "^1.1.2", 45 | "karma-jasmine-html-reporter": "^0.2.2", 46 | "karma-mocha-reporter": "^0.3.1", 47 | "karma-selenium-grid-launcher": "^0.1.2", 48 | "karma-webdriver-launcher": "^1.0.5", 49 | "protractor": "~5.4.0", 50 | "selenium-webdriver": "^3.6.0", 51 | "ts-node": "~7.0.0", 52 | "tslint": "~5.11.0", 53 | "typescript": "~3.2.2" 54 | } 55 | } -------------------------------------------------------------------------------- /src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | const routes: Routes = []; 5 | 6 | @NgModule({ 7 | imports: [RouterModule.forRoot(routes)], 8 | exports: [RouterModule] 9 | }) 10 | export class AppRoutingModule { } 11 | -------------------------------------------------------------------------------- /src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LambdaTest/angular-karma-sample/66d48ad22f6458b4222756d75ff7ad59d1bfe3a2/src/app/app.component.css -------------------------------------------------------------------------------- /src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |

4 | Welcome to {{ title }}! 5 |

6 | Angular Logo 7 |
8 |

Here are some links to help you start:

9 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, async } from '@angular/core/testing'; 2 | import { RouterTestingModule } from '@angular/router/testing'; 3 | import { AppComponent } from './app.component'; 4 | 5 | describe('AppComponent', () => { 6 | beforeEach(async(() => { 7 | TestBed.configureTestingModule({ 8 | imports: [ 9 | RouterTestingModule 10 | ], 11 | declarations: [ 12 | AppComponent 13 | ], 14 | }).compileComponents(); 15 | })); 16 | 17 | it('should create the app', () => { 18 | const fixture = TestBed.createComponent(AppComponent); 19 | const app = fixture.debugElement.componentInstance; 20 | expect(app).toBeTruthy(); 21 | }); 22 | 23 | it(`should have as title 'karma-sample'`, () => { 24 | const fixture = TestBed.createComponent(AppComponent); 25 | const app = fixture.debugElement.componentInstance; 26 | expect(app.title).toEqual('karma-sample'); 27 | }); 28 | 29 | it('should render title in a h1 tag', () => { 30 | const fixture = TestBed.createComponent(AppComponent); 31 | fixture.detectChanges(); 32 | const compiled = fixture.debugElement.nativeElement; 33 | expect(compiled.querySelector('h1').textContent).toContain('Welcome to karma-sample!'); 34 | }); 35 | }); 36 | -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | }) 8 | export class AppComponent { 9 | title = 'karma-sample'; 10 | } 11 | -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | 4 | import { AppRoutingModule } from './app-routing.module'; 5 | import { AppComponent } from './app.component'; 6 | 7 | @NgModule({ 8 | declarations: [ 9 | AppComponent 10 | ], 11 | imports: [ 12 | BrowserModule, 13 | AppRoutingModule 14 | ], 15 | providers: [], 16 | bootstrap: [AppComponent] 17 | }) 18 | export class AppModule { } 19 | -------------------------------------------------------------------------------- /src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LambdaTest/angular-karma-sample/66d48ad22f6458b4222756d75ff7ad59d1bfe3a2/src/assets/.gitkeep -------------------------------------------------------------------------------- /src/browserslist: -------------------------------------------------------------------------------- 1 | # This file is currently used by autoprefixer to adjust CSS to support the below specified browsers 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | # 5 | # For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed 6 | 7 | > 0.5% 8 | last 2 versions 9 | Firefox ESR 10 | not dead 11 | not IE 9-11 -------------------------------------------------------------------------------- /src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LambdaTest/angular-karma-sample/66d48ad22f6458b4222756d75ff7ad59d1bfe3a2/src/favicon.ico -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | KarmaSample 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function(config) { 5 | 6 | // Lambdatest grid hostname and port 7 | var webdriverConfig = { 8 | hostname: 'hub.lambdatest.com', 9 | port: 80 10 | } 11 | 12 | config.set({ 13 | hostname: 'localhost', // hostname, where karma web server will run 14 | port: 9876, 15 | basePath: './', 16 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 17 | plugins: [ 18 | 'karma-jasmine', 19 | 'karma-webdriver-launcher', 20 | 'karma-jasmine-html-reporter', 21 | 'karma-coverage-istanbul-reporter', 22 | require('@angular-devkit/build-angular/plugins/karma'), 23 | 'karma-mocha-reporter' 24 | ], 25 | client: { 26 | clearContext: false 27 | }, 28 | coverageIstanbulReporter: { 29 | dir: require('path').join(__dirname, '../coverage/karma-sample'), 30 | reports: ['html', 'lcovonly', 'text-summary'], 31 | fixWebpackSourcePaths: true 32 | }, 33 | captureTimeout: 600000, 34 | retryLimit: 1, 35 | browserDisconnectTimeout: 90000, 36 | browserDisconnectTolerance: 1, 37 | browserNoActivityTimeout: 90000, 38 | // reporters: ['progress', 'kjhtml'], 39 | reporters: ['mocha'], 40 | colors: true, 41 | concurrency: 1, 42 | logLevel: config.LOG_DEBUG, 43 | browsers: ['chrome'], 44 | customLaunchers: { 45 | chrome: { 46 | base: 'WebDriver', 47 | config: webdriverConfig, 48 | browserName: 'chrome', 49 | platform: 'Windows 10', 50 | version: 'latest', 51 | name: 'Karma With Heartbeat', 52 | tunnel: true, // In case karma is running on local machine 53 | tunnelName: process.env.LT_TUNNEL || 'jasmine', // In case running multiple tunnel 54 | video: true, // capture video for your test 55 | visual: false, // capture screenshots on each step 56 | network: false, // capture network logs for your test 57 | console: false, // capture browser console logs 58 | user: process.env.LT_USERNAME, 59 | accessKey: process.env.LT_ACCESS_KEY, 60 | pseudoActivityInterval: 15000 // 5000 ms heartbeat 61 | } 62 | }, 63 | singleRun: true, 64 | autoWatch: true 65 | }); 66 | }; 67 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | -------------------------------------------------------------------------------- /src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file includes polyfills needed by Angular and is loaded before the app. 3 | * You can add your own extra polyfills to this file. 4 | * 5 | * This file is divided into 2 sections: 6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 8 | * file. 9 | * 10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), 12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/guide/browser-support 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */ 22 | // import 'classlist.js'; // Run `npm install --save classlist.js`. 23 | 24 | /** 25 | * Web Animations `@angular/platform-browser/animations` 26 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. 27 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). 28 | */ 29 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 30 | 31 | /** 32 | * By default, zone.js will patch all possible macroTask and DomEvents 33 | * user can disable parts of macroTask/DomEvents patch by setting following flags 34 | * because those flags need to be set before `zone.js` being loaded, and webpack 35 | * will put import in the top of bundle, so user need to create a separate file 36 | * in this directory (for example: zone-flags.ts), and put the following flags 37 | * into that file, and then add the following code before importing zone.js. 38 | * import './zone-flags.ts'; 39 | * 40 | * The flags allowed in zone-flags.ts are listed here. 41 | * 42 | * The following flags will work for all browsers. 43 | * 44 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame 45 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick 46 | * (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames 47 | * 48 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js 49 | * with the following flag, it will bypass `zone.js` patch for IE/Edge 50 | * 51 | * (window as any).__Zone_enable_cross_context_check = true; 52 | * 53 | */ 54 | 55 | /*************************************************************************************************** 56 | * Zone JS is required by default for Angular itself. 57 | */ 58 | import 'zone.js/dist/zone'; // Included with Angular CLI. 59 | 60 | 61 | /*************************************************************************************************** 62 | * APPLICATION IMPORTS 63 | */ 64 | 65 | import "core-js/es6/symbol"; 66 | import "core-js/es6/function"; 67 | import "core-js/es6/parse-int"; 68 | import "core-js/es6/parse-float"; 69 | import "core-js/es6/number"; 70 | import "core-js/es6/math"; 71 | import "core-js/es6/string"; 72 | import "core-js/es6/date"; 73 | import "core-js/es6/array"; 74 | import "core-js/es6/regexp"; 75 | import "core-js/es6/map"; 76 | import "core-js/es6/weak-map"; 77 | import "core-js/es6/set"; -------------------------------------------------------------------------------- /src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: any; 11 | 12 | // First, initialize the Angular testing environment. 13 | getTestBed().initTestEnvironment( 14 | BrowserDynamicTestingModule, 15 | platformBrowserDynamicTesting() 16 | ); 17 | // Then we find all the tests. 18 | const context = require.context('./', true, /\.spec\.ts$/); 19 | // And load the modules. 20 | context.keys().map(context); 21 | -------------------------------------------------------------------------------- /src/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "types": [] 6 | }, 7 | "exclude": [ 8 | "test.ts", 9 | "**/*.spec.ts" 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /src/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "test.ts", 12 | "polyfills.ts" 13 | ], 14 | "include": [ 15 | "**/*.spec.ts", 16 | "**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /src/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tslint.json", 3 | "rules": { 4 | "directive-selector": [ 5 | true, 6 | "attribute", 7 | "app", 8 | "camelCase" 9 | ], 10 | "component-selector": [ 11 | true, 12 | "element", 13 | "app", 14 | "kebab-case" 15 | ] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "module": "es2015", 9 | "moduleResolution": "node", 10 | "emitDecoratorMetadata": true, 11 | "experimentalDecorators": true, 12 | "importHelpers": true, 13 | "target": "es5", 14 | "typeRoots": [ 15 | "node_modules/@types" 16 | ], 17 | "lib": [ 18 | "es2018", 19 | "dom" 20 | ] 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tslint:recommended", 3 | "rulesDirectory": [ 4 | "codelyzer" 5 | ], 6 | "rules": { 7 | "array-type": false, 8 | "arrow-parens": false, 9 | "deprecation": { 10 | "severity": "warn" 11 | }, 12 | "import-blacklist": [ 13 | true, 14 | "rxjs/Rx" 15 | ], 16 | "interface-name": false, 17 | "max-classes-per-file": false, 18 | "max-line-length": [ 19 | true, 20 | 140 21 | ], 22 | "member-access": false, 23 | "member-ordering": [ 24 | true, 25 | { 26 | "order": [ 27 | "static-field", 28 | "instance-field", 29 | "static-method", 30 | "instance-method" 31 | ] 32 | } 33 | ], 34 | "no-consecutive-blank-lines": false, 35 | "no-console": [ 36 | true, 37 | "debug", 38 | "info", 39 | "time", 40 | "timeEnd", 41 | "trace" 42 | ], 43 | "no-empty": false, 44 | "no-inferrable-types": [ 45 | true, 46 | "ignore-params" 47 | ], 48 | "no-non-null-assertion": true, 49 | "no-redundant-jsdoc": true, 50 | "no-switch-case-fall-through": true, 51 | "no-use-before-declare": true, 52 | "no-var-requires": false, 53 | "object-literal-key-quotes": [ 54 | true, 55 | "as-needed" 56 | ], 57 | "object-literal-sort-keys": false, 58 | "ordered-imports": false, 59 | "quotemark": [ 60 | true, 61 | "single" 62 | ], 63 | "trailing-comma": false, 64 | "no-output-on-prefix": true, 65 | "use-input-property-decorator": true, 66 | "use-output-property-decorator": true, 67 | "use-host-property-decorator": true, 68 | "no-input-rename": true, 69 | "no-output-rename": true, 70 | "use-life-cycle-interface": true, 71 | "use-pipe-transform-interface": true, 72 | "component-class-suffix": true, 73 | "directive-class-suffix": true 74 | } 75 | } 76 | --------------------------------------------------------------------------------