From 982ef0377fcb55827ec0ab819d8d7486b15cbd97 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 13 Apr 2023 12:40:09 +0530 Subject: [PATCH] Fix tests --- cypress/e2e/actions.spec.ts | 6 +++--- cypress/e2e/diagramUpdate.spec.ts | 24 ++++++++++++------------ cypress/e2e/history.spec.ts | 10 +++++----- cypress/e2e/util.ts | 25 ++++++++++++++++++------- cypress/snapshots.js | 2 +- 5 files changed, 39 insertions(+), 28 deletions(-) diff --git a/cypress/e2e/actions.spec.ts b/cypress/e2e/actions.spec.ts index e171526c..4206f022 100644 --- a/cypress/e2e/actions.spec.ts +++ b/cypress/e2e/actions.spec.ts @@ -1,4 +1,4 @@ -import { verifyFileSizeGreaterThan } from './util'; +import { typeInEditor, verifyFileSizeGreaterThan } from './util'; describe('Check actions', () => { beforeEach(() => { cy.clearLocalStorage(); @@ -10,7 +10,7 @@ describe('Check actions', () => { cy.get('#markdown') .invoke('val') .then((oldText) => { - cy.get('#editor').click('bottom').type('{enter}C --> HistoryTest'); + typeInEditor('C --> HistoryTest', { bottom: true, newline: true }); cy.get('#markdown') .invoke('val') .then((newText) => { @@ -29,7 +29,7 @@ describe('Check actions', () => { cy.clock(new Date(2022, 0, 1).getTime()); cy.get(`#downloadPNG`).click(); - verifyFileSizeGreaterThan('diagram', 'png', 35_000); + verifyFileSizeGreaterThan('diagram', 'png', 34_000); cy.get(`#downloadSVG`).click(); verifyFileSizeGreaterThan('diagram', 'svg', 10_000); diff --git a/cypress/e2e/diagramUpdate.spec.ts b/cypress/e2e/diagramUpdate.spec.ts index 4dad0613..0fe54e9a 100644 --- a/cypress/e2e/diagramUpdate.spec.ts +++ b/cypress/e2e/diagramUpdate.spec.ts @@ -1,4 +1,4 @@ -import { getEditor, cmd } from './util'; +import { typeInEditor, cmd } from './util'; describe('Auto sync tests', () => { beforeEach(() => { @@ -10,7 +10,7 @@ describe('Auto sync tests', () => { cy.contains('Auto sync').click(); cy.get('#view').should('not.have.class', 'outOfSync'); cy.get('#errorContainer').should('not.exist'); - getEditor({ bottom: true, newline: true }).type(' C --> Test'); + typeInEditor(' C --> Test', { bottom: true }); cy.get('#view').should('have.class', 'outOfSync'); cy.get('#errorContainer').should('contain.text', 'Diagram out of sync.'); cy.getLocalStorage('codeStore').snapshot(); @@ -19,10 +19,10 @@ describe('Auto sync tests', () => { it('should update diagram when shortcut is used', () => { cy.contains('Auto sync').click(); cy.get('#view').should('not.have.class', 'outOfSync'); - getEditor().type(' C --> Test'); + typeInEditor(' C --> Test'); cy.get('#view').should('have.class', 'outOfSync'); cy.get('#errorContainer').should('contain.text', 'Diagram out of sync.'); - getEditor().type(`${cmd}{enter}`); + typeInEditor(`${cmd}{enter}`); cy.get('#errorContainer').should('not.exist'); cy.get('#view').should('not.have.class', 'outOfSync'); }); @@ -38,21 +38,21 @@ describe('Auto sync tests', () => { it('should not dim diagram when code is in sync', () => { cy.contains('Auto sync').click(); cy.get('#view').should('not.have.class', 'outOfSync'); - getEditor().type(' C --> Test'); + typeInEditor(' C --> Test'); cy.get('#view').should('have.class', 'outOfSync'); cy.get('[data-cy=sync]').click(); cy.get('#view').should('not.have.class', 'outOfSync'); cy.get('#autoSync').check(); - getEditor().type('ing'); + typeInEditor('ing'); cy.get('#view').should('not.have.class', 'outOfSync'); cy.getLocalStorage('codeStore').snapshot(); }); it('supports commenting code out/in', () => { - getEditor({ bottom: true, newline: false }).type(`{uparrow}${cmd}/`); + typeInEditor(`{uparrow}${cmd}/`, { bottom: true, newline: false }); cy.get('#view').contains('Car').should('not.exist'); - getEditor().type(`{uparrow}${cmd}/`); + typeInEditor(`{uparrow}${cmd}/`); cy.get('#view').contains('Car').should('exist'); }); @@ -61,7 +61,7 @@ describe('Auto sync tests', () => { '/edit#pako:eNpljjEKwzAMRa8SNOcEnlt6gK5eVFvYJsgOqkwpIXevg9smEE1PnyfxF3DFExgISW-CczQ2D21cYU7a-SGYXRwyvTp9jUhuKlVP-eHy7zA-leQsMEmg_QOM0BLG5FujZVMsaCQmC6ahR5ks2Lw2r84ela4-aREwKpVGwKrl_s7ut3fnkjAIcg_XDzuaUhs' ); cy.get('#errorContainer').should('not.exist'); - getEditor({ newline: true }).type(`branch test`); + typeInEditor(`branch test`, { newline: true }); cy.get('#editor').contains('branch test').should('exist'); cy.get('#errorContainer') .contains( @@ -72,9 +72,9 @@ describe('Auto sync tests', () => { it('should update diagram after entire text is removed', () => { // https://github.com/mermaid-js/mermaid-live-editor/issues/1102 - getEditor().type(`${cmd} a {backspace}`); - getEditor().type('graph LR'); - getEditor().type(' {enter} A-->Car'); + typeInEditor(`${cmd} a {backspace}`); + typeInEditor('graph LR'); + typeInEditor(' {enter} A-->Car'); cy.get('#view').contains('Car').should('exist'); }); }); diff --git a/cypress/e2e/history.spec.ts b/cypress/e2e/history.spec.ts index 01db1efd..ba5073ca 100644 --- a/cypress/e2e/history.spec.ts +++ b/cypress/e2e/history.spec.ts @@ -1,4 +1,4 @@ -import { getEditor, verifyFileSnapshot } from './util'; +import { typeInEditor, verifyFileSnapshot } from './util'; describe('Save History', () => { beforeEach(() => { @@ -51,14 +51,14 @@ describe('Save History', () => { expect(str).to.equal('State already saved.'); }); cy.on('window:confirm', () => true); - getEditor().type(' C --> HistoryTest'); + typeInEditor(' C --> HistoryTest'); cy.get('#saveHistory').click(); cy.get('#historyList').find('li').should('have.length', 2); }); it('should be able to restore and delete', () => { cy.get('#saveHistory').click(); - getEditor().type(' C --> HistoryTest'); + typeInEditor(' C --> HistoryTest'); cy.get('#historyList').find('No items in History').should('not.exist'); cy.get('#historyList').find('li').should('have.length', 1); cy.contains('HistoryTest'); @@ -68,7 +68,7 @@ describe('Save History', () => { cy.get('#historyList').find('li').should('have.length', 0); cy.get('#historyList').contains('No items in History'); cy.get('#saveHistory').click(); - getEditor().type(' C --> HistoryTest'); + typeInEditor(' C --> HistoryTest'); cy.get('#saveHistory').click(); cy.get('#editor').type('ing'); cy.get('#clearHistory').click(); @@ -81,7 +81,7 @@ describe('Save History', () => { // TODO: Fix #639 xit('should auto save history', () => { - getEditor().type(' C --> HistoryTest'); + typeInEditor(' C --> HistoryTest'); cy.tick(70_000); cy.contains('Timeline').click(); cy.get('#historyList').find('li').should('have.length', 1); diff --git a/cypress/e2e/util.ts b/cypress/e2e/util.ts index 2cd6b83c..be30c87d 100644 --- a/cypress/e2e/util.ts +++ b/cypress/e2e/util.ts @@ -1,12 +1,23 @@ export const cmd = `{${Cypress.platform === 'darwin' ? 'meta' : 'ctrl'}}`; +const editor = () => cy.get('#editor textarea:first'); -export const getEditor = ({ bottom = true, newline = false } = {}) => - cy - .get('#editor textarea:first') - .click() - .focused() - .type(`${bottom ? '{pageDown}' : cmd}`) - .type(`${newline ? '{enter}' : cmd}`); +interface EditorOptions { + bottom?: boolean; + newline?: boolean; +} + +export const typeInEditor = ( + text: string, + { bottom = true, newline = false }: EditorOptions = {} +) => { + if (bottom) { + editor().type('{pageDown}'); + } + if (newline) { + editor().type('{enter}'); + } + editor().type(text); +}; const downloadsFolder = Cypress.config('downloadsFolder'); diff --git a/cypress/snapshots.js b/cypress/snapshots.js index acb48a8f..fa9609e4 100644 --- a/cypress/snapshots.js +++ b/cypress/snapshots.js @@ -16,7 +16,7 @@ module.exports = { "1": "{\"code\":\"graph TD\\n A[Party] -->|Get money| B(Go shopping!!)\\n \",\"mermaid\":\"{\\n \\\"theme\\\": \\\"forest\\\",\\n \\\"test\\\": \\\"hello world\\\"\\n}\",\"autoSync\":true,\"updateDiagram\":true,\"loader\":{\"type\":\"files\",\"config\":{\"codeURL\":\"https://gist.githubusercontent.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/raw/4eb03887e6a41397e80bdcdbf94017c498f8f1e2/code.mmd\",\"configURL\":\"https://gist.githubusercontent.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/raw/4eb03887e6a41397e80bdcdbf94017c498f8f1e2/config.json\"}}}" } }, - "__version": "11.2.0", + "__version": "12.9.0", "Auto sync tests": { "should dim diagram when code is edited": { "1": "{\"code\":\"flowchart TD\\n A[Christmas] -->|Get money| B(Go shopping)\\n B --> C{Let me think}\\n C -->|One| D[Laptop]\\n C -->|Two| E[iPhone]\\n C -->|Three| F[fa:fa-car Car]\\n C --> Test\",\"mermaid\":\"{\\n \\\"theme\\\": \\\"default\\\"\\n}\",\"autoSync\":false,\"updateDiagram\":false}"