Acceptance tests for the page size selector on the jobs list view

ui/app/templates/components/page-size-select.hbs

@@ -3,6 +3,7 @@
   <PowerSelect
     @tagName="div"
     class="field-body"
+    data-test-page-size-select
     @options={{pageSizeOptions}}
     @selected={{userSettings.pageSize}}
     @onChange={{action (queue

ui/tests/acceptance/jobs-list-test.js

@@ -2,6 +2,7 @@ import { currentURL } from '@ember/test-helpers';
 import { module, test } from 'qunit';
 import { setupApplicationTest } from 'ember-qunit';
 import { setupMirage } from 'ember-cli-mirage/test-support';
+import { selectChoose } from 'ember-power-select/test-support';
 import JobsList from 'nomad-ui/tests/pages/jobs/list';
 
 let managementToken, clientToken;
@@ -17,6 +18,7 @@ module('Acceptance | jobs list', function(hooks) {
     managementToken = server.create('token');
     clientToken = server.create('token');
 
+    window.localStorage.clear();
     window.localStorage.nomadTokenSecret = managementToken.secretId;
   });
 
@@ -339,6 +341,44 @@ module('Acceptance | jobs list', function(hooks) {
     assert.equal(JobsList.jobs.length, 1, 'Only one job shown due to query param');
   });
 
+  test('the number of jobs shown is equal to the localStorage user setting for page size', async function(assert) {
+    const storedPageSize = 10;
+    window.localStorage.nomadPageSize = storedPageSize;
+
+    server.createList('job', JobsList.pageSize, { shallow: true, createAllocations: false });
+
+    await JobsList.visit();
+
+    assert.equal(JobsList.jobs.length, storedPageSize);
+    assert.equal(JobsList.pageSizeSelect.selectedOption, '10');
+  });
+
+  test('when the page size user setting is unset, the default page size is 25', async function(assert) {
+    server.createList('job', JobsList.pageSize, { shallow: true, createAllocations: false });
+
+    await JobsList.visit();
+
+    assert.equal(JobsList.jobs.length, JobsList.pageSize);
+    assert.equal(JobsList.pageSizeSelect.selectedOption, JobsList.pageSize);
+  });
+
+  test('changing the page size updates the jobs list and also updates the user setting in localStorage', async function(assert) {
+    const desiredPageSize = 10;
+    server.createList('job', JobsList.pageSize, { shallow: true, createAllocations: false });
+
+    await JobsList.visit();
+
+    assert.equal(window.localStorage.nomadPageSize, null);
+    assert.equal(JobsList.jobs.length, JobsList.pageSize);
+    assert.equal(JobsList.pageSizeSelect.selectedOption, JobsList.pageSize);
+
+    await selectChoose('[data-test-page-size-select]', desiredPageSize);
+
+    assert.equal(window.localStorage.nomadPageSize, desiredPageSize);
+    assert.equal(JobsList.jobs.length, desiredPageSize);
+    assert.equal(JobsList.pageSizeSelect.selectedOption, desiredPageSize);
+  });
+
   function testFacet(label, { facet, paramName, beforeEach, filter, expectedOptions }) {
     test(`the ${label} facet has the correct options`, async function(assert) {
       await beforeEach();

ui/tests/pages/jobs/list.js

@@ -13,7 +13,7 @@ import {
 import facet from 'nomad-ui/tests/pages/components/facet';
 
 export default create({
-  pageSize: 10,
+  pageSize: 25,
 
   visit: visitable('/jobs'),
 
@@ -64,6 +64,17 @@ export default create({
     }),
   },
 
+  pageSizeSelect: {
+    isPresent: isPresent('[data-test-page-size-select]'),
+    open: clickable('[data-test-page-size-select] .ember-power-select-trigger'),
+    selectedOption: text('[data-test-page-size-select] .ember-power-select-selected-item'),
+    options: collection('.ember-power-select-option', {
+      testContainer: '#ember-testing',
+      resetScope: true,
+      label: text(),
+    }),
+  },
+
   facets: {
     type: facet('[data-test-type-facet]'),
     status: facet('[data-test-status-facet]'),