Unit testing themes

jfonte
New Member
2 0 2

Hi everyone. I'm new to Shopify and was wondering if there's an easy way to get started implementing some kind of unit tests on themes. I want to make sure my designers are not breaking stuff when they implement new features. Any insights would be super mega appreciated! CHEERS!

Replies 10 (10)
Paul_B1
Shopify Staff
44 0 4

Hello! Paul here, from the Guru team.

With Shopify you can have many themes on your store and of course only one is published/live at a time, so you can work on these other themes to test things out before putting them live. This way you don't risk any damage from playing around with the theme and its code. If you head over to Online Store > Themes in your admin, you will see "..." at the top right of your theme. Click that and select "Duplicate". This will give you a copy of your theme that can be worked on in the background. I would recommend creating duplicates for anything you want to test out!

Cheers,
Paul,
Shopify Guru

JackTheMac
New Member
1 0 3

It does not answer the question of unit testing.

Is there any tool at Shopify that can run unit tests against liquid files?

I mean some kind of mruby env for evaluating liquid tests.

nathanp
Excursionist
21 0 12

Yes, where is the unit test. At the moment it appears testing is done through clicking all the buttons manually and hoping you didn't miss anything.... which seams craaaaaaaazy!

 

Has anyone successfully built a test framework, in any language (desperate here) that they might be willing to share?

PaulNewton
Shopify Partner
3499 234 684

Any solution is unique as unfortunately there is no test suite for shopify's flavor of liquid.

It's difficult since it doesn't have an ast ,or really even a formal grammar, or even source maps at this time.

Also Shopify liquid core doesn't have parity with what you'd get from using the open source version of liquid or others flavors like jekyll.

 

There's also using {% layout 'none' %}, the view parameter for alternate templates, and proxy apps which let you send liquid to shopify to be rendered.

Theme asset api https://help.shopify.com/en/api/reference/online-store/theme

After that is would be trying to repurpose what's out there for unit testing jekyll or visual regression testing

 

 

Related  Integration Testing for Themes (Shopify Unite Track Session 2019)

What important thing did you learn this Black Friday?


Answers powered by coffee Buy Paul a ☕ Coffee for more answers or donate to eff.org

Problem Solved? ✔Accept and Like solutions to help future merchants

Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
nathanp
Excursionist
21 0 12

BackstopJS filled some gaps for me, plus Mocha/Chai for unit testing scripts. In case anyone is interested, running BackstopJS locally wasn't too painful

 

# Install BackstopJS

```
nvm install 8 --lts
npm install -g backstop 
cd mySite.com--shopify
```

`backstop.json` should already be in the root of the repo

## Generate reference images

**backstop.json**

**referenceUrl** - The URL used to fetch reference images. For example:

`"referenceUrl": "https://mysite.com/pages/shipping-info",`

**URL** - URL used for testing against the references. For example:

`"url": "https://localhost:3000/pages/shipping-info/?preview_theme_id=xxxxxxxxxxx",`


Update your reference images before feature development with:

`backstop reference --config=backstop.json`

Run test against slate preview before creating pull request:

`backstop test --config=backstop.json`

When development is complete, override the reference images with:

`backstop approve --config=backstop.json`

The result is image diffs showing you exactly what's different between for example a preview and prod.backstopjs_new_ui_

 

 

 

What would be of immense value to theme developers would be if Shopify hosted something like BackstopJS-aaS. It would need to accepted a GitHub/Lab message as its trigger, and permit the BackstopJS pass/fail to acts as a go/no-go action before publishing a theme.... 

 

PaulNewton
Shopify Partner
3499 234 684

@nathanp wrote:

What would be of immense value to theme developers would be if Shopify hosted something like BackstopJS-aaS. It would need to accepted a GitHub/Lab message as its trigger, and permit the BackstopJS pass/fail to acts as a go/no-go action before publishing a theme.... 


A built in testing suite that would need that an approval system is unlikely to happen as a general feature.

 

The theme api is the solution for this, if themes need automated approval for publishing just removing staffs access permission for themes is the way to go.

After that the value feature would be a middle ground by having the ability to place a redirect to a custom dashboard when /admin/themes is accessed.

 

A system for theme approval|locks|checkins etc is not likely to happen as general feature, they tried that for awhile with theme the cli tools for awhile and ended up having to remove it. Though there is an upcoming drafts feature but that really applies to content via the visual editor and not sure if approval-process is on that features roadmap.

 

 

 

 

What important thing did you learn this Black Friday?


Answers powered by coffee Buy Paul a ☕ Coffee for more answers or donate to eff.org

Problem Solved? ✔Accept and Like solutions to help future merchants

Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
ygerasimov
New Member
1 0 0

Founder of Diffy here. What we can do is to allow you to take screenshots of your main theme and then compare it to your custom theme /?preview_theme_id=XXXX. Then you will see exactly what changes are coming once you get your new theme live. What do you think about such idea?

Katkom
New Member
2 0 2

It does not answer the question about unit testing. OP needs a solution for unit testing, not version control or diff checking.

I would be interested too, will check out the other posters' suggestions. 

Katkom
New Member
2 0 2

I wonder if a browser automation tool like selenium or cypress.io is the way forward  here. 

I can see two challenges with this approach though, both caused by the fact that Shopify will (rightly) assume it is dealing with a bot:

you'll hit the request limit

- you'll be shown a captcha when testing functionalities that require login

Apparently when you’re on a Shopify Plus plan then the captcha challenge can be switched off for your development store by Shopify Plus support. Not sure about the request limit part though.