diff --git a/ui/app/templates/jobs/job/allocations.hbs b/ui/app/templates/jobs/job/allocations.hbs index 6faf0e923f08..080919b6a655 100644 --- a/ui/app/templates/jobs/job/allocations.hbs +++ b/ui/app/templates/jobs/job/allocations.hbs @@ -1,7 +1,7 @@ {{#gutter-menu class="page-body" onNamespaceChange=(action "gotoJobs")}} {{partial "jobs/job/subnav"}}
- {{#if sortedAllocations.length}} + {{#if allocations.length}}
{{search-box diff --git a/ui/tests/acceptance/job-allocations-test.js b/ui/tests/acceptance/job-allocations-test.js index ee46f6624990..202104599064 100644 --- a/ui/tests/acceptance/job-allocations-test.js +++ b/ui/tests/acceptance/job-allocations-test.js @@ -5,6 +5,16 @@ import Allocations from 'nomad-ui/tests/pages/jobs/job/allocations'; let job; let allocations; +const makeSearchAllocations = server => { + Array(10) + .fill(null) + .map((_, index) => { + server.create('allocation', { + id: index < 5 ? `ffffff-dddddd-${index}` : `111111-222222-${index}`, + }); + }); +}; + moduleForAcceptance('Acceptance | job allocations', { beforeEach() { server.create('node'); @@ -64,13 +74,7 @@ test('allocations table is sortable', function(assert) { }); test('allocations table is searchable', function(assert) { - Array(10) - .fill(null) - .map((_, index) => { - server.create('allocation', { - id: index < 5 ? `ffffff-dddddd-${index}` : `111111-222222-${index}`, - }); - }); + makeSearchAllocations(server); allocations = server.schema.allocations.where({ jobId: job.id }).models; Allocations.visit({ id: job.id }); @@ -83,3 +87,24 @@ test('allocations table is searchable', function(assert) { assert.equal(Allocations.allocations.length, 5, 'List is filtered by search term'); }); }); + +test('when a search yields no results, the search box remains', function(assert) { + makeSearchAllocations(server); + + allocations = server.schema.allocations.where({ jobId: job.id }).models; + Allocations.visit({ id: job.id }); + + andThen(() => { + Allocations.search('^nothing will ever match this long regex$'); + }); + + andThen(() => { + assert.equal( + Allocations.emptyState.headline, + 'No Matches', + 'List is empty and the empty state is about search' + ); + + assert.ok(Allocations.hasSearchBox, 'Search box is still shown'); + }); +}); diff --git a/ui/tests/pages/jobs/job/allocations.js b/ui/tests/pages/jobs/job/allocations.js index 1c15aa9fd534..65ca46f5b923 100644 --- a/ui/tests/pages/jobs/job/allocations.js +++ b/ui/tests/pages/jobs/job/allocations.js @@ -4,6 +4,8 @@ import { create, collection, fillable, + isPresent, + text, visitable, } from 'ember-cli-page-object'; @@ -14,10 +16,16 @@ export default create({ pageSize: 25, + hasSearchBox: isPresent('[data-test-allocations-search]'), search: fillable('[data-test-allocations-search] input'), ...allocations(), + isEmpty: isPresent('[data-test-empty-allocations-list]'), + emptyState: { + headline: text('[data-test-empty-allocations-list-headline]'), + }, + sortOptions: collection('[data-test-sort-by]', { id: attribute('data-test-sort-by'), sort: clickable(),