Angular Auto Testing without the actual browser window

Angular Auto Testing without the actual browser window

here is an article for whole Web testing concept and example, included Integration tests,Regression tests, Performance tests,Load tests, End-to-End (e2e) tests,UAT (user acceptance tests), Smoke Tests.

https://medium.com/bb-tutorials-and-thoughts/how-to-run-angular-e2e-tests-in-docker-f021c23c78f

Option #1: Run Headless Chrome

Since Chrome 59, it is possible to run it without the actual browser window. That feature is called Headless Chrome.

1. install chrome Headless. https://tecadmin.net/setup-selenium-chromedriver-on-ubuntu/

#Prerequisites
sudo apt-get update
sudo apt-get install -y unzip xvfb libxi6 libgconf-2-4
sudo apt-get install default-jdk
#Install Google Chrome
sudo curl -sS -o - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add
sudo echo "deb [arch=amd64]  http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google-chrome.list
sudo apt-get -y update
sudo apt-get -y install google-chrome-stable
#Install ChromeDriver
wget https://chromedriver.storage.googleapis.com/2.41/chromedriver_linux64.zip
unzip chromedriver_linux64.zip
sudo mv chromedriver /usr/bin/chromedriver
sudo chown root:root /usr/bin/chromedriver
sudo chmod +x /usr/bin/chromedriver
 
#if you want to run Remote Selenium WebDrivers
wget https://selenium-release.storage.googleapis.com/3.13/selenium-server-standalone-3.13.0.jar
wget http://www.java2s.com/Code/JarDownload/testng/testng-6.8.7.jar.zip
unzip testng-6.8.7.jar.zip
 
#Run Chrome via Selenium Server
xvfb-run java -Dwebdriver.chrome.driver=/usr/bin/chromedriver -jar selenium-server-standalone.jar
# or Start Headless ChromeDriver
chromedriver --url-base=/wd/hub

Note: we use Karma to do the unit testing, so we should be install the dependency package in package.json [npm install xxx --save-dev]. as default angular project will included these packages.

2. Unit Test

coverageReporter: {
   type: 'lcov',
   dir: 'reports',
   subdir : 'coverage',
   includeAllSources: true
},
reporters: ['progress', 'coverage'],
browsers:['Chrome', 'HeadlessChrome'],
customLaunchers:{ 
 HeadlessChrome:{ 
      base:"ChromeHeadless",
      flags:[ 
         "--no-sandbox",
         // required to run without privileges in Docker
          "--disable-web-security",
         "--disable-gpu",
         "--remote-debugging-port=9222"
      ]
   }
},
 singleRun: true

Run UT: ng test --watch=false --browsers=HeadlessChrome -code-coverage

• –watch=false
  Specifies that we only want the tests to run once and then exit instead of watching for changes.
• –browsers=HeadlessChrome
  Specifies that we want to use Headless Chrome as the browser for the tests.

3. E2E Tests modify protractor.conf.js

capabilities: {
  chromeOptions: {
    args:[ 
      '--headless',
      '--disable-gpu',
      '--window-size=800x600',
      '--disable-dev-shm-usage',
      '--no-sandbox'
   ]
  },
  'browserName': 'ChromeHeadless'
},

Run UT: ng e2e
another way tests run without an actual browser window
Run PhantomJS :
https://blog.angulartraining.com/how-to-running-angular-tests-on-continuous-integration-servers-ad492219c08c

How to write Testing
https://blog.logrocket.com/angular-unit-testing/

https://dev.to/mustapha/angular-unit-testing-101-with-examples-6mc

Do SonarQube Scan:
sonar-scanner -D sonar.host.url=[Sonarqube Host url] -D sonar.projectKey=[ProjectKey] -D sonar.login=[loginToken] -D sonar.language=js -D sonar.sourceEncoding=UTF-8 -D sonar.sources=[project src path] -D sonar.projectVersion=[project version] -D sonar.typescript.lcov.reportPaths=coverage/lcov.info -D sonar.test.inclusions=/*.spec.ts,/test.ts -D sonar.coverage.exclusions=**/.js,src/main.ts,src/polyfills.ts,src/typings.d.ts,/environment.ts,/module.ts -D sonar.exclusions=/node_modules/,src/libs/*

some reference links:

https://angular.io/guide/testing
https://medium.com/@learning.bikash/angular-code-coverage-with-sonarqube-d2283442080b
https://docs.sonarqube.org/latest/analysis/scan/sonarscanner/