Functional Tests : API : GET /api/hook-status/{id}

admin-dev/themes/new-theme/js/pages/improve/design_positions/positions-list-handler.ts

@@ -278,10 +278,11 @@ class PositionsListHandler {
     transplantModuleHref.searchParams.set('show_modules', $moduleId);
     this.$transplantModuleButton.attr('href', transplantModuleHref.toString());
 
+    const isVisible: boolean = $hookName === '' && $moduleId === 'all';
+
     for (let $id = 0; $id < self.$hooksList.length; $id += 1) {
-      self.$hooksList[$id].container.toggle(
-        $hookName === '' && $moduleId === 'all',
-      );
+      self.$hooksList[$id].container.toggleClass('hook-visible', isVisible);
+      self.$hooksList[$id].container.toggle(isVisible);
       self.$hooksList[$id].element.html(self.$hooksList[$id].title);
       self.$hooksList[$id].container
         .find('.module-item')
@@ -331,19 +332,23 @@ class PositionsListHandler {
 
       // Nothing selected
       if ($moduleId === 'all' && $hookName !== '') {
+        $hooksToShowFromHookName.toggleClass('hook-visible', true);
         $hooksToShowFromHookName.show();
       } else if ($hookName === '' && $moduleId !== 'all') {
         // Have no hook bug have a module
+        $hooksToShowFromModule.toggleClass('hook-visible', true);
         $hooksToShowFromModule.show();
       } else {
         // Both selected
+        $hooksToShowFromHookName.filter($hooksToShowFromModule).toggleClass('hook-visible', true);
         $hooksToShowFromHookName.filter($hooksToShowFromModule).show();
       }
     }
 
     if (!self.$hookPosition.prop('checked')) {
       for (let $id = 0; $id < self.$hooksList.length; $id += 1) {
         if (self.$hooksList[$id].container.is('.hook-position')) {
+          self.$hooksList[$id].container.toggleClass('hook-visible', false);
           self.$hooksList[$id].container.hide();
         }
       }

src/PrestaShopBundle/Resources/views/Admin/Improve/Design/positions.html.twig

@@ -100,7 +100,7 @@
                   data-update-url="{{ path('api_improve_design_positions_update') }}"
                   data-togglestatus-url="{{ path('admin_modules_positions_toggle_status') }}">
               {% for hook in hooks %}
-                <section class="hook-panel{% if not hook['position'] %} hook-position{% endif %}" {% if not hook['position'] %} style="display:none;" {% endif %}>
+                <section class="hook-panel{% if not hook['position'] %} hook-position{% else %} hook-visible{% endif %}" {% if not hook['position'] %} style="display:none;" {% endif %}>
                   <a name="{{ hook['name'] }}"></a>
                   <header class="hook-panel-header">
                     <span class="hook-status">

tests/UI/campaigns/functional/API/02_endpoints/04_hook/01_getAPIHookStatusId.ts

@@ -0,0 +1,110 @@
+// Import utils
+import api from '@utils/api';
+import helper from '@utils/helpers';
+import testContext from '@utils/testContext';
+
+// Import commonTests
+import loginCommon from '@commonTests/BO/loginBO';
+
+// Import pages
+import dashboardPage from '@pages/BO/dashboard';
+import positionsPage from '@pages/BO/design/positions';
+
+import {expect} from 'chai';
+import type {APIRequestContext, BrowserContext, Page} from 'playwright';
+
+const baseContext: string = 'functional_API_endpoints_hook_getAPIHookStatusId';
+
+describe('API : GET /api/hook-status/{id}', async () => {
+  let browserContext: BrowserContext;
+  let page: Page;
+  let apiContext: APIRequestContext;
+  let accessToken: string;
+  let idHook: number;
+  let statusHook: boolean;
+
+  before(async function () {
+    browserContext = await helper.createBrowserContext(this.browser);
+    page = await helper.newTab(browserContext);
+
+    apiContext = await helper.createAPIContext(global.BO.URL);
+
+    if (!global.GENERATE_FAILED_STEPS) {
+      // @todo : https://github.com/PrestaShop/PrestaShop/issues/34297
+      const apiResponse = await apiContext.post('api/oauth2/token', {
+        form: {
+          client_id: 'my_client_id',
+          client_secret: 'prestashop',
+          grant_type: 'client_credentials',
+        },
+      });
+      expect(apiResponse.status()).to.eq(200);
+
+      const jsonResponse = await apiResponse.json();
+      expect(jsonResponse).to.have.property('access_token');
+      expect(jsonResponse.access_token).to.be.a('string');
+
+      accessToken = jsonResponse.access_token;
+    }
+  });
+
+  after(async () => {
+    await helper.closeBrowserContext(browserContext);
+  });
+
+  describe('BackOffice : Expected data', async () => {
+    it('should login in BO', async function () {
+      await loginCommon.loginBO(this, page);
+    });
+
+    it('should go to \'Design > Positions\' page', async function () {
+      await testContext.addContextItem(this, 'testIdentifier', 'goToPositionsPage', baseContext);
+
+      await dashboardPage.goToSubMenu(
+        page,
+        dashboardPage.designParentLink,
+        dashboardPage.positionsLink,
+      );
+      await positionsPage.closeSfToolBar(page);
+
+      const pageTitle = await positionsPage.getPageTitle(page);
+      expect(pageTitle).to.contains(positionsPage.pageTitle);
+    });
+
+    it('should get the hook informations', async function () {
+      await testContext.addContextItem(this, 'testIdentifier', 'getHookInformations', baseContext);
+
+      idHook = await positionsPage.getHookId(page, 0);
+      expect(idHook).to.be.gt(0);
+
+      statusHook = await positionsPage.getHookStatus(page, 0);
+      expect(statusHook).to.be.equal(true);
+    });
+  });
+
+  describe('API : Check Data', async () => {
+    it('should request the endpoint /admin-dev/api/hook-status/{id}', async function () {
+      await testContext.addContextItem(this, 'testIdentifier', 'requestEndpoint', baseContext);
+
+      const apiResponse = await apiContext.get(`api/hook-status/${idHook}`, {
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+        },
+      });
+      expect(apiResponse.status()).to.eq(200);
+      expect(api.hasResponseHeader(apiResponse, 'Content-Type')).to.eq(true);
+      expect(api.getResponseHeader(apiResponse, 'Content-Type')).to.contains('application/json');
+
+      const jsonResponse = await apiResponse.json();
+      // id
+      expect(jsonResponse).to.have.property('id');
+      expect(jsonResponse.id).to.be.a('number');
+      expect(jsonResponse.id).to.be.equal(idHook);
+
+      // active
+      expect(jsonResponse).to.have.property('active');
+      expect(jsonResponse.active).to.be.a('boolean');
+      expect(jsonResponse.active).to.be.equal(statusHook);
+    });
+  });
+});

tests/UI/pages/BO/design/positions/index.ts

@@ -24,9 +24,15 @@ class Positions extends BOBasePage {
 
   private readonly modulePositionFormHookSection: string;
 
-  private readonly hookNameLink: (hookName: string) => string;
+  private readonly modulePositionFormHookSectionVisible: string;
 
-  private readonly modulesListInHookResults: (hookName: string) => string;
+  private readonly hookRowNth: (hookRow: number) => string;
+
+  private readonly hookStatusInput: (hookRow: number) => string;
+
+  private readonly hookRowName: (hookName: string) => string;
+
+  private readonly hookRowModulesList: (hookName: string) => string;
 
   private readonly hookNameSpan: (hookName: string) => string;
 
@@ -46,10 +52,14 @@ class Positions extends BOBasePage {
     this.filterModuleButton = '#position-filters span.select2';
     this.filterModuleInputValue = 'body span.select2-search.select2-search--dropdown input';
     this.filterModuleFirstResult = '#select2-show-modules-results li:nth-child(1)';
-    this.modulePositionFormHookSection = `${this.modulePositionForm} section[style='']`;
-    this.hookNameLink = (hookName: string) => `${this.modulePositionFormHookSection} a[name=${hookName}]`;
-    this.modulesListInHookResults = (hookName: string) => `${this.hookNameLink(hookName)} ~ section.module-list ul`;
-    this.hookNameSpan = (hookName: string) => `${this.hookNameLink(hookName)} + header span.hook-name`;
+    this.modulePositionFormHookSection = `${this.modulePositionForm} section`;
+    this.modulePositionFormHookSectionVisible = `${this.modulePositionFormHookSection}.hook-panel.hook-visible`;
+    this.hookRowNth = (hookRow: number) => `${this.modulePositionFormHookSection}:nth-child(${hookRow + 1
+    } of .hook-panel.hook-visible)`;
+    this.hookStatusInput = (hookRow: number) => `${this.hookRowNth(hookRow)} header span.hook-status input.hook-switch-action`;
+    this.hookRowName = (hookName: string) => `${this.modulePositionFormHookSection} a[name=${hookName}]`;
+    this.hookRowModulesList = (hookName: string) => `${this.hookRowName(hookName)} ~ section.module-list ul`;
+    this.hookNameSpan = (hookName: string) => `${this.hookRowName(hookName)} + header span.hook-name`;
   }
 
   /* Methods */
@@ -84,7 +94,7 @@ class Positions extends BOBasePage {
    * @returns {Promise<number>}
    */
   async getNumberOfHooks(page: Page): Promise<number> {
-    return (await page.$$(this.modulePositionFormHookSection)).length;
+    return (await page.$$(this.modulePositionFormHookSectionVisible)).length;
   }
 
   /**
@@ -94,7 +104,7 @@ class Positions extends BOBasePage {
    * @returns {Promise<string>}
    */
   async getModulesInHook(page: Page, hookName: string): Promise<string> {
-    return this.getTextContent(page, this.modulesListInHookResults(hookName));
+    return this.getTextContent(page, this.hookRowModulesList(hookName));
   }
 
   /**
@@ -106,6 +116,31 @@ class Positions extends BOBasePage {
   async isHookVisible(page: Page, hookName: string): Promise<boolean> {
     return this.elementVisible(page, this.hookNameSpan(hookName), 1000);
   }
+
+  /**
+   * Return the hookId
+   * @param page {Page} Browser tab
+   * @param hookRow {number} Hook Row
+   * @returns {Promise<boolean>}
+   */
+  async getHookId(page: Page, hookRow: number): Promise<number> {
+    const attribute = await this.getAttributeContent(page, this.hookStatusInput(hookRow), 'data-hook-id');
+
+    return parseInt(attribute, 10);
+  }
+
+  /**
+   * Return the hook status
+   * @param page {Page} Browser tab
+   * @param hookRow {number} Hook Row
+   * @returns {Promise<boolean>}
+   */
+  async getHookStatus(page: Page, hookRow: number): Promise<boolean> {
+    const inputValue = await this.getAttributeContent(page, `${this.hookStatusInput(hookRow)}:checked`, 'value');
+
+    // Return status=false if value='0' and true otherwise
+    return (inputValue !== '0');
+  }
 }
 
 export default new Positions();