Add tests for DialogueGroup component (#107)

Author: Christian-Toney

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

@@ -0,0 +1,142 @@
+--!strict
+
+local root = script.Parent.Parent.Parent.Parent.Parent.Parent.Parent.Parent;
+local DialogueGroup = require(script.Parent);
+local VirtualService = require(root.VirtualService);
+local React = require(root.roblox_packages.react);
+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("DialogueGroup", function()
+
+    local function MockComponent(properties: any)
+
+      local dialogueType = properties.type or "Message";
+      local onRendered = properties.onRendered;
+      local dialogueScripts = properties.dialogueScripts or {};
+      local layoutOrder = properties.layoutOrder or 1;
+
+      React.useEffect(function()
+      
+        if onRendered then
+
+          onRendered();
+
+        end;
+
+      end, {});
+
+      return React.createElement(DialogueGroup, {
+        name = dialogueType;
+        plugin = VirtualService.mocks.globals.plugin;
+        dialogueScripts = dialogueScripts;
+        layoutOrder = layoutOrder;
+      });
+
+    end;
+
+    return {
+
+      it("creates a DialogueItem component for each child dialogue of the selected script", 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 renderedEvent = Instance.new("BindableEvent");
+          local messages = {"This should be a message", "This should be another message", "This should be a third message", "This should be a fourth message"};
+          local dialogueScripts = {};
+          for _, message in messages do
+
+            local dialogueScript = Instance.new("ModuleScript");
+            dialogueScript.Name = tostring(#dialogueScripts + 1);
+            dialogueScript:SetAttribute("DialogueContent", message);
+            table.insert(dialogueScripts, dialogueScript);
+
+          end;
+
+          local element = React.createElement(MockComponent, {
+            dialogueScripts = dialogueScripts;
+            onRendered = function()
+              
+              renderedEvent:Fire();
+
+            end;
+          });
+
+          reactRoot:render(element);
+          renderedEvent.Event:Wait();
+
+          -- Simulate a click on the component.
+          local dialogueGroup = screenGui:FindFirstChildOfClass("Frame");
+          assert(dialogueGroup, "DialogueGroup should be rendered in the ScreenGui.");
+
+          local dialogueItems = {};
+          for _, child in dialogueGroup:GetChildren() do
+
+            if child:IsA("Frame") then
+            
+              table.insert(dialogueItems, child);
+
+              local viewButton = child:FindFirstChild("ViewButton");
+              assert(viewButton and viewButton:IsA("GuiButton"), "ViewButton should be present in the DialogueItem.");
+
+              local informationFrame = viewButton:FindFirstChild("InformationFrame");
+              assert(informationFrame, "Information should be present in the ViewButton.");
+
+              local descriptionLabel = informationFrame:FindFirstChild("DescriptionLabel");
+              assert(descriptionLabel and descriptionLabel:IsA("TextLabel"), "DescriptionLabel should be present in the InformationFrame.");
+
+              local expectedMessage = messages[child.LayoutOrder];
+              expect(descriptionLabel.Text).toBe(expectedMessage);
+            
+            end;
+
+          end;
+
+          expect(#dialogueItems).toBe(4);
+
+        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

@@ -237,6 +237,51 @@ return {
         end).toFinishBeforeSeconds(1);
 
       end);
+
+      it("can preview static dialogue content string", 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 expectedMessage = "This is a static dialogue content string.";
+          local renderedEvent = Instance.new("BindableEvent");
+          local dialogueScript = Instance.new("ModuleScript");
+          dialogueScript.Name = "1";
+          dialogueScript:SetAttribute("DialogueContent", expectedMessage);
+
+          local element = React.createElement(MockComponent, {
+            dialogueScript = dialogueScript;
+            onRendered = function()
+              
+              renderedEvent:Fire();
+
+            end;
+          });
+
+          reactRoot:render(element);
+          renderedEvent.Event:Wait();
+
+          -- Simulate a click on the component.
+          local dialogueItem = screenGui:FindFirstChildOfClass("Frame");
+          assert(dialogueItem, "DialogueItem should be rendered in the ScreenGui.");
+
+          local viewButton = dialogueItem:FindFirstChild("ViewButton");
+          assert(viewButton and viewButton:IsA("GuiButton"), "ViewButton should be present in the DialogueItem.");
+
+          local informationFrame = viewButton:FindFirstChild("InformationFrame");
+          assert(informationFrame, "Information should be present in the ViewButton.");
+
+          local descriptionLabel = informationFrame:FindFirstChild("DescriptionLabel");
+          assert(descriptionLabel and descriptionLabel:IsA("TextLabel"), "DescriptionLabel should be present in the InformationFrame.");
+          expect(descriptionLabel.Text).toBe(expectedMessage);
+
+        end).toFinishBeforeSeconds(1);
+
+      end);
+
     }
 
   end, {

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

@@ -16,7 +16,6 @@ export type DialogueItemProperties = {
   dialogueScript: ModuleScript;
   dialogueScriptCount: number;
   layoutOrder: number;
-  setSettingsTarget: (target: ModuleScript?) -> ();
 }
 
 local function DialogueItem(props: DialogueItemProperties)
@@ -210,7 +209,7 @@ local function DialogueItem(props: DialogueItemProperties)
         PaddingTop = UDim.new(0, 15);
         PaddingBottom = UDim.new(0, 15);
       });
-      Information = React.createElement("Frame", {
+      InformationFrame = React.createElement("Frame", {
         AutomaticSize = Enum.AutomaticSize.XY;
         LayoutOrder = 1;
         BackgroundTransparency = 1;
@@ -232,7 +231,7 @@ local function DialogueItem(props: DialogueItemProperties)
           ImageColor3 = colors.text;
           ImageTransparency = if isDeprioritized then 0.5 else 0;
         });
-        Description = React.createElement("TextLabel", {
+        DescriptionLabel = React.createElement("TextLabel", {
           Text = if dialogueType == "Conversation" then dialogueScript.Name else (dialogueContent or "Nothing yet...");
           TextColor3 = colors.text;
           TextTransparency = if not isDeprioritized and (dialogueType == "Conversation" or dialogueContent) then 0 else 0.5;

src/DialogueEditor/components/Explorer/components/DialogueGroupContainer/components/DialogueGroup/init.luau

@@ -3,35 +3,34 @@
 local root = script.Parent.Parent.Parent.Parent.Parent.Parent.Parent;
 local React = require(root.roblox_packages.react);
 local DialogueItem = require(script.components.DialogueItem);
+local VirtualService = require(root.VirtualService);
 
 export type DialogueItemType = DialogueItem.DialogueItemType;
 
 export type DialogueGroupProperties = {
   name: DialogueItemType;
   plugin: Plugin;
-  scriptList: {ModuleScript};
+  dialogueScripts: {ModuleScript};
   layoutOrder: number;
-  setSettingsTarget: (target: ModuleScript?) -> ();
 }
 
-local function SettingGroup(properties: DialogueGroupProperties)
+local function DialogueGroup(properties: DialogueGroupProperties)
 
   local groupName = properties.name;
-  local scriptList = properties.scriptList;
+  local dialogueScripts = properties.dialogueScripts;
   local layoutOrder = properties.layoutOrder;
-  local setSettingsTarget = properties.setSettingsTarget;
+  local plugin = if VirtualService.mocks.isEnabled then VirtualService.mocks.globals.plugin else properties.plugin;
 
   local scriptComponents = {};
-  for index, dialogueScript in scriptList do
+  for index, dialogueScript in dialogueScripts do
 
     local settingComponent = React.createElement(DialogueItem, {
       key = dialogueScript:GetFullName();
-      plugin = properties.plugin;
+      plugin = plugin;
       dialogueScript = dialogueScript;
-      dialogueScriptCount = #scriptList;
+      dialogueScriptCount = #dialogueScripts;
       layoutOrder = index;
       type = groupName :: DialogueItemType;
-      setSettingsTarget = setSettingsTarget;
     });
 
     table.insert(scriptComponents, settingComponent);
@@ -53,4 +52,4 @@ local function SettingGroup(properties: DialogueGroupProperties)
 
 end;
 
-return React.memo(SettingGroup);
+return React.memo(DialogueGroup);

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

@@ -202,8 +202,7 @@ local function DialogueGroupContainer(props: DialogueTableBodyProperties)
       layoutOrder = categoryIndex;
       plugin = props.plugin;
       key = dialogueType;
-      scriptList = scriptList;
-      setSettingsTarget = setSettingsTarget;
+      dialogueScripts = scriptList;
     });
 
     table.insert(dialogueGroups, dialogueGroup);