@jetbrains/ring-ui 4.1.6 → 5.0.0-beta.3

package/components/list/list__item.test.js

@@ -1,60 +0,0 @@
-import React from 'react';
-import {shallow, mount} from 'enzyme';
-
-import Icon from '../icon/icon';
-import Checkbox from '../checkbox/checkbox';
-
-import ListItem from './list__item';
-
-
-describe('ListItem', () => {
-  const shallowListItem = props => shallow(<ListItem {...props}/>);
-  const mountListItem = props => mount(<ListItem {...props}/>);
-
-
-  it('should create component', () => {
-    mountListItem().should.have.type(ListItem);
-  });
-
-
-  it('should use passed className', () => {
-    shallowListItem({className: 'test-class'}).find('button').should.
-      have.className('test-class');
-  });
-
-
-  it('should add data test attributes', () => {
-    shallowListItem().should.
-      match('div[data-test="ring-list-item ring-list-item-action"]');
-  });
-
-
-  it('should remove ring-list-item-action data-test attribute if item is disabled', () => {
-    shallowListItem({disabled: true}).should.
-      match('div[data-test="ring-list-item"]');
-  });
-
-
-  it('should add data-test attribute if item is selected', () => {
-    shallowListItem({checkbox: false}).should.
-      match('div[data-test="ring-list-item ring-list-item-action"]');
-
-    shallowListItem({checkbox: true}).should.
-      match('div[data-test="ring-list-item ring-list-item-action ring-list-item-selected"]');
-  });
-
-
-  it('should render checkbox icon', () => {
-    shallowListItem({checkbox: true}).
-      find(Checkbox).prop('checked').should.be.true;
-
-    shallowListItem({checkbox: undefined}).
-      find(Checkbox).length.should.equal(0);
-  });
-
-
-  it('should not render check mark icon', () => {
-    shallowListItem().should.not.
-      containMatchingElement(<Icon/>);
-  });
-});

package/components/list/list__users-groups-source.test.js

@@ -1,125 +0,0 @@
-/* eslint-disable no-magic-numbers */
-import ListUsersGroupsSource from './list__users-groups-source';
-
-describe('List Users Groups Source', () => {
-  let fakeAuth;
-  beforeEach(() => {
-    fakeAuth = {
-      requestToken: sandbox.stub().returns(Promise.resolve('testToken'))
-    };
-  });
-
-  it('Should convert users to list model', async () => {
-    const source = new ListUsersGroupsSource(fakeAuth);
-
-    sandbox.stub(source, 'getUsers').returns(Promise.resolve([{
-      id: 1,
-      name: 'test user',
-      login: 'testUser',
-      type: 'user',
-      profile: {avatar: {url: 'http://test.com.url'}}
-    }]));
-
-    sandbox.stub(source, 'getGroups').returns(Promise.resolve([{
-      id: 1,
-      name: 'test group',
-      type: 'userGroup',
-      userCount: 123,
-      iconUrl: 'http://foo.bar'
-    }]));
-
-    const dataForList = await source.getForList();
-    dataForList.should.deep.contain({
-      id: 1,
-      login: 'testUser',
-      profile: {avatar: {url: 'http://test.com.url'}},
-      name: 'test user',
-      key: 1,
-      type: 'user',
-      label: 'test user',
-      description: 'testUser',
-      avatar: 'http://test.com.url'
-    });
-
-  });
-
-  it('Should convert usergroups to list model', async () => {
-    const source = new ListUsersGroupsSource(fakeAuth);
-
-    sandbox.stub(source, 'getUsers').returns(Promise.resolve([{
-      id: 1,
-      name: 'test user',
-      profile: {avatar: {url: 'http://test.com.url'}}
-    }]));
-
-    sandbox.stub(source, 'getGroups').returns(Promise.resolve([{
-      id: 1,
-      name: 'test group',
-      type: 'userGroup',
-      userCount: 123,
-      iconUrl: 'http://foo.bar'
-    }]));
-
-    const dataForList = await source.getForList();
-    dataForList.should.deep.contain({
-      id: 1,
-      key: 1,
-      name: 'test group',
-      label: 'test group',
-      type: 'userGroup',
-      description: '123 members',
-      userCount: 123,
-      avatar: 'http://foo.bar',
-      glyph: null,
-      iconUrl: 'http://foo.bar'
-    });
-  });
-
-  it('Should support userCount plural formatter', async () => {
-    const source = new ListUsersGroupsSource(fakeAuth, {
-      getPluralForUserCount: count => `${count} text`
-    });
-
-    sandbox.stub(source, 'getUsers').returns(Promise.resolve([{
-      id: 1,
-      name: 'test user',
-      profile: {avatar: {url: 'http://test.com.url'}}
-    }]));
-
-    sandbox.stub(source, 'getGroups').returns(Promise.resolve([{
-      id: 1,
-      name: 'test group',
-      userCount: 123
-    }]));
-
-    const dataForList = await source.getForList();
-    dataForList[3].description.should.equal('123 text');
-  });
-
-  it('Should display "No users" title if no users found', async () => {
-    const source = new ListUsersGroupsSource(fakeAuth, {});
-
-    sandbox.stub(source, 'getUsers').returns(Promise.resolve([]));
-
-    sandbox.stub(source, 'getGroups').
-      returns(Promise.resolve([{id: 1, name: 'test group'}]));
-
-    const dataForList = await source.getForList();
-    dataForList[0].description.should.equal('No users');
-  });
-
-  it('Should display "No groups" title if no groups found', async () => {
-    const source = new ListUsersGroupsSource(fakeAuth, {});
-
-    sandbox.stub(source, 'getUsers').returns(Promise.resolve([{
-      id: 1,
-      name: 'test user',
-      profile: {avatar: {url: 'http://test.com.url'}}
-    }]));
-
-    sandbox.stub(source, 'getGroups').returns(Promise.resolve([]));
-
-    const dataForList = await source.getForList();
-    dataForList[2].description.should.equal('No groups');
-  });
-});

package/components/loader/loader.examples.js

@@ -1,22 +0,0 @@
-import React from 'react';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import Loader from '@jetbrains/ring-ui/components/loader/loader';
-
-export default {
-  title: 'Components/Loader',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    component: Loader,
-    framework: 'react',
-
-    hermione: {skip: true}
-  }
-};
-
-export const basic = args => <Loader {...args}/>;
-
-basic.storyName = 'Loader';
-basic.args = {message: 'Loading...'};

package/components/loader/loader__core.test.js

@@ -1,232 +0,0 @@
-/* eslint-disable no-magic-numbers */
-
-import LoaderCore from './loader__core';
-
-describe('Loader', () => {
-  function noop() {}
-
-  let createLoader;
-  let loaderContainer;
-  let loader;
-
-  beforeEach(() => {
-    sandbox.stub(LoaderCore.prototype, 'loop').callsFake(() => {});
-
-    createLoader = props => {
-      loaderContainer = document.createElement('div');
-      loader = new LoaderCore(loaderContainer, props);
-    };
-
-    createLoader({});
-  });
-
-  afterEach(() => loader.destroy());
-
-  it('Should calculate gradient', () => {
-    const middleColor = LoaderCore.calculateGradient(
-      {r: 0, g: 0, b: 0},
-      {r: 255, g: 255, b: 255},
-      0.5
-    );
-    middleColor.should.deep.equal({r: 128, g: 128, b: 128});
-  });
-
-  it('Should do some initial steps to prepare tail for first render', () => {
-    loader.particles.length.should.be.at.least(90);
-  });
-
-  it('Should set canvas size from passed size', () => {
-    sandbox.stub(LoaderCore, 'getPixelRatio').returns(1);
-    createLoader({size: 42});
-
-    loader.canvas.height.should.equal(42);
-    loader.canvas.width.should.equal(42);
-  });
-
-  it('Should double canvas size on HDPI devices', () => {
-    sandbox.stub(LoaderCore, 'getPixelRatio').returns(2);
-    createLoader({size: 42});
-
-    loader.canvas.height.should.equal(84);
-    loader.canvas.width.should.equal(84);
-  });
-
-  it('Should fixate canvas CSS size with style to avoid scaling on HDPI devices', () => {
-    sandbox.stub(LoaderCore, 'getPixelRatio').returns(2);
-    createLoader({size: 42});
-
-    loader.canvas.style.height.should.equal('42px');
-    loader.canvas.style.width.should.equal('42px');
-  });
-
-  it('Should scale canvas on HDPI devices to make visible image size the same as on normal screens', () => {
-    sandbox.stub(LoaderCore, 'getPixelRatio').returns(2);
-    createLoader({size: 42});
-    sandbox.spy(loader.ctx, 'scale');
-
-    loader.setCanvasSize();
-
-    loader.ctx.scale.should.have.been.calledWith(2, 2);
-  });
-
-  it('Should scale canvas on zoomed out devices to avoid image cropping', () => {
-    sandbox.stub(LoaderCore, 'getPixelRatio').returns(0.5);
-    createLoader({size: 42});
-    sandbox.spy(loader.ctx, 'scale');
-
-    loader.setCanvasSize();
-
-    loader.ctx.scale.should.have.been.calledWith(0.5, 0.5);
-  });
-
-  it('Should start loop on constructing', () => {
-    loader.isRunning.should.be.true;
-  });
-
-  it('Should stop loop on destroy', () => {
-    loader.destroy();
-    loader.isRunning.should.be.false;
-  });
-
-  it('Should revert direction on reaching top limit', () => {
-    sandbox.stub(Math, 'random').returns(loader.baseSpeed / 2);
-
-    const oldSpeed = loader.baseSpeed;
-    const newSpeed = loader.handleLimits(95, 8, oldSpeed, 100);
-    newSpeed.should.equal(-loader.baseSpeed);
-  });
-
-  it('Should revert direction on reaching zero limit', () => {
-    sandbox.stub(Math, 'random').returns(loader.baseSpeed / 2);
-
-    const oldSpeed = -loader.baseSpeed;
-    const newSpeed = loader.handleLimits(0, 8, oldSpeed, 100);
-    newSpeed.should.equal(loader.baseSpeed);
-  });
-
-  it('Should update radius according to radius change speed', () => {
-    loader.radius = 4;
-    loader.radiusSpeed = 2;
-
-    loader.calculateNextRadius();
-
-    loader.radius.should.equal(6);
-  });
-
-  it('Should mirror radius change speed on reaching top limit', () => {
-    loader.radius = 4;
-    loader.maxRadius = 5;
-    loader.radiusSpeed = 2;
-
-    loader.calculateNextRadius();
-
-    loader.radiusSpeed.should.equal(-2);
-  });
-
-  it('Should mirror radius change speed on reaching low limit', () => {
-    loader.radius = 4;
-    loader.minRadius = 3;
-    loader.radiusSpeed = -2;
-
-    loader.calculateNextRadius();
-
-    loader.radiusSpeed.should.equal(2);
-  });
-
-  it('Should call next color calculation', () => {
-    sandbox.spy(LoaderCore, 'calculateGradient');
-    loader.colorIndex = 1;
-
-    loader.getNextColor();
-    LoaderCore.calculateGradient.should.have.been.calledWith(
-      loader.props.colors[1],
-      loader.props.colors[2],
-      sandbox.match(Number)
-    );
-  });
-
-  it('Should update tick', () => {
-    loader.tick = 1;
-    loader.nextTick();
-
-    loader.tick.should.equal(2);
-  });
-
-  it('Should reset tick and update color after reaching limit', () => {
-    loader.tick = loader.colorChangeTick;
-    loader.colorIndex = 1;
-    loader.nextTick();
-
-    loader.tick.should.equal(0);
-    loader.colorIndex.should.equal(2);
-  });
-
-  it('Should reset colorIndex to 0 if end is reached', () => {
-    loader.tick = loader.colorChangeTick;
-    loader.colorIndex = loader.props.colors.length - 1;
-    loader.nextTick();
-
-    loader.colorIndex.should.equal(0);
-  });
-
-  it('Should update tick on step', () => {
-    sandbox.spy(loader, 'nextTick');
-    loader.step();
-    loader.nextTick.should.have.been.called;
-  });
-
-  it('Should calculate new coordinates on step', () => {
-    sandbox.spy(loader, 'calculateNextCoordinates');
-    loader.step();
-    loader.calculateNextCoordinates.should.have.been.called;
-  });
-
-  it('Should calculate new radius on step', () => {
-    sandbox.spy(loader, 'calculateNextRadius');
-    loader.step();
-    loader.calculateNextRadius.should.have.been.called;
-  });
-
-  it('Should call step for each particle to allow it to update its live points', () => {
-    const stepSpy = sandbox.spy();
-    loader.particles = [{step: stepSpy, draw: noop, isAlive: () => true}];
-
-    loader.step();
-    stepSpy.should.have.been.called;
-  });
-
-  it('Should add particle on step', () => {
-    loader.particles = [];
-    loader.step();
-
-    loader.particles.length.should.equal(1);
-  });
-
-  it('Should remove dead particles', () => {
-    loader.particles = [
-      {isAlive: () => true, step: noop, draw: noop},
-      {isAlive: () => false, step: noop, draw: noop},
-      {isAlive: () => true, step: noop, draw: noop}
-    ];
-
-    loader.removeDeadParticles();
-
-    loader.particles.length.should.equal(2);
-  });
-
-  it('Should clear canvas before rendering new frame', () => {
-    sandbox.spy(loader.ctx, 'clearRect');
-
-    loader.draw();
-
-    loader.ctx.clearRect.should.have.been.called;
-  });
-
-  it('Should call draw for each particle', () => {
-    const drawSpy = sandbox.spy();
-    loader.particles = [{draw: drawSpy, isAlive: () => true, step: noop}];
-
-    loader.draw();
-    drawSpy.should.have.been.called;
-  });
-});

package/components/loader-inline/loader-inline.examples.js

@@ -1,106 +0,0 @@
-import React from 'react';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import LoaderInline from '@jetbrains/ring-ui/components/loader-inline/loader-inline';
-import injectStyles from '@jetbrains/ring-ui/components/loader-inline/inject-styles';
-
-export default {
-  title: 'Components/Inline Loader',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    notes:
-      'Displays a small animated loader, shown inline with text. Use case: contextual loading animation.'
-  }
-};
-
-export const basic = () => {
-  class Example extends React.Component {
-    render() {
-      return (
-        <div>
-          <span>some text on top</span>
-          <div>
-            before <LoaderInline/> Some text after
-          </div>
-          <div>some text under loader</div>
-        </div>
-      );
-    }
-  }
-
-  return <Example/>;
-};
-
-basic.storyName = 'basic';
-
-export const withChildren = () => {
-  class Example extends React.Component {
-    render() {
-      return <LoaderInline>Loading...</LoaderInline>;
-    }
-  }
-
-  return <Example/>;
-};
-
-withChildren.storyName = 'with children';
-
-export const onBlackBackground = () => {
-  class Example extends React.Component {
-    render() {
-      return (
-        <div style={{backgroundColor: 'black', color: '#ccc'}}>
-          <span>some text on top</span>
-          <div>
-            before <LoaderInline/> Some text after
-          </div>
-          <div>some text under loader</div>
-        </div>
-      );
-    }
-  }
-
-  return <Example/>;
-};
-
-onBlackBackground.storyName = 'on black background';
-
-export const onCustomBackground = () => {
-  class Example extends React.Component {
-    render() {
-      return (
-        <div style={{backgroundColor: '#E5F4FF'}}>
-          <span>some text on top</span>
-          <div>
-            before <LoaderInline/> Some text after
-          </div>
-          <div>some text under loader</div>
-        </div>
-      );
-    }
-  }
-
-  return <Example/>;
-};
-
-onCustomBackground.storyName = 'on custom background';
-
-export const withoutReact = () => {
-  class Example extends React.Component {
-    render() {
-      return (
-        <div>
-          <div className="ring-loader-inline"/>
-        </div>
-      );
-    }
-  }
-
-  injectStyles();
-
-  return <Example/>;
-};
-
-withoutReact.storyName = 'without React';

package/components/loader-inline/loader-inline.test.js

@@ -1,21 +0,0 @@
-import React from 'react';
-import {mount} from 'enzyme';
-
-import LoaderInline from './loader-inline';
-
-describe('Loader Inline', () => {
-  const mountLoaderInline = props => mount(<LoaderInline {...props}/>);
-  const getLoaderInlineDiv = props => mountLoaderInline(props).find('div');
-
-  it('should create component', () => {
-    mountLoaderInline().type().should.equal(LoaderInline.type);
-  });
-
-  it('should add custom class', () => {
-    const wrapper = getLoaderInlineDiv({
-      className: 'test'
-    });
-
-    wrapper.should.have.className('test');
-  });
-});

package/components/loader-screen/loader-screen.examples.js

@@ -1,40 +0,0 @@
-import React from 'react';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import LoaderScreen from '@jetbrains/ring-ui/components/loader-screen/loader-screen';
-
-export default {
-  title: 'Components/Loader Screen',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    notes:
-      'Displays a large animated loader with an optional caption. Typical use cases: page loading animation, major action animation.',
-    hermione: {skip: true}
-  }
-};
-
-export const basic = () => {
-  class Example extends React.Component {
-    render() {
-      return <LoaderScreen/>;
-    }
-  }
-
-  return <Example/>;
-};
-
-basic.storyName = 'basic';
-
-export const withMessage = () => {
-  class Example extends React.Component {
-    render() {
-      return <LoaderScreen message={'Some message'}/>;
-    }
-  }
-
-  return <Example/>;
-};
-
-withMessage.storyName = 'with message';