E2Eテストの拡充

.eslintrc.json

@@ -12,19 +12,24 @@
   "extends": [
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
+    "plugin:playwright/recommended",
     "jquery"
   ],
   "rules": {
     "@typescript-eslint/no-var-requires": "off",
     "camelcase": "off",
     "space-in-parens": "off",
+    "array-bracket-spacing": ["error", "never"],
+    "template-curly-spacing": ["error", "never"],
+    "computed-property-spacing": ["error", "never"],
+    "comma-dangle": "off",
     "quotes": "off",
     "no-shadow-restricted-names": "off",
     "no-prototype-builtins": "off",
     "max-len": ["warn", {"code": 120}],
     "space-before-function-paren": ["error", {
-      "anonymous": "never",
-      "named": "never",
+      "anonymous": "always",
+      "named": "always",
       "asyncArrow": "always"
     }]
   }

data/eccube.js

@@ -1,6 +1,7 @@
 import $ from "jquery";
 
 import "jquery-migrate";
+
 /* 警告を無効にする */
 $.migrateMute = true;
 
@@ -35,6 +36,7 @@ import "slick-carousel/slick/slick-theme.css";
  */
 
 (function (window, undefined) {
+
   // 名前空間の重複を防ぐ
   if (window.eccube === undefined) {
     window.eccube = {};
@@ -128,6 +130,7 @@ import "slick-carousel/slick/slick-theme.css";
   // 郵便番号から検索した住所を渡す.
   eccube.putAddress = function (input1, input2, state, city, town) {
     if (state !== "") {
+
       // 項目に値を入力する.
       document.form1[input1].selectedIndex = state;
       document.form1[input2].value = city + town;
@@ -373,11 +376,13 @@ import "slick-carousel/slick/slick-theme.css";
     for (let i = 0; i < len; i++) {
       if (document.form1[list[i]]) {
         if (color === "") {
+
           // 有効にする。
           document.form1[list[i]].removeAttribute("disabled");
           document.form1[list[i]].style.backgroundColor =
             eccube.savedColor[list[i]];
         } else {
+
           // 無効にする。
           document.form1[list[i]].setAttribute("disabled", "disabled");
           eccube.savedColor[list[i]] =
@@ -425,6 +430,7 @@ import "slick-carousel/slick/slick-theme.css";
 
   // 親ウィンドウのページを変更する.
   eccube.changeParentUrl = function (url) {
+
     // 親ウィンドウの存在確認
     if (eccube.isOpener()) {
       window.opener.location.href = url;
@@ -468,6 +474,7 @@ import "slick-carousel/slick/slick-theme.css";
     if ($sele1 && $sele1.length) {
       const classcat_id1 = $sele1.val() ? $sele1.val() : "";
       if ($sele2 && $sele2.length) {
+
         // 規格2の選択肢をクリア
         $sele2.children().remove();
 
@@ -477,6 +484,7 @@ import "slick-carousel/slick/slick-theme.css";
         if (eccube.hasOwnProperty("productsClassCategories")) {
           classcat2 = eccube.productsClassCategories[product_id][classcat_id1];
         } else {
+
           // 詳細表示時
           classcat2 = eccube.classCategories[classcat_id1];
         }
@@ -520,6 +528,7 @@ import "slick-carousel/slick/slick-theme.css";
           `#${classcat_id2}`
         ];
     } else {
+
       // 詳細表示時
       classcat2 = eccube.classCategories[classcat_id1][`#${classcat_id2}`];
     }
@@ -612,6 +621,7 @@ import "slick-carousel/slick/slick-theme.css";
    * Initialize.
    */
   $(() => {
+
     // 規格1選択時
     $("select[name=classcategory_id1]").on("change", function () {
       const $form = $(this).parents("form");

e2e-tests/fixtures/admin_login.fixture.ts → e2e-tests/fixtures/admin/admin_login.fixture.ts

@@ -1,8 +1,8 @@
 import { test as base, expect } from "@playwright/test";
-import { AdminLoginPage } from "../pages/admin/login.page";
-import { Mode, ContextType } from '../utils/ZapClient';
-import { ECCUBE_ADMIN_USER, ECCUBE_ADMIN_PASS, ADMIN_DIR } from "../config/default.config";
-import PlaywrightConfig from '../../playwright.config';
+import { AdminLoginPage } from "../../pages/admin/login.page";
+import { Mode, ContextType } from '../../utils/ZapClient';
+import { ECCUBE_ADMIN_USER, ECCUBE_ADMIN_PASS, ADMIN_DIR } from "../../config/default.config";
+import PlaywrightConfig from '../../../playwright.config';
 
 type AdminLoginFixtures = {
   adminLoginPage: AdminLoginPage;
@@ -12,7 +12,7 @@ export const test = base.extend<AdminLoginFixtures>({
   adminLoginPage: async ({ page }, use) => {
     const loginPage = new AdminLoginPage(page);
     if (PlaywrightConfig.use?.proxy === undefined) {
-      await page.goto(`/${ ADMIN_DIR }`);
+      await page.goto(`/${ADMIN_DIR}`);
       await loginPage.login(ECCUBE_ADMIN_USER, ECCUBE_ADMIN_PASS);
     } else {
       const zapClient = loginPage.getZapClient();
@@ -24,7 +24,7 @@ export const test = base.extend<AdminLoginFixtures>({
         await zapClient.setForcedUserModeEnabled();
         expect(await zapClient.isForcedUserModeEnabled()).toBeTruthy();
       }
-      await page.goto(`/${ ADMIN_DIR }home.php`);
+      await page.goto(`/${ADMIN_DIR}home.php`);
     }
     await use(loginPage);
   }

e2e-tests/fixtures/admin/register_product.fixture.ts

@@ -0,0 +1,22 @@
+import { test as base } from "./admin_login.fixture";
+import { AdminProductsProductPage } from "../../pages/admin/products/product.page";
+
+type RegisterProductFixtures = {
+  adminProductsProductPage: AdminProductsProductPage;
+};
+
+export const test = base.extend<RegisterProductFixtures>({
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+  adminProductsProductPage: async ({ adminLoginPage, page }, use) => {
+    const productPage = new AdminProductsProductPage(page);
+    await productPage.goto();
+    await productPage.fill();
+    await productPage.fillSubComments();
+    await productPage.fillRecommends();
+    await productPage.gotoConfirm();
+    await productPage.register();
+    use(productPage);
+  }
+});
+
+export { expect } from "@playwright/test";

e2e-tests/fixtures/cartin.fixture.ts → e2e-tests/fixtures/front_login/cartin.fixture.ts

@@ -1,14 +1,15 @@
-import { test as base } from '../fixtures/mypage_login.fixture';
-import PlaywrightConfig from '../../playwright.config';
-import { ProductsDetailPage } from '../pages/products/detail.page';
-import { CartPage } from '../pages/cart.page';
+import { test as base } from './mypage_login.fixture';
+import PlaywrightConfig from '../../../playwright.config';
+import { ProductsDetailPage } from '../../pages/products/detail.page';
+import { CartPage } from '../../pages/cart.page';
 
 type CartLoginFixtures = {
   cartLoginPage: CartPage;
 };
 
 /** 商品をカートに入れて購入手続きへ進むフィクスチャ. */
 export const test = base.extend<CartLoginFixtures>({
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
   cartLoginPage: async ({ mypageLoginPage, page }, use) => {
     await page.goto(PlaywrightConfig.use?.baseURL ?? "/"); // トップへ遷移しないと、スキャン後にカートが空になってしまう
     const productsDetailPage = new ProductsDetailPage(page);

e2e-tests/fixtures/front_login/mypage_login.fixture.ts

@@ -0,0 +1,60 @@
+import { test as base, expect } from "@playwright/test";
+import { MypageLoginPage } from "../../pages/mypage/login.page";
+import { EntryPage } from "../../pages/entry/entry.page";
+import { AdminLoginPage } from "../../pages/admin/login.page";
+import { Mode, ContextType } from '../../utils/ZapClient';
+import PlaywrightConfig from '../../../playwright.config';
+import { ECCUBE_ADMIN_USER, ECCUBE_ADMIN_PASS, ADMIN_DIR } from "../../config/default.config";
+import { faker } from '@faker-js/faker/locale/ja';
+import { FakerUtils } from "../../utils/FakerUtils";
+
+type MypageLoginFixtures = {
+  mypageLoginPage: MypageLoginPage;
+};
+
+export const test = base.extend<MypageLoginFixtures>({
+  mypageLoginPage: async ({ page }, use) => {
+    const email = FakerUtils.createEmail();
+    const password = FakerUtils.createPassword();
+    const loginPage = new MypageLoginPage(page, email, password);
+    if (PlaywrightConfig.use?.proxy === undefined) {
+      const entryPage = new EntryPage(page, email, password);
+      await entryPage.goto();
+      await entryPage.agree();
+      await entryPage.fill();
+      await entryPage.confirm();
+      await entryPage.register();
+      await loginPage.goto();
+      await loginPage.logout();
+
+      // 購入フローのテストでポイント利用するため、ポイントを加算する
+      const adminLoginPage = new AdminLoginPage(page);
+      await page.goto(`/${ADMIN_DIR}`);
+      await adminLoginPage.login(ECCUBE_ADMIN_USER, ECCUBE_ADMIN_PASS);
+      await page.goto(`/${ADMIN_DIR}/customer/index.php`);
+      await page.locator('input[name=search_email]').fill(email);
+      await page.getByRole('link', { name: 'この条件で検索する' }).click();
+      await page.getByRole('link', { name: '編集' }).click();
+      await page.getByRole('row', { name: '所持ポイント' }).getByRole('textbox').fill(String(faker.number.int({ min: 0, max: 999999 })));
+      await page.getByRole('link', { name: '確認ページへ' }).click();
+      await page.getByRole('link', { name: 'この内容で登録する' }).click();
+
+      await page.goto(`/`);
+      await loginPage.login();
+    } else {
+      const zapClient = loginPage.getZapClient();
+      await zapClient.setMode(Mode.Protect);
+      await zapClient.newSession('/zap/wrk/sessions/front_login', true);
+      await zapClient.importContext(ContextType.FrontLogin);
+
+      if (!await zapClient.isForcedUserModeEnabled()) {
+        await zapClient.setForcedUserModeEnabled();
+        expect(await zapClient.isForcedUserModeEnabled()).toBeTruthy();
+      }
+      await page.goto(`/mypage/index.php`);
+    }
+    use(loginPage);
+  }
+});
+
+export { expect } from "@playwright/test";

e2e-tests/fixtures/shopping_deliv.fixture.ts → e2e-tests/fixtures/front_login/shopping_deliv.fixture.ts

@@ -1,5 +1,5 @@
 import { test as base } from './cartin.fixture';
-import { CartPage } from '../pages/cart.page';
+import { CartPage } from '../../pages/cart.page';
 
 type ShoppingDelivLoginFixtures = {
   shoppingDelivLoginPage: CartPage;

e2e-tests/fixtures/shopping_payment.fixture.ts → e2e-tests/fixtures/front_login/shopping_payment.fixture.ts

@@ -1,11 +1,12 @@
 import { test as base } from './shopping_deliv.fixture';
-import { ShoppingPaymentPage } from '../pages/shopping/payment.page';
+import { ShoppingPaymentPage } from '../../pages/shopping/payment.page';
 
 type ShoppingPaymentLoginFixtures = {
   shoppingPaymentLoginPage: ShoppingPaymentPage;
 };
 
 export const test = base.extend<ShoppingPaymentLoginFixtures>({
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
   shoppingPaymentLoginPage: async ({ shoppingDelivLoginPage, page }, use) => {
     const paymentPage = new ShoppingPaymentPage(page);
     await paymentPage.goto();

e2e-tests/pages/admin/login.page.ts

@@ -11,31 +11,31 @@ export class AdminLoginPage {
   readonly loginButton: Locator;
   zapClient: ZapClient;
 
-  constructor(page: Page) {
+  constructor (page: Page) {
     this.page = page;
-    this.url = `/${ ADMIN_DIR }index.php`;
+    this.url = `/${ADMIN_DIR}index.php`;
 
     this.loginId = page.locator('input[name=login_id]');
     this.password = page.locator('input[name=password]');
     this.loginButton = page.getByRole('link', { name: 'LOGIN' });
     this.zapClient = new ZapClient();
   }
 
-  async goto() {
+  async goto () {
     await this.page.goto(this.url);
   }
 
-  async login(loginId: string, password: string) {
+  async login (loginId: string, password: string) {
     await this.loginId.fill(loginId);
     await this.password.fill(password);
     await this.loginButton.click();
   }
 
-  async logout() {
-    await this.page.goto(`/${ ADMIN_DIR }/logout.php`);
+  async logout () {
+    await this.page.goto(`/${ADMIN_DIR}/logout.php`);
   }
 
-  getZapClient() {
+  getZapClient () {
     return this.zapClient;
   }
 }