attributes-kit/test/fixturesComparision.js

React component for MSON rendering

import React from 'react';
import ReactDomServer from 'react-dom/server';
import msonZoo from 'mson-zoo';
import jsBeautify from 'js-beautify';
import fs from 'fs';
import path from 'path';
import assert from 'assert';
import { Namespace } from 'api-elements';
import pipe from 'lodash/fp/pipe';

import parseMson from '../playground/parseMson';
import { Attributes } from '../dist/attributes-kit-server';

describe('Comparision with reference fixtures', () => {
  /**
   *  Formats the style CSS attribute properties and sorts them for stable comparison
   *
   *  converts this:
   *    `<div style="width:100%;height:auto;display:flex;flex-direction:row;">`
   *
   *  into:
   *    `<div style="
   *     display:flex
   *     flex-direction: row
   *     height:auto
   *     width:100%
   *     ">`
   */
  const formatStyle = html => html.replace(
    /style\=\"([^\"]+)\"/g,
    (m, s) => `style="\n${s.split(';').sort().filter(s => s.length).join('\n')}\n"`);

  const jsBeautifyOptions = {
    indent_size: 0,
    eol: '',
    preserve_newlines: false,
  };
  const fpJsBeautify = options => data => jsBeautify.html(data, options);
  const formatCanonical = pipe(
    fpJsBeautify(jsBeautifyOptions),
    formatStyle
  );

  msonZoo.samples.forEach((sample) => {
    let renderedElement = null;
    let htmlString = null;

    describe(`If I render ${sample.fileName} on the server`, (done) => {
      const header = '# Data Structures';

      parseMson(`${header}\n${sample.fileContent}`, (err, dataStructureElements) => {
        if (err) {
          return done(err);
        }

        // to minim
        const minimNamespace = new Namespace();
        dataStructureElements = minimNamespace.fromRefract(dataStructureElements);

        renderedElement = React.createElement(Attributes, {
          element: dataStructureElements.first,
          dataStructures: dataStructureElements,
          collapseByDefault: false,
          maxInheritanceDepth: undefined,
          includedProperties: 'show',
          inheritedProperties: 'show',
        });

        htmlString = ReactDomServer.renderToStaticMarkup(renderedElement);
      });

      describe('And I compare that with the reference fixture', () => {
        const reference = fs.readFileSync(
          path.join('./fixtures', `${sample.fileName}`),
          'utf8'
        );

        it('They should be equal', () => {
          assert.equal(formatCanonical(htmlString), formatCanonical(reference));
        });
      });
    });
  });
});