Skip to main content
18 February 2020

Visual Testing of Patternlab and Drupal

What is Patternlab?

 

Patternlab is a UI design system that helps to build and maintain websites. The biggest advantage of using such a system is that it fills the gap between developers and creates a universal library of components that everyone uses.

In other words, instead of every developer builds their pages the way they like there is a centralized library where they either take elements or contribute to it and then use them.

Patternlab provides a framework for building components. They are:

  • Atoms (example: lists, form elements, tables)
  • Molecules (example: cards, menus)
  • Organisms (example: card grids, accordion)
  • Templates (example: two-column layout, full-width layout)
  • Pages (example: homepage, blog listing page)

 

Drupal integrations

 

Because both Patternlab and Drupal 8 can use twig as a rendering engine it is possible to build a theme to be based on Patternlab’s components.

The most notable projects in Drupal are Emulsify (https://github.com/fourkitchens/emulsify) by Four Kitchens and Bear Skin by Zivtech (https://github.com/zivtech/bear_skin/tree/8.x-2.x).

The way integration works is that in Drupal templates there are includes of Patternlab’s templates. This makes all development happen in Patternlab’s library and then the theme simply includes proper templates in proper places.

Example https://github.com/fourkitchens/emulsify/blob/develop/templates/navigation/breadcrumb.html.twig.

 

 

Visual Regression Testing

 

It makes it very easy to apply visual regression testing to Patternlab’s demo site.

For example, you can do it with BackstopJS and commit screenshots to the repository itself.

Also, we made it easy to be done with Diffy -- you simply need to provide a URL of the static site and Diffy’s crawler will get pages based on the JSON available to the static site’s generator. We pull:

  • Page with all atoms
  • Pages with all molecules, organisms, templates, and pages

Scanning Patternlab Demo Site

 

In this way, in just a few minutes you will have a full visual snapshot of your components. So whenever you make any changes it is easy to see if any regressions were introduced.

 

Everything You Need To Know About Performance Testing and Its Types

The software testing process does not end with the segregation of functional and non-functional types. Therefore, to develop a thorough understanding of the SDLC, you need to dig deeper. One of the non-functional testing types is performance testing and this type is further segregated into 4 types.

4 min read

A Brief Guide to Functional Testing, Types & Examples

Apart from being an integral part of the SDLC, functional testing is defined as testing a software system's ability to meet the functional requirements of an end-to-end solution. New to the world of functional testing? You have come to the right place!

7 min read

The Complete Compatibility Testing Guide | Tools, Types & Examples

As technology advances faster than ever, software development needs aren't focused on a single platform anymore. Today, each software is developed with the aim to run cross-platform. This is where the need for compatibility testing comes into play.

For the vast majority of software types, you have to test your website’s/application’s compatibility to run on a wide range of devices. How do you do that? How can you make sure that your users can move seamlessly across devices without their experience being hampered in any way?

5 min read

Diffy helps your QA team

to ensure that websites don't get visual bugs