Recently I was writing Cypress tests for media query functionality that we have in the Webflow. One of the features that I wanted to cover was disabling or enabling animations on different media queries.
Currently, there are four possible media queries in Webflow: Desktop, Tablet, Phone Landscape, and Phone Portrait.
What I wanted was to cover all 16 possible combinations of these options being enabled or disabled. For every media query, options can be presented by boolean values, so all possible options for one media query can be represented by the array
Brute-force solution to iterate through all possible option may be creating four cycles inside which perform needed actions:
Calculate all possible combinations of the options for all possible media queries is calculating cartesian product so we can use next one formula:
So to iterate through all possible options combinations, we need to do the following:
Using the cartesian product not only allowed making code more elegant but also easier to scale, if, for example, we would need to add more media queries to account for.