maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

"Empty State" for Result-less Search and Filter (#17777)

Browse source 
* Adds an empty state when user search & filter returns nothing

* Addresses e2e failures for small screens
This commit is contained in:
Julianna Tetreault 2022-06-01 06:54:39 -06:00 • committed by GitHub
parent b155749db0
commit b155398f17
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 67 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
app/views/admin/users/index.html.erb
View file

@ -100,6 +100,13 @@
<% end %>
</tbody>
</table>
<% if @users.empty? %>
<div class="align-center flex flex-col my-auto py-7" id="empty-state-message-id">
<p class="fs-xl fw-normal mb-2">No members found under these filters.</p>
<p class="color-secondary">Try broadening or removing the filters.</p>
</div>
<% end %>
<!-- XL screen data view end -->
<div class="flex justify-end xl:p-7">

60
cypress/integration/seededFlows/adminFlows/users/userIndexView.spec.js
View file

@ -170,6 +170,43 @@ describe('User index view', () => {
.should('equal', 'admin@forem.local');
});
});
describe('Empty state', () => {
// Search and filter controls are initialized async.
// This helper function allows us to use `pipe` to retry commands in case the test runner clicks before the JS has run
const click = (el) => el.click();
it('Displays an empty state when no results are returned when searching for a user', () => {
cy.findByRole('button', { name: 'Expand search' })
.should('have.attr', 'aria-expanded', 'false')
.pipe(click)
.should('have.attr', 'aria-expanded', 'true');
cy.findByRole('textbox', {
name: 'Search member by name, username or email',
}).type('Not a member');
cy.findByRole('button', { name: 'Search' }).click();
// Since there aren't any results, the following message should be displayed
cy.findByText('No members found under these filters.').should('exist');
});
it('Displays an empty state when no results are returned when filtering for a user', () => {
cy.findByRole('button', { name: 'Expand filter' })
.should('have.attr', 'aria-expanded', 'false')
.pipe(click)
.should('have.attr', 'aria-expanded', 'true');
cy.findByRole('combobox', { name: 'User role' }).select(
'codeland_admin',
);
cy.findByRole('button', { name: 'Filter' }).click();
// Since there aren't any results, the following message should be displayed
cy.findByText('No members found under these filters.').should('exist');
});
});
});
describe('large screens', () => {
@ -233,6 +270,29 @@ describe('User index view', () => {
});
});
describe('Empty state', () => {
it('Displays an empty state when no results are returned when searching for a user', () => {
cy.findByRole('textbox', {
name: 'Search member by name, username or email',
}).type('Not a member');
cy.findByRole('button', { name: 'Search' }).click();
// Since there aren't any results, the following message should be displayed
cy.findByText('No members found under these filters.').should('exist');
});
it('Displays an empty state when no results are returned when filtering for a user', () => {
cy.findByRole('combobox', { name: 'User role' }).select(
'codeland_admin',
);
cy.findByRole('button', { name: 'Filter' }).click();
// Since there aren't any results, the following message should be displayed
cy.findByText('No members found under these filters.').should('exist');
});
});
describe('User actions', () => {
it('Copies user email to clipboard', () => {
// Helper function for cypress-pipe