Added tests for filtered columns showing in members table

refs https://github.com/TryGhost/Team/issues/1388
refs https://github.com/TryGhost/Team/issues/1337

- when filtering the members table, extra columns are shown to make any filtered data visible but we didn't have any tests for the functionality
- updated the `filterColumnLabels` getter to return an object with the original filter type name and the display label so it's easier to use test selectors
This commit is contained in:
Kevin Ansfield 2022-02-22 16:10:09 +00:00
parent cc396b50aa
commit b273391289
3 changed files with 27 additions and 8 deletions

View File

@ -173,7 +173,10 @@ export default class MembersController extends Controller {
'subscriptions.status': 'Subscription Status'
};
return this.filterColumns.map((d) => {
return filterColumnLabelMap[d] ? filterColumnLabelMap[d] : capitalize(d.replace(/_/g, ' '));
return {
name: d,
label: filterColumnLabelMap[d] ? filterColumnLabelMap[d] : capitalize(d.replace(/_/g, ' '))
};
});
}

View File

@ -113,20 +113,21 @@
<tr>
<th>{{this.listHeader}}</th>
{{#if (feature "membersTableStatus")}}
<th>Status</th>
<th data-test-table-column="status">Status</th>
{{/if}}
{{#if (not-eq this.settings.editorDefaultEmailRecipients "disabled")}}
<th>Open rate</th>
<th data-test-table-column="open_rate">Open rate</th>
{{/if}}
<th>Location</th>
<th>Created</th>
{{#each this.filterColumnLabels as |filterColumn|}}
<th>{{filterColumn}}</th>
<th data-test-table-column="location">Location</th>
<th data-test-table-column="created">Created</th>
{{#each this.filterColumnLabels as |column|}}
<th data-test-table-column={{column.name}}>{{column.label}}</th>
{{/each}}
</tr>
</thead>
<VerticalCollection @tagName="tbody" @items={{this.members}} @key="id" @containerSelector=".gh-list-scrolling" @estimateHeight={{69}} @staticHeight={{true}} @bufferSize={{20}} as |member|>
<GhMembersListItem @newsletterEnabled={{not-eq this.settings.editorDefaultEmailRecipients "disabled"}}
<GhMembersListItem
@newsletterEnabled={{not-eq this.settings.editorDefaultEmailRecipients "disabled"}}
@member={{member}}
@filterColumns={{this.filterColumns}}
data-test-member={{member.id}}

View File

@ -53,6 +53,9 @@ describe('Acceptance: Members filtering', function () {
expect(find('[data-test-input="members-search"]'), 'search input').to.exist;
expect(find('[data-test-input="members-search"]'), 'search input').to.not.have.class('active');
expect(find('[data-test-button="members-filter-actions"] span'), 'filter button').to.not.have.class('gh-btn-label-green');
// standard columns are shown
expect(findAll('[data-test-table="members"] [data-test-table-column]').length).to.equal(3);
});
describe('filtering', function () {
@ -93,6 +96,7 @@ describe('Acceptance: Members filtering', function () {
expect(findAll('[data-test-list="members-list-item"]').length, `# of filtered member rows - ${label.name}`)
.to.equal(3);
expect(find('[data-test-table-column="label"]')).to.exist;
// can delete filter
await click('[data-test-delete-members-filter="0"]');
@ -137,6 +141,7 @@ describe('Acceptance: Members filtering', function () {
await fillIn(`${filterSelector} [data-test-select="members-filter-value"]`, 'false');
expect(findAll('[data-test-list="members-list-item"]').length, '# of filtered member rows - false')
.to.equal(4);
expect(find('[data-test-table-column="subscribed"]')).to.exist;
// can delete filter
await click('[data-test-delete-members-filter="0"]');
@ -183,6 +188,7 @@ describe('Acceptance: Members filtering', function () {
await fillIn(`${filterSelector} [data-test-select="members-filter-value"]`, 'comped');
expect(findAll('[data-test-list="members-list-item"]').length, '# of filtered member rows - comped')
.to.equal(2);
expect(find('[data-test-table-column="status"]')).to.exist;
// can delete filter
await click('[data-test-delete-members-filter="0"]');
@ -227,6 +233,7 @@ describe('Acceptance: Members filtering', function () {
await fillIn(`${filterSelector} [data-test-select="members-filter-value"]`, 'year');
expect(findAll('[data-test-list="members-list-item"]').length, '# of filtered member rows - year')
.to.equal(4);
expect(find('[data-test-table-column="subscriptions.plan_interval"]')).to.exist;
// can delete filter
await click('[data-test-delete-members-filter="0"]');
@ -276,6 +283,7 @@ describe('Acceptance: Members filtering', function () {
await fillIn(`${filterSelector} [data-test-select="members-filter-value"]`, 'trialing');
expect(findAll('[data-test-list="members-list-item"]').length, '# of filtered member rows - trialing')
.to.equal(4);
expect(find('[data-test-table-column="subscriptions.status"]')).to.exist;
// can delete filter
await click('[data-test-delete-members-filter="0"]');
@ -325,6 +333,7 @@ describe('Acceptance: Members filtering', function () {
await blur(valueInput);
expect(findAll('[data-test-list="members-list-item"]').length, '# of filtered member rows - false')
.to.equal(3);
expect(find('[data-test-table-column="email_count"]')).to.exist;
// can clear filter
await fillIn(valueInput, '');
@ -380,6 +389,7 @@ describe('Acceptance: Members filtering', function () {
await blur(valueInput);
expect(findAll('[data-test-list="members-list-item"]').length, '# of filtered member rows - input 5')
.to.equal(3);
expect(find('[data-test-table-column="email_opened_count"]')).to.exist;
// can clear filter
await fillIn(valueInput, '');
@ -437,6 +447,7 @@ describe('Acceptance: Members filtering', function () {
await blur(valueInput);
expect(findAll('[data-test-list="members-list-item"]').length, '# of filtered member rows - value 50')
.to.equal(3);
expect(find('[data-test-table-column="email_open_rate"]')).to.exist;
// can change operator
await fillIn(operatorSelector, 'is-greater');
@ -558,6 +569,10 @@ describe('Acceptance: Members filtering', function () {
await click('[data-test-button="members-apply-filter"]');
// all filtered columns are shown
expect(find('[data-test-table-column="email_open_rate"]')).to.exist;
expect(find('[data-test-table-column="subscriptions.status"]')).to.exist;
// bulk actions are shown
expect(find('[data-test-button="add-label-selected"]'), 'add label to selected button').to.exist;
expect(find('[data-test-button="remove-label-selected"]'), 'remove label from selected button').to.exist;