GitHub is a place to make a better code. It is a community platform that works together to create better code faster. We, Visual Composer team, also use GitHub. It helps us in the process of making and refining our product code smarter, neater and faster.
GitHub users can host and review code, manage various projects and build software together with thousands of developers. It is also great for developer teams. Using the capabilities of GitHub, teams can review processes to improve product code quality.
Before I go into these processes (and share some cool links with you at the end of the post), let me tell you more about Visual Composer.
About Visual Composer
Visual Composer Website Builder is a GPL licensed WordPress plugin. What does it mean? GPL is a WordPress licensing model for an open-source - a free license software that allows end-users to study, run, share, and modify the software.
Open source requires attention to how other contributors develop the product and how to test what they add or update. This process is called “Continuous Integration” (CI), which requires a wide range of different types of tests.
Continuous Integration is a good way to keep your product in shape. That is the main reason we practice it for Visual Composer.
Today I want to share with you how we integrated Continuous Integration practice in our developers' environment.
What Is Continuous Integration?
Continuous Integration is a development practice that allows you to test every code changes in an automotive way. All code must pass tests pipeline every time you add or update your code. Tests pipeline is a list of jobs that is split into the stages.
At Visual Composer, we have two stages: code style, and test. They work in a special environment, in our case, based on docker images that use tools to complete the tasks. Most of these tasks are checks and tests.
First Stage: Code Style
Here is an explanation of these code styles:
PHP code style is checked with the help of the PHP_CodeSniffer tool. We support the PSR-2 coding standard with some custom settings for our plugin.
There is also CSS/HTML code. We test it with the help of end-to-end testing which I will describe later in this article.
Second Stage: Code Tests
PHP Unit Tests
First, let's start with PHP unit tests. At Visual Composer, we use PHPUnit test 8.0.0. We make sure to use the latest versions of tools and libraries in our product. Unit testing is a quite popular way to test classes, functions and other parts of the codebase. In order to make it work, we need to create a full WordPress environment. All types of tests require some specific setup of the environment which is closer to real life.
Then we follow with the end-to-end testing. This type of test totally replicates the behavior of the real user with the help of automated scenarios. The tests show how users are using our product form the very beginning. From the WordPress authorization, plugin activation in the Dashboard to switching between different pages on a real website.
In our case, it is a real WordPress website. With the help of handy tools, we can check every step of this “fake” user. It is not hard to write these steps but it can be quite challenging to set up the environment.
Let me explain to you more about the environment.
As I already mentioned, we need several tools for running tests. Next, I will describe when and how we integrate our tests.
Tools, Services, And Integration
Behind any practice and workflow, there are always tools. Let’s talk about them. But before that, let me tell you how tasks are created, developed and tested within all these parts of Continuous Integration.
Tasks For Developers
It is important to keep track of how the code is born. Developers at Visual Composer is a Scrum team, which means that we have boards, epics, user stories, and tasks. Before coding, we discuss and plan our work. We take user stories, one of us creates a branch in the own forked copy of the project and starts to work with the user story (and related tasks to a specific user story). In order to be finished, the task must pass QA (quality assurance) and QC (quality control). This part of testing is made by a contributor and a team from the testing department.
At Visual Composer, we use Github as a repository and are practicing the Forking workflow. It means that every collaborator should work with own repository which is forked from the main repository. Changes will be applied through so-called pull requests. Every pull request must pass the Continuous Integration pipeline. If the pull request hasn't passed the pipeline, the code can’t be merged into the master repository.
End-To-End Testing Service
Cypress is one of the leading services chosen by many open-source projects. Visual Composer is one of them. Writing end-to-end tests is a quite simple task. Yes, it requires some time for setting up the environment but once done, you can uncover very interesting cases. Plus, its community is highly supportive.
Continuous Integration (CI)
As you can see, for developing Visual Composer, we cover it from different sides and aspects. This means that we need a service/place where we can run all the tasks. Previously we were using gitlab.com service. It was quite good but being a FOSS product we decided to move to GitHub.
We then took the rule that if something is broken on the pipeline it should be fixed ASAP (10 minutes). Also, every code changes should pass the Continuous Integration pipeline, meaning that all tests must be green. One thing we learned and giving you advice is to push your code to Github at least once a day. It is a good practice for every company that integrates Continuous Integration. Here you can learn more about Continuous Integration.
Is it enough? Of course not. Updating Continuous Integration processes is one of the topics that always exists in our minds. At Visual Composer, we keep the pace to automate the process as much as it is possible. But with one rule, never forgetting about the developers, as they are the gold of every SaaS company. That is why we are focused on what we really need, instead of what is popular. Automation is just a helping hand for human minds.
Have anything to add to my story? Leave a comment and let's have a discussion.
In addition, I would like to share with you some of the resources you could find useful.