diff --git a/cypress/integration/example-optimizing-updates.spec.js b/cypress/integration/example-optimizing-updates.spec.js
new file mode 100644
index 00000000..1d22d275
--- /dev/null
+++ b/cypress/integration/example-optimizing-updates.spec.js
@@ -0,0 +1,101 @@
+///
+
+describe('Example - Optimizing Updates', () => {
+ const titles = ['#', 'Severity', 'Time', 'Message'];
+
+ beforeEach(() => {
+ // create a console.log spy for later use
+ cy.window().then((win) => {
+ cy.spy(win.console, "log");
+ });
+ });
+
+ it('should display Example Multi-grid Basic', () => {
+ cy.visit(`${Cypress.config('baseExampleUrl')}/example-optimizing-updates.html`);
+ cy.get('.options-panel > b').should('contain', 'Description:');
+ cy.contains('This page demonstrates how the bulk update operations ');
+ });
+
+ it('should have exact Column Titles in the grid', () => {
+ cy.get('#myGrid')
+ .find('.slick-header-columns')
+ .children()
+ .each(($child, index) => expect($child.text()).to.eq(titles[index]));
+ });
+
+ it('should show initial rows', () => {
+ cy.get('#pager')
+ .find('.slick-pager-status')
+ .should('contain', 'Showing all 300 rows');
+ });
+
+ it('should update the rows on inefficient click', () => {
+ cy.visit(`${Cypress.config('baseExampleUrl')}/example-optimizing-updates.html`);
+
+ cy.get('#myGrid')
+ .find('.slick-row')
+ .each(($child, index) => {
+ const message = $child.find('.cell-message').text();
+ const number = parseInt(message.substring("Log Entry ".length));
+ expect(number).to.be.lessThan(1000)
+ });
+
+ cy.get('.options-panel button')
+ .contains('inefficient')
+ .click();
+
+ cy.get('#myGrid')
+ .find('.slick-row')
+ .each(($child, index) => {
+ const message = $child.find('.cell-message').text();
+ const number = parseInt(message.substring("Log Entry ".length));
+ expect(number).to.be.greaterThan(90000)
+ });
+ });
+
+ it('should update the rows on efficient click', () => {
+ cy.visit(`${Cypress.config('baseExampleUrl')}/example-optimizing-updates.html`);
+
+ cy.get('#myGrid')
+ .find('.slick-row')
+ .each(($child, index) => {
+ const message = $child.find('.cell-message').text();
+ const number = parseInt(message.substring("Log Entry ".length));
+ expect(number).to.be.lessThan(1000)
+ });
+
+ cy.get('.options-panel button')
+ .contains('efficient')
+ .click();
+
+ cy.get('#myGrid')
+ .find('.slick-row')
+ .each(($child, index) => {
+ const message = $child.find('.cell-message').text();
+ const number = parseInt(message.substring("Log Entry ".length));
+ expect(number).to.be.greaterThan(90000)
+ });
+ });
+
+ it('should need less time on efficient than inefficient', () => {
+ cy.visit(`${Cypress.config('baseExampleUrl')}/example-optimizing-updates.html`);
+
+ cy.get('#duration').invoke('text', '').should('be.empty');
+ cy.get('.options-panel button')
+ .contains('(inefficient)')
+ .click();
+ cy.get('#duration').should('not.be.empty').then($duration => {
+ let inEfficientTime = parseInt($duration.text());
+
+ cy.get('#duration').invoke('text', '').should('be.empty');
+ cy.get('.options-panel button')
+ .contains('(efficient)')
+ .click();
+ cy.get('#duration').should('not.be.empty').then($duration2 => {
+ let efficientTime = parseInt($duration2.text());
+ expect(efficientTime).to.be.lessThan(inEfficientTime / 2);
+ });
+ });
+
+ });
+});
diff --git a/examples/example-optimizing-updates.html b/examples/example-optimizing-updates.html
index 2b103a98..f5abdb6d 100644
--- a/examples/example-optimizing-updates.html
+++ b/examples/example-optimizing-updates.html
@@ -51,8 +51,11 @@
then updated.
Controls
- Add 100000 entries of each severity (inefficient)
- Add 100000 entries of each severity (efficient)
+ Add 100000 entries of each severity (inefficient)
+ Add 100000 entries of each severity (efficient)
+
+ Last update took:
+
View Source:
View the source for this example on Github
@@ -107,13 +110,18 @@ View Source:
// the logic to simulate new events
- function simulateLogs(count, efficient) {
- var chunks = 10;
- for(var i = 0; i < chunks; i++) {
- simulateLogChunk(count / chunks, efficient);
- }
+ function simulateLogs(count, efficient, update) {
+ var chunks = 10;
+ var start = new Date();
+ for(var i = 0; i < chunks; i++) {
+ simulateLogChunk(count / chunks, efficient);
+ }
+ var end = new Date();
+ if (update) {
+ $('#duration').text(end - start + 'ms');
+ }
}
- function simulateLogChunk(count, efficient) {
+ function simulateLogChunk(count, efficient, update) {
if(efficient) {
dataView.beginUpdate(true); // efficient bulk update
var logs = []; // we will first collect all items to be added