e-lado/client/app/components/composites/ListingCardPanel/ListingCardPanel.story.js

[](https://circleci.com/gh/sharetribe/sharetribe/tree/master) [](https://gemnasium.com/sharetribe/shar

import r from 'r-dom';
import { mount } from 'enzyme';
import Immutable from 'immutable';

import { storify } from '../../Styleguide/withProps';
import { toFixedNumber } from '../../../utils/numbers';
import ListingModel from '../../../models/ListingModel';
import { Distance, Money } from '../../../types/types';
import { Image, ListingImage, AvatarImage } from '../../../models/ImageModel';

import ListingCardPanel from '../ListingCardPanel/ListingCardPanel';
import ListingCard from '../ListingCard/ListingCard';

const LISTINGS_COUNT = 24;

const { storiesOf, specs, expect } = storybookFacade;
const containerStyle = { style: { background: 'white' } };


const listingCardTemplate = (title, perUnit, price, distance) => (
  r(ListingCard,
    {
      color: '#347F9D',
      listing: new ListingModel({
        id: 'lkjg84573874yjdf',
        title,
        images: new Immutable.List([new ListingImage({
          square: new Image({
            url: 'https://placehold.it/408x408',
          }),
          square2x: new Image({
            type: 'square2x',
            width: 816,
            height: 816,
            url: 'https://placehold.it/816x816',
          }),
        })]),
        listingURL: 'https://example.com/listing/342iu4',
        price: new Immutable.Map({
          ':money': new Money({
            fractionalAmount: price || toFixedNumber(Math.random() * 9999, 2), // eslint-disable-line no-magic-numbers
            currency: 'EUR',
          }),
          ':pricingUnit': new Immutable.Map({ en: (perUnit || 'day'), fi: 'päivä' }),
        }),
        distance: new Distance({
          value: distance || Math.random() * (20000) + 0.01, // eslint-disable-line no-magic-numbers
          unit: ':km',
        }),
        author: {
          familyName: 'family name',
          givenName: 'given name',
          description: 'product author',
          avatarImage: new AvatarImage({ thumb: new Image({ url: 'https://placehold.it/40x40' }) }),
          profileURL: `#profile${Math.random(10)}`, // eslint-disable-line no-magic-numbers
        },
      }),
    }
  )
);

const generateListings = (arrayLength) => {
  const titleDraft = 'Cisco SF300-48 SRW248G4-K9-NA 10/100 Managed Switch 48 Port';
  const titleDraftLength = titleDraft.length;
  const listings = new Array(arrayLength);

  for (let i = 0; i < arrayLength; i++) {
    const title = titleDraft.substring(0, Math.random() * titleDraftLength);
    listings[i] = listingCardTemplate(title);
  }

  return listings;
};


storiesOf('Search results')
  .add(`ListingCardPanel: ${LISTINGS_COUNT} items`, () => {
    const panel = r(ListingCardPanel, {}, generateListings(LISTINGS_COUNT));

    specs(() => describe('ListingCardPanel', () => {
      it(`Should display ${LISTINGS_COUNT} ListingCards`, () => {
        const mounted = mount(panel);
        expect(mounted.find('.ListingCard')).to.have.length(LISTINGS_COUNT);
      });
    }));

    return r(storify(panel, containerStyle));
  });