diff options
Diffstat (limited to 'app/javascript/themes/glitch/components/__tests__')
8 files changed, 379 insertions, 0 deletions
diff --git a/app/javascript/themes/glitch/components/__tests__/__snapshots__/avatar-test.js.snap b/app/javascript/themes/glitch/components/__tests__/__snapshots__/avatar-test.js.snap new file mode 100644 index 000000000..4005c860f --- /dev/null +++ b/app/javascript/themes/glitch/components/__tests__/__snapshots__/avatar-test.js.snap @@ -0,0 +1,35 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`<Avatar /> Autoplay renders a animated avatar 1`] = ` +<div + className="account__avatar" + data-avatar-of="@alice" + onMouseEnter={[Function]} + onMouseLeave={[Function]} + style={ + Object { + "backgroundImage": "url(/animated/alice.gif)", + "backgroundSize": "100px 100px", + "height": "100px", + "width": "100px", + } + } +/> +`; + +exports[`<Avatar /> Still renders a still avatar 1`] = ` +<div + className="account__avatar" + data-avatar-of="@alice" + onMouseEnter={[Function]} + onMouseLeave={[Function]} + style={ + Object { + "backgroundImage": "url(/static/alice.jpg)", + "backgroundSize": "100px 100px", + "height": "100px", + "width": "100px", + } + } +/> +`; diff --git a/app/javascript/themes/glitch/components/__tests__/__snapshots__/avatar_overlay-test.js.snap b/app/javascript/themes/glitch/components/__tests__/__snapshots__/avatar_overlay-test.js.snap new file mode 100644 index 000000000..d9e5e5252 --- /dev/null +++ b/app/javascript/themes/glitch/components/__tests__/__snapshots__/avatar_overlay-test.js.snap @@ -0,0 +1,26 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`<AvatarOverlay renders a overlay avatar 1`] = ` +<div + className="account__avatar-overlay" +> + <div + className="account__avatar-overlay-base" + data-avatar-of="@alice" + style={ + Object { + "backgroundImage": "url(/static/alice.jpg)", + } + } + /> + <div + className="account__avatar-overlay-overlay" + data-avatar-of="@eve@blackhat.lair" + style={ + Object { + "backgroundImage": "url(/static/eve.jpg)", + } + } + /> +</div> +`; diff --git a/app/javascript/themes/glitch/components/__tests__/__snapshots__/button-test.js.snap b/app/javascript/themes/glitch/components/__tests__/__snapshots__/button-test.js.snap new file mode 100644 index 000000000..707cbf673 --- /dev/null +++ b/app/javascript/themes/glitch/components/__tests__/__snapshots__/button-test.js.snap @@ -0,0 +1,130 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`<Button /> adds class "button-secondary" if props.secondary given 1`] = ` +<button + className="button button-secondary" + disabled={undefined} + onClick={[Function]} + style={ + Object { + "height": "36px", + "lineHeight": "36px", + "padding": "0 16px", + } + } +/> +`; + +exports[`<Button /> renders a button element 1`] = ` +<button + className="button" + disabled={undefined} + onClick={[Function]} + style={ + Object { + "height": "36px", + "lineHeight": "36px", + "padding": "0 16px", + } + } +/> +`; + +exports[`<Button /> renders a disabled attribute if props.disabled given 1`] = ` +<button + className="button" + disabled={true} + onClick={[Function]} + style={ + Object { + "height": "36px", + "lineHeight": "36px", + "padding": "0 16px", + } + } +/> +`; + +exports[`<Button /> renders class="button--block" if props.block given 1`] = ` +<button + className="button button--block" + disabled={undefined} + onClick={[Function]} + style={ + Object { + "height": "36px", + "lineHeight": "36px", + "padding": "0 16px", + } + } +/> +`; + +exports[`<Button /> renders the children 1`] = ` +<button + className="button" + disabled={undefined} + onClick={[Function]} + style={ + Object { + "height": "36px", + "lineHeight": "36px", + "padding": "0 16px", + } + } +> + <p> + children + </p> +</button> +`; + +exports[`<Button /> renders the given text 1`] = ` +<button + className="button" + disabled={undefined} + onClick={[Function]} + style={ + Object { + "height": "36px", + "lineHeight": "36px", + "padding": "0 16px", + } + } +> + foo +</button> +`; + +exports[`<Button /> renders the props.text instead of children 1`] = ` +<button + className="button" + disabled={undefined} + onClick={[Function]} + style={ + Object { + "height": "36px", + "lineHeight": "36px", + "padding": "0 16px", + } + } +> + foo +</button> +`; + +exports[`<Button /> renders title if props.title is given 1`] = ` +<button + className="button" + disabled={undefined} + onClick={[Function]} + style={ + Object { + "height": "36px", + "lineHeight": "36px", + "padding": "0 16px", + } + } + title="foo" +/> +`; diff --git a/app/javascript/themes/glitch/components/__tests__/__snapshots__/display_name-test.js.snap b/app/javascript/themes/glitch/components/__tests__/__snapshots__/display_name-test.js.snap new file mode 100644 index 000000000..533359ffe --- /dev/null +++ b/app/javascript/themes/glitch/components/__tests__/__snapshots__/display_name-test.js.snap @@ -0,0 +1,23 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`<DisplayName /> renders display name + account name 1`] = ` +<span + className="display-name" +> + <strong + className="display-name__html" + dangerouslySetInnerHTML={ + Object { + "__html": "<p>Foo</p>", + } + } + /> + + <span + className="display-name__account" + > + @ + bar@baz + </span> +</span> +`; diff --git a/app/javascript/themes/glitch/components/__tests__/avatar-test.js b/app/javascript/themes/glitch/components/__tests__/avatar-test.js new file mode 100644 index 000000000..dd3f7b7d2 --- /dev/null +++ b/app/javascript/themes/glitch/components/__tests__/avatar-test.js @@ -0,0 +1,36 @@ +import React from 'react'; +import renderer from 'react-test-renderer'; +import { fromJS } from 'immutable'; +import Avatar from '../avatar'; + +describe('<Avatar />', () => { + const account = fromJS({ + username: 'alice', + acct: 'alice', + display_name: 'Alice', + avatar: '/animated/alice.gif', + avatar_static: '/static/alice.jpg', + }); + + const size = 100; + + describe('Autoplay', () => { + it('renders a animated avatar', () => { + const component = renderer.create(<Avatar account={account} animate size={size} />); + const tree = component.toJSON(); + + expect(tree).toMatchSnapshot(); + }); + }); + + describe('Still', () => { + it('renders a still avatar', () => { + const component = renderer.create(<Avatar account={account} size={size} />); + const tree = component.toJSON(); + + expect(tree).toMatchSnapshot(); + }); + }); + + // TODO add autoplay test if possible +}); diff --git a/app/javascript/themes/glitch/components/__tests__/avatar_overlay-test.js b/app/javascript/themes/glitch/components/__tests__/avatar_overlay-test.js new file mode 100644 index 000000000..44addea83 --- /dev/null +++ b/app/javascript/themes/glitch/components/__tests__/avatar_overlay-test.js @@ -0,0 +1,29 @@ +import React from 'react'; +import renderer from 'react-test-renderer'; +import { fromJS } from 'immutable'; +import AvatarOverlay from '../avatar_overlay'; + +describe('<AvatarOverlay', () => { + const account = fromJS({ + username: 'alice', + acct: 'alice', + display_name: 'Alice', + avatar: '/animated/alice.gif', + avatar_static: '/static/alice.jpg', + }); + + const friend = fromJS({ + username: 'eve', + acct: 'eve@blackhat.lair', + display_name: 'Evelyn', + avatar: '/animated/eve.gif', + avatar_static: '/static/eve.jpg', + }); + + it('renders a overlay avatar', () => { + const component = renderer.create(<AvatarOverlay account={account} friend={friend} />); + const tree = component.toJSON(); + + expect(tree).toMatchSnapshot(); + }); +}); diff --git a/app/javascript/themes/glitch/components/__tests__/button-test.js b/app/javascript/themes/glitch/components/__tests__/button-test.js new file mode 100644 index 000000000..924ba39dc --- /dev/null +++ b/app/javascript/themes/glitch/components/__tests__/button-test.js @@ -0,0 +1,82 @@ +import { shallow } from 'enzyme'; +import React from 'react'; +import renderer from 'react-test-renderer'; +import Button from '../button'; + +describe('<Button />', () => { + it('renders a button element', () => { + const component = renderer.create(<Button />); + const tree = component.toJSON(); + + expect(tree).toMatchSnapshot(); + }); + + it('renders the given text', () => { + const text = 'foo'; + const component = renderer.create(<Button text={text} />); + const tree = component.toJSON(); + + expect(tree).toMatchSnapshot(); + }); + + it('handles click events using the given handler', () => { + const handler = jest.fn(); + const button = shallow(<Button onClick={handler} />); + button.find('button').simulate('click'); + + expect(handler.mock.calls.length).toEqual(1); + }); + + it('does not handle click events if props.disabled given', () => { + const handler = jest.fn(); + const button = shallow(<Button onClick={handler} disabled />); + button.find('button').simulate('click'); + + expect(handler.mock.calls.length).toEqual(0); + }); + + it('renders a disabled attribute if props.disabled given', () => { + const component = renderer.create(<Button disabled />); + const tree = component.toJSON(); + + expect(tree).toMatchSnapshot(); + }); + + it('renders the children', () => { + const children = <p>children</p>; + const component = renderer.create(<Button>{children}</Button>); + const tree = component.toJSON(); + + expect(tree).toMatchSnapshot(); + }); + + it('renders the props.text instead of children', () => { + const text = 'foo'; + const children = <p>children</p>; + const component = renderer.create(<Button text={text}>{children}</Button>); + const tree = component.toJSON(); + + expect(tree).toMatchSnapshot(); + }); + + it('renders class="button--block" if props.block given', () => { + const component = renderer.create(<Button block />); + const tree = component.toJSON(); + + expect(tree).toMatchSnapshot(); + }); + + it('adds class "button-secondary" if props.secondary given', () => { + const component = renderer.create(<Button secondary />); + const tree = component.toJSON(); + + expect(tree).toMatchSnapshot(); + }); + + it('renders title if props.title is given', () => { + const component = renderer.create(<Button title='foo' />); + const tree = component.toJSON(); + + expect(tree).toMatchSnapshot(); + }); +}); diff --git a/app/javascript/themes/glitch/components/__tests__/display_name-test.js b/app/javascript/themes/glitch/components/__tests__/display_name-test.js new file mode 100644 index 000000000..0d040c4cd --- /dev/null +++ b/app/javascript/themes/glitch/components/__tests__/display_name-test.js @@ -0,0 +1,18 @@ +import React from 'react'; +import renderer from 'react-test-renderer'; +import { fromJS } from 'immutable'; +import DisplayName from '../display_name'; + +describe('<DisplayName />', () => { + it('renders display name + account name', () => { + const account = fromJS({ + username: 'bar', + acct: 'bar@baz', + display_name_html: '<p>Foo</p>', + }); + const component = renderer.create(<DisplayName account={account} />); + const tree = component.toJSON(); + + expect(tree).toMatchSnapshot(); + }); +}); |