MOBILE-4759 test: Fix rendering components on testing

src/core/components/tests/iframe.test.ts

@@ -26,6 +26,7 @@ describe('CoreIframeComponent', () => {
         const { nativeElement } = await renderTemplate(
             CoreIframeComponent,
             '<core-iframe src="https://moodle.org/"></core-iframe>',
+            { standalone: true },
         );
 
         // Assert.

src/core/components/tests/user-avatar.test.ts

@@ -20,7 +20,10 @@ describe('CoreUserAvatarComponent', () => {
 
     it('should render', async () => {
         // Act.
-        const { nativeElement } = await renderComponent(CoreUserAvatarComponent);
+        const { nativeElement } = await renderComponent(
+            CoreUserAvatarComponent,
+            { standalone: true },
+        );
 
         // Assert.
         expect(nativeElement.innerHTML.trim()).not.toHaveLength(0);

src/core/directives/tests/format-text.test.ts

@@ -50,6 +50,7 @@ describe('CoreFormatTextDirective', () => {
             providers: [
                 { provide: IonContent, useValue: null },
             ],
+            standalone: true,
         };
     });
 
@@ -79,6 +80,7 @@ describe('CoreFormatTextDirective', () => {
         const { nativeElement } = await renderTemplate(
             CoreFormatTextDirective,
             '<core-format-text text="Lorem ipsum dolor"></core-format-text>',
+            { standalone: true },
         );
 
         // Assert
@@ -116,13 +118,15 @@ describe('CoreFormatTextDirective', () => {
         });
 
         // Act
-        const { nativeElement } = await renderTemplate(CoreFormatTextDirective, `
-            <core-format-text
+        const { nativeElement } = await renderTemplate(
+            CoreFormatTextDirective,
+            `<core-format-text
                 text="Lorem ipsum dolor"
                 contextLevel="course"
                 [contextInstanceId]="42"
-            ></core-format-text>
-        `);
+            ></core-format-text>`,
+            { standalone: true },
+        );
 
         // Assert
         const text = nativeElement.querySelector('core-format-text');
@@ -180,6 +184,7 @@ describe('CoreFormatTextDirective', () => {
             CoreFormatTextDirective,
             'core-format-text',
             { text: '<a href="https://anchor-url/">Link</a>' },
+            { standalone: true },
         );
         const anchor = nativeElement.querySelector('a');
 

src/core/directives/tests/link.test.ts

@@ -24,6 +24,7 @@ describe('CoreLinkDirective', () => {
         const fixture = await renderTemplate(
             CoreLinkDirective,
             '<a href="https://moodle.org/" core-link [capture]="true">Link</a>',
+            { standalone: true },
         );
 
         // Assert
@@ -42,6 +43,7 @@ describe('CoreLinkDirective', () => {
         const { nativeElement } = await renderTemplate(
             CoreLinkDirective,
             '<a href="https://moodle.org/" core-link [capture]="true">Link</a>',
+            { standalone: true },
         );
 
         const anchor = nativeElement.querySelector('a');

src/core/directives/update-non-reactive-attributes.ts

@@ -20,7 +20,7 @@ import { Directive, ElementRef, OnDestroy, OnInit } from '@angular/core';
  *
  * This is necessary in order to update some attributes that are not reactive, for example aria-label.
  *
- * @see https://github.com/ionic-team/ionic-framework/issues/21534
+ * @see https://github.com/ionic-team/ionic-framework/issues/20127
  */
 @Directive({
     selector: 'ion-button',

src/core/features/login/pages/credentials/credentials.html

@@ -9,10 +9,10 @@ <h1>{{ 'core.login.login' | translate }}</h1>
         </ion-title>
 
         <ion-buttons slot="end">
-            <ion-button fill="clear" (click)="openSettings()" [ariaLabel]="'core.settings.appsettings' | translate">
+            <ion-button fill="clear" (click)="openSettings()" [attr.aria-label]="'core.settings.appsettings' | translate">
                 <ion-icon slot="icon-only" name="fas-gear" aria-hidden="true" />
             </ion-button>
-            <ion-button fill="clear" (click)="showHelp()" [ariaLabel]="'core.help' | translate">
+            <ion-button fill="clear" (click)="showHelp()" [attr.aria-label]="'core.help' | translate">
                 <ion-icon slot="icon-only" name="far-circle-question" aria-hidden="true" />
             </ion-button>
         </ion-buttons>

src/core/features/login/tests/credentials.test.ts

@@ -12,7 +12,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { CoreSharedModule } from '@/core/shared.module';
 import { findElement, mock, mockSingleton, renderPageComponent, requireElement } from '@/testing/utils';
 import { CoreLoginError } from '@classes/errors/loginerror';
 import CoreLoginCredentialsPage from '@features/login/pages/credentials/credentials';
@@ -22,9 +21,6 @@ import { Http } from '@singletons';
 import { of } from 'rxjs';
 import { CoreLoginHelper } from '../services/login-helper';
 import { CoreConstants } from '@/core/constants';
-import { CoreSiteLogoComponent } from '@components/site-logo/site-logo';
-import { CoreLoginExceededAttemptsComponent } from '../components/exceeded-attempts/exceeded-attempts';
-import { CoreLoginMethodsComponent } from '../components/login-methods/login-methods';
 
 describe('Credentials page', () => {
 
@@ -86,12 +82,7 @@ describe('Credentials page', () => {
         // Act.
         const fixture = await renderPageComponent(CoreLoginCredentialsPage, {
             routeParams: { siteUrl },
-            imports: [
-                CoreSharedModule,
-                CoreSiteLogoComponent,
-                CoreLoginExceededAttemptsComponent,
-                CoreLoginMethodsComponent,
-            ],
+            standalone: true,
         });
 
         // Assert.
@@ -141,12 +132,7 @@ describe('Credentials page', () => {
 
         const fixture = await renderPageComponent(CoreLoginCredentialsPage, {
             routeParams: { siteUrl, siteCheck },
-            imports: [
-                CoreSharedModule,
-                CoreSiteLogoComponent,
-                CoreLoginExceededAttemptsComponent,
-                CoreLoginMethodsComponent,
-            ],
+            standalone: true,
         });
 
         // Act.

src/testing/stubs/directives/core-external-content.ts

@@ -16,6 +16,7 @@ import { Directive, Input } from '@angular/core';
 
 @Directive({
     selector: '[core-external-content]',
+    standalone: true,
 })
 export class CoreExternalContentDirectiveStub { // eslint-disable-line @angular-eslint/directive-class-suffix
 

src/testing/utils.ts

@@ -86,25 +86,40 @@ const DEFAULT_SERVICE_SINGLETON_MOCKS: [CoreSingletonProxy, unknown][] = [
  * @returns A promise that resolves to the testing component fixture.
  */
 async function renderAngularComponent<T>(component: Type<T>, config: RenderConfig): Promise<TestingComponentFixture<T>> {
-    config.declarations.push(component);
-
-    TestBed.configureTestingModule({
-        declarations: [
-            ...getDefaultDeclarations(),
-            ...config.declarations,
-        ],
-        providers: [
-            ...getDefaultProviders(config),
-            ...config.providers,
-        ],
-        schemas: [CUSTOM_ELEMENTS_SCHEMA],
-        imports: [
-            BrowserModule,
-            NoopAnimationsModule,
-            TranslateModule.forChild(),
-            ...config.imports,
-        ],
-    });
+    if (!config.standalone) {
+        config.declarations.push(component);
+
+        TestBed.configureTestingModule({
+            declarations: [
+                ...config.declarations,
+            ],
+            providers: [
+                ...getDefaultProviders(config),
+                ...config.providers,
+            ],
+            schemas: [CUSTOM_ELEMENTS_SCHEMA],
+            imports: [
+                BrowserModule,
+                NoopAnimationsModule,
+                TranslateModule.forChild(),
+                CoreExternalContentDirectiveStub,
+                ...config.imports,
+            ],
+        });
+    } else {
+        TestBed.configureTestingModule({
+            providers: [
+                ...getDefaultProviders(config),
+                ...config.providers,
+            ],
+            imports: [
+                component,
+                NoopAnimationsModule,
+                CoreExternalContentDirectiveStub,
+                ...config.imports,
+            ],
+        });
+    }
 
     testBedInitialized = true;
 
@@ -128,7 +143,13 @@ async function renderAngularComponent<T>(component: Type<T>, config: RenderConfi
  * @returns The wrapper component class.
  */
 function createWrapperComponent<U>(template: string, componentClass: Type<U>): Type<WrapperComponent<U>> {
-    @Component({ template })
+    @Component({
+        template,
+        standalone: true,
+        imports: [
+            componentClass,
+        ],
+    })
     class HostComponent extends WrapperComponent<U> {
 
         @ViewChild(componentClass) child!: U;
@@ -138,17 +159,6 @@ function createWrapperComponent<U>(template: string, componentClass: Type<U>): T
     return HostComponent;
 }
 
-/**
- * Gets the default declarations for testing.
- *
- * @returns An array of default declarations.
- */
-function getDefaultDeclarations(): unknown[] {
-    return [
-        CoreExternalContentDirectiveStub,
-    ];
-}
-
 /**
  * Gets the default providers for testing.
  *
@@ -217,6 +227,7 @@ export interface RenderConfig {
     providers: unknown[];
     imports: unknown[];
     translations?: Record<string, string>;
+    standalone?: boolean;
 }
 
 export interface RenderPageConfig extends RenderConfig {
@@ -447,8 +458,10 @@ export async function renderTemplate<T>(
     template: string,
     config: Partial<RenderConfig> = {},
 ): Promise<WrapperComponentFixture<T>> {
-    config.declarations = config.declarations ?? [];
-    config.declarations.push(component);
+    if (!config.standalone) {
+        config.declarations = config.declarations ?? [];
+        config.declarations.push(component);
+    }
 
     return renderAngularComponent(
         createWrapperComponent(template, component),