feat(offline-templates): enhance offline templates and add tests (#142)

* feat(offline-templates): enhance offline templates and add tests

- Refactor main.js to include setMessage function for dynamic content
- Create jsconfig.json for test configuration
- Add main.test.js to test setMessage functionality
- Update Main.fs to implement a Counter type with increment/decrement methods
- Create App.Tests.fsproj for testing setup
- Implement Main.Test.fs for Counter unit tests

* feat(offline-templates): add utility functions and tests

- Implement createMessage and add functions in main.js
- Add jsconfig.json for test configuration
- Create unit tests for createMessage and add functions
- Update perla.json to include testing configuration
- Implement multiply and createGreeting functions in main.jsx
- Add jsconfig.json for empty-jsx tests
- Create unit tests for multiply and createGreeting functions
- Update perla.json for fable-feliz to include testing configuration
- Add add and formatName functions in Components.fs
- Create unit tests for add and formatName functions

Author: AngelMunoz

src/Perla/offline-templates/basic/src/main.js

@@ -1,16 +1,19 @@
 console.log("Welcome to Perla!");
 
-const appRoot = document.querySelector("app-root");
-const element = document.createElement("section");
-element.innerHTML = `
+export function setMessage(element) {
+  element.innerHTML = `
   <h1>Perla Offline Template</h1>
   <p>This is a basic offline template for Perla.</p>
   <p>It is designed to work without any server-side processing.</p>
   <p>Feel free to modify it as per your requirements.</p>
-`;
+  `;
+}
 
 document.addEventListener("DOMContentLoaded", () => {
+  const appRoot = document.querySelector("app-root");
   if (appRoot) {
+    const element = document.createElement("section");
+    setMessage(element);
     appRoot.appendChild(element);
   } else {
     console.error("App root element not found.");

src/Perla/offline-templates/basic/tests/jsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../jsconfig.json",
+  "include": ["../src/**/*.js", "./**/*.js"],
+  "typeAcquisition": {
+    "enable": true,
+    "include": ["qunit"]
+  }
+}

src/Perla/offline-templates/basic/tests/main.test.js

@@ -0,0 +1,18 @@
+import { setMessage } from "../src/main.js";
+
+QUnit.module("Main Module Tests");
+
+QUnit.test("setMessage sets correct HTML content", (assert) => {
+  const fixture = document.querySelector("#qunit-fixture");
+
+  setMessage(fixture);
+  assert.equal(
+    fixture.innerHTML,
+    `
+  <h1>Perla Offline Template</h1>
+  <p>This is a basic offline template for Perla.</p>
+  <p>It is designed to work without any server-side processing.</p>
+  <p>Feel free to modify it as per your requirements.</p>
+  `
+  );
+});

src/Perla/offline-templates/blocal/src/main.js

@@ -1,5 +1,13 @@
 console.log("Welcome to Perla!");
 
+export function createMessage(title, description) {
+  return `${title}: ${description}`;
+}
+
+export function add(a, b) {
+  return a + b;
+}
+
 const appRoot = document.querySelector("app-root");
 const element = document.createElement("section");
 element.innerHTML = `

src/Perla/offline-templates/blocal/tests/jsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../jsconfig.json",
+  "include": ["../src/**/*.js", "./**/*.js"],
+  "typeAcquisition": {
+    "enable": true,
+    "include": ["qunit"]
+  }
+}

src/Perla/offline-templates/blocal/tests/main.test.js

@@ -0,0 +1,21 @@
+import { createMessage, add } from "../src/main.js";
+
+QUnit.module("Blocal Module Tests");
+
+QUnit.test("createMessage formats message correctly", (assert) => {
+  const result = createMessage("Hello", "World");
+  assert.equal(result, "Hello: World", "Should format message correctly");
+
+  const result2 = createMessage("Perla", "Offline Template");
+  assert.equal(
+    result2,
+    "Perla: Offline Template",
+    "Should handle different inputs"
+  );
+});
+
+QUnit.test("add function works correctly", (assert) => {
+  assert.equal(add(2, 3), 5, "Should add two positive numbers");
+  assert.equal(add(-1, 1), 0, "Should handle negative numbers");
+  assert.equal(add(0, 0), 0, "Should handle zero");
+});

src/Perla/offline-templates/empty-fable/.config/dotnet-tools.json

@@ -2,11 +2,6 @@
   "version": 1,
   "isRoot": true,
   "tools": {
-    "perla": {
-      "version": "1.0.0-beta-028",
-      "commands": ["perla"],
-      "rollForward": false
-    },
     "fable": {
       "version": "4.25.0",
       "commands": ["fable"],

src/Perla/offline-templates/empty-fable/perla.json

@@ -5,5 +5,11 @@
     "project": "./src/App.fsproj",
     "sourceMaps": true
   },
+  "testing": {
+    "fable": {
+      "project": "./tests/App.Tests.fsproj",
+      "sourceMaps": true
+    }
+  },
   "dependencies": {}
 }

src/Perla/offline-templates/empty-fable/src/Main.fs

@@ -1,24 +1,52 @@
 module Main
 
 open Fable.Core
-open Browser
+open Browser.Dom
+open Browser.Types
 
-let element = document.createElement("section")
+type Counter(initialValue: int) =
+  let mutable count = initialValue
 
-element.innerHTML <-
-  """
-    <h1>Welcome to the Fable Feliz App!</h1>
-    <p>This is a basic template using Feliz for Fable applications.</p>
-    <p>Enjoy building your app!</p>
-"""
+  member this.Increment() =
+    count <- count + 1
+    count
+
+  member this.Decrement() =
+    count <- count - 1
+    count
+
+  member this.GetValue() = count
+
+
+let createCounter initialValue =
+  let counter = Counter initialValue
+  let element = document.createElement("div")
+
+  element.innerHTML <- sprintf "<p>Counter: %d</p>" (counter.GetValue())
+
+  document.addEventListener(
+    "click",
+    fun _ ->
+      counter.Increment() |> ignore
+      element.innerHTML <- sprintf "<p>Counter: %d</p>" (counter.GetValue())
+  )
+
+  element
 
 document.addEventListener(
   "DOMContentLoaded",
   fun _ ->
     let root = document.getElementById "feliz-app"
+    let element = document.createElement("section")
+
+    element.innerHTML <-
+      """<h1>Welcome to the Fable Feliz App!</h1>
+  <p>This is a basic template using Feliz for Fable applications.</p>
+  <p>Enjoy building your app!</p>"""
 
     if not(isNull root) then
       root.appendChild element |> ignore
+      element.appendChild(createCounter 0) |> ignore
     else
       console.error("App root element not found.")
 )

src/Perla/offline-templates/empty-fable/tests/App.Tests.fsproj

@@ -0,0 +1,16 @@
+<Project Sdk="Microsoft.NET.Sdk">
+    <PropertyGroup>
+        <TargetFramework>net8.0</TargetFramework>
+    </PropertyGroup>
+    <ItemGroup>
+        <Compile Include="Main.Test.fs" />
+    </ItemGroup>
+    <ItemGroup>
+        <PackageReference Include="Fable.Browser.Dom" Version="2.20.0" />
+        <PackageReference Include="Fable.Core" Version="4.5.0" />
+        <PackageReference Include="Perla.Fable.QUnit" Version="1.0.0-beta-034" />
+    </ItemGroup>
+    <ItemGroup>
+      <ProjectReference Include="..\src\App.fsproj" />
+    </ItemGroup>
+</Project>