From 85dc95afaa6e9213bc2af755c6534d4950d8424b Mon Sep 17 00:00:00 2001
From: sembauke <semboot699@gmail.com>
Date: Tue, 11 Jun 2024 08:20:06 +0200
Subject: [PATCH 01/13] feat: js 22 cert

---
 mobile-app/lib/models/learn/curriculum_model.dart | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/mobile-app/lib/models/learn/curriculum_model.dart b/mobile-app/lib/models/learn/curriculum_model.dart
index 8f8063792..c84864a40 100644
--- a/mobile-app/lib/models/learn/curriculum_model.dart
+++ b/mobile-app/lib/models/learn/curriculum_model.dart
@@ -69,7 +69,12 @@ class Block {
   });
 
   static bool checkIfStepBased(String superblock) {
-    return superblock == '2022/responsive-web-design';
+    List<String> stepBasedSuperBlocks = [
+      '2022/responsive-web-design',
+      'javascript-algorithms-and-data-structures-v8'
+    ];
+
+    return stepBasedSuperBlocks.contains(superblock);
   }
 
   factory Block.fromJson(

From 2224be47cd00a1eb6daf8207023eac17a80c65f9 Mon Sep 17 00:00:00 2001
From: sembauke <semboot699@gmail.com>
Date: Tue, 11 Jun 2024 09:32:14 +0200
Subject: [PATCH 02/13] fix: show full title in block when open

---
 .../lib/ui/views/learn/block/block_view.dart  | 26 ++++++---------
 .../learn/widgets/open_close_icon_widget.dart | 32 +++++++++----------
 2 files changed, 26 insertions(+), 32 deletions(-)

diff --git a/mobile-app/lib/ui/views/learn/block/block_view.dart b/mobile-app/lib/ui/views/learn/block/block_view.dart
index 478ce8f53..cd77c1e96 100644
--- a/mobile-app/lib/ui/views/learn/block/block_view.dart
+++ b/mobile-app/lib/ui/views/learn/block/block_view.dart
@@ -221,7 +221,15 @@ class BlockHeader extends StatelessWidget {
                 model.isOpen,
               );
             },
-            minVerticalPadding: 24,
+            leading: model.challengesCompleted == block.challenges.length
+                ? const Icon(
+                    Icons.check_circle,
+                    size: 20,
+                  )
+                : const Icon(
+                    Icons.circle_outlined,
+                    size: 20,
+                  ),
             trailing: !isCertification
                 ? OpenCloseIcon(
                     block: block,
@@ -229,25 +237,11 @@ class BlockHeader extends StatelessWidget {
                   )
                 : null,
             title: Row(
-              crossAxisAlignment: CrossAxisAlignment.center,
               children: [
-                if (!isCertification)
-                  Padding(
-                    padding: const EdgeInsets.fromLTRB(0, 8, 8, 8),
-                    child: model.challengesCompleted == block.challenges.length
-                        ? const Icon(
-                            Icons.check_circle,
-                            size: 20,
-                          )
-                        : const Icon(
-                            Icons.circle_outlined,
-                            size: 20,
-                          ),
-                  ),
                 Expanded(
                   child: Text(
                     block.name,
-                    maxLines: 2,
+                    maxLines: model.isOpen ? 5 : 2,
                     overflow: TextOverflow.ellipsis,
                     style: const TextStyle(
                       fontWeight: FontWeight.bold,
diff --git a/mobile-app/lib/ui/views/learn/widgets/open_close_icon_widget.dart b/mobile-app/lib/ui/views/learn/widgets/open_close_icon_widget.dart
index 94cdfa047..bd3987732 100644
--- a/mobile-app/lib/ui/views/learn/widgets/open_close_icon_widget.dart
+++ b/mobile-app/lib/ui/views/learn/widgets/open_close_icon_widget.dart
@@ -14,22 +14,22 @@ class OpenCloseIcon extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Column(
-      mainAxisAlignment: MainAxisAlignment.center,
-      children: [
-        IconButton(
-          iconSize: 35,
-          icon: model.isOpen
-              ? const Icon(Icons.expand_less)
-              : const Icon(Icons.expand_more),
-          onPressed: () async {
-            model.setBlockOpenState(
-              block.name,
-              model.isOpen,
-            );
-          },
-        ),
-      ],
+    return GestureDetector(
+      child: model.isOpen
+          ? const Icon(
+              Icons.expand_less,
+              size: 30,
+            )
+          : const Icon(
+              Icons.expand_more,
+              size: 30,
+            ),
+      onTap: () async {
+        model.setBlockOpenState(
+          block.name,
+          model.isOpen,
+        );
+      },
     );
   }
 }

From 231b928bab09fab05f4099d4fce3c1adf1c62c63 Mon Sep 17 00:00:00 2001
From: sembauke <semboot699@gmail.com>
Date: Tue, 11 Jun 2024 09:41:37 +0200
Subject: [PATCH 03/13] fix: dont show completed icon on certificatoin projects

---
 .../lib/ui/views/learn/block/block_view.dart  | 21 +++++++++++--------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/mobile-app/lib/ui/views/learn/block/block_view.dart b/mobile-app/lib/ui/views/learn/block/block_view.dart
index cd77c1e96..af6fde72c 100644
--- a/mobile-app/lib/ui/views/learn/block/block_view.dart
+++ b/mobile-app/lib/ui/views/learn/block/block_view.dart
@@ -221,15 +221,18 @@ class BlockHeader extends StatelessWidget {
                 model.isOpen,
               );
             },
-            leading: model.challengesCompleted == block.challenges.length
-                ? const Icon(
-                    Icons.check_circle,
-                    size: 20,
-                  )
-                : const Icon(
-                    Icons.circle_outlined,
-                    size: 20,
-                  ),
+            minVerticalPadding: 18,
+            leading: !isCertification
+                ? model.challengesCompleted == block.challenges.length
+                    ? const Icon(
+                        Icons.check_circle,
+                        size: 20,
+                      )
+                    : const Icon(
+                        Icons.circle_outlined,
+                        size: 20,
+                      )
+                : null,
             trailing: !isCertification
                 ? OpenCloseIcon(
                     block: block,

From 269a08f8c9db03948fdf4f3ec622339bf7150115 Mon Sep 17 00:00:00 2001
From: sembauke <semboot699@gmail.com>
Date: Tue, 11 Jun 2024 09:53:28 +0200
Subject: [PATCH 04/13] fix: parse block description with our HTML parser

---
 .../lib/ui/views/learn/block/block_view.dart      | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/mobile-app/lib/ui/views/learn/block/block_view.dart b/mobile-app/lib/ui/views/learn/block/block_view.dart
index af6fde72c..b0ee341b6 100644
--- a/mobile-app/lib/ui/views/learn/block/block_view.dart
+++ b/mobile-app/lib/ui/views/learn/block/block_view.dart
@@ -7,6 +7,7 @@ import 'package:freecodecamp/ui/views/learn/block/block_viewmodel.dart';
 import 'package:freecodecamp/ui/views/learn/widgets/download_button_widget.dart';
 import 'package:freecodecamp/ui/views/learn/widgets/open_close_icon_widget.dart';
 import 'package:freecodecamp/ui/views/learn/widgets/progressbar_widget.dart';
+import 'package:freecodecamp/ui/views/news/html_handler/html_handler.dart';
 import 'package:freecodecamp/ui/widgets/drawer_widget/drawer_widget_view.dart';
 
 import 'package:stacked/stacked.dart';
@@ -46,6 +47,8 @@ class BlockView extends StatelessWidget {
 
         bool hasProgress = calculateProgress > 0;
 
+        HTMLParser parser = HTMLParser(context: context);
+
         return Column(
           children: [
             BlockHeader(
@@ -75,15 +78,9 @@ class BlockView extends StatelessWidget {
                             vertical: 8,
                             horizontal: 16,
                           ),
-                          child: Text(
-                            blockString,
-                            style: TextStyle(
-                              fontSize: 18,
-                              fontWeight: FontWeight.w600,
-                              height: 1.2,
-                              fontFamily: 'Lato',
-                              color: Colors.white.withOpacity(0.87),
-                            ),
+                          child: Wrap(
+                            children: parser.parse('<p>$blockString</p>',
+                                fontColor: Colors.white),
                           ),
                         ),
                       if (model.isDev && !isCertification)

From 9b7a221f9360b48b70d8108206e8b32d80e8affc Mon Sep 17 00:00:00 2001
From: sembauke <semboot699@gmail.com>
Date: Tue, 11 Jun 2024 11:06:54 +0200
Subject: [PATCH 05/13] fix: ability to launch on IOS emulator

---
 mobile-app/ios/Podfile.lock |  2 +-
 mobile-app/pubspec.lock     | 32 ++++++++++++++++----------------
 mobile-app/pubspec.yaml     |  2 +-
 3 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/mobile-app/ios/Podfile.lock b/mobile-app/ios/Podfile.lock
index 99d551253..fb98b295f 100644
--- a/mobile-app/ios/Podfile.lock
+++ b/mobile-app/ios/Podfile.lock
@@ -335,7 +335,7 @@ SPEC CHECKSUMS:
   GoogleAppMeasurement: f3abf08495ef2cba7829f15318c373b8d9226491
   GoogleDataTransport: 6c09b596d841063d76d4288cc2d2f42cc36e1e2a
   GoogleUtilities: d053d902a8edaa9904e1bd00c37535385b8ed152
-  integration_test: 13825b8a9334a850581300559b8839134b124670
+  integration_test: ce0a3ffa1de96d1a89ca0ac26fca7ea18a749ef4
   just_audio: baa7252489dbcf47a4c7cc9ca663e9661c99aafa
   JWTDecode: 2eed97c2fa46ccaf3049a787004eedf0be474a87
   nanopb: 438bc412db1928dac798aa6fd75726007be04262
diff --git a/mobile-app/pubspec.lock b/mobile-app/pubspec.lock
index 899ba2c7a..575078891 100644
--- a/mobile-app/pubspec.lock
+++ b/mobile-app/pubspec.lock
@@ -848,10 +848,10 @@ packages:
     dependency: "direct main"
     description:
       name: intl
-      sha256: "3bc132a9dbce73a7e4a21a17d06e1878839ffbf975568bc875c60537824b0c4d"
+      sha256: d6f56758b7d3014a48af9701c085700aac781a92a87a62b1333b46d8879661cf
       url: "https://pub.dev"
     source: hosted
-    version: "0.18.1"
+    version: "0.19.0"
   io:
     dependency: transitive
     description:
@@ -864,10 +864,10 @@ packages:
     dependency: "direct main"
     description:
       name: jiffy
-      sha256: cc1d4b75016a9156c29b5d61f0c9176c3e0fb0580cc5a0e0422b5d2cab3fbfff
+      sha256: "3497caaa36d36a29033e66803c9739ce6bccbc7e241ca46070f76ee9e6f6eb0c"
       url: "https://pub.dev"
     source: hosted
-    version: "6.2.1"
+    version: "6.3.1"
   js:
     dependency: transitive
     description:
@@ -912,26 +912,26 @@ packages:
     dependency: transitive
     description:
       name: leak_tracker
-      sha256: "78eb209deea09858f5269f5a5b02be4049535f568c07b275096836f01ea323fa"
+      sha256: "7f0df31977cb2c0b88585095d168e689669a2cc9b97c309665e3386f3e9d341a"
       url: "https://pub.dev"
     source: hosted
-    version: "10.0.0"
+    version: "10.0.4"
   leak_tracker_flutter_testing:
     dependency: transitive
     description:
       name: leak_tracker_flutter_testing
-      sha256: b46c5e37c19120a8a01918cfaf293547f47269f7cb4b0058f21531c2465d6ef0
+      sha256: "06e98f569d004c1315b991ded39924b21af84cf14cc94791b8aea337d25b57f8"
       url: "https://pub.dev"
     source: hosted
-    version: "2.0.1"
+    version: "3.0.3"
   leak_tracker_testing:
     dependency: transitive
     description:
       name: leak_tracker_testing
-      sha256: a597f72a664dbd293f3bfc51f9ba69816f84dcd403cdac7066cb3f6003f3ab47
+      sha256: "6ba465d5d76e67ddf503e1161d1f4a6bc42306f9d66ca1e8f079a47290fb06d3"
       url: "https://pub.dev"
     source: hosted
-    version: "2.0.1"
+    version: "3.0.1"
   lints:
     dependency: transitive
     description:
@@ -984,10 +984,10 @@ packages:
     dependency: transitive
     description:
       name: meta
-      sha256: d584fa6707a52763a52446f02cc621b077888fb63b93bbcb1143a7be5a0c0c04
+      sha256: "7687075e408b093f36e6bbf6c91878cc0d4cd10f409506f7bc996f68220b9136"
       url: "https://pub.dev"
     source: hosted
-    version: "1.11.0"
+    version: "1.12.0"
   mime:
     dependency: transitive
     description:
@@ -1509,10 +1509,10 @@ packages:
     dependency: transitive
     description:
       name: test_api
-      sha256: "5c2f730018264d276c20e4f1503fd1308dfbbae39ec8ee63c5236311ac06954b"
+      sha256: "9955ae474176f7ac8ee4e989dadfb411a58c30415bcfb648fa04b2b8a03afa7f"
       url: "https://pub.dev"
     source: hosted
-    version: "0.6.1"
+    version: "0.7.0"
   timezone:
     dependency: transitive
     description:
@@ -1653,10 +1653,10 @@ packages:
     dependency: transitive
     description:
       name: vm_service
-      sha256: b3d56ff4341b8f182b96aceb2fa20e3dcb336b9f867bc0eafc0de10f1048e957
+      sha256: "3923c89304b715fb1eb6423f017651664a03bf5f4b29983627c4da791f74a4ec"
       url: "https://pub.dev"
     source: hosted
-    version: "13.0.0"
+    version: "14.2.1"
   watcher:
     dependency: transitive
     description:
diff --git a/mobile-app/pubspec.yaml b/mobile-app/pubspec.yaml
index cf440ba27..5e94ee173 100644
--- a/mobile-app/pubspec.yaml
+++ b/mobile-app/pubspec.yaml
@@ -34,7 +34,7 @@ dependencies:
   flutter_secure_storage: ^9.0.0
   html: ^0.15.4
   infinite_scroll_pagination: ^4.0.0
-  intl: ^0.18.1 # TODO: replace with jiffy
+  intl: ^0.19.0 # TODO: replace with jiffy
   jiffy: ^6.2.1 # TODO: upgrade after migrating to FLutter 3.19
   just_audio: ^0.9.37
   path: ^1.8.3 # TODO: upgrade after migrating to FLutter 3.19

From 2d3f3339410de8515ffa0178fe9e027bde58b0c3 Mon Sep 17 00:00:00 2001
From: sembauke <semboot699@gmail.com>
Date: Mon, 17 Jun 2024 16:50:53 +0200
Subject: [PATCH 06/13] feat: add script injection in head

---
 .../lib/service/learn/learn_file_service.dart | 42 +++++++++++++++++--
 .../lib/ui/views/learn/test_runner.dart       | 13 ++++--
 2 files changed, 47 insertions(+), 8 deletions(-)

diff --git a/mobile-app/lib/service/learn/learn_file_service.dart b/mobile-app/lib/service/learn/learn_file_service.dart
index 501bd2547..c491f1940 100644
--- a/mobile-app/lib/service/learn/learn_file_service.dart
+++ b/mobile-app/lib/service/learn/learn_file_service.dart
@@ -1,3 +1,5 @@
+import 'dart:developer';
+
 import 'package:freecodecamp/enums/ext_type.dart';
 import 'package:freecodecamp/models/learn/challenge_model.dart';
 import 'package:html/dom.dart';
@@ -73,6 +75,42 @@ class LearnFileService {
     return fileContent;
   }
 
+  Future<bool> hasJavaScriptFile(Challenge challenge) async {
+    return challenge.files.any((element) => element.ext == Ext.js);
+  }
+
+  Future<String> returnJavaScriptScripts(
+    Challenge challenge,
+    String userFile,
+  ) async {
+    // Get the script from the cache.
+
+    String scriptContent = '';
+
+    List<ChallengeFile> jsFile =
+        challenge.files.where((file) => file.ext == Ext.js).toList();
+
+    SharedPreferences prefs = await SharedPreferences.getInstance();
+
+    scriptContent = prefs.getString('${challenge.id}.${jsFile[0].name}') ??
+        jsFile[0].contents;
+
+    // Parse the incoming HTML-document to include the script.
+
+    Document document = parse(userFile);
+    List<Element> head = document.getElementsByTagName('HEAD');
+    List<Element> scripts = document.getElementsByTagName('SCRIPT');
+
+    // We only inject the script if the file is linked in the HTML.
+    if (scripts.isNotEmpty) {
+      scripts[0].innerHtml = scriptContent;
+    }
+
+    head[0].children.add(scripts[0]);
+    log(document.outerHtml);
+    return document.outerHtml;
+  }
+
   // this function will get the current file which is being edited.
   // otherwise we can not detect which file is currently being worked on. This is only for the new RWD.
 
@@ -191,15 +229,11 @@ class LearnFileService {
   String removeExcessiveScriptsInHTMLdocument(String file) {
     Document document = parse(file);
     List<Element> elements = document.querySelectorAll('SCRIPT');
-
     if (elements.isEmpty) return file;
-
     for (int i = 0; i < elements.length; i++) {
       elements[i].remove();
     }
-
     file = document.outerHtml.toString();
-
     return file;
   }
 
diff --git a/mobile-app/lib/ui/views/learn/test_runner.dart b/mobile-app/lib/ui/views/learn/test_runner.dart
index 3a98a3d78..578bf735b 100644
--- a/mobile-app/lib/ui/views/learn/test_runner.dart
+++ b/mobile-app/lib/ui/views/learn/test_runner.dart
@@ -121,10 +121,6 @@ class TestRunner extends BaseViewModel {
       testing: testing,
     );
 
-    firstHTMlfile = fileService.removeExcessiveScriptsInHTMLdocument(
-      firstHTMlfile,
-    );
-
     String parsedWithStyleTags = await fileService.parseCssDocmentsAsStyleTags(
       challenge,
       firstHTMlfile,
@@ -134,11 +130,20 @@ class TestRunner extends BaseViewModel {
     firstHTMlfile = fileService.changeActiveFileLinks(
       parsedWithStyleTags,
     );
+
+    if (await fileService.hasJavaScriptFile(challenge)) {
+      firstHTMlfile = await fileService.returnJavaScriptScripts(
+        challenge,
+        firstHTMlfile,
+      );
+    }
+
     return firstHTMlfile;
   }
 
   // This function parses the JavaScript code so that it has a head and tail (code)
   // It is used in the returnScript function to correctly parse JavaScript.
+  // ONLY EXECUTES WHEN JAVASCRIPT ONLY CHALLENGE
 
   Future<String> javaScritpFlow(
     Challenge challenge,

From e9f2c480b505af2177008814a6e7f5f9f6df57c6 Mon Sep 17 00:00:00 2001
From: sembauke <semboot699@gmail.com>
Date: Tue, 18 Jun 2024 09:47:40 +0200
Subject: [PATCH 07/13] feat: break everything

---
 .../lib/service/learn/learn_file_service.dart | 21 +++++++++++++------
 .../lib/ui/views/learn/test_runner.dart       | 10 ++-------
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/mobile-app/lib/service/learn/learn_file_service.dart b/mobile-app/lib/service/learn/learn_file_service.dart
index c491f1940..d8ffed329 100644
--- a/mobile-app/lib/service/learn/learn_file_service.dart
+++ b/mobile-app/lib/service/learn/learn_file_service.dart
@@ -1,5 +1,3 @@
-import 'dart:developer';
-
 import 'package:freecodecamp/enums/ext_type.dart';
 import 'package:freecodecamp/models/learn/challenge_model.dart';
 import 'package:html/dom.dart';
@@ -72,7 +70,9 @@ class LearnFileService {
           firstChallenge[0].contents;
     }
 
-    return fileContent;
+    return await hasJavaScriptFile(challenge)
+        ? await returnJavaScriptScripts(challenge, fileContent)
+        : fileContent;
   }
 
   Future<bool> hasJavaScriptFile(Challenge challenge) async {
@@ -107,7 +107,7 @@ class LearnFileService {
     }
 
     head[0].children.add(scripts[0]);
-    log(document.outerHtml);
+
     return document.outerHtml;
   }
 
@@ -138,10 +138,19 @@ class LearnFileService {
           ) ??
           '';
 
+      bool hasSeparateJavaScriptFile = await hasJavaScriptFile(challenge);
+
       if (cache.isNotEmpty) {
-        return removeExcessiveScriptsInHTMLdocument(cache);
+        return hasSeparateJavaScriptFile
+            ? await returnJavaScriptScripts(challenge, cache)
+            : cache;
       } else {
-        return fileWithEditableRegion[0].contents;
+        return hasSeparateJavaScriptFile
+            ? await returnJavaScriptScripts(
+                challenge,
+                fileWithEditableRegion[0].contents,
+              )
+            : fileWithEditableRegion[0].contents;
       }
     } else {
       return challenge.files[0].contents;
diff --git a/mobile-app/lib/ui/views/learn/test_runner.dart b/mobile-app/lib/ui/views/learn/test_runner.dart
index 578bf735b..5d234c33a 100644
--- a/mobile-app/lib/ui/views/learn/test_runner.dart
+++ b/mobile-app/lib/ui/views/learn/test_runner.dart
@@ -1,4 +1,5 @@
 import 'dart:convert';
+import 'dart:developer';
 import 'package:flutter_inappwebview/flutter_inappwebview.dart';
 import 'package:freecodecamp/app/app.locator.dart';
 import 'package:freecodecamp/enums/ext_type.dart';
@@ -88,7 +89,7 @@ class TestRunner extends BaseViewModel {
         encoding: Encoding.getByName('utf-8').toString(),
       );
     }
-
+    log(document.getElementsByTagName('HTML')[0].innerHtml);
     return document.outerHtml;
   }
 
@@ -131,13 +132,6 @@ class TestRunner extends BaseViewModel {
       parsedWithStyleTags,
     );
 
-    if (await fileService.hasJavaScriptFile(challenge)) {
-      firstHTMlfile = await fileService.returnJavaScriptScripts(
-        challenge,
-        firstHTMlfile,
-      );
-    }
-
     return firstHTMlfile;
   }
 

From 57932db0c570fe3614197d0fdae3cd842a67e5fb Mon Sep 17 00:00:00 2001
From: sembauke <semboot699@gmail.com>
Date: Tue, 18 Jun 2024 10:09:20 +0200
Subject: [PATCH 08/13] fix: only add script to head if script exists

---
 mobile-app/lib/service/learn/learn_file_service.dart | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/mobile-app/lib/service/learn/learn_file_service.dart b/mobile-app/lib/service/learn/learn_file_service.dart
index d8ffed329..9a8617734 100644
--- a/mobile-app/lib/service/learn/learn_file_service.dart
+++ b/mobile-app/lib/service/learn/learn_file_service.dart
@@ -104,10 +104,9 @@ class LearnFileService {
     // We only inject the script if the file is linked in the HTML.
     if (scripts.isNotEmpty) {
       scripts[0].innerHtml = scriptContent;
+      head[0].children.add(scripts[0]);
     }
 
-    head[0].children.add(scripts[0]);
-
     return document.outerHtml;
   }
 

From c14e7ccf8c16fa4543ba00a591a3a198faf64baa Mon Sep 17 00:00:00 2001
From: sembauke <semboot699@gmail.com>
Date: Tue, 18 Jun 2024 12:40:23 +0200
Subject: [PATCH 09/13] fix: html flow function and revert changes to file
 service

---
 .../lib/service/learn/learn_file_service.dart | 56 +++----------------
 .../lib/ui/views/learn/test_runner.dart       | 47 +++++++++++-----
 2 files changed, 40 insertions(+), 63 deletions(-)

diff --git a/mobile-app/lib/service/learn/learn_file_service.dart b/mobile-app/lib/service/learn/learn_file_service.dart
index 63e7de6a1..bd3f57575 100644
--- a/mobile-app/lib/service/learn/learn_file_service.dart
+++ b/mobile-app/lib/service/learn/learn_file_service.dart
@@ -70,44 +70,7 @@ class LearnFileService {
           firstChallenge[0].contents;
     }
 
-    return await hasJavaScriptFile(challenge)
-        ? await returnJavaScriptScripts(challenge, fileContent)
-        : fileContent;
-  }
-
-  Future<bool> hasJavaScriptFile(Challenge challenge) async {
-    return challenge.files.any((element) => element.ext == Ext.js);
-  }
-
-  Future<String> returnJavaScriptScripts(
-    Challenge challenge,
-    String userFile,
-  ) async {
-    // Get the script from the cache.
-
-    String scriptContent = '';
-
-    List<ChallengeFile> jsFile =
-        challenge.files.where((file) => file.ext == Ext.js).toList();
-
-    SharedPreferences prefs = await SharedPreferences.getInstance();
-
-    scriptContent = prefs.getString('${challenge.id}.${jsFile[0].name}') ??
-        jsFile[0].contents;
-
-    // Parse the incoming HTML-document to include the script.
-
-    Document document = parse(userFile);
-    List<Element> head = document.getElementsByTagName('HEAD');
-    List<Element> scripts = document.getElementsByTagName('SCRIPT');
-
-    // We only inject the script if the file is linked in the HTML.
-    if (scripts.isNotEmpty) {
-      scripts[0].innerHtml = scriptContent;
-      head[0].children.add(scripts[0]);
-    }
-
-    return document.outerHtml;
+    return fileContent;
   }
 
   // this function will get the current file which is being edited.
@@ -137,19 +100,10 @@ class LearnFileService {
           ) ??
           '';
 
-      bool hasSeparateJavaScriptFile = await hasJavaScriptFile(challenge);
-
       if (cache.isNotEmpty) {
-        return hasSeparateJavaScriptFile
-            ? await returnJavaScriptScripts(challenge, cache)
-            : cache;
+        return removeExcessiveScriptsInHTMLdocument(cache);
       } else {
-        return hasSeparateJavaScriptFile
-            ? await returnJavaScriptScripts(
-                challenge,
-                fileWithEditableRegion[0].contents,
-              )
-            : fileWithEditableRegion[0].contents;
+        return fileWithEditableRegion[0].contents;
       }
     } else {
       return challenge.files[0].contents;
@@ -237,11 +191,15 @@ class LearnFileService {
   String removeExcessiveScriptsInHTMLdocument(String file) {
     Document document = parse(file);
     List<Element> elements = document.querySelectorAll('SCRIPT');
+
     if (elements.isEmpty) return file;
+
     for (int i = 0; i < elements.length; i++) {
       elements[i].remove();
     }
+
     file = document.outerHtml.toString();
+
     return file;
   }
 
diff --git a/mobile-app/lib/ui/views/learn/test_runner.dart b/mobile-app/lib/ui/views/learn/test_runner.dart
index 77778bbe0..34984b751 100644
--- a/mobile-app/lib/ui/views/learn/test_runner.dart
+++ b/mobile-app/lib/ui/views/learn/test_runner.dart
@@ -64,7 +64,9 @@ class TestRunner extends BaseViewModel {
 
     // Get user's script elements.
 
-    if (challenge.files[0].ext == Ext.html) {
+    bool hasHTML = challenge.files.any((file) => file.ext == Ext.html);
+
+    if (hasHTML) {
       String htmlFile = await fileService.getFirstFileFromCache(
         challenge,
         Ext.html,
@@ -89,7 +91,7 @@ class TestRunner extends BaseViewModel {
         encoding: Encoding.getByName('utf-8').toString(),
       );
     }
-    log(document.getElementsByTagName('HTML')[0].innerHtml);
+
     return document.outerHtml;
   }
 
@@ -106,10 +108,11 @@ class TestRunner extends BaseViewModel {
     return parsedTest;
   }
 
-  // This function is used in the returnScript function to correctly parse
-  // HTML challenge (user code) it will firstly get the file from the cache, (it returns the first challenge file if in testing mode)
-  // Otherwise it will return the first instance of that challenge in the cache. Next will be adding the style tags (only if
-  // linked)
+  // This Function parses the CODE FROM THE USER into one HTML file. This function
+  // itself has nothing to do with parsing the test-runner document.
+
+  // CODE from the user is concatenated: HTML,CSS,JS and does not get executed;
+  // meaning it is all text; Example: https://pastebin.com/v75dQ1xa
 
   Future<String> htmlFlow(
     Challenge challenge,
@@ -122,18 +125,33 @@ class TestRunner extends BaseViewModel {
       testing: testing,
     );
 
-    String parsedWithStyleTags = await fileService.parseCssDocmentsAsStyleTags(
-      challenge,
-      firstHTMlfile,
-      testing: testing,
-    );
+    // Concatenate CSS
+    List<ChallengeFile> cssFiles =
+        challenge.files.where((file) => file.ext == Ext.css).toList();
 
-    if (challenge.id != '646c48df8674cf2b91020ecc') {
-      firstHTMlfile = fileService.changeActiveFileLinks(
-        parsedWithStyleTags,
+    if (cssFiles.isNotEmpty) {
+      String file = await fileService.getExactFileFromCache(
+        challenge,
+        cssFiles[0],
       );
+
+      firstHTMlfile += file;
     }
 
+    List<ChallengeFile> jsFiles =
+        challenge.files.where((file) => file.ext == Ext.js).toList();
+
+    if (jsFiles.isNotEmpty) {
+      String file = await fileService.getExactFileFromCache(
+        challenge,
+        jsFiles[0],
+      );
+
+      firstHTMlfile += file;
+    }
+
+    log(firstHTMlfile);
+
     return firstHTMlfile;
   }
 
@@ -181,6 +199,7 @@ class TestRunner extends BaseViewModel {
         testing: testing,
       );
     } else if (ext == Ext.js) {
+      log('THIS IS JAVASCRIPT FLOW');
       code = await javaScritpFlow(
         challenge,
         ext,

From 13c277dd1c8649218c2680e17e66a57731bfefe6 Mon Sep 17 00:00:00 2001
From: sembauke <semboot699@gmail.com>
Date: Tue, 18 Jun 2024 15:56:12 +0200
Subject: [PATCH 10/13] fix: checkpoint

---
 mobile-app/lib/ui/views/learn/index.html      | 228 ++++++++++++++++++
 .../lib/ui/views/learn/test_runner.dart       | 116 ++-------
 2 files changed, 245 insertions(+), 99 deletions(-)
 create mode 100644 mobile-app/lib/ui/views/learn/index.html

diff --git a/mobile-app/lib/ui/views/learn/index.html b/mobile-app/lib/ui/views/learn/index.html
new file mode 100644
index 000000000..f6731778a
--- /dev/null
+++ b/mobile-app/lib/ui/views/learn/index.html
@@ -0,0 +1,228 @@
+[log]
+<html>
+  <head>
+    <script src="https://unpkg.com/chai@4.3.10/chai.js"></script>
+    <script src="https://unpkg.com/mocha/mocha.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <link rel="stylesheet" href="https://unpkg.com/mocha/mocha.css" />
+    <script type="module" id="fcc-script">
+      import * as __helpers from "https://www.unpkg.com/@freecodecamp/curriculum-helpers@2.0.3/dist/index.mjs";
+
+      const code = `<!DOCTYPE html><html lang="en"><head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="styles.css">
+  <title>Calorie Counter</title>
+</head>
+<body>
+  <main>
+    <h1>Calorie Counter</h1>
+    <div class="container">
+      <form id="calorie-counter">
+        <label for="budget">Budget</label>
+        <input type="number" min="0" id="budget" placeholder="Daily calorie budget" required="">
+        <fieldset id="breakfast">
+          <legend>Breakfast</legend>
+          <div class="input-container"></div>
+        </fieldset>
+        <fieldset id="lunch">
+          <legend>Lunch</legend>
+          <div class="input-container"></div>
+        </fieldset>
+        <fieldset id="dinner">
+          <legend>Dinner</legend>
+          <div class="input-container"></div>
+        </fieldset>
+        <fieldset id="snacks">
+          <legend>Snacks</legend>
+          <div class="input-container"></div>
+        </fieldset>
+        <fieldset id="exercise">
+          <legend>Exercise</legend>
+          <div class="input-container"></div>
+        </fieldset>
+        <div class="controls">
+          <span>
+            <label for="entry-dropdown">Add food or exercise:</label>
+            <select id="entry-dropdown" name="options">
+              <option value="breakfast" selected="">Breakfast</option>
+              <option value="lunch">Lunch</option>
+              <option value="dinner">Dinner</option>
+              <option value="snacks">Snacks</option>
+              <option value="exercise">Exercise</option>
+            </select>
+            <button type="button" id="add-entry">Add Entry</button>
+          </span>
+        </div>
+        <div>
+          <button type="submit">
+            Calculate Remaining Calories
+          </button>
+          <button type="button" id="clear">Clear</button>
+        </div>
+      </form>
+      <div id="output" class="output hide"></div>
+    </div>
+  </main>
+
+
+</body></html>:root {
+--light-grey: #f5f6f7;
+--dark-blue: #0a0a23;
+--fcc-blue: #1b1b32;
+--light-yellow: #fecc4c;
+--dark-yellow: #feac32;
+--light-pink: #ffadad;
+--dark-red: #850000;
+--light-green: #acd157;
+}
+
+body {
+font-family: "Lato", Helvetica, Arial, sans-serif;
+font-size: 18px;
+background-color: var(--fcc-blue);
+color: var(--light-grey);
+}
+
+h1 {
+text-align: center;
+}
+
+.container {
+width: 90%;
+max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+margin: 20px auto;
+}
+
+label,
+legend {
+font-weight: bold;
+}
+
+.input-container {
+display: flex;
+flex-direction: column;
+}
+
+button {
+cursor: pointer;
+text-decoration: none;
+background-color: var(--light-yellow);
+border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+min-height: 24px;
+color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+margin-bottom: 10px;
+}
+
+.output {
+border: 2px solid var(--light-grey);
+padding: 10px;
+text-align: center;
+}
+
+.hide {
+display: none;
+}
+
+.output span {
+font-weight: bold;
+font-size: 1.2em;
+}
+
+.surplus {
+color: var(--light-pink);
+}
+
+.deficit {
+color: var(--light-green);
+}
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+`;
+      const doc = new DOMParser().parseFromString(code, "text/html");
+
+      const assert = chai.assert;
+      const tests = [
+        `assert.isDefined(budgetNumberInput);`,
+        `assert.match(code, /document\\.getElementById\\(\\s*('|")budget\\1\\s*\\)/g);`,
+        `assert.equal(budgetNumberInput, document.getElementById('budget'));`,
+        `assert.isDefined(entryDropdown);`,
+        `assert.match(code, /document\\.getElementById\\(\\s*('|")entry-dropdown\\1\\s*\\)/g);`,
+        `assert.equal(entryDropdown, document.getElementById('entry-dropdown'));`,
+      ];
+      const testText = [
+        `<p>You should declare a variable called <code>budgetNumberInput</code>.</p>`,
+        `<p>You should use <code>document.getElementById()</code> to get the <code>#budget</code> element.</p>`,
+        `<p>You should store the <code>#budget</code> element in a variable called <code>budgetNumberInput</code>.</p>`,
+        `<p>You should declare a variable called <code>entryDropdown</code>.</p>`,
+        `<p>You should use <code>document.getElementById()</code> to get the <code>#entry-dropdown</code> element.</p>`,
+        `<p>You should store the <code>#entry-dropdown</code> element in a variable called <code>entryDropdown</code>.</p>`,
+      ];
+
+      function getUserInput(returnCase) {
+        switch (returnCase) {
+          case "index":
+            return `
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+`;
+          case "editableContents":
+            return `
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+`;
+          default:
+            return code;
+        }
+      }
+
+      doc.__runTest = async function runtTests(testString) {
+        let error = false;
+        for (let i = 0; i < testString.length; i++) {
+          try {
+            const testPromise = new Promise((resolve, reject) => {
+              try {
+                const test = eval(testString[i]);
+                resolve(test);
+              } catch (e) {
+                reject(e);
+              }
+            });
+            await testPromise;
+          } catch (e) {
+            error = true;
+            console.log("testMSG: " + testText[i]);
+            break;
+          }
+        }
+        if (!error) {
+          console.log("completed");
+        }
+      };
+
+      document.querySelector("*").innerHTML = code;
+      doc.__runTest(tests);
+    </script>
+  </head>
+  <body></body>
+</html>
diff --git a/mobile-app/lib/ui/views/learn/test_runner.dart b/mobile-app/lib/ui/views/learn/test_runner.dart
index 34984b751..008870dd9 100644
--- a/mobile-app/lib/ui/views/learn/test_runner.dart
+++ b/mobile-app/lib/ui/views/learn/test_runner.dart
@@ -47,42 +47,18 @@ class TestRunner extends BaseViewModel {
       document.getElementsByTagName('HEAD')[0].append(node);
     }
 
-    String? script = await returnScript(
-      challenge.files[0].ext,
-      challenge,
-      testing: testing,
-    );
-
-    Document scriptToNode = parse(script);
-
-    Node bodyNode =
-        scriptToNode.getElementsByTagName('BODY').first.children.isNotEmpty
-            ? scriptToNode.getElementsByTagName('BODY').first.children.first
-            : scriptToNode.getElementsByTagName('HEAD').first.children.first;
-
-    document.body!.append(bodyNode);
+    String script = await returnScript(
+          challenge.files[0].ext,
+          challenge,
+          testing: testing,
+        ) ??
+        '';
 
-    // Get user's script elements.
-
-    bool hasHTML = challenge.files.any((file) => file.ext == Ext.html);
-
-    if (hasHTML) {
-      String htmlFile = await fileService.getFirstFileFromCache(
-        challenge,
-        Ext.html,
-        testing: testing,
-      );
+    Document parsedScript = parse(script);
+    Node scriptNode = parsedScript.getElementsByTagName('SCRIPT')[0];
+    document.head!.append(scriptNode);
 
-      Document parseCacheDocument = parse(htmlFile);
-
-      List<Element> scriptElements = parseCacheDocument.querySelectorAll(
-        'SCRIPT',
-      );
-
-      for (int i = 0; i < scriptElements.length; i++) {
-        document.body!.append(scriptElements[i]);
-      }
-    }
+    log(document.outerHtml);
 
     if (!testing) {
       controller!.loadData(
@@ -91,7 +67,6 @@ class TestRunner extends BaseViewModel {
         encoding: Encoding.getByName('utf-8').toString(),
       );
     }
-
     return document.outerHtml;
   }
 
@@ -125,6 +100,10 @@ class TestRunner extends BaseViewModel {
       testing: testing,
     );
 
+    firstHTMlfile = fileService.removeExcessiveScriptsInHTMLdocument(
+      firstHTMlfile,
+    );
+
     // Concatenate CSS
     List<ChallengeFile> cssFiles =
         challenge.files.where((file) => file.ext == Ext.css).toList();
@@ -150,8 +129,6 @@ class TestRunner extends BaseViewModel {
       firstHTMlfile += file;
     }
 
-    log(firstHTMlfile);
-
     return firstHTMlfile;
   }
 
@@ -187,9 +164,6 @@ class TestRunner extends BaseViewModel {
     Challenge challenge, {
     bool testing = false,
   }) async {
-    List<ChallengeFile>? scriptFile =
-        challenge.files.where((element) => element.name == 'script').toList();
-
     String? code;
 
     if (ext == Ext.html || ext == Ext.css) {
@@ -198,19 +172,12 @@ class TestRunner extends BaseViewModel {
         ext,
         testing: testing,
       );
-    } else if (ext == Ext.js) {
-      log('THIS IS JAVASCRIPT FLOW');
-      code = await javaScritpFlow(
-        challenge,
-        ext,
-        testing: testing,
-      );
     }
 
     if (ext == Ext.html || ext == Ext.css) {
       String tail = challenge.files[0].tail ?? '';
 
-      return '''<script type="module">
+      return '''<script type="module" id="fcc-script">
     import * as __helpers from "https://www.unpkg.com/@freecodecamp/curriculum-helpers@2.0.3/dist/index.mjs";
 
     const code = `$code`;
@@ -223,7 +190,7 @@ class TestRunner extends BaseViewModel {
 
     const assert = chai.assert;
     const tests = ${parseTest(challenge.tests)};
-    const testText = ${challenge.tests.map((e) => '''"${e.instruction.replaceAll('"', '\\"').replaceAll('\n', ' ')}"''').toList().toString()};
+    const testText = ${challenge.tests.map((e) => '''`${e.instruction.replaceAll('"', '\\"').replaceAll('\n', '')}`''').toList().toString()};
 
     function getUserInput(returnCase){
       switch(returnCase){
@@ -263,57 +230,8 @@ class TestRunner extends BaseViewModel {
     document.querySelector('*').innerHTML = code;
     doc.__runTest(tests);
   </script>''';
-    } else if (ext == Ext.js) {
-      String? head = challenge.files[0].head ?? '';
-      String? tail = (challenge.files[0].tail ?? '').replaceAll('\\', '\\\\');
-
-      return '''<script type="module">
-      import * as __helpers from "https://unpkg.com/@freecodecamp/curriculum-helpers@1.1.0/dist/index.js";
-
-      const assert = chai.assert;
-
-      let code = `$code`;
-      let head = `$head`;
-      let tail = `$tail`;
-      let tests = ${parseTest(challenge.tests)};
-
-      const testText = ${challenge.tests.map((e) => '''`${e.instruction.replaceAll('`', '\\`')}`''').toList().toString()};
-      function getUserInput(returnCase){
-        switch(returnCase){
-          case 'index':
-            return `${scriptFile.isNotEmpty ? (await fileService.getExactFileFromCache(challenge, scriptFile[0], testing: testing)).replaceAll('\\', '\\\\').replaceAll('`', '\\`').replaceAll('\$', r'\$') : "empty string"}`;
-          case 'editableContents':
-            return `${scriptFile.isNotEmpty ? (await fileService.getExactFileFromCache(challenge, scriptFile[0], testing: testing)).replaceAll('\\', '\\\\').replaceAll('`', '\\`').replaceAll('\$', r'\$') : "empty string"}`;
-          default:
-            return code;
-        }
-      }
-      let error = false;
-      try {
-        for (let i = 0; i < tests.length; i++) {
-
-          try {
-
-            const lastIndex = i != tests.length - 1;
-
-            await eval(head + '\\n' + code + '\\n' + tail + '\\n' + tests[i]);
-
-          } catch (e) {
-            error = true;
-            console.log(`testMSG: ` + testText[i]);
-            break;
-          }
-          console.log(`first test done`);
-        }
-      } catch (e) {
-        console.log(e);
-      }
-
-      if(!error){
-        console.log('completed');
-      }
-      ''';
     }
+
     return null;
   }
 }

From 15f8e544547b359e0d9d3908f6f46ace85555f06 Mon Sep 17 00:00:00 2001
From: sembauke <semboot699@gmail.com>
Date: Thu, 20 Jun 2024 11:41:41 +0200
Subject: [PATCH 11/13] fix: separate code variable and frame Document

---
 .../lib/ui/views/learn/test_runner.dart       | 100 ++++++++++++++----
 1 file changed, 82 insertions(+), 18 deletions(-)

diff --git a/mobile-app/lib/ui/views/learn/test_runner.dart b/mobile-app/lib/ui/views/learn/test_runner.dart
index 008870dd9..ca2aa683b 100644
--- a/mobile-app/lib/ui/views/learn/test_runner.dart
+++ b/mobile-app/lib/ui/views/learn/test_runner.dart
@@ -89,7 +89,7 @@ class TestRunner extends BaseViewModel {
   // CODE from the user is concatenated: HTML,CSS,JS and does not get executed;
   // meaning it is all text; Example: https://pastebin.com/v75dQ1xa
 
-  Future<String> htmlFlow(
+  Future<String> parseCodeVariable(
     Challenge challenge,
     Ext ext, {
     bool testing = false,
@@ -132,27 +132,79 @@ class TestRunner extends BaseViewModel {
     return firstHTMlfile;
   }
 
-  // This function parses the JavaScript code so that it has a head and tail (code)
-  // It is used in the returnScript function to correctly parse JavaScript.
-  // ONLY EXECUTES WHEN JAVASCRIPT ONLY CHALLENGE
+  // parsed frame document (also now as Iframe) this will be the document that
+  // is tested against. Meaning the __runtTest function is assigned to the document
+  // object.
 
-  Future<String> javaScritpFlow(
+  Future<String> parseFrameDocument(
     Challenge challenge,
     Ext ext, {
-    bool testing = false,
+    testing = false,
   }) async {
-    var content = testing
-        ? challenge.files[0].contents
-        : await fileService.getFirstFileFromCache(challenge, Ext.js);
-
-    content = fileService.changeActiveFileLinks(
-      content,
+    String html = await fileService.getFirstFileFromCache(
+      challenge,
+      ext,
+      testing: testing,
     );
 
-    return content
-        .replaceAll('\\', '\\\\')
-        .replaceAll('`', '\\`')
-        .replaceAll('\$', r'\$');
+    Document document = parse(html);
+
+    List<ChallengeFile> cssFiles =
+        challenge.files.where((file) => file.ext == Ext.css).toList();
+    List<ChallengeFile> jsFiles =
+        challenge.files.where((file) => file.ext == Ext.js).toList();
+
+    if (cssFiles.isNotEmpty) {
+      String css = await fileService.getExactFileFromCache(
+        challenge,
+        cssFiles[0],
+      );
+
+      List<Element> styleElements = document.getElementsByTagName('link');
+
+      for (Element element in styleElements) {
+        if (element.attributes.containsKey('href')) {
+          if (element.attributes['href'] == 'styles.css') {
+            element.attributes.removeWhere((key, value) => key == 'href');
+            element.attributes.addAll({'data-href': 'styles.css'});
+          } else if (element.attributes['href'] == './styles.css') {
+            element.attributes.removeWhere((key, value) => key == 'href');
+            element.attributes.addAll({'data-href': './styles.css'});
+          }
+        }
+      }
+
+      Element style = document.createElement('style');
+      style.innerHtml = css;
+      style.id = 'fcc-injected-styles';
+
+      log(style.attributes.entries.toString());
+
+      document.head!.append(style);
+    }
+
+    if (jsFiles.isNotEmpty) {
+      String js = await fileService.getExactFileFromCache(
+        challenge,
+        jsFiles[0],
+      );
+
+      List<Element> scripts = document.getElementsByTagName('script');
+
+      for (Element script in scripts) {
+        script.remove();
+      }
+      // We need to create a custom named tag instead of using the default script
+      // tag as the Dart html parser breaks when parsing script tags that are inside
+      // JavaScript strig variables. E.g. for variable "doc".
+      Element script = document.createElement('custominject');
+      script.innerHtml = js;
+      script.attributes.addAll({'data-src': './script.js'});
+
+      document.body!.append(script);
+    }
+
+    return document.outerHtml.toString();
   }
 
   // This returns the script that needs to be run in the DOM. If the test in the document fail it will
@@ -167,7 +219,7 @@ class TestRunner extends BaseViewModel {
     String? code;
 
     if (ext == Ext.html || ext == Ext.css) {
-      code = await htmlFlow(
+      code = await parseCodeVariable(
         challenge,
         ext,
         testing: testing,
@@ -181,7 +233,7 @@ class TestRunner extends BaseViewModel {
     import * as __helpers from "https://www.unpkg.com/@freecodecamp/curriculum-helpers@2.0.3/dist/index.mjs";
 
     const code = `$code`;
-    const doc = new DOMParser().parseFromString(code, 'text/html');
+    const doc = new DOMParser().parseFromString(`${await parseFrameDocument(challenge, ext)}`, 'text/html');
 
     ${tail.isNotEmpty ? """
     const parseTail  = new DOMParser().parseFromString(`${tail.replaceAll('/', '\\/')}`,'text/html');
@@ -204,6 +256,18 @@ class TestRunner extends BaseViewModel {
      }
 
     doc.__runTest = async function runtTests(testString) {
+      class CustomScriptElement extends HTMLElement {
+        constructor() {
+          super();
+        }
+      }
+      customElements.define("custom-inject", CustomScriptElement);
+      const contentOfCustomElement = doc.querySelector("custom-inject");
+      const scriptElement = doc.createElement("script");
+
+      scriptElement.innerHTML = contentOfCustomElement.innerHTML;
+      contentOfCustomElement.replaceWith(scriptElement);
+
       let error = false;
       for(let i = 0; i < testString.length; i++){
         try {

From 47c7c3a2ed036d64708e92f4a0f93a92e3f2e800 Mon Sep 17 00:00:00 2001
From: sembauke <semboot699@gmail.com>
Date: Thu, 20 Jun 2024 13:52:40 +0200
Subject: [PATCH 12/13] fix: execute order 66

---
 mobile-app/lib/ui/views/learn/test_runner.dart | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/mobile-app/lib/ui/views/learn/test_runner.dart b/mobile-app/lib/ui/views/learn/test_runner.dart
index ca2aa683b..9943f7a12 100644
--- a/mobile-app/lib/ui/views/learn/test_runner.dart
+++ b/mobile-app/lib/ui/views/learn/test_runner.dart
@@ -67,6 +67,8 @@ class TestRunner extends BaseViewModel {
         encoding: Encoding.getByName('utf-8').toString(),
       );
     }
+
+    log(document.outerHtml);
     return document.outerHtml;
   }
 
@@ -197,7 +199,7 @@ class TestRunner extends BaseViewModel {
       // We need to create a custom named tag instead of using the default script
       // tag as the Dart html parser breaks when parsing script tags that are inside
       // JavaScript strig variables. E.g. for variable "doc".
-      Element script = document.createElement('custominject');
+      Element script = document.createElement('custom-inject');
       script.innerHtml = js;
       script.attributes.addAll({'data-src': './script.js'});
 
@@ -291,7 +293,7 @@ class TestRunner extends BaseViewModel {
       }
     };
 
-    document.querySelector('*').innerHTML = code;
+    document.querySelector('*').innerHTML = doc.querySelector('*').innerHTML;
     doc.__runTest(tests);
   </script>''';
     }

From 1c68ea2562e72f545e22d18043e47ab653a77214 Mon Sep 17 00:00:00 2001
From: Niraj Nandish <nirajnandish@icloud.com>
Date: Sun, 23 Jun 2024 23:20:32 +0530
Subject: [PATCH 13/13] fix: generate test files

---
 .../lib/ui/views/learn/test_runner.dart       | 31 +++++++++++--------
 1 file changed, 18 insertions(+), 13 deletions(-)

diff --git a/mobile-app/lib/ui/views/learn/test_runner.dart b/mobile-app/lib/ui/views/learn/test_runner.dart
index 9943f7a12..65ec22e94 100644
--- a/mobile-app/lib/ui/views/learn/test_runner.dart
+++ b/mobile-app/lib/ui/views/learn/test_runner.dart
@@ -114,6 +114,7 @@ class TestRunner extends BaseViewModel {
       String file = await fileService.getExactFileFromCache(
         challenge,
         cssFiles[0],
+        testing: testing,
       );
 
       firstHTMlfile += file;
@@ -126,6 +127,7 @@ class TestRunner extends BaseViewModel {
       String file = await fileService.getExactFileFromCache(
         challenge,
         jsFiles[0],
+        testing: testing,
       );
 
       firstHTMlfile += file;
@@ -160,6 +162,7 @@ class TestRunner extends BaseViewModel {
       String css = await fileService.getExactFileFromCache(
         challenge,
         cssFiles[0],
+        testing: testing,
       );
 
       List<Element> styleElements = document.getElementsByTagName('link');
@@ -189,6 +192,7 @@ class TestRunner extends BaseViewModel {
       String js = await fileService.getExactFileFromCache(
         challenge,
         jsFiles[0],
+        testing: testing,
       );
 
       List<Element> scripts = document.getElementsByTagName('script');
@@ -220,22 +224,23 @@ class TestRunner extends BaseViewModel {
   }) async {
     String? code;
 
-    if (ext == Ext.html || ext == Ext.css) {
-      code = await parseCodeVariable(
-        challenge,
-        ext,
-        testing: testing,
-      );
-    }
+    // TODO: Have to update code generation to handle only JS files
+    // if (ext == Ext.html || ext == Ext.css) {
+    code = await parseCodeVariable(
+      challenge,
+      ext,
+      testing: testing,
+    );
+    // }
 
-    if (ext == Ext.html || ext == Ext.css) {
-      String tail = challenge.files[0].tail ?? '';
+    // if (ext == Ext.html || ext == Ext.css) {
+    String tail = challenge.files[0].tail ?? '';
 
-      return '''<script type="module" id="fcc-script">
+    return '''<script type="module" id="fcc-script">
     import * as __helpers from "https://www.unpkg.com/@freecodecamp/curriculum-helpers@2.0.3/dist/index.mjs";
 
     const code = `$code`;
-    const doc = new DOMParser().parseFromString(`${await parseFrameDocument(challenge, ext)}`, 'text/html');
+    const doc = new DOMParser().parseFromString(`${await parseFrameDocument(challenge, ext, testing: testing)}`, 'text/html');
 
     ${tail.isNotEmpty ? """
     const parseTail  = new DOMParser().parseFromString(`${tail.replaceAll('/', '\\/')}`,'text/html');
@@ -296,8 +301,8 @@ class TestRunner extends BaseViewModel {
     document.querySelector('*').innerHTML = doc.querySelector('*').innerHTML;
     doc.__runTest(tests);
   </script>''';
-    }
+    // }
 
-    return null;
+    // return null;
   }
 }