Skip to content

Commit

Permalink
ft(createTeamTest): Add test for create-team page
Browse files Browse the repository at this point in the history
- add test for notification popup
- add test for createTeam action
- change visualFeedback extension to jsx

[Finishes #161157079]
  • Loading branch information
phemonick committed Oct 13, 2018
1 parent d4a21ec commit 1c7af5f
Show file tree
Hide file tree
Showing 11 changed files with 283 additions and 202 deletions.
48 changes: 25 additions & 23 deletions client/src/modules/CreateTeam/components/Form.jsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Dropdown } from 'semantic-ui-react'
import { Dropdown } from 'semantic-ui-react';
import slack from '../../../../public/resources/images/slack.png';
import pt from '../../../../public/resources/images/pt.jpg';

Expand All @@ -24,30 +24,30 @@ export const Form = ({
if (name.trim() && desc.trim()) {
showSubmitButton = true;
}

if (name.trim()) {
teamName = name
teamName = name;
}

// github dropdown options
const githubOptions = [
{key: `ah-${teamName}-frontend`, text: `ah-${teamName}-frontend`, value: `ah-${teamName}-frontend`},
{key: `ah-${teamName}`, text: `ah-${teamName}`, value: `ah-${teamName}`},
{key: `${teamName}-ah`, text: `${teamName}-ah`, value: `${teamName}-ah`},
{key: `ah-${teamName}-backend`, text: `ah-${teamName}-backend`, value: `ah-${teamName}-backend`},
]
{ key: `ah-${teamName}-frontend`, text: `ah-${teamName}-frontend`, value: `ah-${teamName}-frontend` },
{ key: `ah-${teamName}`, text: `ah-${teamName}`, value: `ah-${teamName}` },
{ key: `${teamName}-ah`, text: `${teamName}-ah`, value: `${teamName}-ah` },
{ key: `ah-${teamName}-backend`, text: `ah-${teamName}-backend`, value: `ah-${teamName}-backend` }
];

const ptOptions = [
{key: `ah-${teamName}`, text: `ah-${teamName}`, value: `ah-${teamName}`},
{key: `${teamName}-ah`, text: `${teamName}-ah`, value: `${teamName}-ah`}
]
{ key: `ah-${teamName}`, text: `ah-${teamName}`, value: `ah-${teamName}` },
{ key: `${teamName}-ah`, text: `${teamName}-ah`, value: `${teamName}-ah` }
];

const slackOptions = [
{key: `ah-${teamName}`, text: `ah-${teamName}`, value: `ah-${teamName}`},
{key: `${teamName}-general`, text: `${teamName}-general`, value: `${teamName}-general`},
{key: `${teamName}-standups`, text: `${teamName}-standups`, value: `${teamName}-standups`},
{key: `${teamName}-bots`, text: `${teamName}-bots`, value: `${teamName}-bots`}
]
{ key: `ah-${teamName}`, text: `ah-${teamName}`, value: `ah-${teamName}` },
{ key: `${teamName}-general`, text: `${teamName}-general`, value: `${teamName}-general` },
{ key: `${teamName}-standups`, text: `${teamName}-standups`, value: `${teamName}-standups` },
{ key: `${teamName}-bots`, text: `${teamName}-bots`, value: `${teamName}-bots` }
];

return (
<form
Expand Down Expand Up @@ -97,17 +97,19 @@ export const Form = ({
</div>
<div className="team-accounts top-margin">
<i className="fab fa-github integration-icon">`</i>
<Dropdown name="github" onChange={menuChange} placeholder="Repo name"
fluid multiple selection search options={githubOptions} />
<Dropdown
name="github" onChange={menuChange} placeholder="Repo name"
fluid multiple selection search options={githubOptions} />
</div>
<div className="team-accounts top-margin">
<img src={pt} className="integration-icon small-icon" alt="pt-image"/>
<Dropdown name="pt" onChange={menuChange} placeholder="PT name"
fluid multiple selection search options={ptOptions} />
<img src={pt} className="integration-icon small-icon" alt="pt-image" />
<Dropdown
name="pt" onChange={menuChange} placeholder="PT name"
fluid multiple selection search options={ptOptions} />
</div>
<div className="team-accounts top-margin">
<img src={slack} className="integration-icon small-icon" alt="slack-image"/>
<Dropdown placeholder='channel name' fluid multiple selection search options={slackOptions} />
<img src={slack} className="integration-icon small-icon" alt="slack-image" />
<Dropdown placeholder="channel name" fluid multiple selection search options={slackOptions} />
</div>
{!showSubmitButton && (
<div className="submit-btn">
Expand Down
17 changes: 10 additions & 7 deletions client/src/modules/CreateTeam/container/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export class CreateTeam extends Component {
integrations: {
github: [],
pt: []
},
}
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
Expand Down Expand Up @@ -75,7 +75,9 @@ export class CreateTeam extends Component {
*/
handleSubmit(event) {
event.preventDefault();
const { name, visibility, description, integrations } = this.state;
const {
name, visibility, description, integrations
} = this.state;
const data = {
name,
description,
Expand Down Expand Up @@ -111,8 +113,8 @@ export class CreateTeam extends Component {
*/
menuChange = (event, item) => {
this.setState({
integrations: {...this.state.integrations, [item.name]: item.value }
})
integrations: { ...this.state.integrations, [item.name]: item.value }
});
}

/**
Expand All @@ -128,13 +130,14 @@ export class CreateTeam extends Component {
const {
name, description, visibility, github
} = this.state;
const { showModal } = this.props.teams
const { showModal } = this.props.teams;
return (
<React.Fragment>
<Navbar />
<div className="container">
{showModal && <VisualFeedback modalState={this.handleModalState}
response={this.props.apiMessage} isModalOpened={showModal} />}
{showModal && <VisualFeedback
modalState={this.handleModalState}
response={this.props.apiMessage} isModalOpened={showModal} />}
<div className="row valign-wrapper">
<Form
handleSubmit={this.handleSubmit}
Expand Down
61 changes: 28 additions & 33 deletions client/src/redux/actions/teams/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,8 @@ export const modalState = bool => dispatch => {
dispatch({
type: ISMODAL_OPENED,
payload: bool
})
}
});
};

/**
* @description method to create team and multiple project integrations
Expand All @@ -66,67 +66,64 @@ export const createTeam = data => async (dispatch) => {
const teamInfo = {
name: data.name,
description: data.description,
private: data.private,
}
private: data.private
};

// all api response
const allRequest = {
team: [],
}
team: []
};

let projects = {}
let integrationNames = data.integrations
let projects = {};
let integrationNames = data.integrations;

// checks if any integration is selected
let integrationExist = Object.entries(integrationNames).some((integration) => {
return integration[1].length > 0
});
let integrationExist = Object.entries(integrationNames).some((integration) => integration[1].length > 0);

let integrationType = {
github: 'github_repo',
pt: 'pt_private_project'
}
};

// all selected integrations
for (const name of integrationNames) {
for (const name in integrationNames) {
if (integrationNames[name].length) {
allRequest[name] = []
projects[name] = integrationNames[name]
allRequest[name] = [];
projects[name] = integrationNames[name];
}
}

// api call to create a team
const response = await api('teams', 'post', teamInfo)
allRequest.team = [...allRequest.team, {created: true, name: data.name}]
const response = await api('teams', 'post', teamInfo);
allRequest.team = [...allRequest.team, { created: true, name: data.name }];
if (integrationExist) {
let allProject = Object.keys(projects)
let allProject = Object.keys(projects);
for (let integration of allProject) {
for( let accountName of projects[integration]) {
for (let accountName of projects[integration]) {
let integrationInfo = {
name: accountName,
type: integrationType[integration]
}
};
try {
await api(`teams/${response.data.team.id}/accounts`, 'post', integrationInfo);
allRequest[integration]= [...allRequest[integration], {created: true, name: accountName}]
} catch(error) {
allRequest[integration]= [...allRequest[integration], {created: false, name: accountName}]
}
allRequest[integration] = [...allRequest[integration], { created: true, name: accountName }];
} catch (error) {
allRequest[integration] = [...allRequest[integration], { created: false, name: accountName }];
}
}
}
}

dispatch(isLoading(false));
if (!integrationExist) {
successMessage(`${data.name} successfully created`);
return dispatch(success(CREATE_TEAM, response));
}
// create team response
return integrationExist && dispatch(apiResponse(SHOW_RESPONSE, allRequest))

} catch(error) {
dispatch(isLoading(false));
errorMessage(error);
return integrationExist && dispatch(apiResponse(SHOW_RESPONSE, allRequest));
} catch (error) {
dispatch(isLoading(false));
errorMessage(error);
}
};

Expand Down Expand Up @@ -191,12 +188,10 @@ export const fetchFavoriteTeamsAction = () => dispatch => {
});
};

export const removeFavoritesTeamsAction = (id) => dispatch => {
return instance.delete(`/favorites/${id}`)
export const removeFavoritesTeamsAction = (id) => dispatch => instance.delete(`/favorites/${id}`)
.then(() => {
dispatch(removeFavoriteTeam(id));
successMessage('Team successfully removed from favorites');
}).catch((error) => {
console.error(error);
});
};
41 changes: 27 additions & 14 deletions client/src/tests/__mocks__/__mockData__/createTeamMock.js
Original file line number Diff line number Diff line change
@@ -1,15 +1,28 @@
export const createTeamMock = {
createTeamResponse: {
team: {
containsYou: true,
}
},
teamInfo: {
name: 'ghoulie',
description: 'lagos cohort 32',
private: 'private',
integrations: {
github: []
}
const createTeamMock = {
createTeamResponse: {
data: {
team: {
containsYou: true,
id: 2
}
}
}

},
teamInfoData: {
name: 'ghoulie',
description: 'lagos cohort 32',
private: 'private',
integrations: {
github: ['ah-ghoulie', 'ghoulie-frontend'],
pt: ['ah-ghoulie']
}
},
createTeamData: {
name: 'ghoulie',
description: 'lagos cohort 32',
private: 'private'
}

};

export default createTeamMock;
30 changes: 15 additions & 15 deletions client/src/tests/modules/createTeams/component/form.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,18 @@ import { shallow } from 'enzyme';
import { Form } from '../../../../modules/CreateTeam/components/Form';

describe('CreateTeam Form test-suite', () => {
const props = {
handleChange: jest.fn(),
name: 'jude',
desc: 'cohort 56',
checked: 'false',
handleSubmit: jest.fn(),
submitting: false,
menuChange: jest.fn(),
};
it('renders properly', () => {
const FormWrapper = shallow(<Form {...props} />);
expect(FormWrapper.exists()).toBeTruthy();
});
})
const props = {
handleChange: jest.fn(),
name: 'jude',
desc: 'cohort 56',
checked: 'false',
handleSubmit: jest.fn(),
submitting: false,
menuChange: jest.fn()
};

it('renders properly', () => {
const FormWrapper = shallow(<Form {...props} />);
expect(FormWrapper.exists()).toBeTruthy();
});
});
38 changes: 38 additions & 0 deletions client/src/tests/redux/actions/teams/index.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import expect from 'expect';
import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';

import { createTeam } from '../../../../redux/actions/teams';
import createTeamMock from '../../../__mocks__/__mockData__/createTeamMock';

const middlewares = [thunk];
const mockStore = configureMockStore(middlewares);

describe('Create Team actions', () => {
beforeAll(() => {
localStorage.setItem('aTeamsToken', 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6Im9sdXdhZmVtaS5hZGVrdW5sZUBhbmRlbGEuY29tIiwiaWF0IjoxNTM5MTgzNDQ0fQ.y40N5vI3d6BvOjPSl98vSK8l7D7sSD42Ta9daEdRtC0');
});
beforeEach(() => {
mock.reset();
});

it('creates a new team with valid form inputs', async () => {
const { createTeamResponse, teamInfoData, createTeamData } = createTeamMock;
const expectedActions = [{ "name": "OLUWAFEMI", "payload": true, "type": "[auth]: check if user is logged in" },
{ "payload": true, "type": "[ui]: show preloader" }, { "payload": false, "type": "[ui]: show preloader" },
{
"payload": {
"github": [{ "created": false, "name": "ah-ghoulie" }, { "created": false, "name": "ghoulie-frontend" }],
"pt": [{ "created": false, "name": "ah-ghoulie" }],
"team": [{ "created": true, "name": "ghoulie" }]
},
"type": "SHOW_RESPONSE"
}];
const store = mockStore({});
await mock
.onPost('teams', createTeamData)
.reply(201, { response: createTeamResponse });
await store.dispatch(createTeam(teamInfoData));
expect(store.getActions()).toEqual(expectedActions);
});
});
24 changes: 24 additions & 0 deletions client/src/tests/toasts.js/VisualFeedback.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import React from 'react';
import { shallow } from 'enzyme';
import VisualFeedback from '../../toasts/VisualFeedback';

describe('CreateTeam Form test-suite', () => {
const props = {
modalState: jest.fn(),
isModalOpened: false,
response: {
team: [{ created: true, name: 'ghoulies' }]
}
};

it('renders properly', () => {
const VisualFeedbackWrapper = shallow(<VisualFeedback {...props} />);
expect(VisualFeedbackWrapper.exists()).toBeTruthy();
});

it('should close the modal when ok button is clicked', () => {
const VisualFeedbackWrapper = shallow(<VisualFeedback {...props} />);
VisualFeedbackWrapper.find('.btn').simulate('click');
expect(props.modalState).toHaveBeenCalled();
});
});
Loading

0 comments on commit 1c7af5f

Please sign in to comment.