diff --git a/src/app/directives/tests/link.test.ts b/src/app/directives/tests/link.test.ts
new file mode 100644
index 000000000..30a99db90
--- /dev/null
+++ b/src/app/directives/tests/link.test.ts
@@ -0,0 +1,38 @@
+// (C) Copyright 2015 Moodle Pty Ltd.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { CoreLinkDirective } from '@directives/link';
+
+import { renderTemplate } from '@/tests/utils';
+
+describe('CoreLinkDirective', () => {
+
+ it('should render', async () => {
+ // Act
+ const fixture = await renderTemplate(
+ CoreLinkDirective,
+ 'Link',
+ );
+
+ // Assert
+ expect(fixture.nativeElement.innerHTML.trim()).not.toHaveLength(0);
+
+ const anchor = fixture.nativeElement.querySelector('a');
+ expect(anchor).not.toBeNull();
+ expect(anchor.href).toEqual('https://moodle.org/');
+ });
+
+ it.todo('should capture clicks');
+
+});
diff --git a/src/tests/utils.ts b/src/tests/utils.ts
index 58d93164a..f15be53ae 100644
--- a/src/tests/utils.ts
+++ b/src/tests/utils.ts
@@ -73,6 +73,24 @@ export async function renderComponent(component: Type, config: Partial(
+ component: Type,
+ template: string,
+ config: Partial = {},
+): Promise> {
+ config.declarations = config.declarations ?? [];
+ config.declarations.push(component);
+
+ return renderAngularComponent(
+ createWrapperComponent(template, component),
+ {
+ declarations: [],
+ providers: [],
+ ...config,
+ },
+ );
+}
+
export async function renderWrapperComponent(
component: Type,
tag: string,
@@ -84,17 +102,7 @@ export async function renderWrapperComponent(
.map(([name, value]) => `${name}="${value.toString().replace(/"/g, '"')}"`)
.join(' ');
- config.declarations = config.declarations ?? [];
- config.declarations.push(component);
-
- return renderAngularComponent(
- createWrapperComponent(`<${tag} ${inputAttributes}>${tag}>`, component),
- {
- declarations: [],
- providers: [],
- ...config,
- },
- );
+ return renderTemplate(component, `<${tag} ${inputAttributes}>${tag}>`, config);
}
async function renderAngularComponent(component: Type, config: RenderConfig): Promise> {