From ef94d765cd4f714ab5831acbf78b915c8ace9efb Mon Sep 17 00:00:00 2001 From: Yu Long Date: Fri, 2 Aug 2024 16:40:22 +0200 Subject: [PATCH] wip run with storybook build --- .github/workflows/e2e.yml | 7 ++-- package.json | 1 + packages/e2e-playwright/package.json | 2 -- .../pages/cards/card.avs.page.ts | 4 +-- packages/e2e-playwright/playwright.config.ts | 34 ++++++++++++++----- .../e2e-playwright/tests/card/avs.spec.ts | 6 ---- packages/lib/package.json | 3 +- .../internal/PayButton/PayButton.tsx | 4 +-- .../helpers/create-sessions-checkout.ts | 1 + packages/lib/storybook/utils/http-post.ts | 26 +++++++++----- packages/server/index.js | 2 +- 11 files changed, 56 insertions(+), 34 deletions(-) diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml index 2a2ed531cf..802c4a0cab 100644 --- a/.github/workflows/e2e.yml +++ b/.github/workflows/e2e.yml @@ -13,7 +13,8 @@ jobs: fail-fast: false matrix: node-version: [20.12.2] - api-version: ["v68", "v69", "v70", "v71"] + api-version: ["v71"] + # api-version: ["v68", "v69", "v70", "v71"] # node-version: [16.x, 18.x, 19.x] # Currently 18 and 19 are not supported, still keeping it # as a reminder for compatibility check @@ -26,8 +27,8 @@ jobs: node-version: ${{ matrix.node-version }} - name: Install Project Dependencies run: yarn install - - name: Build Project - run: yarn build + - name: Build Storybook + run: yarn build:storybook - name: Install Playwright Dependencies working-directory: packages/e2e-playwright/ run: yarn install && npx playwright install --with-deps diff --git a/package.json b/package.json index 08142886bb..18347ce2d1 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "start": "concurrently --kill-others-on-fail \"yarn workspace @adyen/adyen-web start\" \"yarn workspace @adyen/adyen-web-playground start\" --names \"lib,playground\"", "start:storybook": "yarn workspace @adyen/adyen-web start:storybook", "build": "yarn workspace @adyen/adyen-web build", + "build:storybook": "yarn workspace @adyen/adyen-web build:storybook", "format": "yarn workspace @adyen/adyen-web format", "lint": "yarn workspace @adyen/adyen-web lint", "test": "yarn workspace @adyen/adyen-web test", diff --git a/packages/e2e-playwright/package.json b/packages/e2e-playwright/package.json index d7d177b55e..8ec8f0f252 100644 --- a/packages/e2e-playwright/package.json +++ b/packages/e2e-playwright/package.json @@ -5,8 +5,6 @@ "repository": "github:Adyen/adyen-web", "license": "MIT", "scripts": { - "test:start-playground": "npm --prefix ../playground run start", - "test:start-storybook": "npm --prefix ../lib run story", "test:headless": "npx playwright test", "test:headed": "npx playwright test --headed", "test:ui-mode": "npx playwright test --ui" diff --git a/packages/e2e-playwright/pages/cards/card.avs.page.ts b/packages/e2e-playwright/pages/cards/card.avs.page.ts index 76dd5a2d26..f67edbb55f 100644 --- a/packages/e2e-playwright/pages/cards/card.avs.page.ts +++ b/packages/e2e-playwright/pages/cards/card.avs.page.ts @@ -13,12 +13,12 @@ class CardAvsPage { constructor(page: Page) { this.page = page; this.cardWithAvs = new CardWithAvs(page, CardAvsPage.avsContainerSelector); - this.payButton = page.locator(CardAvsPage.avsContainerSelector).getByRole('button', { name: /Pay/i }); + this.payButton = page.getByRole('button', { name: /paybutton/i }); //this.paymentResult = new Result(page).paymentResult; } async goto(url?: string) { - await this.page.goto('http://localhost:3020/cards', { timeout: 60000 }); + await this.page.goto('/iframe.html?args=countryCode=US&id=cards-card--with-partial-avs&viewMode=story', { timeout: 60000 }); } } diff --git a/packages/e2e-playwright/playwright.config.ts b/packages/e2e-playwright/playwright.config.ts index 4106132088..a128190635 100644 --- a/packages/e2e-playwright/playwright.config.ts +++ b/packages/e2e-playwright/playwright.config.ts @@ -4,7 +4,8 @@ import * as dotenv from 'dotenv'; import * as path from 'path'; dotenv.config({ path: path.resolve('../../', '.env') }); - +const rootDir = path.resolve('../../'); +const playgroundBaseUrl = 'http://127.0.0.1:8080'; /** * See https://playwright.dev/docs/test-configuration. */ @@ -36,10 +37,11 @@ const config: PlaywrightTestConfig = { /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */ actionTimeout: 15000, /* Base URL to use in actions like `await page.goto('/')`. */ - // baseURL: 'http://localhost:3000', + baseURL: playgroundBaseUrl, /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ - trace: 'on-first-retry' + trace: 'on-first-retry', + ignoreHTTPSErrors: true }, /* Configure projects for major browsers */ @@ -70,11 +72,27 @@ const config: PlaywrightTestConfig = { // outputDir: 'test-results/', /* Run your local dev server before starting the tests */ - webServer: { - command: 'npm run test:start-playground', - port: 3020, - reuseExistingServer: !process.env.CI - } + webServer: [ + { + // Start api server + command: 'npm run start', + cwd: '../server', + port: 3000, + reuseExistingServer: !process.env.CI, + timeout: 120 * 1000, + stdout: 'pipe' + }, + { + // Serve Storybook + // Work around suggested https://github.com/storybookjs/storybook/issues/24191#issuecomment-1744987158 + command: 'npm run serve:storybook', + cwd: '../lib', + port: 8080, + reuseExistingServer: !process.env.CI, + timeout: 120 * 1000, + stdout: 'pipe' + } + ] }; export default config; diff --git a/packages/e2e-playwright/tests/card/avs.spec.ts b/packages/e2e-playwright/tests/card/avs.spec.ts index 5bb09c8cd1..497a63bd57 100644 --- a/packages/e2e-playwright/tests/card/avs.spec.ts +++ b/packages/e2e-playwright/tests/card/avs.spec.ts @@ -6,12 +6,6 @@ test.describe('Card payments with partial avs', () => { test.describe('When fill in a valid the post code', () => { test.only('should make a successful card payment', async ({ cardPartialAvsPage }) => { const { cardWithAvs, payButton, paymentResult } = cardPartialAvsPage; - await cardWithAvs.isComponentVisible(); - /* await cardWithAvs.typeCardNumber(REGULAR_TEST_CARD); - await cardWithAvs.typeCvc(TEST_CVC_VALUE); - await cardWithAvs.typeExpiryDate(TEST_DATE_VALUE); - await cardWithAvs.fillInPostCode(TEST_POSTCODE); - await payButton.click();*/ await expect(payButton).toBeVisible(); }); }); diff --git a/packages/lib/package.json b/packages/lib/package.json index ebc8e857bd..f44d74d88d 100644 --- a/packages/lib/package.json +++ b/packages/lib/package.json @@ -61,7 +61,8 @@ "build": "rm -rf dist/ && npm run lint && npm run lint-styles && npm run type-check && npm run types:generate && rollup --config config/rollup.prod.js && rm -rf dist/temp-types", "docs:generate": "typedoc --out docs src --exclude \"**/*+(index|.test).ts\"", "start:storybook": "node .storybook/run.cjs", - "build:storybook": "storybook build --disable-telemetry", + "serve:storybook": "npx http-server storybook-static -p 8080", + "build:storybook": "NODE_ENV=production storybook build --disable-telemetry", "test": "jest --config config/jest.config.cjs", "test:watch": "npm run test -- --watchAll", "test:coverage": "npm run test -- --coverage", diff --git a/packages/lib/src/components/internal/PayButton/PayButton.tsx b/packages/lib/src/components/internal/PayButton/PayButton.tsx index 021947b2e5..759e1604f3 100644 --- a/packages/lib/src/components/internal/PayButton/PayButton.tsx +++ b/packages/lib/src/components/internal/PayButton/PayButton.tsx @@ -23,7 +23,7 @@ export interface PayButtonProps extends ButtonProps { const PayButton = ({ amount, secondaryAmount, classNameModifiers = [], label, ...props }: PayButtonProps) => { const { i18n } = useCoreContext(); const isZeroAuth = amount && {}.hasOwnProperty.call(amount, 'value') && amount.value === 0; - //const defaultLabel = isZeroAuth ? i18n.get('confirmPreauthorization') : payAmountLabel(i18n, amount); + const defaultLabel = isZeroAuth ? i18n.get('confirmPreauthorization') : payAmountLabel(i18n, amount); /** * Show the secondaryLabel if: @@ -42,7 +42,7 @@ const PayButton = ({ amount, secondaryAmount, classNameModifiers = [], label, .. {...props} disabled={props.disabled || props.status === 'loading'} classNameModifiers={[...classNameModifiers, 'pay']} - label={'dsdfhwiueh'} + label={label || defaultLabel} > {secondaryLabel && } diff --git a/packages/lib/storybook/helpers/create-sessions-checkout.ts b/packages/lib/storybook/helpers/create-sessions-checkout.ts index 1b2a3f5b5a..815d8d093e 100644 --- a/packages/lib/storybook/helpers/create-sessions-checkout.ts +++ b/packages/lib/storybook/helpers/create-sessions-checkout.ts @@ -23,6 +23,7 @@ async function createSessionsCheckout({ showPayButton, countryCode, shopperLocal const checkout = await AdyenCheckout({ clientKey: process.env.CLIENT_KEY, environment: process.env.CLIENT_ENV, + countryCode, session, showPayButton, diff --git a/packages/lib/storybook/utils/http-post.ts b/packages/lib/storybook/utils/http-post.ts index 8801aa2ddb..60dea2c909 100644 --- a/packages/lib/storybook/utils/http-post.ts +++ b/packages/lib/storybook/utils/http-post.ts @@ -1,13 +1,21 @@ const { host, protocol } = window.location; export async function httpPost(endpoint: string, data: any): Promise { - const response = await fetch(`${protocol}//${host}/${endpoint}`, { - method: 'POST', - headers: { - Accept: 'application/json, text/plain, */*', - 'Content-Type': 'application/json' - }, - body: JSON.stringify(data) - }); - return await response.json(); + try { + const bla = 'localhost:3000'; + console.log({ protocol }); + console.log({ bla }); + console.log({ endpoint }); + const response = await fetch(`${protocol}//${bla}/${endpoint}`, { + method: 'POST', + headers: { + Accept: 'application/json, text/plain, */*', + 'Content-Type': 'application/json' + }, + body: JSON.stringify(data) + }); + return await response.json(); + } catch (e) { + console.log('http error in storybook:', { e }); + } } diff --git a/packages/server/index.js b/packages/server/index.js index 8e7326b188..11aa79060d 100644 --- a/packages/server/index.js +++ b/packages/server/index.js @@ -52,7 +52,7 @@ module.exports = (app = express(), options = {}) => { app.all('/sdk/:adyenWebVersion/translations/:locale.json', (req, res) => getTranslation(res, req)); if (options.listen) { - const port = process.env.PORT || 3020; + const port = process.env.PORT || 3000; app.listen(port, () => console.log(`Listening on localhost:${port}`)); }