From 4219b60e3105e737de23b403fce67636fb9d97e0 Mon Sep 17 00:00:00 2001
From: Kira <iam@kirajiroux.com>
Date: Fri, 15 Sep 2023 16:01:04 -0700
Subject: [PATCH] Enabling func to be compliant with mobile viewport

---
 Utils/isDesktopViewport.js   |  5 +++++
 page-objects/CheckoutPage.js |  1 +
 page-objects/Navigation.js   | 14 ++++++++++++--
 page-objects/ProductsPage.js | 16 +++++++++++++---
 playwright.config.js         | 36 ++++++++++++++++++------------------
 5 files changed, 49 insertions(+), 23 deletions(-)
 create mode 100644 Utils/isDesktopViewport.js

diff --git a/Utils/isDesktopViewport.js b/Utils/isDesktopViewport.js
new file mode 100644
index 0000000..63089e0
--- /dev/null
+++ b/Utils/isDesktopViewport.js
@@ -0,0 +1,5 @@
+export const isDesktopViewPort = (page) => {
+    const size = page.viewportSize()
+
+    return size.width >= 600
+}
\ No newline at end of file
diff --git a/page-objects/CheckoutPage.js b/page-objects/CheckoutPage.js
index eb6649a..cb07eb9 100644
--- a/page-objects/CheckoutPage.js
+++ b/page-objects/CheckoutPage.js
@@ -34,6 +34,7 @@ export class CheckoutPage {
     }
 
     continueToCheckout = async () => {
+
         await this.continueToCheckoutButton.waitFor()
         await this.continueToCheckoutButton.click()
         await this.page.waitForURL(/\/login/, {timeout: 3000})
diff --git a/page-objects/Navigation.js b/page-objects/Navigation.js
index 1ce4f55..ea19f7a 100644
--- a/page-objects/Navigation.js
+++ b/page-objects/Navigation.js
@@ -1,9 +1,13 @@
+import { isDesktopViewPort } from "../Utils/isDesktopViewport.js"
+
 export class Navigation {
     constructor(page){
         this.page = page
         this.basketCounter = page.locator('[data-qa="header-basket-count"]')
         this.checkoutLink = page.getByRole('link', { name: 'Checkout' })
 
+        this.mobileBurgerButton = page.locator('[data-qa="burger-button"]')
+
     }
 
     getBasketCount = async () => {
@@ -13,10 +17,16 @@ export class Navigation {
     }
     
     goToCheckout = async () => {
-        this.checkoutLink.waitFor()
 
+        if(!isDesktopViewPort(this.page)) {
+            await this.mobileBurgerButton.waitFor()
+            await this.mobileBurgerButton.click()
+        }
+
+        this.checkoutLink.waitFor()
+        
         await this.checkoutLink.click()
         await this.page.waitForURL("/basket")
-
+        
     }
 }
diff --git a/page-objects/ProductsPage.js b/page-objects/ProductsPage.js
index 0ac2588..abc4ce7 100644
--- a/page-objects/ProductsPage.js
+++ b/page-objects/ProductsPage.js
@@ -1,5 +1,6 @@
 import { expect } from "@playwright/test"
 import { Navigation } from "./Navigation.js"
+import { isDesktopViewPort } from "../Utils/isDesktopViewport.js"
 
 export class ProductsPage {
 
@@ -22,14 +23,23 @@ export class ProductsPage {
 
         await expect(specificAddButton).toHaveText("Add to Basket")
         const navigation = new Navigation(this.page)
-        const basketCountBefore = await navigation.getBasketCount()
+
+        // only desktop viewport
+        let basketCountBefore
+        if (isDesktopViewPort(this.page)) {
+            basketCountBefore = await navigation.getBasketCount()
+        }
 
         await specificAddButton.click()
 
         await expect(specificAddButton).toHaveText("Remove from Basket")
-        const basketCountAfter = await navigation.getBasketCount()
 
-        expect(basketCountAfter).toBeGreaterThan(basketCountBefore)
+        // only desktop viewport
+        if(isDesktopViewPort(this.page)) {
+            const basketCountAfter = await navigation.getBasketCount()
+            expect(basketCountAfter).toBeGreaterThan(basketCountBefore)
+        }
+
     }
 
     sortByCheapest = async () => {
diff --git a/playwright.config.js b/playwright.config.js
index ab12500..4fe94a0 100644
--- a/playwright.config.js
+++ b/playwright.config.js
@@ -46,12 +46,12 @@ const config = {
 
   /* Configure projects for major browsers */
   projects: [
-    {
-      name: 'chromium',
-      use: {
-        ...devices['Desktop Chrome'],
-      },
-    },
+    //  {
+    //    name: 'chromium',
+    //    use: {
+    //      ...devices['Desktop Chrome'],
+    //    },
+    //  },
 
     // {
     //   name: 'firefox',
@@ -68,18 +68,18 @@ const config = {
     // },
 
     /* Test against mobile viewports. */
-    // {
-    //   name: 'Mobile Chrome',
-    //   use: {
-    //     ...devices['Pixel 5'],
-    //   },
-    // },
-    // {
-    //   name: 'Mobile Safari',
-    //   use: {
-    //     ...devices['iPhone 12'],
-    //   },
-    // },
+      {
+        name: 'Mobile Chrome',
+        use: {
+          ...devices['Pixel 5'],
+        },
+      },
+    //  {
+    //    name: 'Mobile Safari',
+    //    use: {
+    //      ...devices['iPhone 12'],
+    //    },
+    //  },
 
     /* Test against branded browsers. */
     // {