From c6688e43a7203844bf97560d494db017aedddf75 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 | 10 +++---- package.json | 4 ++- packages/e2e-playwright/package.json | 2 -- .../pages/cards/card.avs.page.ts | 4 +-- packages/e2e-playwright/playwright.config.ts | 26 +++++++++++++------ .../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 | 3 ++- packages/server/index.js | 2 ++ 11 files changed, 37 insertions(+), 28 deletions(-) diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml index 2a2ed531cf..520725f3a1 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,14 +27,13 @@ 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 - name: Run E2E Tests - working-directory: packages/e2e-playwright/ - run: yarn test:headless + run: yarn test:e2e env: CHECKOUT_API_KEY: ${{secrets.ADYEN_CHECKOUT_API_KEY}} MERCHANT_ACCOUNT: ${{secrets.ADYEN_CHECKOUT_MERCHANT_ACCOUNT}} diff --git a/package.json b/package.json index 08142886bb..f5825d87a9 100644 --- a/package.json +++ b/package.json @@ -15,13 +15,15 @@ "scripts": { "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", + "start:prod-storybook": "concurrently --kill-others-on-fail \"yarn workspace @adyen/adyen-web-server start\" \"yarn workspace @adyen/adyen-web serve:storybook\" --names \"server,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", "test:watch": "yarn workspace @adyen/adyen-web test:watch", "test:coverage": "yarn workspace @adyen/adyen-web test:coverage", - "test:e2e": "yarn build && yarn workspace @adyen/adyen-web-playwright test:headless", + "test:e2e": "yarn workspace @adyen/adyen-web-playwright test:headless", "test:e2e-testcafe": "yarn build && yarn workspace @adyen/adyen-web-e2e test:e2e", "type-check": "yarn workspace @adyen/adyen-web type-check", "prepare": "yarn workspace @adyen/adyen-web prepare", 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..4988215f5b 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'); //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..ffaeba8c57 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://localhost:8080'; /** * See https://playwright.dev/docs/test-configuration. */ @@ -36,10 +37,12 @@ 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, + screenshot: 'only-on-failure' }, /* Configure projects for major browsers */ @@ -70,11 +73,18 @@ 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: [ + { + // Serve Storybook + // Work around suggested https://github.com/storybookjs/storybook/issues/24191#issuecomment-1744987158 + command: 'npm run start:prod-storybook', + cwd: '../..', + 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..7cd18d1d16 100644 --- a/packages/lib/storybook/utils/http-post.ts +++ b/packages/lib/storybook/utils/http-post.ts @@ -1,7 +1,8 @@ const { host, protocol } = window.location; export async function httpPost(endpoint: string, data: any): Promise { - const response = await fetch(`${protocol}//${host}/${endpoint}`, { + const bla = 'localhost:3020'; + const response = await fetch(`${protocol}//${bla}/${endpoint}`, { method: 'POST', headers: { Accept: 'application/json, text/plain, */*', diff --git a/packages/server/index.js b/packages/server/index.js index 8e7326b188..a619140eb3 100644 --- a/packages/server/index.js +++ b/packages/server/index.js @@ -20,6 +20,8 @@ module.exports = (app = express(), options = {}) => { app.use(express.urlencoded({ extended: true })); app.use((req, res, next) => { + console.log('server', req.url); + console.log('server', req.body); res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept'); next();