Add test: DialogueGroupContainer refreshes the selected dialogue group if a dialogue script is added to a dialogue folder

.github/workflows/run-luau-tests.yml

@@ -8,14 +8,14 @@ on:
     paths:
       - "src/**"
       - "pesde.toml"
-      - "development.project.json"
+      - "test.project.json"
       - ".github/workflows/run-luau-tests.yml"
   pull_request:
     types: [opened, reopened, synchronize, ready_for_review]
     paths:
       - "src/**"
       - "pesde.toml"
-      - "development.project.json"
+      - "test.project.json"
       - ".github/workflows/run-luau-tests.yml"
 
 concurrency:
@@ -42,7 +42,7 @@ jobs:
         run: pesde install
 
       - name: Build Rojo project
-        run: rojo build development.project.json -o build.rbxl
+        run: rojo build test.project.json -o build.rbxl
 
       - name: Upload project
         uses: actions/[email protected]

pesde.lock

@@ -18,16 +18,16 @@ frktest = [{ name = "itsfrank/frktest", version = "^0.0.2", index = "https://git
 luau-lsp = [{ name = "pesde/luau_lsp", version = "=1.39.2", index = "https://github.com/pesde-pkg/index", target = "lune" }, "dev"]
 stylua = [{ name = "pesde/stylua", version = "=2.0.2", index = "https://github.com/pesde-pkg/index", target = "lune" }, "dev"]
 
-[graph."beastslash/[email protected].2 roblox"]
-direct = ["ijw", { name = "beastslash/ijw", version = "^1.1.2", index = "default" }, "dev"]
+[graph."beastslash/[email protected].3 roblox"]
+direct = ["ijw", { name = "beastslash/ijw", version = "^1.1.3", index = "default" }, "dev"]
 
-[graph."beastslash/[email protected].2 roblox".pkg_ref]
+[graph."beastslash/[email protected].3 roblox".pkg_ref]
 ref_ty = "pesde"
 index_url = "https://github.com/pesde-pkg/index"
 
-[graph."beastslash/[email protected].2 roblox".pkg_ref.dependencies]
-luau_lsp = [{ name = "pesde/luau_lsp", version = "^1.47.0", index = "https://github.com/pesde-pkg/index", target = "lune" }, "dev"]
-rojo = [{ name = "pesde/rojo", version = "^7.4.4", index = "https://github.com/pesde-pkg/index", target = "lune" }, "dev"]
+[graph."beastslash/[email protected].3 roblox".pkg_ref.dependencies]
+luau_lsp = [{ name = "pesde/luau_lsp", version = "^1.48.0", index = "https://github.com/pesde-pkg/index", target = "lune" }, "dev"]
+rojo = [{ name = "pesde/rojo", version = "^7.5.1", index = "https://github.com/pesde-pkg/index", target = "lune" }, "dev"]
 scripts = [{ name = "pesde/scripts_rojo", version = "^0.1.0", index = "https://github.com/pesde-pkg/index", target = "lune" }, "dev"]
 
 [graph."corecii/[email protected] lune".pkg_ref]
@@ -85,25 +85,25 @@ index_url = "https://github.com/pesde-pkg/index"
 ref_ty = "pesde"
 index_url = "https://github.com/pesde-pkg/index"
 
-[graph."pesde/luau_lsp@1.47.0 lune"]
-direct = ["luau_lsp", { name = "pesde/luau_lsp", version = "^1.47.0", index = "default", target = "lune" }, "dev"]
+[graph."pesde/luau_lsp@1.48.0 lune"]
+direct = ["luau_lsp", { name = "pesde/luau_lsp", version = "^1.48.0", index = "default", target = "lune" }, "dev"]
 
-[graph."pesde/luau_lsp@1.47.0 lune".dependencies]
+[graph."pesde/luau_lsp@1.48.0 lune".dependencies]
 core = ["pesde/[email protected] lune", "standard"]
 option = ["lukadev_0/[email protected] lune", "standard"]
 result = ["lukadev_0/[email protected] lune", "standard"]
 
-[graph."pesde/luau_lsp@1.47.0 lune".pkg_ref]
+[graph."pesde/luau_lsp@1.48.0 lune".pkg_ref]
 ref_ty = "pesde"
 index_url = "https://github.com/pesde-pkg/index"
 
-[graph."pesde/luau_lsp@1.47.0 lune".pkg_ref.dependencies]
+[graph."pesde/luau_lsp@1.48.0 lune".pkg_ref.dependencies]
 core = [{ name = "pesde/toolchainlib", version = "^0.1.15", index = "https://github.com/pesde-pkg/index", target = "lune" }, "standard"]
 option = [{ name = "lukadev_0/option", version = "^1.2.0", index = "https://github.com/pesde-pkg/index" }, "standard"]
 result = [{ name = "lukadev_0/result", version = "^1.2.0", index = "https://github.com/pesde-pkg/index" }, "standard"]
 
 [graph."pesde/[email protected] lune"]
-direct = ["rojo", { name = "pesde/rojo", version = "^7.4.4", index = "default", target = "lune" }, "dev"]
+direct = ["rojo", { name = "pesde/rojo", version = "^7.5.1", index = "default", target = "lune" }, "dev"]
 
 [graph."pesde/[email protected] lune".dependencies]
 core = ["pesde/[email protected] lune", "standard"]
@@ -163,7 +163,7 @@ result = [{ name = "lukadev_0/result", version = "^1.2.0", index = "https://gith
 unzip = [{ name = "0x5eal/unzip", version = "^0.1.0", index = "https://github.com/pesde-pkg/index", target = "luau" }, "standard"]
 
 [graph."wally#chriscerie/[email protected] roblox"]
-direct = ["react-error-boundary", { wally = "wally#chriscerie/react-error-boundary", version = "^0.2.0", index = "default" }, "standard"]
+direct = ["ReactErrorBoundary", { wally = "wally#chriscerie/react-error-boundary", version = "^0.2.0", index = "default" }, "standard"]
 
 [graph."wally#chriscerie/[email protected] roblox".dependencies]
 Collections = ["wally#jsdotlua/[email protected] roblox", "standard"]

pesde.toml

@@ -34,11 +34,11 @@ sourcemap_generator = ".pesde/scripts/sourcemap_generator.luau"
 
 [dev_dependencies]
 scripts = { name = "pesde/scripts_rojo", version = "^0.1.0", target = "lune" }
-rojo = { name = "pesde/rojo", version = "^7.4.4", target = "lune" }
-luau_lsp = { name = "pesde/luau_lsp", version = "^1.47.0", target = "lune" }
-ijw = { name = "beastslash/ijw", version = "^1.1.2" }
+rojo = { name = "pesde/rojo", version = "^7.5.1", target = "lune" }
+luau_lsp = { name = "pesde/luau_lsp", version = "^1.48.0", target = "lune" }
+ijw = { name = "beastslash/ijw", version = "^1.1.3" }
 
 [dependencies]
 react = { wally = "jsdotlua/react", version = "^17.2.1" }
 react-roblox = { wally = "jsdotlua/react-roblox", version = "^17.2.1" }
-react-error-boundary = { wally = "chriscerie/react-error-boundary", version = "^0.2.0" }
+ReactErrorBoundary = { wally = "chriscerie/react-error-boundary", version = "^0.2.0" }

src/DialogueEditor/components/Explorer/components/DialogueGroupContainer/DialogueGroupContainer.test.luau

@@ -0,0 +1,174 @@
+--!strict
+
+local root = script.Parent.Parent.Parent.Parent.Parent.Parent;
+local DialogueGroupContainer = require(script.Parent);
+local VirtualService = require(root.VirtualService);
+local React = require(root.roblox_packages.react);
+local ReactErrorBoundary = require(root.roblox_packages.ReactErrorBoundary);
+local ErrorBoundary = ReactErrorBoundary.ErrorBoundary;
+local ReactRoblox = require(root.roblox_packages["react-roblox"]);
+local IJW = require(root.roblox_packages.ijw);
+local expect = IJW.expect;
+local describe = IJW.describe;
+local it = IJW.it;
+
+local screenGui: ScreenGui?;
+local reactRoot: ReactRoblox.RootType?;
+
+return {
+  describe("DialogueGroupContainer", function()
+
+    local function MockComponent(properties: any)
+
+      local dialogueType = properties.type or "Message";
+      local onRendered = properties.onRendered;
+      local selectedScript = properties.selectedScript;
+      local onErrored = properties.onErrored or function() end;
+
+      React.useEffect(function()
+
+        if onRendered then
+
+          onRendered();
+
+        end;
+
+      end, {});
+
+      return React.createElement(ErrorBoundary, {
+        FallbackComponent = React.Fragment;
+        onError = onErrored;
+      }, {
+        React.createElement(DialogueGroupContainer, {
+          name = dialogueType;
+          plugin = VirtualService.mocks.globals.plugin;
+          selectedScript = selectedScript;
+          layoutOrder = 1;
+        })
+      });
+
+    end;
+
+    return {
+
+      it("refreshes the selected dialogue group if a dialogue script is added to a dialogue folder", function()
+
+        expect(function()
+
+          -- Render the component and wait for it to finish rendering.
+          assert(screenGui, "ScreenGui should be initialized before running tests.");
+          assert(reactRoot, "React root should be initialized before running tests.");
+
+          local messageCount = 4;
+          local dialogueFolder = Instance.new("Folder");
+          dialogueFolder.Name = "Messages";
+
+          for i = 1, messageCount do
+
+            local dialogueScript = Instance.new("ModuleScript");
+            dialogueScript.Name = tostring(i);
+            dialogueScript:SetAttribute("DialogueType", "Message");
+            dialogueScript:AddTag("DialogueMakerDialogueScript");
+            dialogueScript.Parent = dialogueFolder;
+
+          end;
+
+          local selectedScript = Instance.new("ModuleScript");
+          selectedScript:SetAttribute("DialogueType", "Message");
+          selectedScript:AddTag("DialogueMakerDialogueScript");
+          dialogueFolder.Parent = selectedScript;
+
+          local propagatedErrorMessage;
+          local didRender = false;
+          local element = React.createElement(MockComponent, {
+            selectedScript = selectedScript;
+            onErrored = function(errorMessage)
+
+              propagatedErrorMessage = errorMessage;
+
+            end;
+            onRendered = function()
+
+              didRender = true;
+
+            end;
+          });
+
+          reactRoot:render(element);
+          repeat task.wait() until didRender or propagatedErrorMessage;
+          if propagatedErrorMessage then
+
+            error(propagatedErrorMessage);
+
+          end;
+
+          -- Verify that there are four dialogue items rendered.
+          local dialogueGroupContainer = screenGui:FindFirstChildOfClass("Frame");
+          assert(dialogueGroupContainer, "DialogueGroupContainer should be rendered in the ScreenGui.");
+
+          local dialogueGroup = dialogueGroupContainer:FindFirstChild("DialogueGroup");
+          assert(dialogueGroup, "DialogueGroup should be rendered in the DialogueGroupContainer.");
+
+          local function getDialogueItems()  
+
+            local dialogueItems = {};
+            for _, child in dialogueGroup:GetChildren() do
+
+              if child:IsA("Frame") then
+
+                table.insert(dialogueItems, child);
+
+              end;
+
+            end;
+
+            return dialogueItems;
+
+          end;
+
+          expect(#getDialogueItems()).toBe(4);
+
+          -- Add a new dialogue script to the folder and verify that the component refreshes.
+          local newDialogueScript = Instance.new("ModuleScript");
+          newDialogueScript.Name = tostring(messageCount + 1);
+          newDialogueScript:SetAttribute("DialogueType", "Message");
+          newDialogueScript:AddTag("DialogueMakerDialogueScript");
+          newDialogueScript.Parent = dialogueFolder;
+          dialogueGroup.ChildAdded:Wait();
+          expect(#getDialogueItems()).toBe(5);
+
+        end).toFinishBeforeSeconds(1);
+
+      end);
+
+    }
+
+  end, {
+    beforeEach = function()
+
+      VirtualService.mocks.isEnabled = true;
+
+      local newScreenGui = Instance.new("ScreenGui");
+      screenGui = newScreenGui;
+      reactRoot = ReactRoblox.createRoot(newScreenGui);
+
+    end;
+    afterEach = function()
+
+      VirtualService.mocks.isEnabled = false;
+
+      if reactRoot then
+
+        reactRoot:unmount();
+
+      end;
+
+      if screenGui then
+
+        screenGui:Destroy();
+
+      end;
+
+    end;
+  })
+};

src/DialogueEditor/components/Explorer/components/DialogueGroupContainer/components/DialogueGroup/components/DialogueItem/DialogueItem.test.luau

@@ -4,6 +4,8 @@ local root = script.Parent.Parent.Parent.Parent.Parent.Parent.Parent.Parent.Pare
 local DialogueItem = require(script.Parent);
 local VirtualService = require(root.VirtualService);
 local React = require(root.roblox_packages.react);
+local ReactErrorBoundary = require(root.roblox_packages.ReactErrorBoundary);
+local ErrorBoundary = ReactErrorBoundary.ErrorBoundary;
 local ReactRoblox = require(root.roblox_packages["react-roblox"]);
 local IJW = require(root.roblox_packages.ijw);
 local expect = IJW.expect;
@@ -22,6 +24,7 @@ return {
       local onRendered = properties.onRendered;
       local dialogueScript = properties.dialogueScript or Instance.new("ModuleScript");
       local layoutOrder = properties.layoutOrder or 1;
+      local onErrored = properties.onErrored or function() end;
 
       React.useEffect(function()
 
@@ -33,12 +36,17 @@ return {
 
       end, {});
 
-      return React.createElement(DialogueItem, {
-        type = dialogueType;
-        dialogueScript = dialogueScript;
-        dialogueScriptCount = if dialogueScript.Parent then #dialogueScript.Parent:GetChildren() else 1;
-        layoutOrder = layoutOrder;
-        setSettingsTarget = function() end;
+      return React.createElement(ErrorBoundary, {
+        FallbackComponent = React.Fragment;
+        onError = onErrored;
+      }, {
+        React.createElement(DialogueItem, {
+          type = dialogueType;
+          dialogueScript = dialogueScript;
+          dialogueScriptCount = if dialogueScript.Parent then #dialogueScript.Parent:GetChildren() else 1;
+          layoutOrder = layoutOrder;
+          setSettingsTarget = function() end;
+        })
       });
 
     end;
@@ -70,18 +78,29 @@ return {
           assert(screenGui, "ScreenGui should be initialized before running tests.");
           assert(reactRoot, "React root should be initialized before running tests.");
 
-          local renderedEvent = Instance.new("BindableEvent");
-
+          local didRender = false;
+          local propagatedErrorMessage;
           local element = React.createElement(MockComponent, {
+            onErrored = function(errorMessage)
+
+              propagatedErrorMessage = errorMessage;
+
+            end;
             onRendered = function()
 
-              renderedEvent:Fire();
+              didRender = true;
 
             end;
           });
 
           reactRoot:render(element);
-          renderedEvent.Event:Wait();
+          repeat task.wait() until didRender or propagatedErrorMessage;
+
+          if propagatedErrorMessage then
+
+            error(propagatedErrorMessage);
+
+          end;
 
           -- Simulate a click on the component.
           local dialogueItem = screenGui:FindFirstChildOfClass("Frame");