Merge pull request #16117 from abpframework/feat/16097

Documantation and test created for `abpSafeHtml` & `page-alert`

docs/en/UI/Angular/Page-Alerts.md

@@ -61,4 +61,21 @@ this.service.show({
 
 ![angular-page-alert-with-params-example](./images/page-alert-with-params-example.png)
 
+## Render HTML content
 
+We can pass html content to the `title` and `message` parameters
+
+
+* It allows static message or localization key
+* [abpSafeHtml](https://github.com/abpframework/abp/blob/37b59a7f05202264505d002397dbb27d275740e1/npm/ng-packs/packages/core/src/lib/pipes/safe-html.pipe.ts#L6) pipe will sanitize html values
+
+```typescript
+this.service.show({
+  type: 'success',
+  title: `New <i><u>blog</u></i> published`,
+  message: 'AbpApp::HtmlMessageWithParams{0}',
+  messageLocalizationParams: ['admin'],
+});
+```
+
+![angular-page-alert-with-html-example](./images/page-alert-with-html-example.png)

npm/ng-packs/packages/core/src/lib/tests/safe-html.pipe.spec.ts

@@ -0,0 +1,34 @@
+import { createServiceFactory, SpectatorService } from '@ngneat/spectator/jest';
+import { SafeHtmlPipe } from '../pipes';
+
+describe('SafeHtmlPipe', () => {
+  let pipe: SafeHtmlPipe;
+  let spectator: SpectatorService<SafeHtmlPipe>;
+  const createService = createServiceFactory(SafeHtmlPipe);
+
+  beforeEach(() => {
+    spectator = createService();
+    pipe = spectator.service;
+  });
+
+  it('should create an instance', () => {
+    expect(pipe).toBeTruthy();
+  });
+
+  test.each([42, false, {}, []])('should return empty string for "%p" input', input => {
+    const result = pipe.transform(input as any);
+    expect(result).toBe('');
+  });
+
+  it('should be equals with input after sanitized', () => {
+    const input = '<div><h1>Hello world!</h1></div>';
+    const result = pipe.transform(input);
+    expect(result).toEqual(input);
+  });
+
+  it('should sanitize unsafe HTML content', () => {
+    const input = `<script>alert("hello world");</script><p><a href='#' onclick="alert('This is an XSS attack!')">Click here!</a></p>`;
+    const result = pipe.transform(input);
+    expect(result).toBe(`<p><a href=\"#\">Click here!</a></p>`);
+  });
+});