-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Loading status checks…
Merge pull request #41 from Adyen/add-tests
Add tests
Showing
10 changed files
with
483 additions
and
32 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| name: PR CI | ||
|
|
||
| on: | ||
| pull_request: | ||
| types: [opened, synchronize, reopened] | ||
| paths-ignore: | ||
| - README.md | ||
| - LICENSE | ||
| - .gitignore | ||
|
|
||
| jobs: | ||
| lint: | ||
| runs-on: ubuntu-latest | ||
| timeout-minutes: 2 | ||
| steps: | ||
| - name: Checkout the repo | ||
| uses: actions/checkout@v4 | ||
|
|
||
| - run: npm i | ||
| - run: npm run check:all | ||
|
|
||
| build: | ||
| runs-on: ubuntu-latest | ||
| timeout-minutes: 2 | ||
| steps: | ||
| - name: Checkout the repo | ||
| uses: actions/checkout@v4 | ||
|
|
||
| - run: npm i | ||
| - run: npm run build | ||
|
|
||
| test: | ||
| runs-on: ubuntu-latest | ||
| timeout-minutes: 3 | ||
| steps: | ||
| - name: Checkout the repo | ||
| uses: actions/checkout@v4 | ||
|
|
||
| - run: npm i | ||
| - run: npx playwright install | ||
| - run: npm run test |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Adyen Document Viewer Example</title> | ||
|
|
||
| <link rel="stylesheet" href="/adyen-document-viewer.min.css" /> | ||
| </head> | ||
| <body> | ||
| <div id="document-viewer"></div> | ||
|
|
||
| <script type="module"> | ||
| import AdyenDocumentViewer from '/adyen-document-viewer.min.mjs?url'; | ||
| import exampleDocument from './mock-data'; | ||
|
|
||
| const documentViewer = new AdyenDocumentViewer('#document-viewer', { | ||
| onExpandSection: (sectionTitle) => console.log(`${sectionTitle} expanded`), | ||
| multiple: false, | ||
| }); | ||
|
|
||
| documentViewer.render(exampleDocument); | ||
| </script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,312 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Adyen Document Viewer Example</title> | ||
|
|
||
| <link rel="stylesheet" href="/adyen-document-viewer.min.css" /> | ||
| </head> | ||
| <body> | ||
| <div id="document-viewer"></div> | ||
|
|
||
| <script src="/adyen-document-viewer.min.js"></script> | ||
| <script> | ||
| const exampleDocument = { | ||
| title: { | ||
| type: 'text', | ||
| content: 'Example document', | ||
| styles: [], | ||
| }, | ||
| contentElements: [ | ||
| { | ||
| type: 'chapter', | ||
| title: { | ||
| type: 'text', | ||
| content: 'First chapter', | ||
| styles: [], | ||
| }, | ||
| contentElements: [ | ||
| { | ||
| type: 'section', | ||
| title: { | ||
| type: 'text', | ||
| content: 'First section', | ||
| styles: [], | ||
| }, | ||
| label: '1', | ||
| contentElements: [ | ||
| { | ||
| type: 'paragraph', | ||
| contentElements: [ | ||
| { | ||
| type: 'text', | ||
| content: | ||
| 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. ', | ||
| styles: [], | ||
| }, | ||
| { | ||
| type: 'weblink', | ||
| url: 'https://www.lipsum.com', | ||
| displayText: { | ||
| type: 'text', | ||
| content: 'Lorem Ipsum', | ||
| styles: [], | ||
| }, | ||
| }, | ||
| { | ||
| type: 'text', | ||
| content: | ||
| ' has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.', | ||
| styles: [], | ||
| }, | ||
| { | ||
| type: 'text', | ||
| content: ' This is a bold and italic example. ', | ||
| styles: ['BOLD', 'ITALIC'], | ||
| }, | ||
| { | ||
| type: 'internalReference', | ||
| referencedLabel: 'tableReference', | ||
| displayText: { | ||
| type: 'text', | ||
| content: 'This should take you to the table in the section below.', | ||
| styles: [], | ||
| }, | ||
| }, | ||
| { | ||
| type: 'paragraph', | ||
| contentElements: [ | ||
| { | ||
| type: 'text', | ||
| content: 'Below we have a list:', | ||
| styles: [], | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| type: 'list', | ||
| style: { | ||
| ordered: true, | ||
| }, | ||
| items: [ | ||
| { | ||
| content: [ | ||
| { | ||
| type: 'text', | ||
| content: 'first item in BI.', | ||
| styles: ['BOLD', 'ITALIC'], | ||
| }, | ||
| ], | ||
| subList: null, | ||
| }, | ||
| { | ||
| content: [ | ||
| { | ||
| type: 'text', | ||
| content: 'Second item:', | ||
| styles: [], | ||
| }, | ||
| ], | ||
| subList: { | ||
| type: 'list', | ||
| style: { | ||
| ordered: false, | ||
| }, | ||
| items: [ | ||
| { | ||
| content: [ | ||
| { | ||
| type: 'text', | ||
| content: 'First Sub item:', | ||
| styles: [], | ||
| }, | ||
| ], | ||
| subList: null, | ||
| }, | ||
| { | ||
| content: [ | ||
| { | ||
| type: 'internalReference', | ||
| referencedLabel: '2', | ||
| displayText: { | ||
| type: 'text', | ||
| content: 'Second section', | ||
| styles: [], | ||
| }, | ||
| }, | ||
| ], | ||
| subList: null, | ||
| }, | ||
| { | ||
| content: [ | ||
| { | ||
| type: 'text', | ||
| content: 'Third List item:', | ||
| styles: [], | ||
| }, | ||
| ], | ||
| subList: { | ||
| type: 'list', | ||
| style: { | ||
| ordered: true, | ||
| }, | ||
| items: [ | ||
| { | ||
| content: [ | ||
| { | ||
| type: 'text', | ||
| content: 'First Sub Sub item:', | ||
| styles: '[Array(0)]', | ||
| }, | ||
| ], | ||
| subList: null, | ||
| }, | ||
| ], | ||
| }, | ||
| }, | ||
| ], | ||
| }, | ||
| }, | ||
| ], | ||
| }, | ||
| ], | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| type: 'section', | ||
| title: { | ||
| type: 'text', | ||
| content: 'Second section', | ||
| styles: [], | ||
| }, | ||
| label: '2', | ||
| contentElements: [ | ||
| { | ||
| type: 'paragraph', | ||
| contentElements: [ | ||
| { | ||
| type: 'internalReference', | ||
| referencedLabel: 'tableReference', | ||
| displayText: { | ||
| type: 'text', | ||
| content: 'This should take you to the table below.', | ||
| styles: [], | ||
| }, | ||
| }, | ||
| { | ||
| type: 'text', | ||
| content: | ||
| ' Lorem Ipsum is simply dummy text of the printing and typesetting industry. ', | ||
| styles: [], | ||
| }, | ||
| { | ||
| type: 'weblink', | ||
| url: 'https://www.lipsum.com', | ||
| displayText: { | ||
| type: 'text', | ||
| content: 'Lorem Ipsum', | ||
| styles: [], | ||
| }, | ||
| }, | ||
| { | ||
| type: 'text', | ||
| content: | ||
| ' has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.', | ||
| styles: [], | ||
| }, | ||
| { | ||
| type: 'table', | ||
| rows: [ | ||
| [ | ||
| { | ||
| elements: [ | ||
| { | ||
| type: 'text', | ||
| content: 'Row 1', | ||
| styles: ['BOLD'], | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| elements: [ | ||
| { | ||
| type: 'text', | ||
| content: 'We have a website here', | ||
| styles: [], | ||
| }, | ||
| { | ||
| type: 'breakline', | ||
| }, | ||
| { | ||
| type: 'weblink', | ||
| url: 'https://www.exampleurlgoeshere.com', | ||
| displayText: null, | ||
| }, | ||
| ], | ||
| }, | ||
| ], | ||
| [ | ||
| { | ||
| elements: [ | ||
| { | ||
| type: 'text', | ||
| content: 'Row 2', | ||
| styles: ['BOLD'], | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| elements: [ | ||
| { | ||
| type: 'text', | ||
| content: 'Just some text on the first line', | ||
| styles: [], | ||
| }, | ||
| { | ||
| type: 'breakline', | ||
| }, | ||
| { | ||
| type: 'text', | ||
| content: 'Just some text on the next line', | ||
| styles: [], | ||
| }, | ||
| ], | ||
| }, | ||
| ], | ||
| ], | ||
| titlePrefix: { | ||
| type: 'text', | ||
| content: '1.', | ||
| styles: [], | ||
| }, | ||
| title: { | ||
| type: 'text', | ||
| content: 'Lorem Ipsum', | ||
| styles: [], | ||
| }, | ||
| style: { | ||
| columnSizes: ['SMALL', 'LARGE'], | ||
| alignment: 'LEFT', | ||
| }, | ||
| label: 'tableReference', | ||
| }, | ||
| ], | ||
| }, | ||
| ], | ||
| }, | ||
| ], | ||
| }, | ||
| ], | ||
| }; | ||
|
|
||
| const documentViewer = new AdyenDocumentViewer('#document-viewer', { | ||
| onExpandSection: (sectionTitle) => console.log(`${sectionTitle} expanded`), | ||
| multiple: false, | ||
| }); | ||
|
|
||
| documentViewer.render(exampleDocument); | ||
| </script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| import type { PlaywrightTestConfig } from '@playwright/test'; | ||
| import { devices } from '@playwright/test'; | ||
|
|
||
| const IS_CI = Boolean(process.env.CI); | ||
|
|
||
| /** | ||
| * See https://playwright.dev/docs/test-configuration. | ||
| */ | ||
| const config: PlaywrightTestConfig = { | ||
| testDir: './tests', | ||
| timeout: 5 * 1000, | ||
| expect: { | ||
| timeout: 1000, | ||
| }, | ||
| fullyParallel: true, | ||
|
|
||
| forbidOnly: IS_CI, | ||
| /* Retry on CI only. Playwright will tell us if a test is flaky */ | ||
| retries: IS_CI ? 2 : 0, | ||
| /* Opt out of parallel tests on CI. */ | ||
| workers: IS_CI ? 1 : undefined, | ||
|
|
||
| reporter: 'html', | ||
| use: { | ||
| baseURL: 'http://localhost:5174/', | ||
| trace: 'on-first-retry', | ||
| headless: IS_CI, | ||
| }, | ||
|
|
||
| projects: [ | ||
| { | ||
| name: 'chromium', | ||
| use: devices['Desktop Chrome'], | ||
| }, | ||
| ], | ||
|
|
||
| webServer: { | ||
| command: 'npm run build && npm start', | ||
| port: 5174, | ||
| reuseExistingServer: !IS_CI, | ||
| }, | ||
| }; | ||
|
|
||
| export default config; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| import { expect, test } from '@playwright/test'; | ||
|
|
||
| ['loadViaUmdScript', 'loadViaEsModuleImport'].forEach((importMethod) => { | ||
| test(`${importMethod} should work`, async ({ page }) => { | ||
| await page.goto(`/${importMethod}.html`); | ||
|
|
||
| await expect(page.getByRole('heading', { name: 'First chapter' })).toBeVisible(); | ||
| await page.getByRole('button', { name: 'First section' }).click(); | ||
|
|
||
| await expect(page.getByText('This is a bold and italic example.')).toBeVisible(); | ||
|
|
||
| await page.getByText('This should take you to the table in the section below.').click(); | ||
| await expect(page.getByRole('cell', { name: /We have a website here/ })).toBeVisible(); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,39 +1,44 @@ | ||
| import { setDefaultResultOrder } from 'node:dns'; | ||
| import { resolve } from 'node:path'; | ||
| import { defineConfig } from 'vite'; | ||
|
|
||
| import preact from '@preact/preset-vite'; | ||
| import { defineConfig } from 'vite'; | ||
|
|
||
| // This forces Vite to use `localhost` instead of `127.0.0.1`. Otherwise, we run into CORS issues | ||
| // since `localhost:8080` and `localhost:8082` are same-origin, but `127.0.0.1:8082` isn't. | ||
| setDefaultResultOrder('verbatim'); | ||
|
|
||
| // https://vitejs.dev/config/ | ||
| export default defineConfig(() => { | ||
| return { | ||
| css: { | ||
| modules: { | ||
| // TODO: Remove this after changing all of our SCSS @import to @use | ||
| scopeBehaviour: 'local', | ||
| generateScopedName: (name) => name, | ||
| }, | ||
| export default defineConfig(() => ({ | ||
| root: resolve(__dirname, 'playground'), | ||
| publicDir: resolve(__dirname, 'dist'), | ||
| css: { | ||
| modules: { | ||
| // TODO: Remove this after changing all of our SCSS @import to @use | ||
| scopeBehaviour: 'local', | ||
| generateScopedName: (name) => name, | ||
| }, | ||
| build: { | ||
| lib: { | ||
| name: 'AdyenDocumentViewer', | ||
| entry: resolve(__dirname, 'src/index.tsx'), | ||
| formats: ['es', 'umd'], | ||
| fileName: (format) => | ||
| format === 'es' ? 'adyen-document-viewer.min.mjs' : 'adyen-document-viewer.min.js', | ||
| }, | ||
| rollupOptions: { | ||
| output: { | ||
| assetFileNames: 'adyen-document-viewer.min.[ext]', | ||
| }, | ||
| }, | ||
| build: { | ||
| lib: { | ||
| name: 'AdyenDocumentViewer', | ||
| entry: resolve(__dirname, 'src/index.tsx'), | ||
| formats: ['es', 'umd'], | ||
| fileName: (format) => | ||
| format === 'es' ? 'adyen-document-viewer.min.mjs' : 'adyen-document-viewer.min.js', | ||
| }, | ||
| rollupOptions: { | ||
| output: { | ||
| assetFileNames: 'adyen-document-viewer.min.[ext]', | ||
| }, | ||
| minify: true, | ||
| outDir: resolve(__dirname, 'dist'), | ||
| emptyOutDir: true, | ||
| }, | ||
| plugins: [preact()], | ||
| }; | ||
| }); | ||
| minify: true, | ||
| outDir: resolve(__dirname, 'dist'), | ||
| emptyOutDir: true, | ||
| }, | ||
| plugins: [preact()], | ||
| server: { | ||
| host: 'localhost', | ||
| port: 5174, | ||
| }, | ||
| })); |