Skip to content

Commit

Permalink
Merge pull request #41 from Adyen/add-tests
Browse files Browse the repository at this point in the history
Add tests
alextompkins authored Nov 21, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
2 parents f5d2722 + a8e063f commit 163962a
Showing 10 changed files with 483 additions and 32 deletions.
41 changes: 41 additions & 0 deletions .github/workflows/pr.yml
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
6 changes: 5 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -3,4 +3,8 @@ node_modules
.idea
dist
adyen-document-viewer.iml
package-lock.json
package-lock.json

# Playwright
test-results/
playwright-report/
8 changes: 6 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -16,20 +16,25 @@
"scripts": {
"start": "vite",
"build": "vite build && npm run types:build",
"check:all": "npm run types:check && npm run lint && npm run prettier",
"lint": "eslint 'src/**/*.{js,ts,tsx}'",
"lint:fix": "npm run lint -- --fix",
"prettier": "prettier --config ./prettier.config.js --ignore-unknown --check \"**/*\"",
"prettier:fix": "prettier --config ./prettier.config.js --ignore-unknown --write \"**/*\"",
"fix:all": "npm run prettier:fix && npm run lint:fix",
"test": "playwright test",
"test:debug": "playwright test --debug",
"test:ui": "playwright test --ui",
"types:build": "tsc --project tsconfig-build.json",
"types:check": "tsc && tsc-strict",
"types:check": "tsc",
"types:watch": "tsc --watch --preserveWatchOutput"
},
"dependencies": {
"classnames": "2.5.1",
"preact": "10.19.3"
},
"devDependencies": {
"@playwright/test": "^1.45.3",
"@preact/preset-vite": "^2.8.1",
"@typescript-eslint/eslint-plugin": "^6.19.1",
"@typescript-eslint/parser": "^6.19.1",
@@ -48,7 +53,6 @@
"stylelint-config-sass-guidelines": "^9.0.1",
"stylelint-scss": "^4.2.0",
"typescript": "^5.3.3",
"typescript-strict-plugin": "^2.2.0",
"vite": "^4.5.1"
},
"license": "MIT",
3 changes: 2 additions & 1 deletion index.html → playground/index.html
Original file line number Diff line number Diff line change
@@ -7,6 +7,7 @@
</head>
<body>
<div id="document-viewer"></div>
<script defer type="module" src="/playground/example.js"></script>

<script type="module" src="./example.js"></script>
</body>
</html>
25 changes: 25 additions & 0 deletions playground/loadViaEsModuleImport.html
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>
312 changes: 312 additions & 0 deletions playground/loadViaUmdScript.html
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>
44 changes: 44 additions & 0 deletions playwright.config.ts
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;
15 changes: 15 additions & 0 deletions tests/checkBuiltPackageWorks.test.ts
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();
});
});
2 changes: 1 addition & 1 deletion tsconfig.json
Original file line number Diff line number Diff line change
@@ -6,6 +6,7 @@
"noEmit": true,
"allowJs": true,
"checkJs": true,
"strict": true,

/* Preact Config */
"jsx": "react-jsx",
@@ -15,7 +16,6 @@
"react": ["./node_modules/preact/compat/"],
"react-dom": ["./node_modules/preact/compat/"],
},
"plugins": [{ "name": "typescript-strict-plugin" }],
},
"include": ["node_modules/vite/client.d.ts", "src/**/*"],
}
59 changes: 32 additions & 27 deletions vite.config.ts
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,
},
}));

0 comments on commit 163962a

Please sign in to comment.