Pass story parameters to fileNameFormatter

Author: oblador

docs/configuration.md

@@ -105,7 +105,7 @@ Since JSON doesn't support functions, you need to be using the `loki.config.js`
 ```js
 module.exports = {
   // ...other config goes here
-  fileNameFormatter: ({ configurationName, kind, story }) =>
+  fileNameFormatter: ({ configurationName, kind, story, parameters }) =>
     `${configurationName}/${kind} ${story}`.toLowerCase(),
 };
 ```

examples/react/src/stories/Decorators.stories.js

@@ -53,5 +53,5 @@ export const CustomChromeSelector = () => (
 );
 
 CustomChromeSelector.story = {
-  parameters: { loki: { chromeSelector: '#inner' } },
+  parameters: { loki: { chromeSelector: '#inner' }, nonLokiParam: 'test123' },
 };

packages/browser/src/get-stories.js

@@ -9,14 +9,28 @@ const getStories = (window) => {
       "Unable to get stories. Try adding `import 'loki/configure-react'` to your .storybook/preview.js file."
     );
   }
+  const blockedParams = [
+    'actions',
+    'argTypes',
+    'backgrounds',
+    'controls',
+    'docs',
+    'framework',
+    'storySource',
+  ];
+
   return getStorybook()
     .map((component) => ({
       id: component.id,
       kind: component.kind,
       story: component.story,
-      parameters: component.parameters.loki || {},
+      parameters: Object.fromEntries(
+        Object.entries(component.parameters || {}).filter(
+          ([key]) => !key.startsWith('__') && !blockedParams.includes(key)
+        )
+      ),
     }))
-    .filter(({ parameters }) => !parameters.skip);
+    .filter(({ parameters }) => !parameters.loki || !parameters.loki.skip);
 };
 
 module.exports = getStories;

packages/integration-react-native/src/configure-storybook-react-native.js

@@ -156,12 +156,18 @@ async function configureStorybook() {
   });
 
   on('getStories', () => {
-    const stories = storybook.map((component) => ({
-      id: component.id,
-      kind: component.kind,
-      story: component.story,
-      parameters: component.parameters.loki || {},
-    }));
+    const stories = storybook
+      .map((component) => ({
+        id: component.id,
+        kind: component.kind,
+        story: component.story,
+        parameters: Object.fromEntries(
+          Object.entries(component.parameters || {}).filter(
+            ([key]) => !key.startsWith('__')
+          )
+        ),
+      }))
+      .filter(({ parameters }) => !parameters.loki || !parameters.loki.skip);
     emit('setStories', { stories });
   });
 

packages/runner/src/commands/test/compare-screenshot.js

@@ -10,13 +10,15 @@ async function compareScreenshot(
   tolerance,
   configurationName,
   kind,
-  story
+  story,
+  parameters
 ) {
   const { outputPath, referencePath, diffPath } = getOutputPaths(
     options,
     configurationName,
     kind,
-    story
+    story,
+    parameters
   );
   const referenceExists = await fs.pathExists(referencePath);
   const shouldUpdateReference =

packages/runner/src/commands/test/compare-screenshot.spec.js

@@ -15,6 +15,7 @@ describe('compareScreenshot', () => {
   const kind = 'Kind';
   const story = 'Story';
   const filename = `${configurationName}_${kind}_${story}.png`;
+  const parameters = {};
 
   const executeWithOptions = (options) =>
     compareScreenshot(
@@ -23,7 +24,8 @@ describe('compareScreenshot', () => {
       tolerance,
       configurationName,
       kind,
-      story
+      story,
+      parameters
     );
 
   describe('reference image is missing', () => {

packages/runner/src/commands/test/create-baseline-limited-batch-builder.js

@@ -7,43 +7,45 @@ const FILL_RATE = 0.9;
 const DEFAULT_SIZE_LIMIT =
   FILL_RATE * (LAMBDA_PAYLOAD_LIMIT / BASE64_ENCODING_OVERHEAD);
 
-const createBaselineLimitedBatchBuilder =
-  (options, baselineSizeLimit = DEFAULT_SIZE_LIMIT) =>
-  (tasks, batchSize) => {
-    let currentBatch = [];
-    let accumulatedBatchSize = 0;
-    let lastFileSize = 200 * 1024;
-    const batches = [currentBatch];
-    for (let i = 0; i < tasks.length; i++) {
-      const task = tasks[i];
-      const { referencePath } = getOutputPaths(
-        options,
-        task.task.configurationName,
-        task.task.kind,
-        task.task.story
-      );
-      let size;
-      try {
-        const stat = fs.statSync(referencePath);
-        // eslint-disable-next-line prefer-destructuring
-        size = stat.size;
-        lastFileSize = size;
-      } catch (e) {
-        size = lastFileSize;
-      }
-      if (
-        currentBatch.length >= batchSize ||
-        (accumulatedBatchSize + size > baselineSizeLimit &&
-          currentBatch.length !== 0)
-      ) {
-        currentBatch = [];
-        accumulatedBatchSize = 0;
-        batches.push(currentBatch);
-      }
-      currentBatch.push(task);
-      accumulatedBatchSize += size;
+const createBaselineLimitedBatchBuilder = (
+  options,
+  baselineSizeLimit = DEFAULT_SIZE_LIMIT
+) => (tasks, batchSize) => {
+  let currentBatch = [];
+  let accumulatedBatchSize = 0;
+  let lastFileSize = 200 * 1024;
+  const batches = [currentBatch];
+  for (let i = 0; i < tasks.length; i++) {
+    const task = tasks[i];
+    const { referencePath } = getOutputPaths(
+      options,
+      task.task.configurationName,
+      task.task.kind,
+      task.task.story,
+      task.task.parameters
+    );
+    let size;
+    try {
+      const stat = fs.statSync(referencePath);
+      // eslint-disable-next-line prefer-destructuring
+      size = stat.size;
+      lastFileSize = size;
+    } catch (e) {
+      size = lastFileSize;
     }
-    return batches;
-  };
+    if (
+      currentBatch.length >= batchSize ||
+      (accumulatedBatchSize + size > baselineSizeLimit &&
+        currentBatch.length !== 0)
+    ) {
+      currentBatch = [];
+      accumulatedBatchSize = 0;
+      batches.push(currentBatch);
+    }
+    currentBatch.push(task);
+    accumulatedBatchSize += size;
+  }
+  return batches;
+};
 
 module.exports = createBaselineLimitedBatchBuilder;

packages/runner/src/commands/test/create-baseline-limited-batch-builder.spec.js

@@ -13,7 +13,8 @@ const mockFsWithTasks = (mockTasks) => {
       mockOptions,
       task.task.configurationName,
       task.task.kind,
-      task.task.story
+      task.task.story,
+      task.task.parameters
     );
     acc[referencePath] = task.size;
     return acc;
@@ -35,6 +36,7 @@ const generateTasks = (sizes) =>
       configurationName: 'configuration',
       kind: 'kind',
       story: `story ${i + 1}`,
+      parameters: {},
     },
   }));
 
@@ -54,7 +56,11 @@ describe('createBaselineLimitedBatchBuilder', () => {
     const tasks = generateTasks(new Array(10).fill(limit / 2));
     mockFsWithTasks(tasks);
     expectBatchLengths({ options, limit, tasks, batchSize }).toEqual([
-      2, 2, 2, 2, 2,
+      2,
+      2,
+      2,
+      2,
+      2,
     ]);
   });
 
@@ -77,7 +83,12 @@ describe('createBaselineLimitedBatchBuilder', () => {
     const tasks = generateTasks([1, 2, 3, 4, 5, 5, 4, 7, 8, 11]);
     mockFsWithTasks(tasks);
     expectBatchLengths({ options, limit, tasks, batchSize }).toEqual([
-      4, 2, 1, 1, 1, 1,
+      4,
+      2,
+      1,
+      1,
+      1,
+      1,
     ]);
   });
 });

packages/runner/src/commands/test/get-output-paths.js

@@ -9,9 +9,9 @@ const SLUGIFY_OPTIONS = {
 const defaultFileNameFormatter = ({ configurationName, kind, story }) =>
   slugify(`${configurationName} ${kind} ${story}`, SLUGIFY_OPTIONS);
 
-function getOutputPaths(options, configurationName, kind, story) {
+function getOutputPaths(options, configurationName, kind, story, parameters) {
   const getBaseName = options.fileNameFormatter || defaultFileNameFormatter;
-  const basename = getBaseName({ configurationName, kind, story });
+  const basename = getBaseName({ configurationName, kind, story, parameters });
   const filename = `${basename}.png`;
   const outputPath = `${options.outputDir}/${filename}`;
   const referencePath = `${options.referenceDir}/${filename}`;

packages/runner/src/commands/test/test-batch.js

@@ -55,7 +55,8 @@ function testBatch(target, batch, options, tolerance) {
         tolerance,
         configurationName,
         kind,
-        story
+        story,
+        parameters
       );
     }
   );

packages/target-chrome-core/src/create-chrome-target.js

@@ -385,7 +385,7 @@ function createChromeTarget(
       tabOptions = Object.assign(tabOptions, presets[configuration.preset]);
     }
     const selector =
-      parameters.chromeSelector ||
+      (parameters.loki && parameters.loki.chromeSelector) ||
       configuration.chromeSelector ||
       options.chromeSelector;
     const url = getStoryUrl(storyId);