wip run with storybook build

.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}}

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",

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"

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 });
     }
 }
 

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;

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();
         });
     });

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",

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 && <SecondaryButtonLabel label={secondaryLabel} />}
         </Button>

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,
 

packages/lib/storybook/utils/http-post.ts

@@ -1,7 +1,8 @@
 const { host, protocol } = window.location;
 
 export async function httpPost<T>(endpoint: string, data: any): Promise<T> {
-    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, */*',

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();