From 73e6d87424ba551093803b0d329e3db75ee46762 Mon Sep 17 00:00:00 2001
From: Gael Robin <robin.gael@gmail.com>
Date: Wed, 18 Sep 2024 16:10:52 +0200
Subject: [PATCH] Adds Imagify steps

---
 config/wp.config.sample.ts   | 13 ++++++++++++-
 src/features/ll-lcp.feature  | 23 +++++++++++++----------
 src/support/steps/imagify.ts | 35 +++++++++++++++++++++++++++++++++++
 utils/page-utils.ts          |  9 +++++++++
 4 files changed, 69 insertions(+), 11 deletions(-)
 create mode 100644 src/support/steps/imagify.ts

diff --git a/config/wp.config.sample.ts b/config/wp.config.sample.ts
index 0c72d60..b5f3f42 100755
--- a/config/wp.config.sample.ts
+++ b/config/wp.config.sample.ts
@@ -13,6 +13,16 @@ const WP_ADMIN_USER = {
 	
 } as const;
 
+/**
+ * The default Imagify settings informations
+ *
+ * @constant
+ * @type {{ API_KEY: string }}
+ */
+const IMAGIFY_INFOS = {
+	API_KEY: ''
+} as const;
+
 /**
  * Extracted environment variables related to WordPress configuration.
  * Uses default values if environment variables are not set.
@@ -124,5 +134,6 @@ export {
 	WP_SSH_ADDRESS,
 	WP_SSH_KEY,
 	WP_SSH_ROOT_DIR,
-	SCENARIO_URLS
+	SCENARIO_URLS,
+	IMAGIFY_INFOS
 };
\ No newline at end of file
diff --git a/src/features/ll-lcp.feature b/src/features/ll-lcp.feature
index dba2530..527e340 100644
--- a/src/features/ll-lcp.feature
+++ b/src/features/ll-lcp.feature
@@ -8,17 +8,20 @@ Feature: Lazyload with LCP
     When I go to 'wp-admin/options-general.php?page=wprocket#dashboard'
     And I save settings 'media' 'lazyloadCssBgImg'
 
-  Scenario: Should Exclude LCP/ATF from Lazyload
-    Given I visit page '[TEMPLATE]' with browser dimension 1600 x 700
-    When I clear cache
-    Then lcp image markup is not written to LL format
-    And ATF image markup is not written to LL format
+#  Scenario: Should Exclude LCP/ATF from Lazyload
+#    Given I visit page '[TEMPLATE]' with browser dimension 1600 x 700
+#    When I clear cache
+#    Then lcp image markup is not written to LL format
+#    And ATF image markup is not written to LL format
 
   Scenario: Should exclude next-gen lcp/atf from LL
     Given plugin is installed 'imagify'
-    And display next-gen is enabled on imagify # Create this step
-    And page with images having next-gen avif, webp, avif/webp, no next gen is visited # I didn't get that
+    And plugin is activated
+    And I go to 'wp-admin/options-general.php?page=imagify'
+    And I save imagify API key
+    And display next-gen is enabled on imagify
+#    And page with images having next-gen avif, webp, avif/webp, no next gen is visited # I didn't get that
     When I clear cache
-    And I visit the page '[TEMPLATE]'  with dimension 1600 x 700
-    Then lcp image markup is not written to LL format
-    And ATF image markup is not written to LL format
+#    And I visit the page '[TEMPLATE]'  with dimension 1600 x 700
+#    Then lcp image markup is not written to LL format
+#    And ATF image markup is not written to LL format
diff --git a/src/support/steps/imagify.ts b/src/support/steps/imagify.ts
new file mode 100644
index 0000000..3d5ba1d
--- /dev/null
+++ b/src/support/steps/imagify.ts
@@ -0,0 +1,35 @@
+import { expect } from "@playwright/test";
+import { ICustomWorld } from "../../common/custom-world";
+
+import { Given, When, Then } from '@cucumber/cucumber';
+import { IMAGIFY_INFOS } from "../../../config/wp.config";
+import { WP_BASE_URL } from '../../../config/wp.config';
+import { createReference, compareReference } from "../../../utils/helpers";
+import type { Section } from "../../../utils/types";
+import { Page } from '@playwright/test';
+import {
+    deactivatePlugin, installRemotePlugin,
+} from "../../../utils/commands";
+
+Given('I save imagify API key', async function (this: ICustomWorld) {
+    // Check if the API key input field exists on the page
+    const apiKeyInput = await this.page.$('input#api_key');
+
+    if (apiKeyInput) {
+        // Fill the API key input field with the API key from the config
+        await this.page.fill('input#api_key', IMAGIFY_INFOS.API_KEY);
+
+        // Click the submit button to save the changes
+        await this.page.click('div.submit.imagify-clearfix input#submit');
+    }
+});
+Given('display next-gen is enabled on imagify', async function (this: ICustomWorld) {
+    // Go to Imagify setting page
+    await this.utils.gotoImagify();
+
+    // Check the 'Display images in Next-Gen format on the site' checkbox
+    await this.page.click('label[for="imagify_display_nextgen"]');
+
+    // Click the submit button to save the changes
+    await this.page.click('input#submit');
+});
\ No newline at end of file
diff --git a/utils/page-utils.ts b/utils/page-utils.ts
index 3ac1b56..6df1ba5 100644
--- a/utils/page-utils.ts
+++ b/utils/page-utils.ts
@@ -115,6 +115,15 @@ export class PageUtils {
         await this.page.goto(WP_BASE_URL + '/wp-admin/options-general.php?page=wprocket#dashboard');
     }
 
+    /**
+     * Navigates to Imagify settings page.
+     *
+     * @return {Promise<void>}
+     */
+    public gotoImagify = async (): Promise<void> => {
+        await this.page.goto(WP_BASE_URL + '/wp-admin/options-general.php?page=imagify');
+    }
+
     /**
      * Navigates to new post on Wordpress.
      *