add siteSettings basic test (#4759)

saleor · Apr 2, 2024 · d61fdb0 · d61fdb0
1 parent ceada31
commit d61fdb0
Show file tree

Hide file tree

Showing 6 changed files with 146 additions and 30 deletions.
diff --git a/.changeset/short-garlics-brush.md b/.changeset/short-garlics-brush.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": minor
+---
+
+Add site settings e2e test
diff --git a/playwright/api/basics.ts b/playwright/api/basics.ts
@@ -1,39 +1,39 @@
 import { APIRequestContext } from "@playwright/test";
 
 interface User {
-    email: string;
-    password: string;
+  email: string;
+  password: string;
 }
 
 interface TokenCreateResponse {
-    tokenCreate: {
-        token: string;
-        refreshToken: string;
-        errors: [
-            {
-                message: string;
-                code: string;
-            },
-        ];
-        user: {
-            id: string;
-        };
+  tokenCreate: {
+    token: string;
+    refreshToken: string;
+    errors: [
+      {
+        message: string;
+        code: string;
+      },
+    ];
+    user: {
+      id: string;
     };
+  };
 }
 
 interface ApiResponse<T> {
-    data: T;
+  data: T;
 }
 
 export class BasicApiService {
-    readonly request: APIRequestContext;
+  readonly request: APIRequestContext;
 
-    constructor(request: APIRequestContext) {
-        this.request = request;
-    }
+  constructor(request: APIRequestContext) {
+    this.request = request;
+  }
 
-    async logInUserViaApi(user: User): Promise<ApiResponse<TokenCreateResponse>> {
-        const query = `mutation TokenAuth{
+  async logInUserViaApi(user: User): Promise<ApiResponse<TokenCreateResponse>> {
+    const query = `mutation TokenAuth{
             tokenCreate(email: "${user.email}", password: "${user.password}") {
                 token
                 refreshToken
@@ -47,9 +47,11 @@ export class BasicApiService {
             }
         }`;
 
-        const loginResponse = await this.request.post(process.env.API_URI || "", { data: { query } });
-        const loginResponseJson = await loginResponse.json();
+    const loginResponse = await this.request.post(process.env.API_URI || "", {
+      data: { query },
+    });
+    const loginResponseJson = await loginResponse.json();
 
-        return loginResponseJson as ApiResponse<TokenCreateResponse>;
-    }
+    return loginResponseJson as ApiResponse<TokenCreateResponse>;
+  }
 }
diff --git a/playwright/pages/siteSettingsPage.ts b/playwright/pages/siteSettingsPage.ts
@@ -1,12 +1,81 @@
 import type { Page } from "@playwright/test";
+import { BasePage } from "@pages/basePage";
+import { URL_LIST } from "@data/url";
 
-export class SiteSettingsPage {
-  readonly page: Page;
-
+export class SiteSettingsPage extends BasePage {
   constructor(
     page: Page,
-    readonly companyInfoSection = page.locator('[data-test-id="company-info"]'),
+    readonly stockReservationForAuthUserInput = page
+      .getByTestId("reserve-stock-duration-for-auth-user-input")
+      .locator("input"),
+    readonly stockReservationForAnonUserInput = page
+      .getByTestId("reserve-stock-duration-for-anon-user-input")
+      .locator("input"),
+    readonly checkoutLineLimitInput = page
+      .getByTestId("checkout-limits-input")
+      .locator("input"),
+    readonly companyInput = page
+      .getByTestId("company-name-input")
+      .locator("input"),
+    readonly addressLine1Input = page
+      .getByTestId("company-address-line-1-input")
+      .locator("input"),
+    readonly addressLine2Input = page
+      .getByTestId("company-address-line-2-input")
+      .locator("input"),
+    readonly city = page.getByTestId("company-city-input").locator("input"),
+    readonly countryInput = page
+      .getByTestId("address-edit-country-select-field")
+      .locator("input"),
+    readonly autocompleteDropdown = page.getByTestId("autocomplete-dropdown"),
+    readonly countryAreaDropdown = page
+      .getByTestId("address-edit-country-area-field")
+      .locator("input"),
+    readonly zipInput = page.getByTestId("company-zip-input").locator("input"),
+    readonly phoneInput = page
+      .getByTestId("company-phone-input")
+      .locator("input"),
+    readonly emailConfirmationCheckbox = page.getByTestId(
+      "require-email-confirmation-checkbox",
+    ),
+    readonly companyInfoSection = page.getByTestId("company-info"),
+  ) {
+    super(page);
+  }
+
+  async gotoSiteSettings() {
+    await this.page.goto(URL_LIST.siteSettings);
+  }
+  async fillStockReservationForAuthUser(value: string) {
+    await this.stockReservationForAuthUserInput.fill(value);
+  }
+  async fillStockReservationForAnonUser(value: string) {
+    await this.stockReservationForAnonUserInput.fill(value);
+  }
+  async fillCheckoutLineLimitInput(value: string) {
+    await this.checkoutLineLimitInput.fill(value);
+  }
+  async completeAddressForm(
+    companyName: string,
+    addressLine1: string,
+    addressLine2: string,
+    city: string,
+    country: string,
+    countryArea: string,
+    zip: string,
+    phone: string,
   ) {
-    this.page = page;
+    await this.companyInput.fill(companyName);
+    await this.addressLine1Input.fill(addressLine1);
+    await this.addressLine2Input.fill(addressLine2);
+    await this.city.fill(city);
+    await this.countryInput.click();
+    await this.autocompleteDropdown.getByText(country, { exact: true }).click();
+    await this.countryAreaDropdown.fill(countryArea);
+    await this.autocompleteDropdown
+      .getByText(countryArea, { exact: true })
+      .click();
+    await this.zipInput.fill(zip);
+    await this.phoneInput.fill(phone);
   }
 }
diff --git a/playwright/tests/siteSettings.spec.ts b/playwright/tests/siteSettings.spec.ts
@@ -0,0 +1,36 @@
+import { SiteSettingsPage } from "@pages/siteSettingsPage";
+import { test, expect } from "@playwright/test";
+import faker from "faker";
+
+test.use({ storageState: "./playwright/.auth/admin.json" });
+let siteSettingsPage: SiteSettingsPage;
+
+test.beforeEach(({ page }) => {
+  siteSettingsPage = new SiteSettingsPage(page);
+});
+test("TC: SALEOR_132 Should be able to update site settings", async () => {
+  const companyName = faker.company.companyName();
+  await siteSettingsPage.gotoSiteSettings();
+  await siteSettingsPage.fillStockReservationForAuthUser("200");
+  await siteSettingsPage.fillStockReservationForAnonUser("400");
+  await siteSettingsPage.fillCheckoutLineLimitInput("70");
+  await siteSettingsPage.completeAddressForm(
+    companyName,
+    "Hidden Valley Road",
+    "1266",
+    "Lancaster",
+    "United States of America",
+    "Pennsylvania",
+    "17602",
+    "7172893144",
+  );
+  await siteSettingsPage.emailConfirmationCheckbox.click();
+  await siteSettingsPage.saveButton.click();
+  await siteSettingsPage.expectSuccessBanner();
+  await expect(siteSettingsPage.companyInfoSection).not.toBeEmpty();
+  await expect(siteSettingsPage.companyInput).toHaveValue(companyName);
+  await expect(siteSettingsPage.stockReservationForAuthUserInput).toHaveValue("200");
+  await expect(siteSettingsPage.stockReservationForAnonUserInput).toHaveValue("400");
+  await expect(siteSettingsPage.checkoutLineLimitInput).toHaveValue("70");
+  await expect(siteSettingsPage.emailConfirmationCheckbox).not.toBeChecked();
+});
diff --git a/src/siteSettings/components/SiteCheckoutSettingsCard/SiteCheckoutSettingsCard.tsx b/src/siteSettings/components/SiteCheckoutSettingsCard/SiteCheckoutSettingsCard.tsx
@@ -42,6 +42,7 @@ const SiteCheckoutSettingsCard: React.FC<SiteCheckoutSettingsCardProps> = ({
         </Typography>
         <FormSpacer />
         <TextField
+          data-test-id="reserve-stock-duration-for-auth-user-input"
           disabled={disabled}
           error={!!formErrors.reserveStockDurationAuthenticatedUser}
           type="number"
@@ -65,6 +66,7 @@ const SiteCheckoutSettingsCard: React.FC<SiteCheckoutSettingsCardProps> = ({
         />
         <FormSpacer />
         <TextField
+          data-test-id="reserve-stock-duration-for-anon-user-input"
           disabled={disabled}
           error={!!formErrors.reserveStockDurationAnonymousUser}
           type="number"
@@ -88,6 +90,7 @@ const SiteCheckoutSettingsCard: React.FC<SiteCheckoutSettingsCardProps> = ({
       <CardTitle title={intl.formatMessage(messages.checkoutLimits)} />
       <CardContent>
         <TextField
+          data-test-id="checkout-limits-input"
           disabled={disabled}
           error={!!formErrors.reserveStockDurationAuthenticatedUser}
           type="number"

diff --git a/src/siteSettings/components/SiteSettingsPage/SiteSettingsPage.tsx b/src/siteSettings/components/SiteSettingsPage/SiteSettingsPage.tsx
@@ -211,6 +211,7 @@ const SiteSettingsPage: React.FC<SiteSettingsPageProps> = props => {
                     </DashboardCard.Title>
                     <DashboardCard.Content>
                       <Checkbox
+                        data-test-id="require-email-confirmation-checkbox"
                         checked={data.emailConfirmation}
                         onCheckedChange={handleEmailConfirmationChange}
                       >