Add UI tests using Playwright (#23)

* added some ui tests * fixed bug OnParametersSetAsync set currentData
stiankroknes · Dec 30, 2022 · 7f85bf5 · 7f85bf5
1 parent b1904ac
commit 7f85bf5
Show file tree

Hide file tree

Showing 24 changed files with 970 additions and 119 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,89 @@
+[*.cs]
+
+# S1481: Unused local variables should be removed
+dotnet_diagnostic.S1481.severity = suggestion
+csharp_indent_labels = one_less_than_current
+csharp_using_directive_placement = outside_namespace:silent
+csharp_prefer_simple_using_statement = true:suggestion
+csharp_prefer_braces = true:silent
+csharp_style_namespace_declarations = block_scoped:silent
+csharp_style_prefer_method_group_conversion = true:silent
+csharp_style_prefer_top_level_statements = true:silent
+csharp_style_expression_bodied_methods = false:silent
+csharp_style_expression_bodied_constructors = false:silent
+csharp_style_expression_bodied_operators = false:silent
+csharp_style_expression_bodied_properties = true:silent
+csharp_style_expression_bodied_indexers = true:silent
+csharp_style_expression_bodied_accessors = true:silent
+csharp_style_expression_bodied_lambdas = true:silent
+csharp_style_expression_bodied_local_functions = false:silent
+
+# S125: Sections of code should not be commented out
+dotnet_diagnostic.S125.severity = suggestion
+
+# AsyncFixer01: Unnecessary async/await usage
+dotnet_diagnostic.AsyncFixer01.severity = none
+
+[*.{cs,vb}]
+dotnet_style_operator_placement_when_wrapping = beginning_of_line
+tab_width = 4
+indent_size = 4
+end_of_line = crlf
+dotnet_style_coalesce_expression = true:suggestion
+dotnet_style_null_propagation = true:suggestion
+dotnet_style_prefer_is_null_check_over_reference_equality_method = true:suggestion
+dotnet_style_prefer_auto_properties = true:silent
+dotnet_style_object_initializer = true:suggestion
+dotnet_style_collection_initializer = true:suggestion
+dotnet_style_prefer_simplified_boolean_expressions = true:suggestion
+dotnet_style_prefer_conditional_expression_over_assignment = true:silent
+dotnet_style_prefer_conditional_expression_over_return = true:silent
+dotnet_style_explicit_tuple_names = true:suggestion
+dotnet_style_prefer_inferred_tuple_names = true:suggestion
+[*.{cs,vb}]
+#### Naming styles ####
+
+# Naming rules
+
+dotnet_naming_rule.interface_should_be_begins_with_i.severity = suggestion
+dotnet_naming_rule.interface_should_be_begins_with_i.symbols = interface
+dotnet_naming_rule.interface_should_be_begins_with_i.style = begins_with_i
+
+dotnet_naming_rule.types_should_be_pascal_case.severity = suggestion
+dotnet_naming_rule.types_should_be_pascal_case.symbols = types
+dotnet_naming_rule.types_should_be_pascal_case.style = pascal_case
+
+dotnet_naming_rule.non_field_members_should_be_pascal_case.severity = suggestion
+dotnet_naming_rule.non_field_members_should_be_pascal_case.symbols = non_field_members
+dotnet_naming_rule.non_field_members_should_be_pascal_case.style = pascal_case
+
+# Symbol specifications
+
+dotnet_naming_symbols.interface.applicable_kinds = interface
+dotnet_naming_symbols.interface.applicable_accessibilities = public, internal, private, protected, protected_internal, private_protected
+dotnet_naming_symbols.interface.required_modifiers = 
+
+dotnet_naming_symbols.types.applicable_kinds = class, struct, interface, enum
+dotnet_naming_symbols.types.applicable_accessibilities = public, internal, private, protected, protected_internal, private_protected
+dotnet_naming_symbols.types.required_modifiers = 
+
+dotnet_naming_symbols.non_field_members.applicable_kinds = property, event, method
+dotnet_naming_symbols.non_field_members.applicable_accessibilities = public, internal, private, protected, protected_internal, private_protected
+dotnet_naming_symbols.non_field_members.required_modifiers = 
+
+# Naming styles
+
+dotnet_naming_style.begins_with_i.required_prefix = I
+dotnet_naming_style.begins_with_i.required_suffix = 
+dotnet_naming_style.begins_with_i.word_separator = 
+dotnet_naming_style.begins_with_i.capitalization = pascal_case
+
+dotnet_naming_style.pascal_case.required_prefix = 
+dotnet_naming_style.pascal_case.required_suffix = 
+dotnet_naming_style.pascal_case.word_separator = 
+dotnet_naming_style.pascal_case.capitalization = pascal_case
+
+dotnet_naming_style.pascal_case.required_prefix = 
+dotnet_naming_style.pascal_case.required_suffix = 
+dotnet_naming_style.pascal_case.word_separator = 
+dotnet_naming_style.pascal_case.capitalization = pascal_case
diff --git a/VisNetwork.Blazor.sln b/VisNetwork.Blazor.sln
@@ -11,6 +11,7 @@ Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "VisNetwork.Blazor.Sample",
 EndProject
 Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "01_SolutionItems", "01_SolutionItems", "{3CBCABCF-0147-48CD-A75C-F1FE45CF00AC}"
 	ProjectSection(SolutionItems) = preProject
+		.editorconfig = .editorconfig
 		.gitignore = .gitignore
 		Directory.Build.props = Directory.Build.props
 		README.md = README.md
@@ -24,6 +25,8 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "workflows", "workflows", "{
 		.github\workflows\publish.yml = .github\workflows\publish.yml
 	EndProjectSection
 EndProject
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "VisNetwork.Blazor.UITests", "tests\VisNetwork.Blazor.UITests\VisNetwork.Blazor.UITests.csproj", "{64BA44BA-AC41-4F67-A166-C0479B5AADBA}"
+EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
@@ -70,6 +73,18 @@ Global
 		{42C8C0D1-0643-4994-9707-85C01123BAE7}.Release|x64.Build.0 = Release|Any CPU
 		{42C8C0D1-0643-4994-9707-85C01123BAE7}.Release|x86.ActiveCfg = Release|Any CPU
 		{42C8C0D1-0643-4994-9707-85C01123BAE7}.Release|x86.Build.0 = Release|Any CPU
+		{64BA44BA-AC41-4F67-A166-C0479B5AADBA}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{64BA44BA-AC41-4F67-A166-C0479B5AADBA}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{64BA44BA-AC41-4F67-A166-C0479B5AADBA}.Debug|x64.ActiveCfg = Debug|Any CPU
+		{64BA44BA-AC41-4F67-A166-C0479B5AADBA}.Debug|x64.Build.0 = Debug|Any CPU
+		{64BA44BA-AC41-4F67-A166-C0479B5AADBA}.Debug|x86.ActiveCfg = Debug|Any CPU
+		{64BA44BA-AC41-4F67-A166-C0479B5AADBA}.Debug|x86.Build.0 = Debug|Any CPU
+		{64BA44BA-AC41-4F67-A166-C0479B5AADBA}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{64BA44BA-AC41-4F67-A166-C0479B5AADBA}.Release|Any CPU.Build.0 = Release|Any CPU
+		{64BA44BA-AC41-4F67-A166-C0479B5AADBA}.Release|x64.ActiveCfg = Release|Any CPU
+		{64BA44BA-AC41-4F67-A166-C0479B5AADBA}.Release|x64.Build.0 = Release|Any CPU
+		{64BA44BA-AC41-4F67-A166-C0479B5AADBA}.Release|x86.ActiveCfg = Release|Any CPU
+		{64BA44BA-AC41-4F67-A166-C0479B5AADBA}.Release|x86.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE

diff --git a/sample/VisNetwork.Blazor.Sample/Pages/Interaction.razor b/sample/VisNetwork.Blazor.Sample/Pages/Interaction.razor
@@ -5,83 +5,83 @@
 <h1>Interaction</h1>
 
 <div>
-    <button @onclick="SelectNode1Click">Select Node 1</button>
-    <button @onclick="SelectNode2Click">Select Node 2</button>
-    <button @onclick="SelectNode3Click">Select Node 3</button>
-    <button @onclick="SelectEdge12Click">Select Edge 1-2</button>
-    <button @onclick="SelectEdge23Click">Select Edge 2-3</button>
-    <button @onclick="SetSelection">SetSelection Node1 and Edge 1-2</button>
-    <button @onclick="GetSelection">GetSelection</button>
-    <button @onclick="GetSelectedNodes">GetSelectedNodes</button>
-    <button @onclick="GetSelectedEdges">GetSelectedEdges</button>
-    <button @onclick="ClearClick">Clear selection</button>
+    <button @onclick="SelectNode1Click" aria-label="SelectNode1">Select Node 1</button>
+    <button @onclick="SelectNode2Click" aria-label="SelectNode2">Select Node 2</button>
+    <button @onclick="SelectNode3Click" aria-label="SelectNode3">Select Node 3</button>
+    <button @onclick="SelectEdge12Click" aria-label="SelectEdge12">Select Edge 1-2</button>
+    <button @onclick="SelectEdge23Click" aria-label="SelectEdge23">Select Edge 2-3</button>
+    <button @onclick="SetSelection" aria-label="SetSelectionNode1Edge12">SetSelection Node1 and Edge 1-2</button>
+    <button @onclick="GetSelection" aria-label="GetSelection">GetSelection</button>
+    <button @onclick="GetSelectedNodes" aria-label="GetSelectedNodes">GetSelectedNodes</button>
+    <button @onclick="GetSelectedEdges" aria-label="GetSelectedEdges">GetSelectedEdges</button>
+    <button @onclick="ClearClick" aria-label="ClearSelection">Clear selection</button>
 
     <Network @ref="network" Id="my-id" Data="@data" class="vis-network-container" />
 
-    <p>GetSelection: @selection</p>
-    <p>GetSelectedNodes: @selectedNodes</p>
-    <p>GetSelectedEdges: @selectedEdges</p>
+    <p data-testid="selectionParagraph">GetSelection: @selection</p>
+    <p data-testid="selectedNodesParagraph">GetSelectedNodes: @selectedNodes</p>
+    <p data-testid="selectedEdgesParagraph">GetSelectedEdges: @selectedEdges</p>
 </div>
 
 @code {
-private Network network;
+    private Network network;
 
-private NetworkData data;
+    private NetworkData data;
 
-private string selection;
-private string selectedNodes;
-private string selectedEdges;
+    private string selection;
+    private string selectedNodes;
+    private string selectedEdges;
 
-private async Task SelectNode1Click() => await network.SelectNodes(new[] { "1" });
-private async Task SelectNode2Click() => await network.SelectNodes(new[] { "2" });
-private async Task SelectNode3Click() => await network.SelectNodes(new[] { "3" });
-private async Task SelectEdge12Click() => await network.SelectEdges(new[] { "1-2" });
-private async Task SelectEdge23Click() => await network.SelectEdges(new[] { "2-3" });
-private async Task GetSelection()
-{
-    var result = await network.GetSelection();
-    selection = string.Concat("Nodes:", string.Join(", ", result.Nodes), " Edges:", string.Join(", ", result.Edges));
-}
-private async Task SetSelection()
-{
-    await network.SetSelection(new NodeEdgeComposite { Nodes = new[] { "1" }, Edges = new[] { "1-2" } });
+    private async Task SelectNode1Click() => await network.SelectNodes(new[] { "1" });
+    private async Task SelectNode2Click() => await network.SelectNodes(new[] { "2" });
+    private async Task SelectNode3Click() => await network.SelectNodes(new[] { "3" });
+    private async Task SelectEdge12Click() => await network.SelectEdges(new[] { "1-2" });
+    private async Task SelectEdge23Click() => await network.SelectEdges(new[] { "2-3" });
+    private async Task GetSelection()
+    {
+        var result = await network.GetSelection();
+        selection = string.Concat("Nodes:", string.Join(", ", result.Nodes), " Edges:", string.Join(", ", result.Edges));
+    }
+    private async Task SetSelection()
+    {
+        await network.SetSelection(new NodeEdgeComposite { Nodes = new[] { "1" }, Edges = new[] { "1-2" } });
 
-}
-private async Task GetSelectedNodes()
-{
-    var nodeIds = await network.GetSelectedNodes();
-    selectedNodes = string.Concat("Nodes:", string.Join(", ", nodeIds));
-}
+    }
+    private async Task GetSelectedNodes()
+    {
+        var nodeIds = await network.GetSelectedNodes();
+        selectedNodes = string.Concat("Nodes:", string.Join(", ", nodeIds));
+    }
 
-private async Task GetSelectedEdges()
-{
-    var edgeIds = await network.GetSelectedEdges();
-    selectedEdges = string.Concat("Edges:", string.Join(", ", edgeIds));
-}
+    private async Task GetSelectedEdges()
+    {
+        var edgeIds = await network.GetSelectedEdges();
+        selectedEdges = string.Concat("Edges:", string.Join(", ", edgeIds));
+    }
 
-private async Task ClearClick()
-{
-    selection = string.Empty;
-    selectedNodes = string.Empty;
-    selectedEdges = string.Empty;
-    await network.UnselectAll();
-}
+    private async Task ClearClick()
+    {
+        selection = string.Empty;
+        selectedNodes = string.Empty;
+        selectedEdges = string.Empty;
+        await network.UnselectAll();
+    }
 
-public Interaction()
-{
-    var nodes = new List<Node>();
-    var edges = new List<Edge>();
+    public Interaction()
+    {
+        var nodes = new List<Node>();
+        var edges = new List<Edge>();
 
-    nodes.Add(new Node("1", "Node 1", 1, "circle"));
-    nodes.Add(new Node("2", "Node 2", 2, "ellipse"));
-    edges.Add(new Edge("1", "2") { Id = "1-2" });
-    nodes.Add(new Node("3", "Node 3", 4, "database"));
-    edges.Add(new Edge("2", "3") { Id = "2-3" });
+        nodes.Add(new Node("1", "Node 1", 1, "circle"));
+        nodes.Add(new Node("2", "Node 2", 2, "ellipse"));
+        edges.Add(new Edge("1", "2") { Id = "1-2" });
+        nodes.Add(new Node("3", "Node 3", 4, "database"));
+        edges.Add(new Edge("2", "3") { Id = "2-3" });
 
-    data = new NetworkData
-    {
-        Edges = edges,
-        Nodes = nodes
-    };
-}
+        data = new NetworkData
+            {
+                Edges = edges,
+                Nodes = nodes
+            };
+    }
 }
diff --git a/sample/VisNetwork.Blazor.Sample/Pages/Issue.razor b/sample/VisNetwork.Blazor.Sample/Pages/Issue.razor
@@ -17,44 +17,43 @@
 </EditForm>
 
 @code {
-private Network network;
-private NetworkData data;
-private HashSet<Node> nodes = new HashSet<Node>();
-private HashSet<Edge> edges = new HashSet<Edge>();
-private int nodeCounter = 3;
-
-private Model model = new Model();
-class Model
-{
-    public string Test { get; set; }
-}
-
-public Issue()
-{
-    nodes.Add(new Node("1", "Node 100", 1, "circle"));
-    nodes.Add(new Node("2", "Node 200", 2, "circle"));
-    edges.Add(new Edge("1", "2"));
-    nodes.Add(new Node("3", "Node 300", 4, "circle"));
-    edges.Add(new Edge("2", "3"));
-    data = new NetworkData
+    private Network network;
+    private NetworkData data;
+    private HashSet<Node> nodes = new HashSet<Node>();
+    private HashSet<Edge> edges = new HashSet<Edge>();
+    private int nodeCounter = 3;
+
+    private Model model = new Model();
+    class Model
     {
-        Nodes = nodes,
-        Edges = edges
-    };
-}
-
-protected void ValidFormSubmitted()
-{
+        public string Test { get; set; }
+    }
 
-    nodeCounter += 1;
-    nodes.Add(new Node(nodeCounter.ToString(), "Node " + nodeCounter.ToString(), 4, "circle"));
-    edges.Add(new Edge((nodeCounter - 1).ToString(), nodeCounter.ToString()));
-    data = new NetworkData
+    public Issue()
     {
-        Nodes = nodes,
-        Edges = edges
-    };
-
-    StateHasChanged();
-}
+        nodes.Add(new Node("1", "Node 100", 1, "circle"));
+        nodes.Add(new Node("2", "Node 200", 2, "circle"));
+        edges.Add(new Edge("1", "2"));
+        nodes.Add(new Node("3", "Node 300", 4, "circle"));
+        edges.Add(new Edge("2", "3"));
+        data = new NetworkData
+            {
+                Nodes = nodes,
+                Edges = edges
+            };
+    }
+
+    protected void ValidFormSubmitted()
+    {
+        nodeCounter += 1;
+        nodes.Add(new Node(nodeCounter.ToString(), "Node " + nodeCounter.ToString(), 4, "circle"));
+        edges.Add(new Edge((nodeCounter - 1).ToString(), nodeCounter.ToString()));
+        data = new NetworkData
+            {
+                Nodes = nodes,
+                Edges = edges
+            };
+
+        StateHasChanged();
+    }
 }
diff --git a/sample/VisNetwork.Blazor.Sample/VisNetwork.Blazor.Sample.csproj b/sample/VisNetwork.Blazor.Sample/VisNetwork.Blazor.Sample.csproj
@@ -3,7 +3,7 @@
 	<PropertyGroup>
 		<TargetFramework>net7.0</TargetFramework>
 	</PropertyGroup>
-
+	
 	<ItemGroup>
 		<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="7.0.1" />
 		<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="7.0.1" PrivateAssets="all" />

diff --git a/src/VisNetwork.Blazor/Network.razor.cs b/src/VisNetwork.Blazor/Network.razor.cs
@@ -11,7 +11,7 @@ namespace VisNetwork.Blazor;
 
 public partial class Network : IAsyncDisposable
 {
-    private DotNetObjectReference<Network> thisReference;
+    private readonly DotNetObjectReference<Network> thisReference;
     private ElementReference element;
     private bool firstRenderComplete;
     private NetworkData currentData;
@@ -165,10 +165,10 @@ protected override async Task OnParametersSetAsync()
 
         if (firstRenderComplete && currentData != Data)
         {
-            currentData = Data;
             await JS.SetData(element, thisReference, Data);
         }
 
+        currentData = Data;
         await base.OnParametersSetAsync();
     }