Testing for DevOps – How to have 10 deploys a day versus 10 emergencies a day

Ten deploys a day was the tech talk that started DevOps as an integrated practice for software development. However, if they simply pushed out code without checking it, then the story would have been different. Without testing the code, it would be more like 10 or more Disasters a day… A down production site would result in some serious consequences such as:

  • Loss of customers
  • Loss of confidence in the company
  • Loss of employment for all who are involved

You get the pictures. Though the use of automation is a key principle of DevOps, automation is also an efficient way to multiply human error. Without efficient testing of code, CICD would be meaningless. If you write code quickly and deploy it, BUT it’s broken code, well you defeated the purpose of having software rapidly deployed and updated. Testing of code is one of the most fundamental part of DevOps there is.

But I’m a great coder and I don’t make mistakes…(or whatever is your excuse)

Well, that may be the case, however as your software product grows and more people are touching a code, the likelyhood some form of human error (that may not be yours) will be introduced into the code. It’s bad enough when you haven’t worked on the code let’s say in a couple of weeks, you don’t remember what you did. You don’t want to be called back into work on a Friday because your code changes you created bombs out on a production system… Test for it so you can sleep soundly knowing that you have a safety net in place.

Writing tests is a fundamental practice.

The fundamentals – Vince Lombarti, who is know as the winningest coaches in football once went to the lockerroom of his players after they had a major loss from a previous season and said .“..This is a football…” Part of writing good code is writing checks or tests for your code. Unfortunately, many programmers don’t write tests for their code, especially web developers who are use to just writing and fixing it as it breaks. It has been my experience that the reason many programmers don’t test code is quite simply, they don’t know how. We’ll get you pointed the right direction.

What are the various test you can do for code?

There are hundreds of different tests you can do on software, some are appropriate and some are not appropriate for testing your software. Here are a list of some of the more common tests. For the purpose of testing in a DevOps environment, there are basically two categories of test you can do for code. I’ll put particular emphasis on what are the must have tests. We’ll cover the must have tests. We’ll touch on the other tests.

Functional Tests

These are the most basic test we need to have in place for Continuous Integration.

  • Unit testing
  • Integration testing
  • Systems testing
  • Acceptance testing

Non Functional Tests

These are also important tests but are not functional test (testing key functions in software) to have AFTER you have the core functional test in place. Here are a few non functional tests.

  • Security testing – find security holes and exploits in your code.
  • Performance testing – find out how quickly your code runs.
  • Stress testing – find out how much load your application can take before it degrades or breaks.

Behavioral driven testing

This is influenced by BDD – Behavior driven development which is at the core TDD – Test driven development where development of software is defined by very specific test cases. In the case of BDD, the tests are defined in terms of a user story. This affects how you would write unit tests and acceptance tests. Testing frameworks like cucumber support this kind of writing of user stories.

Unit testing

Every bit of function you write should (must) be unit tested. It should be the most basic test that is used with any code that goes into production.

Basic principles of unit testing.

Test the smallest testable part of an application. That is a unittest.

Write your function to handle a particular error – i.e. division by zero.

test fixture – what’s needed to perform a test

Write a test case – 1/0

Write an assertion. Unit test assertion functions are very simple, they are functions that call your function and compares the returned result or state or value. For instance if you function returns a numeric value, you may use an assertion like

functionx > 0

or

assert.greater(functionx, 0)

This is dependent on your framework or library as far as if it supports different conditions for testing assertion.

These tests are best done with a testing frameworks or assertion libaries. For java, there’s JUnit, Python uses unittest, Javascript can use JestJS, MochaJS, Jasmine.

You can read more about unit testing here.

Integration testing

This is also very important. What if the guys who are responsible for writing the database interface makes a change that the busness logic guy didn’t know about or the frontend guys didn’t know about the change in the functions for business logic. Your code justs breaks and that’s not good for your mental health. You can read more about integration testing here.

Acceptance testing

This is what your customer sees and interacts with. This is probably the most time consuming part of writing tests for. Never the less, if the customer is not able to press the “pay” button, you and your company are going to lose money…and that’s not good. Your going to catch this with a good automated testing approach. These days if your testing a web app or website, use selenium or a framework that drive selenium to test the web interface with clicks and data input values. You can record your test using the Selenium IDE in Firefox or Chrome. It will take some massaging of your recording to make a good automated acceptance test.

Depending on your testing strategy, your approach and framework you will use will vary. Regardless of your approach, I’ll always recommend unit testing your code.

Tying it in to DevOps

Continuous integration is a strategy and software testing being both a strategy for instance Behavior driven development with various frameworks as tactics such as cucumber as a framework that supports Behavior driven testing.

Without software testing and a sound testing methodology, you couldn’t have Continuous integration. That is the Holy Grail of DevOps.

I am open to any comments or suggestions to this article. Until then have a good day.

How to write a WordPress Plugin part 3 – Creating the WordPress Plugin

Creating the WordPress Plugin

Ok, you just created the Javascript/HTML/CSS code you want to use for your WordPress site on an HTML page. How the heck you get this into your WordPress page? Well, with the magic of plugins.

What are plugins?

Plugins are a file and directory structure used by WordPress to add code to your WordPress site. Here is an example of the directory structure .

public_html/wp-content/plugins/
public_html/wp-content/plugins/movetotop/movetotop.php
public_html/wp-content/plugins/movetotop/assets
public_html/wp-content/plugins/movetotop/css
public_html/wp-content/plugins/movetotop/js
public_html/wp-content/plugins/movetotop/README.md

The main file that tells WordPress plugin how to run is movetotop.php

The other directories and files are:

README.md – Markdown readme file.
assets – image files and fonts used by plugin. Fontawesome is used here.
css – Cascading Stylesheet used by plugin. The stylesheet totop.css lives here
js – JavaScript files used by plugin. The JavaScript totop.js file code is here.

Creating the plugin.

Chop it up.

First things first, we will “chop” up the HTML and JavaScript code and place it where it needs to go.

To make the file naming consistant with the plugin name, I renamed the custom.css file to totop.css and custom.js to totop.js. Otherwise, there is no change to the content of the files or code enclosed.

I also separated the fontawesome files into assets/fontawesome-5 directory so to better organize these assets.

Movetotop.php and how it’s organized.

The real magic of WordPress plugin is found in the movetotop.php file.

There are three sections found in a plugin file:

Header. This is commented header enclosed is /* */

add_action/add_filter – this tells WordPress to execute scripts to add the CSS/HTML/JavaScript files into the HTML generated by WordPress sent to the web browser.

Function(s). This is the scripts that injects the CSS, HTML or JavaScript files when called by add_action/add_filter.

Well, let’s go into how this file is created and what is used.

Header File

Header file contains the following:

/*
Plugin Name:
Plugin URI:
Description:
Author:
Version:
Author URI:
*/

This is self explanatory. Without this information, the plugin will not show up in the WordPress plugin dashboard.

The hook function

The hook functions add_action/add_filter – This adds the CSS/HTML and JavaScript file into WordPress hooks. Generally, hooks are the location of the content.

Here are the five hooks used by this plugin:

add_action(‘wp_head’,’AddFontAwesomeCSS’);
add_action(‘wp_head’,’AddMoveToTopCSS’);
add_filter(‘the_content’,’AddMoveToTopButton’);
add_action(‘wp_footer’,’LoadJQuery’);
add_action(‘wp_footer’,’AddMoveToTopScript’);

Basically, the format is:

(Location of content(hook), Function content to be applied).

There are MORE hooks than what we’re using here (over 1,000+ hooks, see this link for a comprehensive list) which do a variety of things. For this example we’re just sticking to the basic ones.

Function

The function that injects the content inside the HTML.

Here is an example:

function AddMoveToTopCSS() {
$cssurl=plugins_url(‘/css/totop.css’,__FILE__);?>
<link rel=”stylesheet” href=”<?php echo $cssurl; ?>”>
<?php }

This function injects the css/totop.css file name and location and outputs it as a text HTML reference. This is then called by the hook function and injected in the location (hook) specified.

Wrap up.

That’s how you develop a basic WordPress plugin. We didn’t cover other stuff like an admin backend interface with configurable parameters. That we may do another time.

In the meantime, have a good day.

Roy

 

 

 

 

How to write a WordPress Plugin part 2 – Static HTML/CSS/JavaScript

When you write a WordPress plugin, you are essentially inserting HTML and JavaScript code into a webpage. The first thing you do is write a static HTML page with the effect you have in mind first.
While there are several kinds of plugins available for WordPress, we’ll only concern ourselves with adding a feature to the site as described above.

The first thing I did was fire up my favorite editor.
I used Visual Studio Code https://code.visualstudio.com/. You can use any editor you wish such as Sublime, Brackets, Notepad++, Atom.
I like VS Code since it integrates EMMET https://emmet.io/, has built in IntelliSense https://en.wikipedia.org/wiki/Intelligent_code_completion#IntelliSense, and supports several plugins that make it very useful.

If you follow the link https://github.com/roadkillon101/HTML-example-of-MoveToTop, you can download the source files.

The first file I’d like you to look at is the index.htm file.
If you open it up in a web browser, you will see a bunch of lorem ipsum text. You scroll down the page, the “move-to-top” button will show up at the lower right hand corner of the web page. You press the button and the page will scroll to the top of the page.
Open up this index.htm file in the editor and I’d like you to notice the following:

<script type="text/javascript" src="./js/lib/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="./js/custom.js"></script>
<link rel="stylesheet" type="text/css" href="./css/fontawesome-all.css"/>
<link rel="stylesheet" type="text/css" href="./css/custom.css"/>

To make the button appear, we need the following:

JQuery – for the animation effects.

FontAwesome – for the up angles in the button.

custom.js – for the JavaScript code.

custom.css – for the styling of the button.

We also have the button itself with the FontAwesome fonts in the HTML.

<button onclick="topFunction()" id="toTop" title="Go to top"><i class="fas fa-angle-double-up fa-2x"></i></button> 
</button>

This code has to first work in a static HTML page before you make it work anywhere else.
I tweeked the code until it looked right and behaved as I expected it to here before making it work as a plugin in WordPress.

I won’t go into detail about how to write JavaScript or write CSS styling. You can examine the code and see how it works.

What I want you to notice is where the snippets of code are placed in the HTML. This is where the snippets need to be placed in the WordPress dynamically generated pages.

In this case, the code is in the header of the HTML and the body.

The next article will describe how to turn it into a WordPress plugin.

 

Writing a basic WordPress plugin (MoveToTop) part 1 – Basic overview

You may wonder how you go about modifying your WordPress site just adding a piece of JavaScript code.

Perhaps you are handy with writing some HTML, CSS, and JavaScript but you don’t know where to begin with converting it into a plugin for WordPress.

I will show you how you can do this with the MoveToTop example plugin that I have created and placed on GitHub.

You don’t have to write a whole blown out plugin if you just want to add a simple code snipped or tweak to your site, plus you can use it in ANY of your sites you need this snippet.

This plugin which I use on this site, creates a button on the lower right corner of the web page. When you click on it, it moves the web page to the top of the page (Get it…move to top…) You can customize it’s behavior and appearance by modifying the CSS and JavaScript code.

To get this magic to work, the first thing you need to do is to write a basic HTML page with the plugin in question. The script (totop.js) has to be working along with the HTML (found in movetotop.php), CSS (totop.css) appropriate libraries such as J QueryFont Awesome.

I wrote a static HTML page and made this page work first.

In the next article, I will show you how I developed the test code.