diff --git a/package.json b/package.json index 5275c366..33f049a9 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,8 @@ "test:coverage": "vitest run --coverage", "test:browser": "cypress run", "test": "test:unit && test:browser", - "cy": "cypress open" + "cy": "cypress open", + "pw": "npx playwright test" }, "devDependencies": { "@cypress/snapshot": "2.1.7", diff --git a/playwright.config.ts b/playwright.config.ts index 979c83a6..872f861d 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -11,97 +11,96 @@ import { devices } from '@playwright/test'; * See https://playwright.dev/docs/test-configuration. */ const config: PlaywrightTestConfig = { - testDir: './tests', - /* Maximum time one test can run for. */ - timeout: 30 * 1000, - expect: { - /** - * Maximum time expect() should wait for the condition to be met. - * For example in `await expect(locator).toHaveText();` - */ - timeout: 5000 - }, - /* Run tests in files in parallel */ - fullyParallel: true, - /* Fail the build on CI if you accidentally left test.only in the source code. */ - forbidOnly: !!process.env.CI, - /* Retry on CI only */ - retries: process.env.CI ? 2 : 0, - /* Opt out of parallel tests on CI. */ - workers: process.env.CI ? 1 : undefined, - /* Reporter to use. See https://playwright.dev/docs/test-reporters */ - reporter: 'html', - /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ - use: { - /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */ - actionTimeout: 0, - /* Base URL to use in actions like `await page.goto('/')`. */ - // baseURL: 'http://localhost:3000', + testDir: './tests', + /* Maximum time one test can run for. */ + timeout: 30 * 1000, + expect: { + /** + * Maximum time expect() should wait for the condition to be met. + * For example in `await expect(locator).toHaveText();` + */ + timeout: 5000 + }, + /* Run tests in files in parallel */ + fullyParallel: true, + /* Fail the build on CI if you accidentally left test.only in the source code. */ + forbidOnly: !!process.env.CI, + /* Retry on CI only */ + retries: process.env.CI ? 2 : 0, + /* Opt out of parallel tests on CI. */ + workers: process.env.CI ? 1 : undefined, + /* Reporter to use. See https://playwright.dev/docs/test-reporters */ + reporter: 'html', + /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ + use: { + /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */ + actionTimeout: 0, + /* Base URL to use in actions like `await page.goto('/')`. */ + baseURL: 'http://localhost:3000', + /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ + trace: 'on-first-retry' + }, - /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ - trace: 'on-first-retry' - }, + /* Configure projects for major browsers */ + projects: [ + { + name: 'chromium', + use: { + ...devices['Desktop Chrome'] + } + } - /* Configure projects for major browsers */ - projects: [ - { - name: 'chromium', - use: { - ...devices['Desktop Chrome'] - } - } + // { + // name: 'firefox', + // use: { + // ...devices['Desktop Firefox'], + // }, + // }, - // { - // name: 'firefox', - // use: { - // ...devices['Desktop Firefox'], - // }, - // }, + // { + // name: 'webkit', + // use: { + // ...devices['Desktop Safari'], + // }, + // }, - // { - // name: 'webkit', - // use: { - // ...devices['Desktop Safari'], - // }, - // }, + /* Test against mobile viewports. */ + // { + // name: 'Mobile Chrome', + // use: { + // ...devices['Pixel 5'], + // }, + // }, + // { + // name: 'Mobile Safari', + // use: { + // ...devices['iPhone 12'], + // }, + // }, - /* Test against mobile viewports. */ - // { - // name: 'Mobile Chrome', - // use: { - // ...devices['Pixel 5'], - // }, - // }, - // { - // name: 'Mobile Safari', - // use: { - // ...devices['iPhone 12'], - // }, - // }, + /* Test against branded browsers. */ + // { + // name: 'Microsoft Edge', + // use: { + // channel: 'msedge', + // }, + // }, + // { + // name: 'Google Chrome', + // use: { + // channel: 'chrome', + // }, + // }, + ] - /* Test against branded browsers. */ - // { - // name: 'Microsoft Edge', - // use: { - // channel: 'msedge', - // }, - // }, - // { - // name: 'Google Chrome', - // use: { - // channel: 'chrome', - // }, - // }, - ] + /* Folder for test artifacts such as screenshots, videos, traces, etc. */ + // outputDir: 'test-results/', - /* Folder for test artifacts such as screenshots, videos, traces, etc. */ - // outputDir: 'test-results/', - - /* Run your local dev server before starting the tests */ - // webServer: { - // command: 'npm run start', - // port: 3000, - // }, + /* Run your local dev server before starting the tests */ + // webServer: { + // command: 'npm run start', + // port: 3000, + // }, }; export default config; diff --git a/tests/example.spec.ts b/tests/example.spec.ts deleted file mode 100644 index cfb9a569..00000000 --- a/tests/example.spec.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { test, expect } from '@playwright/test'; - -test('homepage has Playwright in title and get started link linking to the intro page', async ({ - page, - context -}) => { - await page.goto( - 'http://localhost:3000/edit?gist=https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/ec9b4ab0e41e4ff6287326cd3cb47affd7851e19' - ); - - // cy.getLocalStorage('codeStore').snapshot(); - // Expect a title "to contain" a substring. - await page.locator('"History"').click(); - await page.locator('"Party"').isVisible(); - await page.locator('"Revisions"').isVisible(); - await page.locator('"sidharthv96 v7851e19"').isVisible(); - await page.waitForTimeout(400); - const storage = await context.storageState(); - expect(JSON.stringify(storage)).toMatchSnapshot(); -}); diff --git a/tests/example.spec.ts-snapshots/homepage-has-Playwright-in-title-and-get-started-link-linking-to-the-intro-page-1-chromium-darwin.txt b/tests/example.spec.ts-snapshots/homepage-has-Playwright-in-title-and-get-started-link-linking-to-the-intro-page-1-chromium-darwin.txt deleted file mode 100644 index 39d40ace..00000000 --- a/tests/example.spec.ts-snapshots/homepage-has-Playwright-in-title-and-get-started-link-linking-to-the-intro-page-1-chromium-darwin.txt +++ /dev/null @@ -1 +0,0 @@ -{"cookies":[],"origins":[{"origin":"http://localhost:3000","localStorage":[{"name":"manualHistoryStore","value":"[]"},{"name":"autoHistoryMode","value":"\"loader\""},{"name":"codeStore","value":"{\"code\":\"graph TD\\n A[Party] -->|Get money| B(Go shopping)\\n \",\"mermaid\":\"{\\n \\\"theme\\\": \\\"forest\\\",\\n \\\"test\\\": \\\"hello\\\"\\n}\",\"updateEditor\":false,\"autoSync\":true,\"updateDiagram\":false,\"loader\":{\"type\":\"gist\",\"config\":{\"url\":\"https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/ec9b4ab0e41e4ff6287326cd3cb47affd7851e19\"}}}"},{"name":"themeStore","value":"{\"theme\":\"light\",\"isDark\":false}"},{"name":"autoHistoryStore","value":"[]"}]}]} \ No newline at end of file diff --git a/tests/loadsite.spec.ts b/tests/loadsite.spec.ts new file mode 100644 index 00000000..f3afb695 --- /dev/null +++ b/tests/loadsite.spec.ts @@ -0,0 +1,179 @@ +import { toBase64 } from 'js-base64'; + +// describe('Site Loads', () => { +// beforeEach(() => { +// cy.clearLocalStorage(); +// cy.visit('/'); +// }); + +// it('Check Home page load', () => { +// cy.url().should('include', '/edit'); +// cy.contains('History').click(); +// cy.getLocalStorage('codeStore').snapshot(); +// }); + +// it('Check Redirect from old URL', () => { +// cy.visit( +// '/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW0NocmlzdG1hc10gLS0-fEdldCBtb25leXwgQihHbyBzaG9wcGluZylcbiAgICBCIC0tPiBDe0xldCBtZSB0aGlua31cbiAgICBDIC0tPnxPbmV8IERbTGFwdG9wXVxuICAgIEMgLS0-fFR3b3wgRVtpUGhvbmVdXG4gICAgQyAtLT58VGhyZWV8IEZbZmE6ZmEtY2FyIENhcl0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9LCJ1cGRhdGVFZGl0b3IiOmZhbHNlfQ' +// ); +// cy.url().should('include', '/edit#pako:eNp'); +// }); + +// it('should load sample diagrams when clicked', () => { +// cy.contains('Sample Diagrams').click(); +// cy.contains('Pie').click(); +// cy.contains('pie title Pets adopted by volunteers'); +// cy.contains('Class').click(); +// cy.contains('classDiagram'); +// }); + +// (Cypress.env('CI') === 'true' ? describe : describe.skip)('github', () => { +// it('should load diagram from gist', () => { +// cy.visit(`/edit?gist=https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a`); +// cy.contains('History').click(); +// cy.contains('Go shopping!!'); +// cy.contains('Revisions'); +// cy.contains('sidharthv96 v8f8f1e2'); +// cy.contains('sidharthv96 v7851e19'); +// cy.getLocalStorage('codeStore').snapshot(); +// }); + +// it('should load diagram from gist revision', () => { +// cy.visit( +// '/edit?gist=https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/ec9b4ab0e41e4ff6287326cd3cb47affd7851e19' +// ); +// cy.contains('History').click(); +// cy.contains('Party'); +// cy.contains('Revisions'); +// cy.contains('sidharthv96 v7851e19'); +// cy.getLocalStorage('codeStore').snapshot(); +// }); + +// it('should load diagram from raw files', () => { +// cy.visit( +// '/edit?code=https://gist.githubusercontent.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/raw/4eb03887e6a41397e80bdcdbf94017c498f8f1e2/code.mmd&config=https://gist.githubusercontent.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/raw/4eb03887e6a41397e80bdcdbf94017c498f8f1e2/config.json' +// ); +// cy.contains('Party'); +// cy.getLocalStorage('codeStore').snapshot(); +// }); +// }); + +// // Disabled temporarily. Should be enabled after the issue is fixed in Mermaid. +// // it('should prevent setting the "securityLevel" option via URL', () => { +// // const b64State = toBase64( +// // `{"code":"graph TD\\nA[\\"\\"]","mermaid":"{\\"securityLevel\\": \\"loose\\", \\"theme\\": \\"forest\\"}","autoSync":true,"updateDiagram":true}`, +// // true +// // ); +// // cy.on('window:confirm', () => true); +// // cy.visit(`/edit#${b64State}`); +// // cy.contains('Config').click(); +// // cy.contains('forest'); +// // cy.contains('securityLevel').should('not.exist'); +// // cy.get('#view').find('img').should('not.exist'); +// // cy.get('#view').contains(' { +// const b64State = toBase64( +// `{"code":"graph TD\\nA[\\"\\"]","mermaid":"{\\"securityLevel\\": \\"loose\\", \\"theme\\": \\"forest\\"}","autoSync":true,"updateDiagram":true}`, +// true +// ); +// cy.on('window:confirm', () => false); +// cy.visit(`/edit#${b64State}`); +// cy.get('#editor').type(' '); +// cy.contains('Config').click(); +// cy.contains('forest'); +// cy.contains('securityLevel'); +// cy.get('#view').find('img').should('be.visible'); +// }); + +// it('should show troubleshooting steps if loading fails', () => { +// cy.visit('/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbiAg'); +// cy.reload(true); +// cy.contains('Please Click here to Raise an issue in github.'); +// }); + +// it('should load uncompressed URL', () => { +// cy.visit( +// '/edit/#eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW05ldyBZZWFyXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuICAgIEIgLS0-IEN7TGV0IG1lIHRoaW5rfVxuICAgIEMgLS0-fE9uZXwgRFtMYXB0b3BdXG4gICAgQyAtLT58VHdvfCBFW2lQaG9uZV1cbiAgICBDIC0tPnxUaHJlZXwgRltmYTpmYS1jYXIgQ2FyXSIsIm1lcm1haWQiOiJ7XG4gIFwidGhlbWVcIjogXCJkZWZhdWx0XCJcbn0iLCJ1cGRhdGVFZGl0b3IiOmZhbHNlLCJhdXRvU3luYyI6dHJ1ZSwidXBkYXRlRGlhZ3JhbSI6ZmFsc2V9' +// ); +// cy.contains('New Year'); +// cy.visit( +// '/edit#eyJjb2RlIjoiY2xhc3NEaWFncmFtXG4gICAgQW5pbWFsIDx8LS0gRHVja1xuICAgIEFuaW1hbCA8fC0tIEZpc2hcbiAgICBBbmltYWwgPHwtLSBaZWJyYVxuICAgIEFuaW1hbCA6ICtpbnQgYWdlXG4gICAgQW5pbWFsIDogK1N0cmluZyBnZW5kZXJcbiAgICBBbmltYWw6ICtpc01hbW1hbCgpXG4gICAgQW5pbWFsOiArbWF0ZSgpXG4gICAgY2xhc3MgRHVja3tcbiAgICAgICtTdHJpbmcgYmVha0NvbG9yXG4gICAgICArc3dpbSgpXG4gICAgICArcXVhY2soKVxuICAgIH1cbiAgICBjbGFzcyBGaXNoe1xuICAgICAgLWludCBzaXplSW5GZWV0XG4gICAgICAtY2FuRWF0KClcbiAgICB9XG4gICAgY2xhc3MgWmVicmF7XG4gICAgICArYm9vbCBpc193aWxkXG4gICAgICArcnVuKClcbiAgICB9XG4gICAgICAgICAgICAiLCJtZXJtYWlkIjoie1xuICBcInRoZW1lXCI6IFwiZGFya1wiXG59IiwidXBkYXRlRWRpdG9yIjpmYWxzZSwiYXV0b1N5bmMiOnRydWUsInVwZGF0ZURpYWdyYW0iOmZhbHNlfQ' +// ); +// cy.contains('Animal'); +// cy.visit( +// '/edit/#base64:eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW05ldyBZZWFyXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuICAgIEIgLS0-IEN7TGV0IG1lIHRoaW5rfVxuICAgIEMgLS0-fE9uZXwgRFtMYXB0b3BdXG4gICAgQyAtLT58VHdvfCBFW2lQaG9uZV1cbiAgICBDIC0tPnxUaHJlZXwgRltmYTpmYS1jYXIgQ2FyXSIsIm1lcm1haWQiOiJ7XG4gIFwidGhlbWVcIjogXCJkZWZhdWx0XCJcbn0iLCJ1cGRhdGVFZGl0b3IiOmZhbHNlLCJhdXRvU3luYyI6dHJ1ZSwidXBkYXRlRGlhZ3JhbSI6ZmFsc2V9' +// ); +// cy.contains('New Year'); +// }); + +// it('should load compressed URL', () => { +// cy.visit( +// '/edit#pako:eNpVkM2KwkAQhF-l6dMK5gVyEDRxvYi7sF6WjIcm0zqDzg_jBJEk725Hd2G3Tw31VVFUj23QjCWeEkUD-1p5kFs2O77BN1M6QFEshg1ncMHzfYDV2ybA1YQYrT_NXvhqgqDqtxPGkI315_ElVU__h-cB6mZLMYd4-Kvsb2GAdWM_jcT_V0xicb03RyqPVLSUoJI-OEfHyZHV0rqfDAqzYccKS3k1pbNC5Ufhuqgp81rbHBJKxuXKc6Quh6-7b7HMqeNfqLYkC7gfanwAlW1ZvQ' +// ); +// cy.contains('New Year'); +// cy.visit( +// '/edit#pako:eNptkU1PwzAMhv9K5BOI9Q9EXBDbJA477YYqITcxndV8QD40weh_Jy1rGR0-OY_tV2_sEyivCSQogzGuGduAtnaixINji0bcf1WVWGfVXdMtx8M1faYm4B8sxR27JLClJd6nwK4VLTlN4bI4jMQd2pLe3C4KFhNNcLQ92jv9ADGLNoTdozc-zIV4ZDsNlud7RtVN7_5Sb_jYrFcN3iN_0pPbEqUZK3QbTP_Ojyv4NdR4bwTHlyMbPcOQ3WJ2CliBpWCRdbnLqFJDOpClGmRJNYauhtr1pS-_6bKMjebkA8hXNJFWgDn5_YdTIFPINDWdb3vu6r8BaWOZRQ' +// ); +// cy.contains('Animal'); +// }); +// }); + +import { test, expect } from '@playwright/test'; + +test.describe('site loads', () => { + test.beforeEach(async ({ page }) => { + await page.addInitScript(() => { + window.localStorage.clear(); + }); + await page.goto('/', { waitUntil: 'networkidle' }); + }); + + test('should load home page', async ({ page }) => { + expect(page.url()).toContain('/edit'); + await expect(page.locator('"History"')).toBeVisible(); + // const { origins } = await context.storageState(); + // console.log(JSON.stringify(origins)); + // expect(JSON.stringify(origins)).toMatchSnapshot('initial-storage-state.json'); + }); + + test('should redirect from old URL', async ({ page }) => { + // Note that Promise.all prevents a race condition + // between clicking and waiting for a navigation. + await Promise.all([ + page.waitForNavigation({ url: '**/edit#pako:eNp**', timeout: 1000 }), + page.goto( + '/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW0NocmlzdG1hc10gLS0-fEdldCBtb25leXwgQihHbyBzaG9wcGluZylcbiAgICBCIC0tPiBDe0xldCBtZSB0aGlua31cbiAgICBDIC0tPnxPbmV8IERbTGFwdG9wXVxuICAgIEMgLS0-fFR3b3wgRVtpUGhvbmVdXG4gICAgQyAtLT58VGhyZWV8IEZbZmE6ZmEtY2FyIENhcl0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9LCJ1cGRhdGVFZGl0b3IiOmZhbHNlfQ' + ) + ]); + expect(page.url()).toContain('/edit#pako:eNp'); + }); + + test('should load sample diagrams when clicked', async ({ page }) => { + await page.click('"Sample Diagrams"'); + await page.click('"Pie"'); + await expect(page.locator('"pie title Pets adopted by volunteers"')).toBeVisible(); + await page.click('"Class"'); + await expect(page.locator('"classDiagram"')).toBeVisible(); + }); +}); +// test('homepage has Playwright in title and get started link linking to the intro page', async ({ +// page, +// context +// }) => { +// await page.goto( +// 'http://localhost:3000/edit?gist=https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/ec9b4ab0e41e4ff6287326cd3cb47affd7851e19' +// ); + +// // cy.getLocalStorage('codeStore').snapshot(); +// // Expect a title "to contain" a substring. +// await page.locator('"History"').click(); +// await page.locator('"Party"').isVisible(); +// await page.locator('"Revisions"').isVisible(); +// await page.locator('"sidharthv96 v7851e19"').isVisible(); +// await page.waitForTimeout(400); +// const storage = await context.storageState(); +// expect(JSON.stringify(storage)).toMatchSnapshot(); +// }); diff --git a/tests/loadsite.spec.ts-snapshots/initial-storage-state-chromium-darwin.json b/tests/loadsite.spec.ts-snapshots/initial-storage-state-chromium-darwin.json new file mode 100644 index 00000000..93e73735 --- /dev/null +++ b/tests/loadsite.spec.ts-snapshots/initial-storage-state-chromium-darwin.json @@ -0,0 +1,17 @@ +[ + { + "origin": "http://localhost:3000", + "localStorage": [ + { "name": "__anon_id", "value": "\"87f53493-b439-425c-961c-9a2014f0ced8\"" }, + { "name": "manualHistoryStore", "value": "[]" }, + { "name": "autoHistoryMode", "value": "\"manual\"" }, + { + "name": "codeStore", + "value": "{\"code\":\"graph 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 \",\"mermaid\":\"{\\n \\\"theme\\\": \\\"default\\\"\\n}\",\"autoSync\":true,\"updateDiagram\":true}" + }, + { "name": "migrations", "value": "{\"version\":0}" }, + { "name": "themeStore", "value": "{\"theme\":\"light\",\"isDark\":false}" }, + { "name": "autoHistoryStore", "value": "[]" } + ] + } +] diff --git a/tests/loadsite.spec.ts-snapshots/site-loads-Check-Home-page-load-1-chromium-darwin.txt b/tests/loadsite.spec.ts-snapshots/site-loads-Check-Home-page-load-1-chromium-darwin.txt new file mode 100644 index 00000000..d8c28dbc --- /dev/null +++ b/tests/loadsite.spec.ts-snapshots/site-loads-Check-Home-page-load-1-chromium-darwin.txt @@ -0,0 +1 @@ +[{"origin":"http://localhost:3000","localStorage":[{"name":"__anon_id","value":"\"e4127e54-eced-443f-837e-0986e577b624\""},{"name":"manualHistoryStore","value":"[]"},{"name":"autoHistoryMode","value":"\"manual\""},{"name":"codeStore","value":"{\"code\":\"graph 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 \",\"mermaid\":\"{\\n \\\"theme\\\": \\\"default\\\"\\n}\",\"autoSync\":true,\"updateDiagram\":true}"},{"name":"migrations","value":"{\"version\":0}"},{"name":"themeStore","value":"{\"theme\":\"light\",\"isDark\":false}"},{"name":"autoHistoryStore","value":"[]"}]}] \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index 91263b2e..e8a7e17a 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -6,8 +6,12 @@ "cypress/**/*.ts", "cypress/**/*.js", "cypress/**/*.json", + "tests/**/*.ts", + "tests/**/*.js", + "tests/**/*.json", "static/**/*.js", - "static/**/*.json" + "static/**/*.json", + "./playwright.config.ts" ], "compilerOptions": { "resolveJsonModule": true,