Support slashes in fileNameFormatter

[kurttomlinson]

I'm attempting to put my screenshots in a non-flat file structure. I've added a fileNameFormatter to my loki configuration. It works great when running loki update.

However, if I make a change to a component and then run loki test, I get an ENOENT: no such file or directory error:

 FAIL  chrome.docker/chrome.laptop/templates/LocationServiceTemplate/RelatedLinks
       Base
       ENOENT: no such file or directory, open '/Users/ktomlinson/src/v3/packages/marketing-pages/.loki/difference/chrome.laptop/templates/locationservicetemplate/relatedlinks base.png'

I'm guessing that Loki is not creating the directory that the difference file is going to go into before attempting to create the file. This can probably be fixed by adding a mkdir -p right before writing the difference file to disk.

Here's my Loki configuration file. Note I'm using the exact fileNameFormatter function that's used as an example in the documentation.

// loki.config.js

function fileNameFormatter({ configurationName, kind, story }) {
  return `${configurationName}/${kind} ${story}`.toLowerCase();
}

module.exports = {
  fileNameFormatter,
  diffingEngine: "looks-same",
  "looks-same": {
    tolerance: 3,
  },
  configurations: {
    "chrome.laptop": {
      target: "chrome.docker",
      width: 1366,
      height: 768,
      deviceScaleFactor: 1,
      mobile: false,
    },
    "chrome.ipad": {
      target: "chrome.docker",
      width: 768,
      height: 1024,
      deviceScaleFactor: 2,
      mobile: true,
    },
    "chrome.iphone5": {
      target: "chrome.docker",
      preset: "iPhone 5",
    },
  },
};

[techeverri]

Duplicate of #229