feat(avatar): implement the component

Author: akoushke

src/components/WebexAvatar/README.md

@@ -1 +1,9 @@
-Webex Avatar Component!
+# Webex Avatar Component
+
+Webex avatar component displays the avatar of a _Webex Teams_ user with a given `personID` and `adapter` object.
+
+## How to use
+
+```js
+<WebexAvatar personID="PersonID" adapter={peopleJSONAdapter} />
+```

src/components/WebexAvatar/WebexAvatar.js

@@ -1,6 +1,34 @@
-import React from 'react';
+import React, {PureComponent} from 'react';
+import PropTypes from 'prop-types';
 import {Avatar} from '@momentum-ui/react';
 
-export default function WebexAvatar(props) {
-  return <Avatar {...props} />;
+const propTypes = {
+  personID: PropTypes.string.isRequired,
+  adapter: PropTypes.object.isRequired,
+};
+
+export default class WebexAvatar extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.props = props;
+    this.state = {
+      person: {},
+    };
+  }
+
+  componentDidMount() {
+    const onNext = (person) => this.setState({person});
+    // eslint-disable-next-line no-console
+    const onError = (error) => console.error(error.message);
+
+    this.props.adapter.getPerson(this.props.personID).subscribe(onNext, onError);
+  }
+
+  render() {
+    const {avatar, displayName, status} = this.state.person;
+
+    return <Avatar src={avatar} title={displayName} type={status} alt={displayName} />;
+  }
 }
+
+WebexAvatar.propTypes = propTypes;

src/components/WebexAvatar/WebexAvatar.stories.js

@@ -1,6 +1,78 @@
 import React from 'react';
 import {storiesOf} from '@storybook/react';
 
+import PeopleJSONAdapter from '../../adapters/PeopleJSONAdapter';
+import {PersonStatus} from '../../adapters/PeopleAdapter';
+import person from '../../data/people';
+
 import WebexAvatar from './WebexAvatar';
 
-storiesOf('Webex Avatar', module).add('Avatar with title', () => <WebexAvatar title="Tom Smith" />);
+// Setup for the stories
+const [personID] = Object.keys(person);
+const peopleJSONAdapter = new PeopleJSONAdapter(person);
+const stories = storiesOf('Webex Avatar', module);
+
+// Stories
+stories.add('no status', () => <WebexAvatar personID={personID} adapter={peopleJSONAdapter} />);
+
+stories.add(`${PersonStatus.ACTIVE}`, () => {
+  peopleJSONAdapter.datasource[personID].status = PersonStatus.ACTIVE;
+
+  return <WebexAvatar personID={personID} adapter={peopleJSONAdapter} />;
+});
+
+stories.add(PersonStatus.BOT, () => {
+  peopleJSONAdapter.datasource[personID].status = PersonStatus.BOT;
+
+  return <WebexAvatar personID={personID} adapter={peopleJSONAdapter} />;
+});
+
+stories.add(PersonStatus.CALL, () => {
+  peopleJSONAdapter.datasource[personID].status = PersonStatus.CALL;
+
+  return <WebexAvatar personID={personID} adapter={peopleJSONAdapter} />;
+});
+
+stories.add(PersonStatus.DO_NOT_DISTURB, () => {
+  peopleJSONAdapter.datasource[personID].status = PersonStatus.DO_NOT_DISTURB;
+
+  return <WebexAvatar personID={personID} adapter={peopleJSONAdapter} />;
+});
+
+stories.add(PersonStatus.INACTIVE, () => {
+  peopleJSONAdapter.datasource[personID].status = PersonStatus.INACTIVE;
+
+  return <WebexAvatar personID={personID} adapter={peopleJSONAdapter} />;
+});
+
+stories.add(PersonStatus.MEETING, () => {
+  peopleJSONAdapter.datasource[personID].status = PersonStatus.MEETING;
+
+  return <WebexAvatar personID={personID} adapter={peopleJSONAdapter} />;
+});
+
+stories.add(PersonStatus.OUT_OF_OFFICE, () => {
+  peopleJSONAdapter.datasource[personID].status = PersonStatus.OUT_OF_OFFICE;
+
+  return <WebexAvatar personID={personID} adapter={peopleJSONAdapter} />;
+});
+
+stories.add(PersonStatus.PRESENTING, () => {
+  peopleJSONAdapter.datasource[personID].status = PersonStatus.PRESENTING;
+
+  return <WebexAvatar personID={personID} adapter={peopleJSONAdapter} />;
+});
+
+stories.add(PersonStatus.SELF, () => {
+  peopleJSONAdapter.datasource[personID].status = PersonStatus.SELF;
+
+  return <WebexAvatar personID={personID} adapter={peopleJSONAdapter} />;
+});
+
+stories.add(PersonStatus.TYPING, () => {
+  peopleJSONAdapter.datasource[personID].status = PersonStatus.TYPING;
+
+  return <WebexAvatar personID={personID} adapter={peopleJSONAdapter} />;
+});
+
+stories.add('wrong PersonID', () => <WebexAvatar personID="Wrong personID" adapter={peopleJSONAdapter} />);

src/components/WebexAvatar/WebexAvatar.test.js

@@ -1,19 +1,92 @@
 import React from 'react';
 
+import PeopleJSONAdapter from '../../adapters/PeopleJSONAdapter';
+import {PersonStatus} from '../../adapters/PeopleAdapter';
+import person from '../../data/people';
+
 import WebexAvatar from './WebexAvatar';
 
-describe('Webex Avatar component:', () => {
-  let wrapper;
+describe('Webex Avatar component', () => {
+  let personID, peopleJSONAdapter;
 
   beforeEach(() => {
-    wrapper = shallow(<WebexAvatar />);
+    [personID] = Object.keys(person);
+    peopleJSONAdapter = new PeopleJSONAdapter(person);
+    global.console.error = jest.fn();
+  });
+
+  test('matches snapshot with "default" status', () => {
+    expect(shallow(<WebexAvatar personID={personID} adapter={peopleJSONAdapter} />)).toMatchSnapshot();
+  });
+
+  test(`matches snapshot with "${PersonStatus.ACTIVE}" person status`, () => {
+    peopleJSONAdapter.datasource[personID].status = PersonStatus.ACTIVE;
+
+    expect(shallow(<WebexAvatar personID={personID} adapter={peopleJSONAdapter} />)).toMatchSnapshot();
+  });
+
+  test(`matches snapshot with "${PersonStatus.BOT}" person status`, () => {
+    peopleJSONAdapter.datasource[personID].status = PersonStatus.BOT;
+
+    expect(shallow(<WebexAvatar personID={personID} adapter={peopleJSONAdapter} />)).toMatchSnapshot();
+  });
+  test(`matches snapshot with "${PersonStatus.CALL}" person status`, () => {
+    peopleJSONAdapter.datasource[personID].status = PersonStatus.CALL;
+
+    expect(shallow(<WebexAvatar personID={personID} adapter={peopleJSONAdapter} />)).toMatchSnapshot();
+  });
+
+  test(`matches snapshot with "${PersonStatus.DO_NOT_DISTURB}" person status`, () => {
+    peopleJSONAdapter.datasource[personID].status = PersonStatus.DO_NOT_DISTURB;
+
+    expect(shallow(<WebexAvatar personID={personID} adapter={peopleJSONAdapter} />)).toMatchSnapshot();
+  });
+
+  test(`matches snapshot with "${PersonStatus.INACTIVE}" person status`, () => {
+    peopleJSONAdapter.datasource[personID].status = PersonStatus.INACTIVE;
+
+    expect(shallow(<WebexAvatar personID={personID} adapter={peopleJSONAdapter} />)).toMatchSnapshot();
   });
 
-  test('exists', () => {
-    expect(wrapper).toMatchSnapshot();
+  test(`matches snapshot with "${PersonStatus.MEETING}" person status`, () => {
+    peopleJSONAdapter.datasource[personID].status = PersonStatus.MEETING;
+
+    expect(shallow(<WebexAvatar personID={personID} adapter={peopleJSONAdapter} />)).toMatchSnapshot();
+  });
+
+  test(`matches snapshot with "${PersonStatus.OUT_OF_OFFICE}" person status`, () => {
+    peopleJSONAdapter.datasource[personID].status = PersonStatus.OUT_OF_OFFICE;
+
+    expect(shallow(<WebexAvatar personID={personID} adapter={peopleJSONAdapter} />)).toMatchSnapshot();
+  });
+
+  test(`matches snapshot with "${PersonStatus.PRESENTING}" person status`, () => {
+    peopleJSONAdapter.datasource[personID].status = PersonStatus.PRESENTING;
+
+    expect(shallow(<WebexAvatar personID={personID} adapter={peopleJSONAdapter} />)).toMatchSnapshot();
+  });
+
+  test(`matches snapshot with "${PersonStatus.SELF}" person status`, () => {
+    peopleJSONAdapter.datasource[personID].status = PersonStatus.SELF;
+
+    expect(shallow(<WebexAvatar personID={personID} adapter={peopleJSONAdapter} />)).toMatchSnapshot();
+  });
+
+  test(`matches snapshot with "${PersonStatus.TYPING}" person status`, () => {
+    peopleJSONAdapter.datasource[personID].status = PersonStatus.TYPING;
+
+    expect(shallow(<WebexAvatar personID={personID} adapter={peopleJSONAdapter} />)).toMatchSnapshot();
+  });
+
+  test('throws error with inappropriate personID', () => {
+    shallow(<WebexAvatar personID="Wrong PersonID" adapter={peopleJSONAdapter} />);
+
+    expect(global.console.error).toHaveBeenCalledWith('Could not find person with ID "Wrong PersonID"');
   });
 
   afterEach(() => {
-    wrapper = null;
+    personID = null;
+    peopleJSONAdapter = null;
+    global.console.error = null;
   });
 });