PhpStorm refactoring tutorial , part 1

PhpStorm like all JetBrains IDEs has o lot of built in features. And you can add even more with plugins. It provides many refactoring features.

This will be a first part of refactoring tutorial.

We will start from the simple things.

Lesson 1: Extracting a variable and renaming it.

Example code to be refactored:

This code is bad. If you use jQuery object more than once, assign it to variable.

First let’s extract variable. Move cursor to any occurrence of $(‚#container’) in the code and press ctrl+r. Menu will appear, now select Extract variable. IDE gives you ability to replace all occurrences or just the highlighted one. We want to replace all of them. Choose it. Now we have ability to name the variable. IDE suggest names by the code, in most cases it gives  correct name, but we can change it :).

Code after refactor:

Next thing. We have extracted the variable but later we decide that current name is not obvious. Naming is very important so we want to change it. Move cursor to any occurrence of variable $container and again press +r (on Mac) or ctrl+r (on other os). In the menu choose first position, Rename. Place a new name in the popup and do refactor.

You have ability to search the whole project for occurrences of the variable name in the string / comment and text . Try it by yourself, it’s very handy :).

That’s all for today. See you in the next part.

Karma among with Jasmine, RequireJS and PhantomJS

This time something about JavaScript. Everybody likes JavaScript :P.

I’d like to write quick guide how to set up working tests environment.

First, what we need:

Let get all required things by NPM. Create a package.json with content:

Now run the command:

Great. We have now all required dependencies.

Next thing is to configure Karma. There are two ways of doing this, manually by creating a karma config file or using karma creator (karma init command). I prefer doing it manually. Create a new file and name it karma.conf.js. Here’s my file with comments:

Basically what you need to change is basePath and files / exclude. But that’s not all. We need to create another file which will run asynchronous our test with RequireJS. Let’s place this file in the tests and name it main.js. This is the only file which is included by karma. Content of the file:

Variable window.__karma__.files comes from karma.conf.js files section. We need to filter them as we want to require only tests files. The source files will be declared as dependencies of each test file.

Let’s create a example test file tests/exampleSpec.js and put in it:

We are defining a spec which has source file as a dependency. RequireJS injects it’s to our spec and we can now test it with Jasmine. How cool is that?

Let’s define our example via src/example.js:

The last thing which need to be done is to export the variable which will tell Karma where PhantomJS binary is:

Now let’s run Karma:

Finally you should see something like this:

karma

If you have any problems with PhantomJS – maybe you need to install some libs required by it. Check it’s website for more info. Other solution is to try different browser – Chrome, Firefox etc. But this can’t be done via SSH… 🙂

Any problems, suggestions, feel free to comment.