MOBILE-4759 test: Fix rendering components on testing

crazyserver · crazyserver · commit 825c3767bca1 · 2025-02-04T17:40:03.000+01:00
diff --git a/.github/workflows/testing.yml b/.github/workflows/testing.yml
@@ -69,7 +69,7 @@ jobs:
         cat circular-dependencies
         lines=$(cat circular-dependencies | wc -l)
         echo "Total circular dependencies: $lines"
-        test $lines -eq 93
+        test $lines -eq 95
     - name: JavaScript code compatibility
       run: |
         npx check-es-compat www/*.js --polyfills="\{Array,String,TypedArray\}.prototype.at,Object.hasOwn"
diff --git a/src/core/components/tests/iframe.test.ts b/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.
diff --git a/src/core/components/tests/user-avatar.test.ts b/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);
diff --git a/src/core/directives/tests/format-text.test.ts b/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');
 
diff --git a/src/core/directives/tests/link.test.ts b/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');
diff --git a/src/core/directives/update-non-reactive-attributes.ts b/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',
diff --git a/src/core/features/login/pages/credentials/credentials.html b/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>
diff --git a/src/core/features/login/tests/credentials.test.ts b/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.
diff --git a/src/testing/stubs/directives/core-external-content.ts b/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
 
diff --git a/src/testing/utils.ts b/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),

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