feat(core): Add tests for shipping estimatesg

bigcommerce · Apr 15, 2024 · 844c30f · 844c30f
1 parent 3f19124
commit 844c30f
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 4 deletions.
diff --git a/apps/core/app/[locale]/(default)/cart/_components/shipping-info.tsx b/apps/core/app/[locale]/(default)/cart/_components/shipping-info.tsx
@@ -142,6 +142,7 @@ export const ShippingInfo = ({
           <FieldLabel>{t('country')}</FieldLabel>
           <FieldControl asChild>
             <Select
+              aria-label={t('countryAriaLabel')}
               autoComplete="country"
               onValueChange={(value: string) => {
                 const countryId = value.split('-')[1];
@@ -174,6 +175,7 @@ export const ShippingInfo = ({
           <FieldControl asChild>
             {formValues.states !== null ? (
               <Select
+                aria-label={t('stateAriaLabel')}
                 disabled={formValues.states.length === 0}
                 onValueChange={(value) => setFormValues({ state: value })}
                 placeholder={t('statePlaceholder')}
@@ -204,6 +206,7 @@ export const ShippingInfo = ({
           <FieldLabel htmlFor="city-field">{t('city')}</FieldLabel>
           <FieldControl asChild>
             <Input
+              aria-label={t('cityAriaLabel')}
               autoComplete="address-level2"
               id="city-field"
               onChange={(e) => setFormValues({ city: e.target.value })}
@@ -217,6 +220,7 @@ export const ShippingInfo = ({
           <FieldLabel htmlFor="zip-field">{t('postcode')}</FieldLabel>
           <FieldControl asChild>
             <Input
+              aria-label={t('postcodeAriaLabel')}
               autoComplete="postal-code"
               id="zip-field"
               onChange={(e) => setFormValues({ postcode: e.target.value })}

diff --git a/apps/core/messages/en.json b/apps/core/messages/en.json
@@ -128,13 +128,17 @@
     },
     "ShippingInfo": {
       "country": "Country",
-      "countryPlaceholder": "Select county",
+      "countryAriaLabel": "Country",
+      "countryPlaceholder": "Select country",
       "state": "State/province",
-      "statePlaceholder": "State/province...",
+      "stateAriaLabel": "State",
+      "statePlaceholder": "Select state",
       "city": "Suburb/city",
-      "cityPlaceholder": "State/province...",
+      "cityAriaLabel": "City",
+      "cityPlaceholder": "City...",
       "postcode": "Zip/Postcode",
-      "postcodePlaceholder": "State/province...",
+      "postcodeAriaLabel": "Postcode",
+      "postcodePlaceholder": "Postal code...",
       "errorMessage": "Something went wrong, please try again."
     },
     "SubmitShippingInfo": {

diff --git a/packages/functional/actions/cart-actions.ts b/packages/functional/actions/cart-actions.ts
@@ -0,0 +1,26 @@
+import { Page } from '@playwright/test';
+
+export async function addEstimatedShippingCosts(
+  page: Page,
+  country: string,
+  state: string,
+  city: string,
+  zip: string,
+): Promise<void> {
+  await page.getByRole('combobox', { name: 'Country' }).click();
+  await page.getByLabel(country).click();
+
+  await page
+    .getByRole('combobox', { name: 'State' })
+    .filter({ hasNotText: 'Select state' })
+    .click();
+  await page.getByLabel(state).click();
+
+  await page.getByLabel('City').fill(city);
+  await page.getByLabel('Postcode').fill(zip);
+
+  await page.getByRole('button', { name: 'Estimate shipping' }).click();
+  await page.getByRole('button', { name: 'Update shipping costs' }).click();
+}
+
+export * as CartActions from './cart-actions';
diff --git a/packages/functional/tests/ui/desktop/e2e/shipping.spec.ts b/packages/functional/tests/ui/desktop/e2e/shipping.spec.ts
@@ -0,0 +1,61 @@
+import { expect, test } from '@playwright/test';
+
+import { CartActions } from '../../../../actions/cart-actions';
+import { ProductActions } from '../../../../actions/product-actions';
+
+const sampleProduct = '[Sample] Able Brewing System';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/');
+  await page.getByLabel('Main').getByRole('link', { name: 'Kitchen' }).click();
+  await expect(page.getByRole('heading', { level: 3, name: sampleProduct })).toBeVisible();
+
+  await ProductActions.addProductToCart(page, sampleProduct);
+
+  await page.getByRole('link', { name: 'Cart Items 1' }).click();
+
+  await expect(page.getByRole('heading', { level: 1, name: 'Your cart' })).toBeVisible();
+  await expect(page.getByText(sampleProduct, { exact: true })).toBeVisible();
+});
+
+test('Add shipping estimates', async ({ page }) => {
+  await expect(page.getByText('Shipping cost')).toBeVisible();
+  await page.getByRole('button', { name: 'Add' }).first().click();
+
+  await CartActions.addEstimatedShippingCosts(page, 'United States', 'Texas', 'Austin', '76267');
+  await expect(page.getByRole('button', { name: 'Change' })).toBeVisible();
+});
+
+test('Update shipping estimates', async ({ page }) => {
+  await expect(page.getByText('Shipping cost')).toBeVisible();
+  await page.getByRole('button', { name: 'Add' }).first().click();
+
+  await CartActions.addEstimatedShippingCosts(page, 'United States', 'Texas', 'Austin', '76267');
+
+  await expect(page.getByRole('button', { name: 'Change' })).toBeVisible();
+  await page.getByRole('button', { name: 'Change' }).click();
+
+  await CartActions.addEstimatedShippingCosts(
+    page,
+    'United States',
+    'Massachusetts',
+    'Boston',
+    '01762',
+  );
+
+  await expect(page.getByRole('button', { name: 'Change' })).toBeVisible();
+});
+
+test('Add shipping estimates for Canada', async ({ page }) => {
+  await expect(page.getByText('Shipping cost')).toBeVisible();
+  await page.getByRole('button', { name: 'Add' }).first().click();
+
+  await CartActions.addEstimatedShippingCosts(
+    page,
+    'Canada',
+    'British Columbia',
+    'Vancouver',
+    '98617',
+  );
+  await expect(page.getByRole('button', { name: 'Change' })).toBeVisible();
+});