Added test for courses page and lesson content

.circleci/config.yml

@@ -29,11 +29,13 @@ jobs:
       - run:
           name: Prepare project with anu_lms in the codebase
           working_directory: anu_drupal
+          # TODO: When install dev-dependencies from main composer.json.
+          # Moving the project to Drupal.org will remove the need to do this.
           command: |
             composer config repositories.systemseed/anu_lms path ../anu_lms && \
             composer config minimum-stability dev && \
             composer require "systemseed/anu_lms:*@dev" && \
-            composer require --dev drupal/core-dev:^9 && \
+            composer require --dev drupal/core-dev:^9 drupal/pathauto && \
             composer require --dev dealerdirect/phpcodesniffer-composer-installer && \
             composer require --dev phpspec/prophecy-phpunit:^2
       - run:
@@ -52,4 +54,4 @@ jobs:
       - run:
           name: Run Drupal tests
           working_directory: anu_drupal
-          command: php -S localhost:8888 -t web/ & chromedriver --whitelisted-ips --verbose & sleep 1 && vendor/bin/phpunit -c web/core/phpunit.xml.dist web/modules/contrib/anu_lms/tests
+          command: php -S localhost:8888 -t web/ & chromedriver --whitelisted-ips & sleep 1 && vendor/bin/phpunit -c web/core/phpunit.xml.dist web/modules/contrib/anu_lms/tests

CHANGELOG.md

@@ -5,15 +5,16 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Upcoming release]
-- Added "Anu LMS Demo content" module.
-- Added path alias patterns for Anu LMS content types.
-- Fixed no lesson error for quizzes.
+ - Added "Anu LMS Demo content" module.
+ - Added path alias patterns for Anu LMS content types.
+ - Added js-enabled basic testing.
+ - Fixed no lesson error for quizzes.
 
 ## [2.5.0-alpha]
-- Move progress tracking to frontend and make progress available offline.
-- Add new DownloadCoursePopup component that offers to download courses with or without audio (for courses with audios)
-- Add a new isCompletedByUser helper method to lesson service.
-- Track the date when a lesson is completed.
+ - Move progress tracking to frontend and make progress available offline.
+ - Add new DownloadCoursePopup component that offers to download courses with or without audio (for courses with audios)
+ - Add a new isCompletedByUser helper method to lesson service.
+ - Track the date when a lesson is completed.
 
 ## [2.4.13]
  - Fixed checkbox text wrap, so it is readable and go in multiple lines if text is longer

composer.json

@@ -30,6 +30,9 @@
         "drupal/xls_serialization": "^1.2",
         "drupal/features": "^3.12"
     },
+    "require-dev": {
+        "drupal/pathauto": "^1.9"
+    },
     "suggest": {
         "drupal/pwa": "Allows using Anu LMS offline."
     },

js/src/components/ContentNavigation.js

@@ -102,25 +102,38 @@ const ContentNavigation = ({
                 <Button
                   {...buttonProps}
                   onClick={() => history.push({ pathname: `/section-${currentIndex + 2}` })}
+                  data-test="anu-lms-navigation-next"
                 >
                   {disabled ? completeAnswer : Drupal.t('Next', {}, { context: 'ANU LMS' })}
                 </Button>
               )}
 
               {noNextLesson && nextIsLesson && (
-                <Button {...buttonProps} onClick={updateProgressAndRedirect}>
+                <Button
+                  {...buttonProps}
+                  onClick={updateProgressAndRedirect}
+                  data-test="anu-lms-navigation-next"
+                >
                   {disabled ? completeAnswer : Drupal.t('Next', {}, { context: 'ANU LMS' })}
                 </Button>
               )}
 
               {noNextLesson && !nextIsLesson && !nextIsQuiz && (
-                <Button {...buttonProps} onClick={updateProgressAndRedirect}>
+                <Button
+                  {...buttonProps}
+                  onClick={updateProgressAndRedirect}
+                  data-test="anu-lms-navigation-finish"
+                >
                   {disabled ? completeAnswer : finishButtonText(currentLesson)}
                 </Button>
               )}
 
               {noNextLesson && nextIsLesson && isIntro && (
-                <Button {...buttonProps} onClick={updateProgressAndRedirect}>
+                <Button
+                  {...buttonProps}
+                  onClick={updateProgressAndRedirect}
+                  data-test="anu-lms-navigation-start"
+                >
                   {Drupal.t('Start', {}, { context: 'ANU LMS' })}
                 </Button>
               )}

js/src/components/List.js

@@ -78,7 +78,7 @@ const ListElement = ({ items, type }) => (
               <StyledIcon fontSize="small">brightness_1</StyledIcon>
             </ListItemIcon>
 
-            <ListItemText>
+            <ListItemText data-test="anu-lms-list-item-text">
               <StyledTypography component="div" dangerouslySetInnerHTML={{ __html: item }} />
             </ListItemText>
           </StyledListItem>

js/src/components/ParagraphHighlightFullWidth.js

@@ -46,7 +46,9 @@ const ParagraphHighlightFullWidth = ({ title, text, color }) => {
       <LessonGrid>
         {title && (
           <Box mb={2}>
-            <Typography className={classes.heading}>{title}</Typography>
+            <Typography className={classes.heading} data-test="anu-lms-highlight-heading">
+              {title}
+            </Typography>
           </Box>
         )}
 

js/src/pages/lesson/NavigationItem.js

@@ -102,7 +102,12 @@ const LessonNavigationItem = ({
       };
 
   return (
-    <Grid container wrap="nowrap" className={classes.item}>
+    <Grid
+      container
+      wrap="nowrap"
+      className={classes.item}
+      data-test={`anu-lms-navigation-item-status${isActive ? '-active' : ''}`}
+    >
       <Grid item container alignItems="center" className={classes.circleWrapper}>
         {/* Added to hide edges of the line which goes through lesson circles */}
         {isFirstLesson && <Box className={classes.firstLessonBackground} />}

modules/anu_lms_demo_content/anu_lms_demo_content.install

@@ -12,7 +12,12 @@ use Drupal\Core\File\FileSystemInterface;
 /**
  * Implements hook_install().
  */
-function anu_lms_demo_content_install() {
+function anu_lms_demo_content_modules_installed($modules, $is_syncing) {
+  // Check for itself. This gives the opportunity for configuration
+  // to be installed such as pathauto patterns.
+  if (!in_array('anu_lms_demo_content', $modules)) {
+    return;
+  }
   $categories = anu_lms_demo_create_course_categories();
   [$first_category, $second_category] = $categories;
   [$first_label, $second_label] = anu_lms_demo_create_course_labels();
@@ -452,7 +457,7 @@ function anu_lms_demo_create_course_for_testing_paragraphs($extra_data = []) {
       'value' => 'This course contains all available lesson item types.',
       'format' => 'minimal_html',
     ],
-    'field_course_finish_button' => ['uri' => 'internal:/anu-demo'],
+    'field_course_finish_button' => ['uri' => 'internal:/courses/courses-demo'],
     'field_course_module' => array_values($default_module),
   ] + $extra_data;
 
@@ -552,7 +557,7 @@ function anu_lms_demo_create_course_for_testing_navigation($extra_data = []) {
       'value' => 'This course contains multiple modules, lessons and sections.',
       'format' => 'minimal_html',
     ],
-    'field_course_finish_button' => ['uri' => 'internal:/anu-demo'],
+    'field_course_finish_button' => ['uri' => 'internal:/courses/courses-demo'],
     'field_course_module' => array_values($modules),
   ] + $extra_data;
 
@@ -592,7 +597,7 @@ function anu_lms_demo_create_courses_page($category_ids = []) {
   $courses_page = [
     'type' => 'courses_page',
     'title' => 'Courses  [DEMO]',
-    'path' => '/anu-demo',
+    'path' => '/courses/courses-demo',
     'field_courses_content' => array_values($paragraphs),
   ];
   anu_lms_demo_content_create_entities([$courses_page], 'node');

tests/src/FunctionalJavascript/CoursesTest.php

@@ -14,7 +14,10 @@ class CoursesTest extends WebDriverTestBase {
   /**
    * {@inheritdoc}
    */
-  protected static $modules = ['anu_lms_demo_content'];
+  protected static $modules = [
+    'pathauto',
+    'anu_lms_demo_content',
+  ];
 
   /**
    * {@inheritdoc}
@@ -37,7 +40,7 @@ public function testCoursesPage() {
     $assert = $this->assertSession();
 
     // Get the main page.
-    $this->drupalGet('anu-demo');
+    $this->drupalGet('courses/courses-demo');
     $categoryTitle = $assert->waitForElementVisible('css', '#anu-application h2');
     $this->assertNotEmpty($categoryTitle);
     $this->assertEqual($categoryTitle->getText(), 'Getting started [DEMO]');
@@ -46,6 +49,85 @@ public function testCoursesPage() {
     $this->assertNotEmpty($courseTitle);
     $this->assertEqual($courseTitle->getText(), 'Learn Anu lesson item types [DEMO]');
     $courseTitle->click();
+
+    // After clicking on the title it should be inside the course.
+    $courseTitle = $assert->waitForElementVisible('css', '#anu-application h1');
+    $this->assertNotEmpty($courseTitle);
+    $this->assertEqual($courseTitle->getText(), 'Learn Anu lesson item types [DEMO]');
+
+    // Check for the second category.
+    $this->drupalGet('courses/courses-demo');
+    $anuApp = $assert->waitForElementVisible('css', '#anu-application');
+    $categoryTitles = $anuApp->findAll('css', 'h2');
+    $this->assertNotEmpty($categoryTitles);
+    $this->assertEqual($categoryTitles[1]->getText(), 'Developer guides [DEMO]');
+
+    $courseTitles = $anuApp->findAll('css', '#anu-application h3');
+    $this->assertNotEmpty($courseTitles);
+    $this->assertEqual($courseTitles[1]->getText(), 'Modules, lessons and sections [DEMO]');
+    $courseTitles[1]->click();
+
+    // After clicking on the title it should be inside the course.
+    $courseTitle = $assert->waitForElementVisible('css', '#anu-application h1');
+    $this->assertNotEmpty($courseTitle);
+    $this->assertEqual($courseTitle->getText(), 'Modules, lessons and sections [DEMO]');
+  }
+
+  /**
+   * Test lesson content.
+   */
+  public function testLessons() {
+    $assert = $this->assertSession();
+    $this->drupalGet('lesson/headings');
+
+    // Inside the course. Check the sidebar active element.
+    $this->assertJsCondition('document.querySelector("#anu-application div[data-test=anu-lms-navigation-item-status-active]").textContent === "Headings"');
+
+    $headingThree = $assert->waitForElementVisible('css', '#anu-application h3');
+    $this->assertNotEmpty($headingThree);
+    $this->assertEqual($headingThree->getText(), 'Lesson heading - h3');
+
+    $assert->waitForElementVisible('css', '[data-test=anu-lms-navigation-next]')->click();
+    $lessonTitle = $assert->waitForElementVisible('css', '#anu-application h4');
+    $this->assertNotEmpty($lessonTitle);
+    $this->assertEqual($lessonTitle->getText(), 'Text');
+
+    $linkInBody = $assert->waitForElementVisible('css', 'a[href="https://github.com/systemseed/anu_lms"]');
+    $this->assertNotEmpty($linkInBody);
+    $this->assertEqual($linkInBody->getText(), 'Link to GitHub repository.');
+
+    $assert->waitForElementVisible('css', '[data-test=anu-lms-navigation-next]')->click();
+
+    $assert->waitForElementVisible('css', '#anu-application ul li');
+    // Check third item.
+    $this->assertJsCondition('document.querySelector("#anu-application ul li:nth-child(3) div[data-test=anu-lms-list-item-text]").textContent === "Vanilla"');
+
+    $assert->waitForElementVisible('css', '[data-test=anu-lms-navigation-next]')->click();
+
+    $image = $assert->waitForElementVisible('css', '#anu-application img');
+    $this->assertNotEmpty($image);
+    $this->assertEqual($image->getAttribute('alt'), 'Image with caption');
+
+    $assert->waitForElementVisible('css', '[data-test=anu-lms-navigation-next]')->click();
+
+    // Highlights.
+    $highlightHeading = $assert->waitForElementVisible('css', '#anu-application p[data-test=anu-lms-highlight-heading]');
+    $this->assertNotEmpty($highlightHeading);
+    $this->assertEqual($highlightHeading->getText(), 'Highlight (full width)');
+
+    $assert->waitForElementVisible('css', '[data-test=anu-lms-navigation-next]')->click();
+    // Dividers.
+    $assert->waitForElementVisible('css', '[data-test=anu-lms-navigation-next]')->click();
+    // Video.
+    $assert->waitForElementVisible('css', '[data-test=anu-lms-navigation-next]')->click();
+    // Checklists.
+    $assert->waitForElementVisible('css', '[data-test=anu-lms-navigation-next]')->click();
+    // Tables.
+    $assert->waitForElementVisible('css', '[data-test=anu-lms-navigation-finish]')->click();
+
+    // The course has a redirect configured for the courses page.
+    // Assert the redirect happened properly.
+    $assert->addressEquals('courses/courses-demo');
   }
 
 }