allenhwkim

[allenhwkim]

This is my recent Javascript open-source work. I wish it helps other develpers in the world.

[allenhwkim]

Introduction To WebTest

Hello everyone.

My Name is Allen Kim, and I am here to introduce “webtest”, which is a simpler and easier way to do browser testing without knowing any computer language. What you need to know English.

You can think of webtest as dialogue between "you" and "web browser" such as;

open browser chrome

goto www.google.com

enter “allenhwkim” into “Search”

submit it

see “allenhwkim”

Technically webtest is written in Javascript and Selenium WebDriverJS, but you don’t need to know Javascript to nor Selenium WebDriverJS.

There are two ways to run webtest;

The first one is to run it in command line

And the second one is to run as a script

There are two modes to run webtest; "Command line mode" and "Batch mode".

Command line mode is useful when you test each command one by one to make it sure that you are writing the right script.

Batch mode is good to automate your test.

Let us begin with command line mode, which is easy to start.

Before that, you need to install webtest

$ nam install web-test -g

Please remember that the module name is web-test(web dash test), not webtest, although we are going to use webtest without dash as command name.

-g is to install webtest globally, so that you can run webtest at anywhere.

Now you are ready to run command line.

Command Line Mode

$ webtest

You see what driver is ready, and what commands are available. OK, let’s start with

? > open browser chrome

to open chrome browser. You want to go to google.com, then

? > go to www.google.com

Then you want to enter search string

? > enter “allenhwkim” into “Search”

So far, so good, right?

Now you want to verify the result, there are many verification commands. To see all available commands, you simply enter “?” as a command

? > ?

Let’s verify you can see "allenhwkim" is on the page.

? > see "allenhwkim"

That’s it for command line mode. Just enter command to operate a web page.

Next, let’s get into the script mode. Script mode is to run all commands one by one.

Script Mode

This is the test page, https://rawgit.com/allenhwkim/webtest/master/test/test-page.html

And this is the test script that we are going to run.

This is to test all core commands with test-page.html open browser chrome go to http://localhost:8080/test/test-page.html set window position 0 0 set window size 100 600 see "click here to change background color" click click link "Click Here To Change Url" enter text 'Hello World' into text press "A" into text set speed 1 second verify element #submit is disabled set speed 1 millisecond click #enable verify element #submit is enabled click #radio1 verify element #radio2 is not selected verify element #hidden is not visible click #show-hidden verify element #hidden is visible click #change-color verify element #change-color style background-color is "rgba(255, 255, 0, 1)" verify element #hidden text matches "^Hidden\ Element" verify title is "Test Form" verify title matches "Form" verify url matches "^http:\/\/" verify text "click here to change something" not present verify text "Click Here To Change Url" present click #enable submit wait for page load close browser

To run the script, you simply specify the file name next to webtest command

$ webtest test-page.txt

This is the result of the test.

That’s the introduction of webtest. You may want to do more than the given commands. Then, please fork webtest, the look into commands directory. It’s not difficult to create a simple command.

Thanks for your time, and finally

“Happy Testing”

Allen Kim

[allenhwkim]

ng2-ui First Release of ng2 ui collection https://ng2-ui.github.io

[allenhwkim]

[allenhwkim]

Easier Directive Development In Angular2

[allenhwkim]

I have developed Google Maps API v3 wrapper for Angular2, please check it out.

[allenhwkim]

A Javascript community, jsvalley https://jsvalley.github.io, is looking for Angular2 collaborator for several Angular2 projects.

I, a creator of this community, have successfully created some of open source project e.g., https://ngmap.github.io, and starting new projects in Angular2 and actively looking for collaborators who will maintain projects together.

These are the projects that jsvalley started, and you have a chance to participate as a collaborator, possibly a co-owner.

ng2-map ng2-auto-complete ng2-datetime-picker web-test

[allenhwkim]

How To Import Angular 2 Module

[allenhwkim]

Introductoin to SystemJS in Angular2 Beginners

[allenhwkim]

How To Have A Web Site With Multiple Posts

[allenhwkim]

How To Have A Web Site In 5 Minutes

[allenhwkim]

How To Publish Angular2 TypeScript Module

Code your classes in to src directory e.g., src/app/hello-world.ts

Code src/index.ts to export your classes

export {HelloWorld} from './app/hello-world';

configure tsconfig.json

{ "compilerOptions": { "declaration": true, "target": "es5", "module": "commonjs", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny": true, "outDir": "dist", "suppressImplicitAnyIndexErrors": true }, "exclude": [ "node_modules", "typings/main", "typings/main.d.ts" ] }

From the above code, the important thing is to make "declartion": true and "outDir": "dist".

declaration as true will generate all type definition files. e.g., hello-world.d.ts, or index.d.ts

outDir is the target directory to store all .js files which are compiled from typescript

Compile tygpe script into Javascript. This is the result in dist directory.

Your code is ready to be published except defining main file in your package.json

"main": "dist/index.js"

and adding index.d.ts into your main director

export * from './dist';

Now it's really ready. Time to publish your awsome module. Update the version in your package.json

"version": "0.1.3",

commit your changes, then publish it.

$npm publish

[allenhwkim]

Introduction to SystemJS For Angular2 Beginners

As you see a live example from Angular2 Quick Start, You will find that the main page of Angular2, which is index.html, uses SystemJS to start Angular2 application.

index.html

<script src="systemjs.config.js"></script><script> System.import('app').catch(function(err){ console.error(err); }); </script>

System.import('app') is starting the application, which affects <my-app>Loading...</my-app>

So, it is using systemjs to start the application. Then what is systemjs?

systemjs

As mentioned in there README, systemjs is univesal dynamic module loader, it loads the following in the browser

es6 modules

AMD

CommonJS

global scripts,

and much more

As an angular2 user as who is curious how it works in browser, we are going to focus on ES6 modules.

it is build on the top of ES6 module loader. So, let's get into ES6

ES6

The import statement is used to import functions, objects or primitives that have been exported from an external module, another scfript, etc

https://developer.mozilla.org/en/docs/web/javascript/reference/statements/import

import { member } from "module-name"; import { member1 , member2 } from "module-name";

In the above sentence, it said that have been exported. In ES6, you can export functions, objects or primitives from a file. The syntax looks like the following as documented

export { name1, name2, .., nameN }; export let name1, name2,.., nameN; // also var

Summary

Going back to systemjs,system.import function loads the javascript. and the basic usage is like this in browser.

<script src="systemjs.config.js"></script><script> System.import('app').catch(function(err){ console.error(err); }); </script>

So, we see two things, one is config, and the other is System.import('app') 1. config 2. The app package, which is imported by System.import, starts your application

So many questions arise from here.

Q: where is app and how do we fine it? A: It's defined in system.config.js using map and packages

config.map['app'] = 'app'; // tells you where you find app package, config.packages['app'] = { main: 'main.ts', defaultExtension: 'ts' }; // tells you what file to execute

Q. Where is main.ts and what does it do? A. It's located at 'app/main.ts' because config.map['app'] told you find app packages in app directory. and it does bootstrap angular application, which is your app. bootstarp reads AppComponent and find my-app html tag in document then renders your applications between those two tags; <my-app> and </my-app>

import { bootstrap } from '@angular/platform-browser-dynamic'; import { AppComponent } from './app.component'; bootstrap(AppComponent);

[allenhwkim]

Pain With Web Page Testing ⤞ web-test

Selenuim WebDriver is great! .......... But, it's not that easy for a beginner who does not understand full concept of DOM and Promise.

What is Promise? Yeh, you don't even want to know.

Even you know about Promise and DOM well. you get this error, NoSuchElementError, easily;

/Users/allen/github/webdriver-tt/node_modules/selenium-webdriver/lib/promise.js:654 throw error; ^ NoSuchElementError: Unable to locate element: {"method":"css selector","selector":"input"}

"WT*, the element is there, you see!!!! #$#!%!$!@!" baning your head on table.

To explain, it is about timeout. Even more, it's also about implicit/explicit wait. And to explain more, you should not mix implicit and explicit wait when you test a web page.

"What the &%@$ is implicit wait and explicit wait?" It's pretty clear that you don't want to know about it. You just simply want your test to work as you coded.

Sadly, this is not the end. The pain grows test pain grows when you deal with Angular, especially Angular2.

That's why protractor is invented. You may react to this as "What is protractor? Do I have to know that too?". your question is valid and many have raised the same question.

Let's assume that you know protractor too. The worst part of web browser test of Angular appliction is, even with protractor, timeout error, and not-found error is not avoidable.

That's the end? Yes it's the end of your nightmare. You suffered enough.

WebDriver has very nice feature of wait/until to make it sure you get the element you want to test.

driver.wait

webdriver.until,

Both returns promise, and to make your test to work properly, you need to chain these functions properly.

Almost all hate to deal with chainging these promises properly, and even properly chained code is not so looking good and not so maintainable.

Let me explain this with some Javascript code.

This is wait syntax

driver.wait(CONDITION, millisecond);

We can combine this syntax with driver.until. conditions. For example,

driver.until.elementIsVisible({css: '.my-class'})

The problem is that the following code is not guranteed to run in sequence

driver.wait(until.elementLocated({css:"h3.first"}), 2000) .then(function() { console.log(1) }); driver.wait(until.elementLocated({css:"div"}), 2000) .then(function() { console.log(2) }); driver.wait(until.elementLocated({css:"body"}), 2000) .then(function() { console.log(3) });

To make it really sequenctial, we need to code like this;

driver.get('http://www.primefaces.org/primeng/#/autocomplete'); driver.wait(until.elementLocated({css:"h3.first"}), 20000).then(function() { console.log(1); }).then(function() { driver.wait(until.elementLocated({css:"div"}), 20000).then(function() { console.log(2); }) }).then(function() { driver.wait(until.elementLocated({css:"body"}), 20000).then(function() { console.log(3); }) })

Although the above code works, repeativive function(), then, and { ..} makes people not to focus on test, but the Javascript promise syntax.

That's the reason web-test is born.

Allen Kim's solution web-test will accept the following command and just run it by doing all chaning properly within it.

With web-test, this is how to write a test

open browser '/login' enter text 'John' into 'username' submit close browser

And this is how to run a test

$ web-test my-test-scenario.txt

web-test is still in early stage though at this time. It will get mature with your interest and contributoin.

Cheers,

Happy Testing

[allenhwkim]

Button With Extreme CSS

[allenhwkim]

Want to have plunker example on your site? Use AngularJS plunker directive

Features

Show your js, css, html code in taba

Reproduce your js, css, and html in plunker site

Configurable

DEMO

To Get Started

For Bower users,

$ bower install angularjs-plunker

Include angularjs-plunker.min.js

<script src="http://rawgit.com/allenhwkim/angularjs-plunker.min.js"></script>

add it as a dependency

var myApp = angular.module('myApp', ['angularjs-plunker']);

Use it

Examples

<plunker id="test1" module-name="plunker" module-dependencies="'ngMap'"> <plunker-lib src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=weather,visualization,panoramio"></plunker-lib> <plunker-lib src="https://code.angularjs.org/1.2.5/angular.js"></plunker-lib> <plunker-lib src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></plunker-lib> <plunker-code type="js" src="my-ctrl.js"></plunker-code> <plunker-code type="css" src="my-ctrl.css"></plunker-code> <plunker-code type="html" code-only=""> <div ng-controller="MyCtrl"> <map center="37.7699298, -122.4469157" zoom="12" on-click="addMarker()"> <marker ng-repeat="pos in positions" position=", "></marker> </map> </div> </plunker-code> <plunker-show></plunker-show> </plunker>