React Native Storybook Commands

Author: danielantelo

.editorconfig

@@ -0,0 +1,18 @@
+# This file allows IDEs to automatically adjust spacing
+# In order to take advantage of this file, please use an .editorconfig plugin for your IDE
+# editorconfig.org
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[Makefile*]
+indent_size = 4
+indent_style = tab

.gitignore

@@ -0,0 +1 @@
+node_modules

README.md

@@ -0,0 +1,58 @@
+# Cypress Storybook Commands
+
+This package registers a set of cypress commands that will allow you to test components in storybook visually and functionally.
+
+## Usage
+
+In your `cypress/support/commands.js` add the following:
+
+```
+import addStoryBookCommands from 'cypress-storybook-commands';
+
+addStoryBookCommands({
+  platform: 'web', // set to native if using storybook-native
+  viewportPresets: { // see https://docs.cypress.io/api/commands/viewport.html#Arguments
+    mobile: 'iphone-6',
+    tablet: 'ipad-2',
+    laptop: 'macbook-15',
+    desktop: [1920, 1080]
+  },
+  registerSnapshotCommands: true // set to false if you already include cypress-image-snapshot/command in your setup
+})
+
+```
+
+Note: update platform accordingly for the type of storybook you are using, default is web.
+
+### Visual regression tests
+
+In your test file e.g. `cypress/tests/components/visual-regression.js` you can simply:
+
+```
+context('Components', () => {
+  it('render components as expected', () => {
+    cy.visit('/')
+      .runStorybookVisualRegression();
+  });
+});
+```
+
+### Functional tests
+
+In your test file e.g. `cypress/tests/components/accordion.js` you can load the story to carry out functional testing as follows:
+
+```
+context('Components: Accordion', () => {
+  beforeEach(() => {
+    cy.visit('/')
+      .loadStory('Accordion.default')
+  });
+
+  it('toggles content as expected', () => {
+    cy.get('div[data-testid="tab"]').click()
+    ... etc ...
+  });
+});
+```
+
+Note: `Accordion.default` is the testID set in the navigator for that story via the `data-testid` attribute.

package.json

@@ -0,0 +1,11 @@
+{
+  "name": "cypress-storybook-commands",
+  "version": "0.1.2",
+  "description": "Commands to help navigate storybook in Cypress for functional and visual component level testing",
+  "main": "src/index.js",
+  "author": "Daniel Antelo",
+  "peerDependencies": {
+    "cypress": "^3.0.0",
+    "cypress-image-snapshot": "^3.1.1"
+  }
+}

src/index.js

@@ -0,0 +1,20 @@
+const addStoryBookWebCommands = require('./storybook');
+const addStoryBookNativeCommands = require('./storybook-native');
+const addVisualSnapshotCommands = require('./visual');
+
+module.exports = function addStoryBookCommands({
+  platform = 'web',
+  viewportPresets,
+  registerSnapshotCommands = true
+}) {
+  addVisualSnapshotCommands({ viewportPresets, registerSnapshotCommands });
+
+  switch (platform) {
+    case 'web':
+      addStoryBookWebCommands();
+      break;
+    case 'native':
+      addStoryBookNativeCommands();
+      break;
+  }
+};

src/storybook-native.js

@@ -0,0 +1,34 @@
+module.exports = function addStoryBookNativeCommands() {
+  Cypress.Commands.add('openStorybookNavigator', () => {
+    return cy.get('.css-text-901oao').contains('NAVIGATOR').click();
+  });
+
+  Cypress.Commands.add('openStorybookPreview', () => {
+    return cy.get('.css-text-901oao').contains('PREVIEW').click();
+  });
+
+  Cypress.Commands.add('getStories', () => {
+    return cy.get('[data-testid="Storybook.ListView"] [data-testid]');
+  });
+
+  Cypress.Commands.add('loadStory', (story) => {
+    return cy
+      .openStorybookNavigator()
+      .get(story)
+      .scrollIntoView()
+      .click()
+      .openStorybookPreview()
+      .wait(100) // wait for animation to finish;
+  });
+
+  Cypress.Commands.add('runStorybookVisualRegression', () => {
+    return cy
+      .openStorybookNavigator()
+      .getStories()
+      .each((story) => {
+        cy
+          .loadStory(story)
+          .matchesBaselineScreenshot(story.attr('data-testid'));
+      });
+  });
+}

src/storybook.js

@@ -0,0 +1,19 @@
+module.exports = function addStoryBookWebCommands() {
+  Cypress.Commands.add('getStories', () => {
+
+  });
+
+  Cypress.Commands.add('loadStory', (story) => {
+
+  });
+
+  Cypress.Commands.add('runStorybookVisualRegression', () => {
+    return cy
+      .getStories()
+      .each((story) => {
+        cy
+          .loadStory(story)
+          .matchesBaselineScreenshot(story.attr('data-testid'));
+      });
+  });
+}

src/visual.js

@@ -0,0 +1,29 @@
+const defaultViewportPresets = {
+  mobile: 'iphone-6',
+  tablet: 'ipad-2',
+  desktop: 'macbook-15'
+};
+
+module.exports = function addVisualSnapshotCommands({ viewportPresets = defaultViewportPresets, registerSnapshotCommands }) {
+  if (registerSnapshotCommands) {
+    const addMatchImageSnapshotCommand = require('cypress-image-snapshot/command').addMatchImageSnapshotCommand;
+    registerSnapshotCommands && addMatchImageSnapshotCommand({
+      failureThreshold: 0.03,
+      failureThresholdType: 'percent',
+      customDiffConfig: { threshold: 0.1 },
+      customDiffDir: 'cypress/__visual_diff_errors__'
+    });
+  };
+
+  Cypress.Commands.add('matchesBaselineScreenshot', (name, { selector = 'body' } = {}) => {
+    Object.keys(viewportPresets).forEach((current) => {
+      const viewport = viewportPresets[current];
+      cy.viewport(...(Array.isArray(viewport) ? viewport : [viewport]))
+        .wait(250) // avoid capturing resize flickers
+        .get(selector)
+        .then(() => {
+          cy.matchImageSnapshot(`${name}-${current}`);
+        });
+    });
+  });
+};