diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml new file mode 100644 index 0000000..ad459fe --- /dev/null +++ b/.github/workflows/pr.yml @@ -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 diff --git a/.gitignore b/.gitignore index 4aefd08..8862539 100644 --- a/.gitignore +++ b/.gitignore @@ -3,4 +3,8 @@ node_modules .idea dist adyen-document-viewer.iml -package-lock.json \ No newline at end of file +package-lock.json + +# Playwright +test-results/ +playwright-report/ \ No newline at end of file diff --git a/package.json b/package.json index d86ef34..5331c14 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "viewer", "adyen-document-viewer" ], - "version": "1.1.2", + "version": "1.1.3", "description": "Adyen Document Viewer", "main": "./dist/adyen-document-viewer.min.js", "module": "./dist/adyen-document-viewer.min.mjs", @@ -16,13 +16,17 @@ "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": { @@ -30,6 +34,7 @@ "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", diff --git a/index.html b/playground/index.html similarity index 79% rename from index.html rename to playground/index.html index 169f6f1..c4b18b7 100644 --- a/index.html +++ b/playground/index.html @@ -7,6 +7,7 @@
- + + diff --git a/playground/loadViaEsModuleImport.html b/playground/loadViaEsModuleImport.html new file mode 100644 index 0000000..e315914 --- /dev/null +++ b/playground/loadViaEsModuleImport.html @@ -0,0 +1,25 @@ + + + + + + Adyen Document Viewer Example + + + + +
+ + + + diff --git a/playground/loadViaUmdScript.html b/playground/loadViaUmdScript.html new file mode 100644 index 0000000..ca40d15 --- /dev/null +++ b/playground/loadViaUmdScript.html @@ -0,0 +1,312 @@ + + + + + + Adyen Document Viewer Example + + + + +
+ + + + + diff --git a/playwright.config.ts b/playwright.config.ts new file mode 100644 index 0000000..e5295b0 --- /dev/null +++ b/playwright.config.ts @@ -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; diff --git a/src/index.tsx b/src/index.tsx index cdfa2cd..89fc7db 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -3,6 +3,8 @@ import { h, render } from 'preact'; import DocumentViewer from './DocumentViewer'; import { AdyenDocumentViewerOptions, Document } from './types'; +export type * from './types'; + export default class AdyenDocumentViewer { private readonly target: HTMLElement; private readonly options: AdyenDocumentViewerOptions; diff --git a/tests/checkBuiltPackageWorks.test.ts b/tests/checkBuiltPackageWorks.test.ts new file mode 100644 index 0000000..92adf49 --- /dev/null +++ b/tests/checkBuiltPackageWorks.test.ts @@ -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(); + }); +}); diff --git a/tsconfig.json b/tsconfig.json index ad3a0ca..2cbf4bd 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -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/**/*"], } diff --git a/vite.config.ts b/vite.config.ts index 2b6ad45..c013022 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -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, + }, +}));