Tufan Tunç

Front-End Developer

<shameless-self-promotion>

</shameless-self-promotion>

twitter.com/tufant

github.com/tufantunc

instagram.com/tuftunc

wtf?

Any application that can be written in JavaScript,

will eventually be written in JavaScript.

- Jeff Atwood / Co-founder of Stackoverflow.com

[] == ![]
// -> true
console.log('b' + 'a' + + 'a' + 'a');
// -> baNaNa
 3  - 1
 3  + 1
'3' - 1
'3' + 1
// -> 2
// -> 4
// -> 2
// -> 31

wtf?

Code Name:

Project Smurf

... tests are "executable documentation"

Unit Test

Kodu küçük parçalar olarak ele alır ve çalışabilirliğini test eder.

- Anonim

Integration Tests

Kodun sistemle birlikte ele alındığında doğru çalıştığından emin olur.

UI Test (Functional Test)

Bir browser'ı kontrol ederek websitesinde test işlemi uygular.

Unit test araçları kullanılır.

Unit Test

document.createElement("div");
describe("A suite is just a function", function() {
  var a;

  it("and so is a spec", function() {
    a = true;

    expect(a).toBe(true);
  });
});

UI Test (Functional Test)

// Karma configuration
// Generated on Tue Jun 19 2018 12:16:30 GMT+0300 (Turkey Standard Time)
process.env.CHROME_BIN = require('puppeteer').executablePath();
const path = require('path');

module.exports = function(config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',


    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine'],


    // list of files / patterns to load in the browser
    files: [
      './Static/dist/scripts/hurriyet/hurriyet.vendor.min.js',
      './Static/test/tests.webpack.js',
    ],


    // list of files / patterns to exclude
    exclude: [
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
      './Static/test/tests.webpack.js': [ 'webpack', 'sourcemap' ],
    },
    
    //webpack configuration with coverage loader
    webpack: {
      mode: 'development',
      devtool: 'inline-source-map',
      module: {
        rules: [
          {
            enforce: 'post',
            test: /Static\\src\\scripts\\\w+\\.*\.js$/,
            loader: 'istanbul-instrumenter-loader',
            exclude: [
              // 'node_modules'
            ],
            query: {
              esModules: true
            }
          }
        ]
      }
    },


    // Webpack std out off
    webpackServer: { noInfo: true },


    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress', 'coverage-istanbul'],

    // code coverage configuration
    coverageIstanbulReporter: {
      reports: [ 'html', 'text-summary', 'json', 'json-summary', 'text' ],
      fixWebpackSourcePaths: true,
      dir: path.join(__dirname, 'coverage')
    },

    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: [
      //'Chrome', 
      'MyChromeHeadless'
    ],
    customLaunchers: { //"--window-size=1920,1048"
      MyChromeHeadless: {
        base: 'ChromeHeadless',
        flags: ["--window-size=1920,1048"],
      }
    },

    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  })
}

Integration Test

jsdom is a pure-JavaScript implementation of many web standards, notably the WHATWG DOM and HTML Standards, for use with Node.js.

Jest

import TurkishLetter from '../../src/scripts/common/turkish-letter';

describe("TurkishLetter class'ı", function(){
    let turkishLetter;
    
    beforeEach(function(){
        turkishLetter = new TurkishLetter();
    });

    it("Türkçe büyük harfleri küçük harf yapabilmeli", function(){
        expect(turkishLetter.toLower("İIŞĞÜÖÇ")).toBe("iışğüöç");
    });

    it("Türkçe küçük harfleri büyük harf yapabilmeli", function(){
        expect(turkishLetter.toUpper("iışğüöç")).toBe("İIŞĞÜÖÇ");
    });
});

Jest Configuration

jest-setup.js

Thank You!

Testing JS Components

By Tufan Tunç

Testing JS Components

  • 203