24af5ad0dd
refs https://github.com/TryGhost/Team/issues/1780 This commit adds some Cypress tests as a POC to the project. If we decide to go with Cypress, we can add more tests to cover the rest of the codebase. The main reason to have a E2E framework is that some editor related UI is hard to test with the React tests because it uses JSDOM.
61 lines
2.2 KiB
JavaScript
61 lines
2.2 KiB
JavaScript
describe('Pagination', () => {
|
|
it('does not show pagination button for 0 comments', () => {
|
|
cy.login().as('login');
|
|
cy.mockComments(0).as('getComments');
|
|
|
|
cy.visit(`/?ghostComments=${encodeURIComponent('/')}&styles=${encodeURIComponent('/main.css')}`);
|
|
cy.wait(['@login', '@getComments', '@getCounts']);
|
|
|
|
cy.iframe().find('[data-testid="pagination-component"]').should('not.exist');
|
|
});
|
|
|
|
it('does show pagination plural', () => {
|
|
cy.login().as('login');
|
|
cy.mockComments(12).as('getComments');
|
|
|
|
cy.visit(`/?ghostComments=${encodeURIComponent('/')}&styles=${encodeURIComponent('/main.css')}`);
|
|
cy.wait(['@login', '@getComments', '@getCounts']);
|
|
|
|
const button = cy.iframe().find('[data-testid="pagination-component"]').should('exist');
|
|
button.contains('Show 7 previous comments');
|
|
|
|
// Should show 5 comments
|
|
cy.iframe().find('[data-testid="comment-component"]').should('have.length', 5);
|
|
});
|
|
|
|
it('does show pagination singular', () => {
|
|
cy.login().as('login');
|
|
cy.mockComments(6).as('getComments');
|
|
|
|
cy.visit(`/?ghostComments=${encodeURIComponent('/')}&styles=${encodeURIComponent('/main.css')}`);
|
|
cy.wait(['@login', '@getComments', '@getCounts']);
|
|
|
|
cy.iframe().contains('Show 1 previous comment');
|
|
|
|
// Should show 5 comments
|
|
cy.iframe().find('[data-testid="comment-component"]').should('have.length', 5);
|
|
});
|
|
|
|
it('can load next page', () => {
|
|
cy.login().as('login');
|
|
cy.mockComments(6).as('getComments');
|
|
|
|
cy.visit(`/?ghostComments=${encodeURIComponent('/')}&styles=${encodeURIComponent('/main.css')}`);
|
|
cy.wait(['@login', '@getComments', '@getCounts']);
|
|
|
|
const button = cy.iframe().contains('Show 1 previous comment');
|
|
|
|
// Should show 5 comments
|
|
cy.iframe().find('[data-testid="comment-component"]').should('have.length', 5);
|
|
|
|
button.click();
|
|
cy.wait(['@getCommentsPage2']);
|
|
|
|
// Button should be gone
|
|
button.should('not.exist');
|
|
|
|
// Should show 6 comments now, instead of 5
|
|
cy.iframe().find('[data-testid="comment-component"]').should('have.length', 6);
|
|
});
|
|
});
|