Putting TOAST UI Grid Together with Github Actions 🎬

What is Github Actions?

Github Actions was released at the end of last year and it is a tool that can help automate the entire development workflow within Github. This means that you can do code version control, review, test, build, distribute, and much more and manage everything on Github. Github Actions basically does what previous CI tools like Jenkins, Travis CI, or CircleCI have been doing to some degree, except on Github. Even in terms of supported languages, it currently supports Node.js, Python, Java, PHP, Ruby, C/C++, .Net, Android, and iOS, and the list is projected to continue to grow.

You can watch Github Actions do its thing live.

When Will the Action Occur?

Most of the times, an action occurs due to webhooks. Here, webhooks refer to events like a push or a pull request on Github, a comment on an issue, a new label, a change in milestones, and more. Furthermore, the users can not only use the webhooks provided by Github, but they can also use custom webhooks created by users.

on: repository_dispatch



Additionally, even if a user does not register to receive notifications a user will receive the results of the corresponding workflow in the registered email.

Building a TOAST UI Grid Workflow

TOAST UI Grid is an opensource that is developed and maintained by NHN’s FE Development Lab. Now let’s assume that the reader is the maintainer for TOAST UI Grid. Someone posted a PR. It could be an outside contributor or it could be someone from the lab. There are a few tests that must be done before a PR is merged onto the work branch including code review. To list a few, we must check that

Cannot be merged as the checks were not successful!

Building the Workflow

The tests were conducted under a personal repository with tui.grid forked.


Let’s test that the workflow works as planned. In order to do so, we have made two different workflows trigger two different errors as examples. First, I have made a pull request with a line of code that does not abide by the eslint rules.

A red squiggle appears

What unstabilities?

We tested the claim that the matrix can run parallel tests under different environments by testing using Cypress, but the tests all failed in different environments. There were some tests that stopped in the middle, and there were also tests that failed despite it being correct. (The problem seemed to be from running tests in parallel. When conducted individually, the tests pass, but at that point, there is not much to it.)

All of these tests should have passed.

Closing Remarks

FE Development Lab intends to introduce Github Actions to TOAST UI Grid, and intend to automate not only the aforementioned workflow, but much more 💪. Github Actions is already being used for many large opensource projects. The feedbacks are being addressed at a quick pace, and many CI companies and tools have been reworked to work with Github Actions. Currently, the TOAST UI components are using a local jenkins to handle workflow because of reasons like Selenium. At this point, other management issues are taking tolls. The author looks to Github Action with hope as more CI implemented in many private environments or Github enterprise environments are to be supported. (As the Using Github Actions as a Real Estate Notification demonstrates, it can be more than a CI when used well with a scheduler.)

JavaScript UI Library Open Source by http://ui.toast.com