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

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

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://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;

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

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