forkless/mermaid-live-editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

sample PW tests

Browse Source
This commit is contained in:
Sidharth Vinod
2022-11-25 14:18:54 +05:30
parent db92134444
commit 9c74126ce5
8 changed files with 287 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+2 -1
View File
@@ -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",
playwright.config.ts
+83 -84
View File
@@ -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;
tests/example.spec.ts
-20
View File
@@ -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();
});
tests/example.spec.ts-snapshots/homepage-has-Playwright-in-title-and-get-started-link-linking-to-the-intro-page-1-chromium-darwin.txt
-1
View File
@@ -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":"[]"}]}]}
tests/loadsite.spec.ts
+179
View File
@@ -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[\\"<img src='https://via.placeholder.com/64' width=64 />\\"]","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('<img');
// // cy.get('#view').contains(`src='https://via.placeholder.com/64'`);
// // });
// it.skip('should allow persisting "securityLevel" using confirm dialogue', () => {
// const b64State = toBase64(
// `{"code":"graph TD\\nA[\\"<img src='https://dummyimage.com/64' width=64/>\\"]","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();
// });
tests/loadsite.spec.ts-snapshots/initial-storage-state-chromium-darwin.json
+17
View File
@@ -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": "[]" }
]
}
]
tests/loadsite.spec.ts-snapshots/site-loads-Check-Home-page-load-1-chromium-darwin.txt
+1
View File
@@ -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":"[]"}]}]
tsconfig.json
+5 -1
View File
@@ -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,