Confusion around slice mock files + mock regeneration

Hello Prismic team :wave:

My name is Vitor and I'm one of the front-end engineers at getcircuit.com. We are using Slice Machine to manage our website UI and so far the experience has been pretty good.

However, now that we have 20+ slices with a few variations each, things are starting to get a little chaotic.

To bring back some order -- and to leverage the fact that Slice Machine is Storybook-based -- we decided to use Chromatic as a UI diff tool. That way we can know very quickly if a certain layout broke or changed in ways it shouldn't.

Here's an example where I changed a slice's padding-top, you can see that Chromatic caught that difference on our slice.

However, there's a problem with slice mocks. They get regenerated whenever a slice is edited and that triggers false-positive diffs where only the mock has changed.

To prevent that I tried manually editing the slice stories manually but they also get regenerated on slice edit.

And to add to my confusion, mocks seem to come in three different files: .slicemachine/mock-config.json, .slicemachine/assets/slices/[MySlice]/mocks.json and the story file.

With all the being said, my question is: is there a way to completely disable automatic mock regeneration? Otherwise, I'll have to manually edit the slice stories to the mock I want and manually dismiss the regenerated changes every time I have to edit a slice.

1 Like

Hi Vitor,

Welcome to the community!

So this has been discussed before:

But to summarise there's no good way to use custom mocks or disable the automatic mock changes at the moment.

The team is aware of this feature request and I'm adding another mark here with your request.

If/when this behaviour ever changes, we will update you here.

The files you have above server these functions:
.slicemachine/mock-config.json - Settings to tell Slice Machine how to create the mock. These settings are changed in the Slice Machine UI.
.slicemachine/assets/slices/[MySlice]/mocks.json - The actual mock data.
The story file. - Settings to connect this data to Storybook.

Thanks.

1 Like