diff --git a/cypress/integration/deposit-admin.spec.js b/cypress/integration/deposit-admin.spec.js --- a/cypress/integration/deposit-admin.spec.js +++ b/cypress/integration/deposit-admin.spec.js @@ -17,18 +17,16 @@ .submit(); } -describe('Test admin deposit page', function() { - it('Should test deposit page', function() { - cy.visit(this.Urls.admin_deposit()); - // FIXME: cypress anti-pattern, do not use ui to log ¯\_(ツ)_/¯ - // https://docs.cypress.io/guides/getting-started/testing-your-app.html#Logging-in - login(username, password); +// data to use as request query response +let responseDeposits; +let expectedOrigins; - cy.server(); - let inputDeposits = [ +describe('Test admin deposit page', function() { + beforeEach(() => { + responseDeposits = [ { 'id': 614, - 'external_id': 'c-d-1', + 'external_id': 'ch-de-1', 'reception_date': '2020-05-18T13:48:27Z', 'status': 'done', 'status_detail': null, @@ -37,7 +35,7 @@ }, { 'id': 613, - 'external_id': 'c-d-2', + 'external_id': 'ch-de-2', 'reception_date': '2020-05-18T11:20:16Z', 'status': 'done', 'status_detail': null, @@ -46,7 +44,7 @@ }, { 'id': 612, - 'external_id': 'c-d-3', + 'external_id': 'ch-de-3', 'reception_date': '2020-05-18T11:20:16Z', 'status': 'rejected', 'status_detail': 'incomplete deposit!', @@ -54,14 +52,52 @@ 'swh_id_context': null } ]; + // those are computed from the + expectedOrigins = { + 614: 'https://w.s.o/c-d-1', + 613: 'https://w.s.o/c-d-2', + 612: '' + }; + + }); + + it('Should filter out deposits matching excluding pattern from display', function() { + cy.visit(this.Urls.admin_deposit()); + // FIXME: cypress anti-pattern, do not use ui to log ¯\_(ツ)_/¯ + // https://docs.cypress.io/guides/getting-started/testing-your-app.html#Logging-in + login(username, password); + + cy.server(); + + // entry supposed to be excluded from the display by default + let extraDeposit = { + 'id': 10, + 'external_id': 'check-deposit-3', + 'reception_date': '2020-05-18T11:20:16Z', + 'status': 'done', + 'status_detail': null, + 'swh_id': 'swh:1:dir:fb234417', + 'swh_id_context': 'swh:1:dir:fb234417;origin=https://w.s.o/c-d-3;visit=swh:1:snp:181417fb;anchor=swh:1:rev:3d166604;path=/' + }; + + // of course, that's how to copy a list (an "array") + let testDeposits = responseDeposits.slice(); + // and add a new element to that array by mutating it... + testDeposits.push(extraDeposit); + expectedOrigins[10] = 'https://w.s.o/c-d-3'; + + // ensure we don't touch the original reference + expect(responseDeposits.length).to.be.equal(3); + expect(testDeposits.length).to.be.equal(4); + cy.route({ method: 'GET', url: `${this.Urls.admin_deposit_list()}**`, response: { 'draw': 10, - 'recordsTotal': 3, - 'recordsFiltered': 3, - 'data': inputDeposits + 'recordsTotal': testDeposits.length, + 'recordsFiltered': testDeposits.length, + 'data': testDeposits } }).as('listDeposits'); @@ -72,38 +108,160 @@ cy.get('#swh-admin-deposit-list') .should('exist'); - // those are computed from the - let expectedOrigins = [ - 'https://w.s.o/c-d-1', 'https://w.s.o/c-d-2', '' - ]; + cy.wait('@listDeposits').then((xhr) => { + let deposits = xhr.response.body.data; + expect(deposits.length).to.equal(testDeposits.length); + + cy.get('#swh-admin-deposit-list').find('tbody > tr').as('rows'); + + // only 2 entries + cy.get('@rows').each((row, idx, collection) => { + let deposit = deposits[idx]; + let responseDeposit = testDeposits[idx]; + cy.log('deposit', deposit); + cy.log('responseDeposit', responseDeposit); + expect(deposit.id).to.be.equal(responseDeposit['id']); + expect(deposit.external_id).to.be.equal(responseDeposit['external_id']); + expect(deposit.status).to.be.equal(responseDeposit['status']); + expect(deposit.status_detail).to.be.equal(responseDeposit['status_detail']); + expect(deposit.swh_id).to.be.equal(responseDeposit['swh_id']); + expect(deposit.swh_id_context).to.be.equal(responseDeposit['swh_id_context']); + + let expectedOrigin = expectedOrigins[deposit.id]; + + // part of the data, but it should not be displayed (got filtered out) + if (deposit.external_id === 'check-deposit-3') { + cy.contains(deposit.status).should('not.be.visible'); + cy.contains(deposit.status_detail).should('not.be.visible'); + cy.contains(deposit.external_id).should('not.be.visible'); + cy.contains(expectedOrigin).should('not.be.visible'); + cy.contains(deposit.swh_id).should('not.be.visible'); + cy.contains(deposit.swh_id_context).should('not.be.visible'); + } else { + expect(deposit.external_id).to.be.not.equal('check-deposit-3'); + cy.contains(deposit.id).should('be.visible'); + if (deposit.status !== 'rejected') { + cy.contains(deposit.external_id).should('not.be.visible'); + cy.contains(expectedOrigin).should('be.visible'); + // ensure it's in the dom + } + cy.contains(deposit.status).should('be.visible'); + // those are hidden by default, so now visible + if (deposit.status_detail !== null) { + cy.contains(deposit.status_detail).should('not.be.visible'); + } + + // those are hidden by default + if (deposit.swh_id !== null) { + cy.contains(deposit.swh_id).should('not.be.visible'); + cy.contains(deposit.swh_id_context).should('not.be.visible'); + } + } + }); + + // toggling all links and ensure, the previous checks are inverted + cy.get('a.toggle-col').click({'multiple': true}).then(() => { + cy.get('#swh-admin-deposit-list').find('tbody > tr').as('rows'); + + cy.get('@rows').should('have.length', 3); + + cy.get('@rows').each((row, idx, collection) => { + let deposit = deposits[idx]; + let expectedOrigin = expectedOrigins[deposit.id]; + + // filtered out deposit + if (deposit.external_id === 'check-deposit-3') { + cy.contains(deposit.status).should('not.be.visible'); + cy.contains(deposit.status_detail).should('not.be.visible'); + cy.contains(deposit.external_id).should('not.be.visible'); + cy.contains(expectedOrigin).should('not.be.visible'); + cy.contains(deposit.swh_id).should('not.be.visible'); + cy.contains(deposit.swh_id_context).should('not.be.visible'); + } else { + expect(deposit.external_id).to.be.not.equal('check-deposit-3'); + // ensure it's in the dom + cy.contains(deposit.id).should('not.be.visible'); + if (deposit.status !== 'rejected') { + cy.contains(deposit.external_id).should('not.be.visible'); + expect(row).to.contain(expectedOrigin); + } + + expect(row).to.not.contain(deposit.status); + // those are hidden by default, so now visible + if (deposit.status_detail !== null) { + cy.contains(deposit.status_detail).should('be.visible'); + } + + // those are hidden by default, so now they should be visible + if (deposit.swh_id !== null) { + cy.contains(deposit.swh_id).should('be.visible'); + cy.contains(deposit.swh_id_context).should('be.visible'); + } + } + }); + }); + + cy.get('#swh-admin-deposit-list-error') + .should('not.contain', + 'An error occurred while retrieving the list of deposits'); + }); + + }); + + it('Should display properly entries', function() { + cy.visit(this.Urls.admin_deposit()); + // FIXME: cypress anti-pattern, do not use ui to log ¯\_(ツ)_/¯ + // https://docs.cypress.io/guides/getting-started/testing-your-app.html#Logging-in + login(username, password); + + let testDeposits = responseDeposits; + + cy.server(); + cy.route({ + method: 'GET', + url: `${this.Urls.admin_deposit_list()}**`, + response: { + 'draw': 10, + 'recordsTotal': testDeposits.length, + 'recordsFiltered': testDeposits.length, + 'data': testDeposits + } + }).as('listDeposits'); + + cy.location('pathname') + .should('be.equal', this.Urls.admin_deposit()); + cy.url().should('include', '/admin/deposit'); + + cy.get('#swh-admin-deposit-list') + .should('exist'); cy.wait('@listDeposits').then((xhr) => { cy.log('response:', xhr.response); cy.log(xhr.response.body); let deposits = xhr.response.body.data; cy.log('Deposits: ', deposits); - expect(deposits.length).to.equal(inputDeposits.length); + expect(deposits.length).to.equal(testDeposits.length); cy.get('#swh-admin-deposit-list').find('tbody > tr').as('rows'); // only 2 entries cy.get('@rows').each((row, idx, collection) => { let deposit = deposits[idx]; - let inputDeposit = inputDeposits[idx]; + let responseDeposit = testDeposits[idx]; assert.isNotNull(deposit); - assert.isNotNull(inputDeposit); - expect(deposit.id).to.be.equal(inputDeposit['id']); - expect(deposit.external_id).to.be.equal(inputDeposit['external_id']); - expect(deposit.status).to.be.equal(inputDeposit['status']); - expect(deposit.status_detail).to.be.equal(inputDeposit['status_detail']); - expect(deposit.swh_id).to.be.equal(inputDeposit['swh_id']); - expect(deposit.swh_id_context).to.be.equal(inputDeposit['swh_id_context']); - - let expectedOrigin = expectedOrigins[idx]; + assert.isNotNull(responseDeposit); + expect(deposit.id).to.be.equal(responseDeposit['id']); + expect(deposit.external_id).to.be.equal(responseDeposit['external_id']); + expect(deposit.status).to.be.equal(responseDeposit['status']); + expect(deposit.status_detail).to.be.equal(responseDeposit['status_detail']); + expect(deposit.swh_id).to.be.equal(responseDeposit['swh_id']); + expect(deposit.swh_id_context).to.be.equal(responseDeposit['swh_id_context']); + + let expectedOrigin = expectedOrigins[deposit.id]; // ensure it's in the dom cy.contains(deposit.id).should('be.visible'); if (deposit.status !== 'rejected') { - cy.contains(deposit.external_id).should('be.visible'); + expect(row).to.not.contain(deposit.external_id); cy.contains(expectedOrigin).should('be.visible'); } @@ -126,12 +284,12 @@ cy.get('@rows').each((row, idx, collection) => { let deposit = deposits[idx]; - let expectedOrigin = expectedOrigins[idx]; + let expectedOrigin = expectedOrigins[deposit.id]; // ensure it's in the dom cy.contains(deposit.id).should('not.be.visible'); if (deposit.status !== 'rejected') { - expect(row).to.contain(deposit.external_id); + expect(row).to.not.contain(deposit.external_id); expect(row).to.contain(expectedOrigin); } diff --git a/swh/web/assets/src/bundles/admin/deposit.js b/swh/web/assets/src/bundles/admin/deposit.js --- a/swh/web/assets/src/bundles/admin/deposit.js +++ b/swh/web/assets/src/bundles/admin/deposit.js @@ -15,6 +15,18 @@ return data; } +function filterDataWithExcludePattern(data, excludePattern) { + /** Return true if the data is to be filtered, false otherwise. */ + for (const key in data) { + let value = data[key]; + if ((typeof value === 'string' || value instanceof String) && + value.search(excludePattern) !== -1) { + return true; // exclude the data from filtering + } + } + return false; +} + export function initDepositAdmin() { let depositsTable; $(document).ready(() => { @@ -25,7 +37,50 @@ }) .DataTable({ serverSide: true, - ajax: Urls.admin_deposit_list(), + processing: true, + // let's define the order of table options display + // f: (f)ilter + // l: (l)ength changing + // r: p(r)ocessing + // t: (t)able + // i: (i)nfo + // p: (p)agination + // see https://datatables.net/examples/basic_init/dom.html + dom: '<l>rt<"bottom"ip>>', + // div#list-exclude is a custom filter added next to dataTable + // initialization below through js dom manipulation, see + // https://datatables.net/examples/advanced_init/dom_toolbar.html + ajax: { + url: Urls.admin_deposit_list(), + // filtering data set depending on the exclude search input + dataFilter: function(dataResponse) { + /* Filter out data returned by the server to exclude entries + matching the exclude pattern. + + Args + dataResponse (str): the json response in string + + Returns: + json response altered (in string) + */ + // + let data = jQuery.parseJSON(dataResponse); + let excludePattern = $('#swh-admin-deposit-list-exclude-filter').val(); + let recordsFiltered = 0; + let filteredData = []; + for (const row of data.data) { + if (filterDataWithExcludePattern(row, excludePattern)) { + recordsFiltered += 1; + } else { + filteredData.push(row); + } + } + // update data values + data['recordsFiltered'] = recordsFiltered; + data['data'] = filteredData; + return JSON.stringify(data); + } + }, columns: [ { data: 'id', @@ -106,6 +161,26 @@ scrollCollapse: true, order: [[0, 'desc']] }); + + // Some more customization is needed on the table + $('div#list-exclude').html(`
+
+ +
+
+`); + // Adding exclusion pattern update behavior, when typing, update search + $('#swh-admin-deposit-list-exclude-filter').keyup(function() { + depositsTable.draw(); + }); + // at last draw the table depositsTable.draw(); });