The library is fully tested with Cypress, you can take a look at the test/cypress/e2e folder to see the full list of Angular-Slickgrid E2E tests that run with every PR. You could also use other testing framework like Playwright.
Below is a super small Cypress test
describe('Example 3 - Grid with Editors', () => {constGRID_ROW_HEIGHT=35; // `rowHeight` GridOptionconstfullTitles= ['Title','Duration (days)','% Complete','Start','Finish','Effort Driven'];it('should display Example title', () => {cy.visit(`${Cypress.config('baseUrl')}/editor`);cy.get('h2').should('contain','Example 3: Editors / Delete'); });it('should have exact Column Titles in the grid', () => {cy.get('#grid3').find('.slick-header-columns').children().each(($child, index) =>expect($child.text()).to.eq(fullTitles[index])); });it('should be able to change "Task 1" in first column of second row to a different Task', () => {cy.get(`[style="top:${GRID_ROW_HEIGHT*1}px"] > .slick-cell:nth(1)`).should('contain','Task 1').click();cy.get('input[type=text].editor-text').type('Task 8888').type('{enter}');// revalidate the cellcy.get(`[style="top:${GRID_ROW_HEIGHT*1}px"] > .slick-cell:nth(1)`).should('contain','Task 8888'); });});
Angular Testing Library
As one of the currently trendy approaches to unit/dom testing your application for behavioral vs internal functionality, Testing-Library and more specifically the Angular wrapper Angular Testing Library have emerged.
These tests are typically based on either Jest or Vitest leveraging JSDOM, hence a node environment. Slickgrid supports these cases with the devMode grid option.
describe('Example 3 - Grid with Editors', () => {it('should have exact Column Titles in the grid',async () => {constfullTitles= ['Name','Owner','% Complete','Start','Finish','Effort Driven'];awaitrender(GridDemoComponent, { imports: [ AppModule,AngularSlickgridModule.forRoot({ autoResize: { container:'#container', }, devMode: { containerClientWidth:1000,// fake the default container clientWidth since that's not available in jsdom ownerNodeIndex: 0 // if no other dynamic stylesheets are created index 0 is fine to workaround an issue with lack of ownerNode
}, }), ] });fullTitles.forEach(async (title) => {constelement=awaitscreen.findByText(title);expect(element).toHaveClass('slick-header-column'); }); });});