fix(pinning): cols reorder & freezing shouldn't affect order (#12)

- the steps to reproduce the issue was to create a grid with `frozenColumn` in the grid options, then change column position (cols reordering) and finally open header menu and freeze any of the column and the bug was that it was going back to original positions while it should keep new positions and just add new freeze column

src/slickgrid-react/components/slickgrid-react.tsx

@@ -843,6 +843,12 @@ export class ReactSlickgridComponent extends React.Component<SlickgridReactProps
           }
         }
 
+        // when column are reordered, we need to update the visibleColumn array
+        this._eventHandler.subscribe(grid.onColumnsReordered, (_e, args) => {
+          this.sharedService.hasColumnsReordered = true;
+          this.sharedService.visibleColumns = args.impactedColumns;
+        });
+
         // load any presets if any (after dataset is initialized)
         this.loadColumnPresetsWhenDatasetInitialized();
         this.loadFilterPresetsWhenDatasetInitialized();

test/cypress/e2e/example15.cy.js

@@ -512,4 +512,71 @@ describe('Example 15: Grid State & Presets using Local Storage', { retries: 1 },
       .children()
       .each(($child, index) => expect($child.text()).to.eq(fullEnglishTitles[index]));
   });
+
+  it('should reload the page', () => {
+    cy.reload().wait(50);
+  });
+
+  it('should have same columns position after reload', () => {
+    const expectedTitles = ['', 'Title', 'Description', 'Duration', '% Complete', 'Start', 'Completed'];
+
+    cy.get('#grid15')
+      .find('.slick-header-columns')
+      .children()
+      .each(($child, index) => expect($child.text()).to.eq(expectedTitles[index]));
+  });
+
+  it('should be able to freeze "Description" 3rd column', () => {
+    cy.get('.slick-header-columns')
+      .children('.slick-header-column:nth(2)')
+      .trigger('mouseover')
+      .children('.slick-header-menu-button')
+      .should('be.hidden')
+      .invoke('show')
+      .click();
+
+    cy.get('.slick-header-menu')
+      .should('be.visible')
+      .children('.slick-menu-item:nth-of-type(1)')
+      .children('.slick-menu-content')
+      .should('contain', 'Freeze Columns')
+      .click();
+  });
+
+  it('should swap "Duration" and "% Complete" columns', () => {
+    const expectedTitles = ['', 'Title', 'Description', '% Complete', 'Duration', 'Start', 'Completed'];
+
+    cy.get('.slick-header-columns')
+      .children('.slick-header-column:nth(3)')
+      .contains('Duration')
+      .drag('.slick-header-column:nth(4)');
+
+    cy.get('#grid15')
+      .find('.slick-header-columns')
+      .children()
+      .each(($child, index) => expect($child.text()).to.eq(expectedTitles[index]));
+  });
+
+  it('should be able to freeze "% Complete" and expect 4th column to be freezed', () => {
+    cy.get('.slick-header-columns')
+      .children('.slick-header-column:nth(3)')
+      .trigger('mouseover')
+      .children('.slick-header-menu-button')
+      .should('be.hidden')
+      .invoke('show')
+      .click();
+
+    cy.get('.slick-header-menu')
+      .should('be.visible')
+      .children('.slick-menu-item:nth-of-type(1)')
+      .children('.slick-menu-content')
+      .should('contain', 'Freeze Columns')
+      .click();
+  });
+
+  it('should have a persisted frozen column after "Description" and a grid with 4 containers on page load with 2 columns on the left and 3 columns on the right', () => {
+    cy.get('[style="top:0px"]').should('have.length', 2);
+    cy.get('.grid-canvas-left > [style="top:0px"]').children().should('have.length', 4);
+    cy.get('.grid-canvas-right > [style="top:0px"]').children().should('have.length', 3);
+  });
 });