InRhythm

Your partners in accelerated digital transformation

web engineering

How To Write A Great Test Case

Overview

A test case is exactly what it sounds like: a test scenario measuring functionality across a set of actions or conditions to verify the expected result. They apply to any software application, can use manual testing or an automated test, and can make use of test case management tools.

Most digital-first business leaders know the value of software testing. Some value high-quality software more than others and might demand more test coverage to ultimately satisfy customers. So, how do they achieve that goal?

They test more, and test more efficiently. That means writing test cases that cover a broad spectrum of software functionality. It also means writing test cases clearly and efficiently, as a poor test can prove more damaging than helpful.

A key thing to remember when it comes to writing test cases is that they are intended to test a basic variable or task such as whether or not a discount code applies to the right product on an e-commerce web page. This allows a software tester more flexibility in how to test code and features.

In Nathan Barrett’s Lightning Talk session, we will be breaking down the following topics:

  • What Is A Test Case?
  • What Makes A Good Test Case?
  • Live Demonstration
  • Closing Thoughts

What Is A Test Case?

At a high level, to “test” means to establish the quality, performance, or reliability of a software application. A test case is a repeatable series of specific actions designed to either verify success or provoke failure in a given product, system, or process. 

A test case gives detailed information about testing strategy, testing process, preconditions, and expected output. These are executed during the testing process to check whether the software application is performing the task for which it was developed for or not. A passed test case functions like a receipt verifying the correct functionality of the subject of the test. 

To write the test case, we must have the requirements to derive the inputs, and the test scenarios must be written so that we do not miss out on any features for testing. Then we should have the test case template to maintain the uniformity, or every test engineer follows the same approach to prepare the test document.

Test cases serve as final verification of functionality before releasing it to the direct product users. 

What Makes A Good Test Case?

Writing test cases varies depending on what the test case is measuring or testing. This is also a situation where sharing test assets across dev and test teams can accelerate software testing. But it all starts with knowing how to write a test case effectively and efficiently.

Test cases have a few integral parts that should always be present in fields, as well as some “nice to have” elements that can only work to enhance presented results. 

Required Elements:

  • Summary
    • Concise, direct encapsulation of the purpose of the test case 
  • Prerequisites 
    • What needs to be in place prior to starting the test?
    • Bad Prerequisites: captured in test steps, not present, overly specific
    • Good Prerequisites: concise/descriptive, lays out all set-up prior to testing, includes information to learn more if desired 
  • Test Steps
    • The meat of the test case
    • Good test steps: each step is a specific atomic action performed by the user that contains an expected result, call out divergent paths where necessary, cites which test data when laid out in prerequisites needs to be applied
    • Really great test steps should treat the user like they know “nothing” and communicate everything from start to finish
  • Expected Results
    • How do we know that the test hasn’t failed?
    • Bad Expected Results: Page loads correctly, view looks good, app behaves as expected
    • Good Expected Results: Landing page loads after spinner with user’s account details present, view renders with all appropriate configurations (title, subtitle, description, etc.), toggle changes state when tapped (enabled→disabled)

Preferred Additional Elements:

  • Artifacts
    • Screenshots, files, builds, configurations, etc.
  • Test Data
    • Accounts, items, addresses, etc.
    • What information is needed during the test?
    • Pre-rendered prerequisite fulfillment
  • Historical Context
    • Previous failures, previous user journeys, development history, etc.
    • Has this feature been “flakey” in the past?
    • What are previous failure points?
    • How critical is this feature?

The very practice of writing test cases helps prepare the testing team by ensuring good test coverage across the application, but writing test cases has an even broader impact on quality assurance and user experience.

Live Demonstration

Nathan Barrett has crafted an intuitive test of specificity to help guide testers to understand how they should be structuring their cases:

Be sure to follow Nathan’s entire Lightning Talk to follow along these with steps in practice in real time.

Closing Thoughts

Test cases help guide the tester through a sequence of steps to validate whether a software application is free of bugs, and working as required by the end-user. A well-written test case should allow any tester to understand and execute the test.

All programs should always be designed with performance and the user experience in mind. The properties explored above are the primary stepping stones to understanding the beneficial prerequisites to writing a good test case for any type of application. Be sure to explore, have fun, and match up the components that work best for your project!

Happy coding!

To learn more about How To Conduct A Great Test Case as well as its importance in the software development process and to experience Nathan Barrett’s full Lightning Talk session, watch here. 

Integrations For Apache – Flink, NiFi, And Kafka

Overview 

Apache is one of the go-to web servers for website owners and developers, with more than a 50% share in the commercial web server market. 

Apache HTTP Server is a free and open-source server that delivers web content through the internet. It is one of the oldest and most reliable web server software maintained by the Apache Software Foundation, with the first version released in 1995. It is commonly referred to as Apache and after development, it quickly became the most popular HTTP client on the web.

It is a modular, process-based web server application that creates a new thread with each simultaneous connection. It supports a number of features; many of them are compiled as separate modules and extend its core functionality, and can provide everything from server side programming language support to authentication mechanisms. Virtual hosting is one such feature that allows a single Apache Web Server to serve a number of different websites.

In Tim Spann’s Lightning Talk session, we will breaking down the following topics:

  • What Is An Apache Integration?
  • Apache Flink
  • Apache Nifi 
  • Apache Kafka
  • Live Demonstrations
  • Closing Thoughts

What Is An Apache Integration?

A software integration is the process of bringing together various types of software subsystems so that they create a unified single system. The integration should be carefully coordinated to result in a seamless connection of the separate parts. When done skillfully, the increased efficiency is a tremendous benefit to the Apache developer.

Implementing an integration that works best for an individual development team’s workflow is essential to the future success of the project. Taking time to explore and walk through a number of layout features will only stand to benefit the user-experience and streamlining of efficient tasking. 

Apache Flink

Apache Flink is a real-time processing framework which can process streaming data. It is an open source stream processing framework for high-performance, scalable, and accurate real-time applications. It has a true streaming model and does not take input data as batch or micro-batches.

Example: The below framework diagrams the different layers that run as part of the Apache Flink ecosystem. 

Apache Nifi

Apache NiFi is a visual data flow based system which performs data routing, transformation and system mediation logic on data between sources or endpoints.

Apache Kafka

Apache Kafka is a distributed streaming platform that: Publishes and subscribes to streams of records, similar to a message queue or enterprise messaging system. Stores streams of records in a fault-tolerant durable way. Processes streams of records as they occur.

Apache Kafka was built with the vision to become the central nervous system that makes real-time data available to all the applications that need to use it, with numerous use cases like stock trading and fraud detection, to transportation, data integration, and real-time analytics.

Example: The below framework diagrams the operational flow of information using the Apache Kafka plug-in. 

Live Demonstrations

Tim Spann has crafted an intuitive demonstration to help guide you through these different Apache integrations in practicum: 

Be sure to follow Tim’s entire Lightning Talk to view this impressive demonstration in real time.

Closing Thoughts 

All programs should always be designed with performance and the user experience in mind. The properties explored above are the primary stepping stones to exploring the basic components needed to test how Apache Integrations can improve your personal data application. Be sure to explore, have fun, and match up the components that work best for your project!

Happy coding!

To learn more about Apache Integrations in application development and to experience Tim Spann’s full Lightning Talk session, watch here. 

Web Bundling Alternatives

Overview

Bundling a full website as a single file and making it shareable opens up new use cases for the web. Imagine a world where one can:

  • Create their own content and distribute it in all sorts of ways without being restricted to the network
  • Share a web app or piece of web content with their friends via Bluetooth or Wi-Fi Direct
  • Carry their site on their own USB or even host it on their own local network

The Web Bundles API is an exciting proposal that could make this all possible and in turn, simplify the streamline processes for the developer!

Web Bundling is the process of fetching, resolving, packing, and reducing a tree of dependencies into compressed static files that one can readily host on the web. 

In Wai Fai Lau’s Lightning Talk session, we will breaking down the following topics:

  • What Are Web Bundlers?
  • Why Web Bundlers?
  • Web Bundling Options
  • Live Demonstrations
  • Closing Thoughts

What Are Web Bundlers?

In the simplest terms, a Web Bundle is a tool that bundles all HTTP resources up in a singular, web optimized output folder. In doing so, the lives of developers not only become simpler – but easier  to streamline and process.

The primary job of a bundler is to transpile the code down into something the browser can understand and then encapsulate those HTTP properties. The Web Bundler allows the developer to output all these properties into a singular folder that can then be included on a web page to load the entire application at once. 

Why Web Bundlers?

Web Bundlers provide a number of assets for developers looking to utilize succinct packaging. The primary sectors of improvement associated with bundling are:

  1. Improvement Of Developer Experience
    • Dev server
    • Hot module replacement 
    • Debugging support
  2. Optimization Of Asset Production To Improve Performance And UX 
    • Minification
    • Compressed and permanent code
    • Code splitting
    • Tree shaking

Web Bundling Options

There are a number of bundling software options available for developers looking to implement the method. The most important factors to measure when considering a specific alternative is two-fold: speed and package size. A faster build speed and a smaller package size would be the ideal solution. 

Webpack

Webpack is currently the most popular alternative available to developers. It addresses the lack of tooling for complex single page applications. Before Webpack, developers had to manage dependencies manually.

Webpack is:

  • Highly customizable
  • A mature ecosystem 
  • A provider of responsive documentation and support
  • Capable of utilizing module federation 

Parcel

Parcel automatically tracks all files, configurations, plugins, and dev dependencies that are involved in the build, and granularly invalidates the cache when something changes. It integrates with low-level operating system APIs to determine what files have changed in milliseconds, no matter the project size.

Parcel is:

  • Faster than Webpack
  • Without a configuration requirement
  • A provider of a built in hot module replacement

Rollup

Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application. It uses the new standardized format for code modules included in the ES6 revision of JavaScript, instead of previous idiosyncratic solutions such as CommonJS and AMD.

Rollup is:

  • A simpler configuration than Webpack
  • A provider of automatic tree shaking
  • A smaller file size than Webpack 
  • A user of scope hoisting

esbuild

esbuild is a JavaScript bundler created by Evan Wallace. The code itself is written in Go with speed in mind, and it’s clear that the developer endeavored to avoid unnecessary allocations as much as possible.

esbuild is:

  • The fastest bundler currently on the market

Vite

Vite.js is a rapid development tool for modern web projects. It focuses on speed and performance by improving the development experience. Vite uses native browser ES imports to enable support for modern browsers without a build process.

Vite is:

  • Capable of hot module replacement
  • A provider of one of the fastest bundling times
  • An automated code splitter 
  • A provider of a multi-page support module right off the bat
  • Compatible with most popular framework templates

Live Demonstrations

Wai Fai Lau has crafted an intuitive demonstration to help guide you through these different Web Bundling alternatives in practicum: 

Be sure to follow Wai Fai’s entire Lightning Talk to view this impressive demonstration in real time.

Closing Thoughts

All programs should always be designed with performance and the user experience in mind. The properties explored above are the primary stepping stones to exploring the basic components needed to test how Web Bundling can improve your personal data application. Be sure to explore, have fun, and match up the components that work best for your project!

Happy coding!

To learn more about Web Bundling in web development and to experience Wai Fai Lau’s full Lightning Talk session, watch here. 

How To Publish A Command-Line Tool To NPM

Overview

The Command-Line Interface, or otherwise referred to as CLI, is a common way for developers to interact with different processes. CLI tools are often used in software development, DevOps, or even application structure. Overall, the command-line provides a more streamlined developer experience as well as automation tools for routine maintenance.

NPM, on the other hand, is the world’s largest software registry. The registry contains over one million code packages, supporting open-source developers in their mission to not only share software, but provide an accessible playing field for the management of private development projects. 

With NPM supporting command-line tools, developers are given the opportunity to expedite collaboration amongst teammates.

In William Kimak’s Lightning Talk session, we will be uncovering the primary strategies for Publishing A Command-Line Tool To NPM:

  • Popular Libraries
  • jasmine-spec-builder
  • Building Complex Packages
  • Live Demonstrations
  • Closing Thoughts

Popular Libraries

Yargs and Commander.js are two of the most popular libraries used for parsing user input. While both have their own collection of pros and cons per developer style, the primary difference between them is:

  1. Yargs
  • Uses types to check for invalid user inputs 
  1. Commander.js
  • Routes commands to functions, in order to clean up code 

With Yargs and Commander.js leading the charge, there are a number of sub-libraries that provide interactive user-experiences to your application.

  1. Inquirer
  • Provides real-time error feedback 
  • Prompts user identity verification questions and validates the answers
  • Manages hierarchical prompts
  1. Yargs-Interactive
  • Based on inquirer
  • Supports mixed mode, in which a user doesn’t need a direct prompt for all navigation options
  1. Chalk
  • Changes color of terminal output
  • Intuitively bolds, dims, and underlines text
  • Creates reusable style code
  1. Ora 

jasmine-spec-builder

A jasmine-spec-builder is a command-line tool to build and update jasmine spec files. It allows you to build a spec folder from scratch and/or update an existing file’s providers. It provides developers the option to utilize a MasterServiceStub to initialize service stubs before each unit test. Overall, giving the developer the opportunity to automate tests for both synchronous and asynchronous code. 

jasmine-spec-builder has a number of features, including: 

  • Speed and low overhead with no external dependencies
  • An all inclusive library that offers everything needed to test code pre-development
  • Availability for both Node and browser
  • Use with other languages like Python and Ruby
  • Does not require the DOM
  • Providing a clean and easy to understand syntax and a rich, straightforward API
  • Using natural language to describe the tests and the expected results

Building Complex Packages 

The common requirements for developers looking to run more complex tests with the command-line for their  NPM packages are:

  • Running tests before every publish
  • Consistently updating versions using semantic versioning 
  • Creating a git tag using semantic versioning
  • Pushing the package to Github or NPM 
  • Creating manual release notes for the update 

Live Demonstrations

You’ve unpacked quite a few introductory principles to the publishing of command-line tools to NPM…But the best way to learn is through practical and tangible demonstration.

William Kimak has crafted an intuitive demonstration to help guide you through these principles in practicum: 

Be sure to follow Kimak’s entire Lightning Talk to view this impressive demonstration in real time.

Closing Thoughts

Publishing Command-Line Tools To NPM has given developers the ability to expedite their team’s backend processes. Overall, bringing more power and innovation to your “coder’s toolbox!” The properties explored above are the primary stepping stones to experimenting with the primary knowledge needed to test how publishing command-line tools to NPM can help streamline processes for your current (or future!) development portfolio. Be sure to explore, have fun, and match up the components that work best for your project!

Happy coding!

To learn more about Publishing Command-Line Tools To NPM, along with some live test samples, and to experience William Kimak’s full Lightning Talk session, watch here. 

An Introduction To Web Animation

Overview

Web design has undergone a number of innovations over the years, with each new implementation bringing a unique “flavor” to their coding.

Web animation has been dominating our screens in recent years, raising the bar for more intuitive and exciting user experiences online. Website design animation turns an ordinary user experience into an unforgettable journey that amazes with its bold colors, movements, adventures, and exciting interactions. 

In Alec McGovern’s Lightning Talk session, we will be uncovering the following animation topics:

  • What Is Animation?
  • Timing Functions
  • Test Your Skills
  • Closing Thoughts

What Is Animation?

Animation is all about breathing life into your web page. It can be anything from a simple button hover to a more complex customized menu slide – an animation serves a primary purpose in making your application readable, user friendly, and overall… FUN! Animations work to engage your users in a tangible way, meanwhile drawing attention and focus.

The two most commonly used CSS (Cascading Style Sheets) for animation are:

  1. Transitions

Transitions are the simplest way to animate a DOM (Document Object Model) element – or in other words, the determined page contents and its associated elements. They allow you to make a smooth consistent change to page elements over a specific duration of time. 

The primary components to a successful transition animation rule are:

  • transition-property

A transition-property will specifically denote what CSS element you’ll be specifically changing (examples include: color, opacity, etc.)

  • transition-duration

A transition-duration will specifically denote the allotted time the animation should take to complete before looping.

  • transition-delay

A transition-delay will specifically denote how long the animation should wait (in-between period) before looping the animation over again. 

  • transition-timing-function

A transition-timing-function will specifically denote how “fast” the visual animation should move on the web browser when a user engages with it. 

Example: The below transition code utilizes the property and duration formulas used to show that changes in opacity (transparency) should span a duration of two seconds before disappearing completely.

  1. @keyframes

For more complex animated changes over time, @keyframes, a specialized CSS rule, needs to be utilized. @keyframes allow a larger string of properties to be changed within a singular animated sequence. 

Example: The below @keyframes codes utilize the more complex from→to animation types (fadeout), as well as a percentage formula of exact color transitions throughout each animation duration point.

Once you’ve defined your @keyframes elements, you’ll be able to directly code them into your DOM, as shown below:

With both these animation formulas in mind, you’ll not only have a basic understanding of the coding associated but will also be able to implement either CSS code to execute the following tenets of animated web elements. 

What Are Time Functions? 

A time function controls the speed that your animation occurs at. The most commonly used value is, ease: which starts slow, accelerates in the middle, and slows again as the animation loop comes to an end. 

Some other examples include:

  • linear
  • ease-in, ease-out
  • step (int, start│end)
  • cubic-bezier (n,n,n,n)

Test Your Skills

You’ve unpacked quite a few animation principles – think you’re up to trying your hand at some practical animation exercises?

Alec McGovern has created an individual testing space just for you!

To rise to the challenge and apply what you’ve learned to the following animation exercise, click here. 

Closing Thoughts

All animations should always be designed with performance and the user experience in mind. The properties explored above are the primary stepping stones to experimenting with the basic components needed to test how animation can improve your personal web application. Be sure to explore, have fun, and match up the components that work best for your project!

Happy coding!

To learn more about the introduction of animation coding in web development and to experience Alec McGovern’s full Lightning Talk session, watch here.