diff --git a/src/app/shared/utils/browser-only.pipe.ts b/src/app/shared/utils/browser-only.pipe.ts index fc95bfda22..e3ee3df69d 100644 --- a/src/app/shared/utils/browser-only.pipe.ts +++ b/src/app/shared/utils/browser-only.pipe.ts @@ -2,8 +2,19 @@ import { Inject, Pipe, PipeTransform, PLATFORM_ID } from '@angular/core'; import { isPlatformBrowser } from '@angular/common'; /** - * A pipe that only returns its intput when run in the browser. + * A pipe that only returns its input when run in the browser. * Used to distinguish client-side rendered content from server-side rendered content. + * + * When used with attributes as in + * ``` + * [attr.data-test]="'something' | dsBrowserOnly" + * ``` + * the server-side rendered HTML will not contain the `data-test` attribute. + * When rendered client-side, the HTML will contain `data-test="something"` + * + * This can be useful for end-to-end testing elements that need JS (that isn't included in SSR HTML) to function: + * By depending on `dsBrowserOnly` attributes in tests we can make sure we wait + * until such components are fully interactive before trying to interact with them. */ @Pipe({ name: 'dsBrowserOnly' diff --git a/src/themes/custom/lazy-theme.module.ts b/src/themes/custom/lazy-theme.module.ts index 4208ffbd69..874dff90d3 100644 --- a/src/themes/custom/lazy-theme.module.ts +++ b/src/themes/custom/lazy-theme.module.ts @@ -80,7 +80,6 @@ import { BreadcrumbsComponent } from './app/breadcrumbs/breadcrumbs.component'; import { FeedbackComponent } from './app/info/feedback/feedback.component'; import { CommunityListComponent } from './app/community-list-page/community-list/community-list.component'; -// todo: optimize imports const DECLARATIONS = [ FileSectionComponent,