SHARE-371 Click statistics adapt to new design

-fixed click statistics
-refactored test case
-for recommended projects we need to wait for the new Capi routes

assets/js/custom/Index.js

@@ -34,7 +34,7 @@ function Index (clickStats, homepageClickStats, confirmButtonText) {
         url += '&flavor=' + flavor
       }
 
-      const list = new ProjectList(this, category, url, property)
+      const list = new ProjectList(this, category, url, property, self.performClickStatisticRequest)
       /* eslint-enable no-undef */
       $t.data('list', list)
     })
@@ -43,7 +43,6 @@ function Index (clickStats, homepageClickStats, confirmButtonText) {
   self.performClickStatisticRequest = function (href, type, isRecommendedProgram, userSpecificRecommendation, programID) {
     let url = self.clickStats
     let params = {}
-
     if (!isRecommendedProgram) {
       url = self.homepageClickStats
       if (['featured', 'example', 'newest', 'mostDownloaded', 'mostViewed', 'scratchRemixes', 'random'].indexOf(type) === -1) {
@@ -60,7 +59,6 @@ function Index (clickStats, homepageClickStats, confirmButtonText) {
         recIsUserSpecific: userSpecificRecommendation
       }
     }
-
     $.post(url, params, function (data) {
       if (data === 'error') {
         console.log('No click statistic is created!')

assets/js/custom/ProjectList.js

@@ -2,7 +2,7 @@
 
 // eslint-disable-next-line no-unused-vars
 class ProjectList {
-  constructor (container, category, apiUrl, propertyToShow) {
+  constructor (container, category, apiUrl, propertyToShow, performClickStatisticRequest) {
     this.container = container
     this.projectsContainer = $('.projects-container', container)
     this.category = category
@@ -13,6 +13,7 @@ class ProjectList {
     this.empty = false
     this.fetchActive = false
     this.isFullView = false
+    this.performClickStatisticRequest = performClickStatisticRequest
 
     this.$title = $('.project-list__title', $(this.container))
     this.$body = $('body')
@@ -43,7 +44,14 @@ class ProjectList {
           return
         }
         data.forEach(function (project) {
-          self.projectsContainer.append(self._generate(project))
+          project = self._generate(project)
+          self.projectsContainer.append(project)
+          project.click(function () {
+            const href = $(this).attr('href')
+            const programID = ((href.indexOf('project') > 0) ? (href.split('project/')[1]).split('?')[0] : 0)
+            const type = self.getClickStatisticType(self.category)
+            self.performClickStatisticRequest(href, type, false, 0, programID)
+          })
         })
         self.container.classList.remove('loading')
 
@@ -171,4 +179,19 @@ class ProjectList {
     this.$body.removeClass('overflow-hidden')
     return false
   }
+
+  getClickStatisticType (type) {
+    switch (type) {
+      case 'recent':
+        return 'newest'
+      case 'most_downloaded':
+        return 'mostDownloaded'
+      case 'most_viewed':
+        return 'mostViewed'
+      case 'scratch':
+        return 'scratchRemixes'
+      default:
+        return type
+    }
+  }
 }

tests/behat/context/CatrowebBrowserContext.php

@@ -1788,95 +1788,47 @@ public function iClickOnTheFirstRecommendedHomepageProgram(): void
    */
   public function iClickOnAFeaturedHomepageProgram(): void
   {
-    $arg1 = '#feature-slider > div > div:first-child > a';
-    $this->assertSession()->elementExists('css', $arg1);
-
-    $this
-      ->getSession()
-      ->getPage()
-      ->find('css', $arg1)
-      ->click()
-    ;
-  }
-
-  /**
-   * @When /^I click on a newest homepage program having program id "([^"]*)"$/
-   *
-   * @param mixed $program_id
-   *
-   * @throws ElementNotFoundException
-   */
-  public function iClickOnANewestHomepageProgram($program_id): void
-  {
-    $arg1 = '#newest .programs #program-'.$program_id.' .rec-programs';
-    $this->assertSession()->elementExists('css', $arg1);
-
-    $this
-      ->getSession()
-      ->getPage()
-      ->find('css', $arg1)
-      ->click()
-    ;
-  }
-
-  /**
-   * @When /^I click on a most downloaded homepage program having program id "([^"]*)"$/
-   *
-   * @param mixed $program_id
-   *
-   * @throws ElementNotFoundException
-   */
-  public function iClickOnAMostDownloadedHomepageProgram($program_id): void
-  {
-    $arg1 = '#mostDownloaded .programs #program-'.$program_id.' .rec-programs';
-    $this->assertSession()->elementExists('css', $arg1);
+    $first_featured_project = $this->getSession()->getPage()->find('css', '#feature-slider a');
+    $this->assertSession()->elementExists('xpath', $first_featured_project->getXpath());
 
     $this
       ->getSession()
       ->getPage()
-      ->find('css', $arg1)
+      ->find('xpath', $first_featured_project->getXpath())
       ->click()
     ;
   }
 
   /**
-   * @When /^I click on a most viewed homepage program having program id "([^"]*)"$/
+   * @When /^I click on a "([^"]*)" homepage program having program id "([^"]*)"$/
    *
+   * @param mixed $category
    * @param mixed $program_id
    *
    * @throws ElementNotFoundException
    */
-  public function iClickOnAMostViewedHomepageProgram($program_id): void
+  public function iClickOnANewestHomepageProgram($category, $program_id): void
   {
-    $arg1 = '#mostViewed .programs #program-'.$program_id.' .rec-programs';
-    $this->assertSession()->elementExists('css', $arg1);
-
-    $this
-      ->getSession()
-      ->getPage()
-      ->find('css', $arg1)
-      ->click()
-    ;
-  }
+    $projects = $this->getSession()->getPage()->findAll('css', '#home-projects__'.$category.' a');
+    $element = null;
+    foreach ($projects as $project)
+    {
+      $link = explode('/', $project->getAttribute('href'));
+      if (end($link) === $program_id)
+      {
+        $element = $project;
+        break;
+      }
+    }
 
-  /**
-   * @When /^I click on a random homepage program having program id "([^"]*)"$/
-   *
-   * @param mixed $program_id
-   *
-   * @throws ElementNotFoundException
-   */
-  public function iClickOnARandomHomepageProgram($program_id): void
-  {
-    $arg1 = '#random .programs #program-'.$program_id.' .rec-programs';
-    $this->assertSession()->elementExists('css', $arg1);
+    $this->assertSession()->elementExists('xpath', $element->getXpath());
 
     $this
       ->getSession()
       ->getPage()
-      ->find('css', $arg1)
+      ->find('xpath', $element->getXpath())
       ->click()
-    ;
+        ;
   }
 
   /**

tests/behat/features/web/general/click_statistics.feature

@@ -1,6 +1,6 @@
 # Not compatible with the new ProjectList and must be reworked once the new design is finished: SHARE-371
 
-@web @click_statistics @disabled
+@web @click_statistics
 Feature: Creating click statistics by clicking on tags, extensions and recommended programs
 
   Background:
@@ -64,16 +64,16 @@ Feature: Creating click statistics by clicking on tags, extensions and recommend
     And I wait for AJAX to finish
     Then There should be one database entry with type is "extensions" and "extension_id" is "3"
     And I should see "Your search returned 3 results"
-
-  @javascript
-  Scenario: Create one statistic entry from programs
-    Given I am on "/app/project/1"
-    And I wait for the page to be loaded
-    When I click on the first recommended program
-    And I wait for AJAX to finish
-    Then There should be one database entry with type is "project" and "program_id" is "2"
-    And I should see "p2"
-
+#
+#  @javascript
+#  Scenario: Create one statistic entry from programs
+#    Given I am on "/app/project/1"
+#    And I wait for the page to be loaded
+#    When I click on the first recommended program
+#    And I wait for AJAX to finish
+#    Then There should be one database entry with type is "project" and "program_id" is "2"
+#    And I should see "p2"
+#
   @javascript
   Scenario: Create one statistic entry from featured programs on homepage
     Given I am on the homepage
@@ -89,7 +89,7 @@ Feature: Creating click statistics by clicking on tags, extensions and recommend
   Scenario: Create one statistic entry from newest programs on homepage
     Given I am on the homepage
     And I wait for the page to be loaded
-    When I click on a newest homepage program having program id "2"
+    When I click on a "recent" homepage program having program id "2"
     And I wait for AJAX to finish
     Then There should be one homepage click database entry with type is "newest" and program id is "2"
     And There should be no recommended click statistic database entry
@@ -100,7 +100,7 @@ Feature: Creating click statistics by clicking on tags, extensions and recommend
   Scenario: Create one statistic entry from most downloaded programs on homepage
     Given I am on the homepage
     And I wait for the page to be loaded
-    When I click on a most downloaded homepage program having program id "3"
+    When I click on a "most_downloaded" homepage program having program id "3"
     And I wait for AJAX to finish
     Then There should be one homepage click database entry with type is "mostDownloaded" and program id is "3"
     And There should be no recommended click statistic database entry
@@ -111,7 +111,7 @@ Feature: Creating click statistics by clicking on tags, extensions and recommend
   Scenario: Create one statistic entry from most viewed programs on homepage
     Given I am on the homepage
     And I wait for the page to be loaded
-    When I click on a most viewed homepage program having program id "4"
+    When I click on a "most_viewed" homepage program having program id "4"
     And I wait for AJAX to finish
     Then There should be one homepage click database entry with type is "mostViewed" and program id is "4"
     And There should be no recommended click statistic database entry
@@ -122,60 +122,60 @@ Feature: Creating click statistics by clicking on tags, extensions and recommend
   Scenario: Create one statistic entry from random programs on homepage
     Given I am on the homepage
     And I wait for the page to be loaded
-    When I click on a random homepage program having program id "2"
+    When I click on a "random" homepage program having program id "2"
     And I wait for AJAX to finish
     Then There should be one homepage click database entry with type is "random" and program id is "2"
     And There should be no recommended click statistic database entry
     And I should see "Galaxy"
     And I should see "p2"
 
-  @javascript
-  Scenario: Create one statistic entry from recommended programs on homepage
-    Given there are projects:
-      | id | name    | description | owned by  | downloads | apk_downloads | views | upload time      | version |
-      | 21 | Minions | p1          | Catrobat  | 3         | 2             | 12    | 01.01.2013 12:00 | 0.8.5   |
-      | 22 | Galaxy  | p2          | OtherUser | 10        | 12            | 13    | 01.02.2013 12:00 | 0.8.5   |
-      | 23 | Alone   | p3          | Catrobat  | 5         | 55            | 2     | 01.03.2013 12:00 | 0.8.5   |
-
-    And there are project reactions:
-      | user      | project | type | created at       |
-      | Catrobat  | 21      | 1    | 01.01.2017 12:00 |
-      | Catrobat  | 22      | 2    | 01.01.2017 12:00 |
-      | OtherUser | 21      | 4    | 01.01.2017 12:00 |
-    Given I am on the homepage
-    And I wait for the page to be loaded
-    Then I should see a recommended homepage program having ID "21" and name "Minions"
-    When I click on the first recommended homepage program
-    And I wait for AJAX to finish
-    Then There should be one database entry with type is "rec_homepage" and "program_id" is "21"
-    And There should be one database entry with type is "rec_homepage" and "user_specific_recommendation" is "false"
-    And There should be no homepage click statistic database entry
-    And I should see "Minions"
-    And I should see "p1"
-
-  @javascript
-  Scenario: Create one statistic entry from recommended program that has been also downloaded by users that downloaded this program
-    Given there are program download statistics:
-      | id | program_id | downloaded_at       | ip             | country_code | country_name | user_agent | username  | referrer |
-      | 1  | 1          | 2017-02-09 16:01:00 | 88.116.169.222 | AT           | Austria      | okhttp     | OtherUser | Facebook |
-      | 2  | 3          | 2017-02-09 16:02:00 | 88.116.169.222 | AT           | Austria      | okhttp     | OtherUser | Facebook |
-
-    And I am on "/app/project/1"
-    And I wait for the page to be loaded
-    Then There should be recommended specific programs
-    When I click on the first recommended specific program
-    And I wait for AJAX to finish
-    Then There should be one database entry with type is "rec_specific_programs" and "program_id" is "3"
-    And I should see "Alone"
-    And I should see "p3"
-
-  @javascript
-  Scenario: No recommendable program that has been also downloaded by *other* users that downloaded this program
-    Given there are program download statistics:
-      | id | program_id | downloaded_at       | ip             | country_code | country_name | user_agent | username | referrer |
-      | 1  | 1          | 2017-02-09 16:01:00 | 88.116.169.222 | AT           | Austria      | okhttp     | Catrobat | Facebook |
-      | 2  | 3          | 2017-02-09 16:02:00 | 88.116.169.222 | AT           | Austria      | okhttp     | Catrobat | Facebook |
-
-    And I am on "/app/project/1"
-    And I wait for the page to be loaded
-    Then There should be no recommended specific programs
+#  @javascript
+#  Scenario: Create one statistic entry from recommended programs on homepage
+#    Given there are projects:
+#      | id | name    | description | owned by  | downloads | apk_downloads | views | upload time      | version |
+#      | 21 | Minions | p1          | Catrobat  | 3         | 2             | 12    | 01.01.2013 12:00 | 0.8.5   |
+#      | 22 | Galaxy  | p2          | OtherUser | 10        | 12            | 13    | 01.02.2013 12:00 | 0.8.5   |
+#      | 23 | Alone   | p3          | Catrobat  | 5         | 55            | 2     | 01.03.2013 12:00 | 0.8.5   |
+#
+#    And there are project reactions:
+#      | user      | project | type | created at       |
+#      | Catrobat  | 21      | 1    | 01.01.2017 12:00 |
+#      | Catrobat  | 22      | 2    | 01.01.2017 12:00 |
+#      | OtherUser | 21      | 4    | 01.01.2017 12:00 |
+#    Given I am on the homepage
+#    And I wait for the page to be loaded
+#    Then I should see a recommended homepage program having ID "21" and name "Minions"
+#    When I click on the first recommended homepage program
+#    And I wait for AJAX to finish
+#    Then There should be one database entry with type is "rec_homepage" and "program_id" is "21"
+#    And There should be one database entry with type is "rec_homepage" and "user_specific_recommendation" is "false"
+#    And There should be no homepage click statistic database entry
+#    And I should see "Minions"
+#    And I should see "p1"
+#
+#  @javascript
+#  Scenario: Create one statistic entry from recommended program that has been also downloaded by users that downloaded this program
+#    Given there are program download statistics:
+#      | id | program_id | downloaded_at       | ip             | country_code | country_name | user_agent | username  | referrer |
+#      | 1  | 1          | 2017-02-09 16:01:00 | 88.116.169.222 | AT           | Austria      | okhttp     | OtherUser | Facebook |
+#      | 2  | 3          | 2017-02-09 16:02:00 | 88.116.169.222 | AT           | Austria      | okhttp     | OtherUser | Facebook |
+#
+#    And I am on "/app/project/1"
+#    And I wait for the page to be loaded
+#    Then There should be recommended specific programs
+#    When I click on the first recommended specific program
+#    And I wait for AJAX to finish
+#    Then There should be one database entry with type is "rec_specific_programs" and "program_id" is "3"
+#    And I should see "Alone"
+#    And I should see "p3"
+#
+#  @javascript
+#  Scenario: No recommendable program that has been also downloaded by *other* users that downloaded this program
+#    Given there are program download statistics:
+#      | id | program_id | downloaded_at       | ip             | country_code | country_name | user_agent | username | referrer |
+#      | 1  | 1          | 2017-02-09 16:01:00 | 88.116.169.222 | AT           | Austria      | okhttp     | Catrobat | Facebook |
+#      | 2  | 3          | 2017-02-09 16:02:00 | 88.116.169.222 | AT           | Austria      | okhttp     | Catrobat | Facebook |
+#
+#    And I am on "/app/project/1"
+#    And I wait for the page to be loaded
+#    Then There should be no recommended specific programs