afterEach(() => handler.reset());
-jest.setTimeout(10_000);
+jest.setTimeout(20_000);
it('should list all rules', async () => {
renderCodingRulesApp();
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import * as React from 'react';
-import {
- addGroup,
- addUser,
- searchGroups,
- searchUsers,
- SearchUsersGroupsParameters
-} from '../../../api/quality-profiles';
+import { addGroup, addUser } from '../../../api/quality-profiles';
import { ResetButtonLink, SubmitButton } from '../../../components/controls/buttons';
import Modal from '../../../components/controls/Modal';
import { translate } from '../../../helpers/l10n';
}
};
- handleSearch = (q: string) => {
- const { profile } = this.props;
- const parameters: SearchUsersGroupsParameters = {
- language: profile.language,
- q,
- qualityProfile: profile.name,
- selected: 'deselected'
- };
- return Promise.all([
- searchUsers(parameters),
- searchGroups(parameters)
- ]).then(([usersResponse, groupsResponse]) => [
- ...usersResponse.users,
- ...groupsResponse.groups
- ]);
- };
-
handleValueChange = (selected: UserSelected | Group) => {
this.setState({ selected });
};
render() {
+ const { profile } = this.props;
const header = translate('quality_profiles.grant_permissions_to_user_or_group');
const submitDisabled = !this.state.selected || this.state.submitting;
return (
<label htmlFor="change-profile-permission-input">
{translate('quality_profiles.search_description')}
</label>
- <ProfilePermissionsFormSelect
- onChange={this.handleValueChange}
- onSearch={this.handleSearch}
- selected={this.state.selected}
- />
+ <ProfilePermissionsFormSelect onChange={this.handleValueChange} profile={profile} />
</div>
</div>
<footer className="modal-foot">
* along with this program; if not, write to the Free Software Foundation,
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
-import { debounce, identity, omit } from 'lodash';
+import { debounce, omit } from 'lodash';
import * as React from 'react';
import { components, ControlProps, OptionProps, SingleValueProps } from 'react-select';
-import Select from '../../../components/controls/Select';
+import {
+ searchGroups,
+ searchUsers,
+ SearchUsersGroupsParameters
+} from '../../../api/quality-profiles';
+import { SearchSelect } from '../../../components/controls/Select';
import GroupIcon from '../../../components/icons/GroupIcon';
import Avatar from '../../../components/ui/Avatar';
import { translate } from '../../../helpers/l10n';
interface Props {
onChange: (option: OptionWithValue) => void;
- onSearch: (query: string) => Promise<Option[]>;
- selected?: Option;
+ profile: { language: string; name: string };
}
-interface State {
- loading: boolean;
- query: string;
- searchResults: Option[];
-}
-
-export default class ProfilePermissionsFormSelect extends React.PureComponent<Props, State> {
+export default class ProfilePermissionsFormSelect extends React.PureComponent<Props> {
mounted = false;
constructor(props: Props) {
super(props);
this.handleSearch = debounce(this.handleSearch, 250);
- this.state = { loading: false, query: '', searchResults: [] };
- }
-
- componentDidMount() {
- this.mounted = true;
- this.handleSearch(this.state.query);
}
- componentWillUnmount() {
- this.mounted = false;
- }
-
- handleSearch = (query: string) => {
- this.setState({ loading: true });
- this.props.onSearch(query).then(
- searchResults => {
- if (this.mounted) {
- this.setState({ loading: false, searchResults });
- }
- },
- () => {
- if (this.mounted) {
- this.setState({ loading: false });
- }
- }
- );
- };
-
- handleInputChange = (newQuery: string) => {
- const { query } = this.state;
- if (query !== newQuery) {
- this.setState({ query: newQuery });
- this.handleSearch(newQuery);
- }
- };
-
optionRenderer(props: OptionProps<OptionWithValue, false>) {
const { data } = props;
return (
</components.Control>
);
+ handleSearch = (q: string, resolve: (options: OptionWithValue[]) => void) => {
+ const { profile } = this.props;
+ const parameters: SearchUsersGroupsParameters = {
+ language: profile.language,
+ q,
+ qualityProfile: profile.name,
+ selected: 'deselected'
+ };
+ Promise.all([searchUsers(parameters), searchGroups(parameters)])
+ .then(([usersResponse, groupsResponse]) => [...usersResponse.users, ...groupsResponse.groups])
+ .then((options: Option[]) => options.map(opt => ({ ...opt, value: getStringValue(opt) })))
+ .then(resolve)
+ .catch(() => resolve([]));
+ };
+
render() {
const noResultsText = translate('no_results');
- const { selected } = this.props;
- // create a uniq string both for users and groups
- const options = this.state.searchResults.map(r => ({ ...r, value: getStringValue(r) }));
-
- // when user input is empty the options shows only top 30 names
- // the below code add the selected user so that it appears too
- if (
- selected !== undefined &&
- options.find(o => o.value === getStringValue(selected)) === undefined
- ) {
- options.unshift({ ...selected, value: getStringValue(selected) });
- }
return (
- <Select
+ <SearchSelect
className="Select-big width-100"
autoFocus={true}
isClearable={false}
id="change-profile-permission"
inputId="change-profile-permission-input"
onChange={this.props.onChange}
- onInputChange={this.handleInputChange}
+ defaultOptions={true}
+ loadOptions={this.handleSearch}
placeholder=""
noOptionsMessage={() => noResultsText}
- isLoading={this.state.loading}
- options={options}
- isSearchable={true}
- filterOptions={identity}
components={{
Option: this.optionRenderer,
SingleValue: this.singleValueRenderer,
Control: this.controlRenderer
}}
- value={options.filter(
- o => o.value === (this.props.selected && getStringValue(this.props.selected))
- )}
/>
);
}
*/
import { shallow } from 'enzyme';
import * as React from 'react';
-import { addGroup, addUser, searchGroups, searchUsers } from '../../../../api/quality-profiles';
+import { addGroup, addUser } from '../../../../api/quality-profiles';
import { mockGroup, mockUser } from '../../../../helpers/testMocks';
import { submit, waitAndUpdate } from '../../../../helpers/testUtils';
import { UserSelected } from '../../../../types/types';
import ProfilePermissionsForm from '../ProfilePermissionsForm';
-import ProfilePermissionsFormSelect from '../ProfilePermissionsFormSelect';
jest.mock('../../../../api/quality-profiles', () => ({
addUser: jest.fn().mockResolvedValue(null),
const user: UserSelected = { ...mockUser(), name: 'John doe', active: true, selected: true };
wrapper.instance().handleValueChange(user);
- expect(wrapper.find(ProfilePermissionsFormSelect).prop('selected')).toBe(user);
+ expect(wrapper.state().selected).toBe(user);
submit(wrapper.find('form'));
expect(wrapper).toMatchSnapshot();
const group = mockGroup();
wrapper.instance().handleValueChange(group);
- expect(wrapper.find(ProfilePermissionsFormSelect).prop('selected')).toBe(group);
+ expect(wrapper.state().selected).toBe(group);
submit(wrapper.find('form'));
expect(wrapper).toMatchSnapshot();
expect(onGroupAdd).toBeCalledWith(group);
});
-it('correctly handles search', () => {
- const wrapper = shallowRender();
- wrapper.instance().handleSearch('foo');
-
- const parameters = {
- language: PROFILE.language,
- q: 'foo',
- qualityProfile: PROFILE.name,
- selected: 'deselected'
- };
-
- expect(searchUsers).toBeCalledWith(parameters);
- expect(searchGroups).toBeCalledWith(parameters);
-});
-
function shallowRender(props: Partial<ProfilePermissionsForm['props']> = {}) {
return shallow<ProfilePermissionsForm>(
<ProfilePermissionsForm
*/
import { shallow } from 'enzyme';
import * as React from 'react';
+import { searchGroups, searchUsers } from '../../../../api/quality-profiles';
import {
mockReactSelectControlProps,
mockReactSelectOptionProps
} from '../../../../helpers/mocks/react-select';
+import { mockUser } from '../../../../helpers/testMocks';
import ProfilePermissionsFormSelect from '../ProfilePermissionsFormSelect';
jest.mock('lodash', () => {
return lodash;
});
-it('renders', () => {
- expect(
- shallow(
- <ProfilePermissionsFormSelect
- onChange={jest.fn()}
- onSearch={jest.fn(() => Promise.resolve([]))}
- selected={{ name: 'lambda' }}
- />
- )
- ).toMatchSnapshot();
-});
+jest.mock('../../../../api/quality-profiles', () => ({
+ searchGroups: jest.fn().mockResolvedValue([]),
+ searchUsers: jest.fn().mockResolvedValue([])
+}));
-it('searches', () => {
- const onSearch = jest.fn(() => Promise.resolve([]));
- const wrapper = shallow(
- <ProfilePermissionsFormSelect
- onChange={jest.fn()}
- onSearch={onSearch}
- selected={{ name: 'lambda' }}
- />
- );
- expect(onSearch).toBeCalledWith('');
- onSearch.mockClear();
-
- wrapper.prop<Function>('onInputChange')('f');
- expect(onSearch).toBeCalled();
+it('should render correctly', () => {
+ expect(shallowRender()).toMatchSnapshot();
+});
- wrapper.prop<Function>('onInputChange')('foo');
- expect(onSearch).toBeCalledWith('foo');
+it('should handle search', async () => {
+ (searchUsers as jest.Mock).mockResolvedValueOnce({ users: [mockUser()] });
+ (searchGroups as jest.Mock).mockResolvedValueOnce({ groups: [{ name: 'group1' }] });
- onSearch.mockClear();
+ const wrapper = shallowRender();
+ const query = 'Waldo';
+ const results = await new Promise(resolve => {
+ wrapper.instance().handleSearch(query, resolve);
+ });
+ expect(searchUsers).toBeCalledWith(expect.objectContaining({ q: query }));
+ expect(searchGroups).toBeCalledWith(expect.objectContaining({ q: query }));
- wrapper.prop<Function>('onInputChange')('foo');
- expect(onSearch).not.toBeCalled();
+ expect(results).toHaveLength(2);
});
it('should render option correctly', () => {
return shallow<ProfilePermissionsFormSelect>(
<ProfilePermissionsFormSelect
onChange={jest.fn()}
- onSearch={jest.fn(() => Promise.resolve([]))}
- selected={{ name: 'lambda' }}
+ profile={{ language: 'Java', name: 'Sonar Way' }}
{...overrides}
/>
);
</label>
<ProfilePermissionsFormSelect
onChange={[Function]}
- onSearch={[Function]}
- selected={
+ profile={
Object {
- "id": 1,
- "membersCount": 1,
- "name": "Foo",
+ "language": "js",
+ "name": "Sonar way",
}
}
/>
</label>
<ProfilePermissionsFormSelect
onChange={[Function]}
- onSearch={[Function]}
- selected={
+ profile={
Object {
- "active": true,
- "local": true,
- "login": "john.doe",
- "name": "John doe",
- "selected": true,
+ "language": "js",
+ "name": "Sonar way",
}
}
/>
</label>
<ProfilePermissionsFormSelect
onChange={[Function]}
- onSearch={[Function]}
+ profile={
+ Object {
+ "language": "js",
+ "name": "Sonar way",
+ }
+ }
/>
</div>
</div>
</label>
<ProfilePermissionsFormSelect
onChange={[Function]}
- onSearch={[Function]}
+ profile={
+ Object {
+ "language": "js",
+ "name": "Sonar way",
+ }
+ }
/>
</div>
</div>
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`renders 1`] = `
-<Select
+exports[`should render control correctly: control renderer 1`] = `
+<Control
+ className="abs-height-100 Select-control"
+/>
+`;
+
+exports[`should render correctly 1`] = `
+<SearchSelect
autoFocus={true}
className="Select-big width-100"
components={
"SingleValue": [Function],
}
}
- filterOptions={[Function]}
+ defaultOptions={true}
id="change-profile-permission"
inputId="change-profile-permission-input"
isClearable={false}
- isLoading={true}
- isSearchable={true}
+ loadOptions={[Function]}
noOptionsMessage={[Function]}
onChange={[MockFunction]}
- onInputChange={[Function]}
- options={
- Array [
- Object {
- "name": "lambda",
- "value": "group:lambda",
- },
- ]
- }
placeholder=""
- value={
- Array [
- Object {
- "name": "lambda",
- "value": "group:lambda",
- },
- ]
- }
-/>
-`;
-
-exports[`should render control correctly: control renderer 1`] = `
-<Control
- className="abs-height-100 Select-control"
/>
`;
projects / sonarqube.git / commitdiff