Merge pull request #44 from followynne/feat/base-test-architecture

feat: create tests library structure & projects

Author: mo-esmp

README.md

@@ -15,12 +15,12 @@ Install-Package Serilog.UI
 
 Then install one of the providers based upon your sink:
 
-| Provider Name                  | Install                                          | Package                                                                        |
-| ------------------------------ | ------------------------------------------------ | ------------------------------------------------------------------------------ |
-| Serilog.UI.MsSqlServerProvider | `Install-Package Serilog.UI.MsSqlServerProvider` | [NuGet package](https://www.nuget.org/packages/Serilog.UI.MsSqlServerProvider) |
-| Serilog.UI.MySqlProvider       | `Install-Package Serilog.UI.MySqlProvider`       | [NuGet package](https://www.nuget.org/packages/Serilog.UI.MySqlProvider)       |
-| Serilog.UI.PostgreSqlProvider  | `Install-Package Serilog.UI.PostgreSqlProvider`  | [NuGet package](https://www.nuget.org/packages/Serilog.UI.PostgreSqlProvider)  |
-| Serilog.UI.MongoDbProviderr    | `Install-Package Serilog.UI.MongoDbProvider`     | [NuGet package](https://www.nuget.org/packages/Serilog.UI.MongoDbProvider)     |
+| Provider Name                    | Install                                           | Package                                                                          |
+| -------------------------------- | ------------------------------------------------- | -------------------------------------------------------------------------------- |
+| Serilog.UI.MsSqlServerProvider   | `Install-Package Serilog.UI.MsSqlServerProvider`  | [NuGet package](https://www.nuget.org/packages/Serilog.UI.MsSqlServerProvider)   |
+| Serilog.UI.MySqlProvider         | `Install-Package Serilog.UI.MySqlProvider`        | [NuGet package](https://www.nuget.org/packages/Serilog.UI.MySqlProvider)         |
+| Serilog.UI.PostgreSqlProvider    | `Install-Package Serilog.UI.PostgreSqlProvider`   | [NuGet package](https://www.nuget.org/packages/Serilog.UI.PostgreSqlProvider)    |
+| Serilog.UI.MongoDbProviderr      | `Install-Package Serilog.UI.MongoDbProvider`      | [NuGet package](https://www.nuget.org/packages/Serilog.UI.MongoDbProvider)       |
 | Serilog.UI.ElasticSearchProvider | `Install-Package Serilog.UI.ElasticSearcProvider` | [NuGet package](https://www.nuget.org/packages/Serilog.UI.ElasticSearchProvider) |
 
 Then, add `AddSerilogUi()` to `IServiceCollection` in `Startup.ConfigureServices` method:
@@ -58,12 +58,7 @@ public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
 }
 ```
 
-The default url to view the log page is `http://<your-app>/serilog-ui`. If you want to change this url path, just configure the route prefix:
-```csharp
-app.UseSerilogUi(option => option.RoutePrefix = "logs");
-```
-
-**Authorization configuration required**
+## Authorization: configuration
 
 By default serilog-ui allows access to the log page only for local requests. In order to give appropriate rights for production use, you need to configure authorization. You can secure the log page by allowing specific users or roles to view logs:
 
@@ -78,30 +73,39 @@ public void ConfigureServices(IServiceCollection services)
             authOptions.Roles = new[] { "AdminRole" };
         })
         .UseSqlServer(Configuration.GetConnectionString("DefaultConnection"), "LogTableName"));
-    .
-    .
-    .
+    // ...
+}
 ```
-Only `User1` and `User2` or users with `AdminRole` role can view logs. If you set `AuthenticationType` to `Jwt`, you can set a jwt token and an `Authorization` header will be added to the request and for `Cookie` just login into you website and no extra step is required.
+Only `User1` and `User2` or users with `AdminRole` role can view logs.
+
+If you set `AuthenticationType` to `Jwt`, you can set a jwt token and an `Authorization` header will be added to the request and for `Cookie` just login into you website and no extra step is required.
+
+To disable anonymous access for local requests, (e.g. for testing authentication locally) set `AlwaysAllowLocalRequests` to `false`.
 
-To disable access for local requests, (e.g. for testing authentication locally) set `AlwaysAllowLocalRequests` to `false`.
+To disable authorization on production, set `Enabled` to false.
 
 ``` csharp
 services.AddSerilogUi(options => options
     .EnableAuthorization(authOption =>
     {
-        authOption.AlwaysAllowLocalRequests = false;
+        authOption.AlwaysAllowLocalRequests = false; // disable anonymous access on local
+        authOption.Enabled = false; // disable authorization access check on production
     })
     .UseSqlServer(Configuration.GetConnectionString("DefaultConnection"), "Logs"));
 ```
 
-## Limitations
-* Additional columns are not supported and only main columns can be retrieved.
-
 ## Options
 Options can be found in the [UIOptions](src/Serilog.Ui.Web/Extensions/UiOptions.cs) class.
 `internal` properties can generally be set via extension methods, see [SerilogUiOptionBuilderExtensions](src/Serilog.Ui.Web/Extensions/SerilogUiOptionBuilderExtensions.cs)
 
+### Log page URL
+
+The default url to view the log page is `http://<your-app>/serilog-ui`. If you want to change this url path, just configure the route prefix:
+
+```csharp
+app.UseSerilogUi(option => option.RoutePrefix = "logs");
+```
+
 ### Home url
 ![image](https://user-images.githubusercontent.com/8641495/185874822-1d4b6f52-864c-4ffb-9064-6fc5ee9a079c.png)
 
@@ -114,10 +118,14 @@ app.UseSerilogUi(options =>
 });
 ```
 
-### Custom Javascript and CSS
+### Inject custom Javascript and CSS
+
+For customization of the dashboard UI, custom JS and CSS can be injected. 
+
+CSS gets injected in the `<head>` element.
+
+JS gets injected at the end of the `<body>` element by default. 
 
-For customization of the dashboard UI custom JS and CSS can be injected. 
-CSS gets injected in the `<head>` element. JS gets injected at the end of the `<body>` element by default. 
 To inject JS in the `<head>` element set `injectInHead` to `true`.
 
 ``` csharp
@@ -138,6 +146,7 @@ app.UseStaticFiles();
 ```
 
 With the default configuration static files are served under the wwwroot folder, so in the example above the file structure should be:
+
 ![image](https://user-images.githubusercontent.com/8641495/185877921-99aaf19a-3e62-4ad9-85c3-47994e7e6ba1.png)
 
 JS code can be ran when loading the file by wrapping the code in a function, and directly running that function like so:
@@ -147,7 +156,7 @@ JS code can be ran when loading the file by wrapping the code in a function, and
 })();
 ```
 
-## serilog-ui UI frontend development
+## UI: Frontend development
 
 The serilog-ui frontend is located inside the Serilog.Ui.Web package.
 
@@ -202,3 +211,37 @@ There are two Grunt tasks you can use to build the frontend project:
   - restart Chrome
   - you should be able to run the dev environment on both localhost and 127.0.0.1 (to check if it's working fine, open the console: you'll find a red message: **"[MSW] Mocking enabled."**)
 </details>
+
+# Known Limitations
+* Additional columns are not supported and only main columns can be retrieved.
+
+# Test
+
+## .NET Serilog.UI Projects
+
+The test projects are located inside the */tests* folder.
+
+Each Serilog.Ui project has a separate test project.
+Each project is based onto the **xUnit** test framework.
+
+**Serilog.Ui.Common.Tests**: contains anything that can be shared between the tests projects.
+
+To run the tests, use Test Explorer in Visual Studio or run from the root folder:
+
+```
+dotnet test
+```
+
+## JS UI assets
+
+Tests are located inside src/Serilog.Ui.Web/assets/__tests__
+
+Tests are based onto Jest test framework, with the help of JSDOM and testing-library packages. Any HTTP request is mocked through [msw](https://mswjs.io/).
+
+Jest configuration can be found in src/Serilog.Ui.Web/jest.config.js; any additional setup item is located inside src/Serilog.Ui.Web/assets/__tests__/util (this folder is excluded from test runs).
+
+To run the tests, open a terminal in src/Serilog.Ui.Web/ and launch this command (watch-mode):
+
+```
+npm test
+```