Commit d76d3f71 authored by Kushal Pandya's avatar Kushal Pandya

Merge branch 'mw-pa-group-projects-dropdown-enhancements' into 'master'

Analytics: Group and project dropdown enhancements

See merge request gitlab-org/gitlab!21302
parents d766c45b b73d9cd2
......@@ -26,11 +26,16 @@ export default {
required: false,
default: () => ({}),
},
defaultGroup: {
type: Object,
required: false,
default: () => ({}),
},
},
data() {
return {
loading: true,
selectedGroup: {},
selectedGroup: this.defaultGroup || {},
};
},
computed: {
......
......@@ -35,11 +35,16 @@ export default {
required: false,
default: () => ({}),
},
defaultProjects: {
type: Array,
required: false,
default: () => [],
},
},
data() {
return {
loading: true,
selectedProjects: [],
selectedProjects: this.defaultProjects || [],
};
},
computed: {
......@@ -74,7 +79,7 @@ export default {
},
clicked: this.onClick.bind(this),
data: this.fetchData.bind(this),
renderRow: group => this.rowTemplate(group),
renderRow: project => this.rowTemplate(project),
text: project => project.name,
opened: e => e.target.querySelector('.dropdown-input-field').focus(),
});
......@@ -106,9 +111,13 @@ export default {
});
},
rowTemplate(project) {
const selected = this.defaultProjects.length
? this.defaultProjects.find(p => p.id === project.id)
: false;
const isActiveClass = selected ? 'is-active' : '';
return `
<li>
<a href='#' class='dropdown-menu-link'>
<a href='#' class='dropdown-menu-link ${isActiveClass}'>
${this.avatarTemplate(project)}
<div class="align-middle">${_.escape(project.name)}</div>
</a>
......
......@@ -28,6 +28,15 @@ const groups = [
describe('GroupsDropdownFilter component', () => {
let wrapper;
const createComponent = (props = {}) => {
wrapper = mount(GroupsDropdownFilter, {
sync: false,
propsData: {
...props,
},
});
};
afterEach(() => {
wrapper.destroy();
});
......@@ -37,10 +46,9 @@ describe('GroupsDropdownFilter component', () => {
Api.groups.mockImplementation((term, options, callback) => {
callback(groups);
});
wrapper = mount(GroupsDropdownFilter);
});
const findDropdown = () => wrapper.find('.dropdown');
const findDropdown = () => wrapper.find({ ref: 'groupsDropdown' });
const openDropdown = () => {
$(findDropdown().element)
.parent()
......@@ -48,13 +56,33 @@ describe('GroupsDropdownFilter component', () => {
};
const findDropdownItems = () => findDropdown().findAll('a');
const findDropdownButton = () => findDropdown().find('button');
const findDropdownButtonAvatar = () => findDropdown().find('.gl-avatar');
it('should call glDropdown', () => {
createComponent();
expect($.fn.glDropdown).toHaveBeenCalled();
});
describe('when passed a defaultGroup as prop', () => {
beforeEach(() => {
createComponent({
defaultGroup: groups[0],
});
});
it("displays the defaultGroup's name", () => {
expect(findDropdownButton().text()).toContain(groups[0].name);
});
it("renders the defaultGroup's avatar", () => {
expect(findDropdownButtonAvatar().exists()).toBe(true);
});
});
describe('it renders the items correctly', () => {
beforeEach(() => {
createComponent();
openDropdown();
return wrapper.vm.$nextTick();
......@@ -102,6 +130,8 @@ describe('GroupsDropdownFilter component', () => {
describe('on group click', () => {
beforeEach(() => {
createComponent();
openDropdown();
return wrapper.vm.$nextTick();
......
......@@ -53,7 +53,7 @@ describe('ProjectsDropdownFilter component', () => {
});
});
const findDropdown = () => wrapper.find('.dropdown');
const findDropdown = () => wrapper.find({ ref: 'projectsDropdown' });
const openDropdown = () => {
$(findDropdown().element)
.parent()
......@@ -61,6 +61,7 @@ describe('ProjectsDropdownFilter component', () => {
};
const findDropdownItems = () => findDropdown().findAll('a');
const findDropdownButton = () => findDropdown().find('button');
const findDropdownButtonAvatar = () => findDropdown().find('.gl-avatar');
describe('queryParams are applied when fetching data', () => {
beforeEach(() => {
......@@ -87,6 +88,34 @@ describe('ProjectsDropdownFilter component', () => {
});
});
describe('when passed a an array of defaultProject as prop', () => {
beforeEach(() => {
createComponent({
defaultProjects: [projects[0]],
});
});
it("displays the defaultProject's name", () => {
expect(findDropdownButton().text()).toContain(projects[0].name);
});
it("renders the defaultProject's avatar", () => {
expect(findDropdownButtonAvatar().exists()).toBe(true);
});
it('marks the defaultProject as selected', () => {
openDropdown();
return wrapper.vm.$nextTick().then(() => {
expect(
findDropdownItems()
.at(0)
.classes('is-active'),
).toBe(true);
});
});
});
describe('when multiSelect is false', () => {
beforeEach(() => {
createComponent({ multiSelect: false });
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment