refactor: perform migration to pattern without containers

BREAKING CHANGE: Using containers and components is no longer a recommended pattern. Use `node schematics/migration/0.16-to-0.17` to migrate.

e2e/cypress/integration/pages/account/login.page.ts

@@ -1,7 +1,7 @@
 import { HeaderModule } from '../header.module';
 
 export class LoginPage {
-  readonly tag = 'ish-login-form-container';
+  readonly tag = 'ish-login-form';
 
   readonly header = new HeaderModule();
 

e2e/cypress/integration/pages/account/profile-edit-email.page.ts

@@ -1,7 +1,7 @@
 import { fillFormField } from '../../framework';
 
 export class ProfileEditEmailPage {
-  readonly tag = 'ish-account-profile-email-page-container';
+  readonly tag = 'ish-account-profile-email-page';
 
   fillForm(data: { email: string; emailConfirmation?: string }) {
     fillFormField(this.tag, 'email', data.email);

e2e/cypress/integration/pages/account/profile-edit-password.page.ts

@@ -1,7 +1,7 @@
 import { fillFormField } from '../../framework';
 
 export class ProfileEditPasswordPage {
-  readonly tag = 'ish-account-profile-password-page-container';
+  readonly tag = 'ish-account-profile-password-page';
 
   fillForm(data: { currentPassword: string; password: string; passwordConfirmation?: string }) {
     fillFormField(this.tag, 'currentPassword', data.currentPassword);

e2e/cypress/integration/pages/checkout/addresses.page.ts

@@ -6,7 +6,7 @@ export type AddressDetailsTypes = Partial<
 >;
 
 export class AddressesPage {
-  readonly tag = 'ish-checkout-address-page-container';
+  readonly tag = 'ish-checkout-address-page';
 
   // guest checkout
   guestCheckout() {

e2e/cypress/integration/pages/checkout/line-item-dialog.page.ts

@@ -1,5 +1,5 @@
 export class LineItemDialogPage {
-  readonly tag = 'ish-line-item-edit-dialog-container';
+  readonly tag = 'ish-line-item-edit-dialog';
 
   changeVariationSelection(values: { attr: string; value: string }[]) {
     for (const x of values) {

e2e/cypress/integration/pages/checkout/mini-cart.module.ts

@@ -1,5 +1,5 @@
 export class MiniCartModule {
-  private readonly selector = 'ish-mini-basket-container[data-testing-id="mini-basket-desktop"]';
+  private readonly selector = 'ish-mini-basket[data-testing-id="mini-basket-desktop"]';
 
   private miniBasketLink = () => cy.get(this.selector).find('.quick-cart-link.d-md-block');
   private viewCartButton = () =>

e2e/cypress/integration/pages/checkout/payment.page.ts

@@ -1,7 +1,7 @@
 import { fillFormField, waitLoadingEnd } from '../../framework';
 
 export class PaymentPage {
-  readonly tag = 'ish-checkout-payment-page-container';
+  readonly tag = 'ish-checkout-payment-page';
 
   get content() {
     return cy.get(this.tag);

e2e/cypress/integration/pages/checkout/receipt.page.ts

@@ -1,5 +1,5 @@
 export class ReceiptPage {
-  readonly tag = 'ish-checkout-receipt-page-container';
+  readonly tag = 'ish-checkout-receipt-page';
 
   continueShopping() {
     cy.get('a[data-testing-id="home-link"]').click();

e2e/cypress/integration/pages/checkout/review.page.ts

@@ -1,5 +1,5 @@
 export class ReviewPage {
-  readonly tag = 'ish-checkout-review-page-container';
+  readonly tag = 'ish-checkout-review-page';
 
   acceptTAC() {
     cy.get('input[data-testing-id="termsAndConditions"]').check();

e2e/cypress/integration/pages/checkout/shipping.page.ts

@@ -1,5 +1,5 @@
 export class ShippingPage {
-  readonly tag = 'ish-checkout-shipping-page-container';
+  readonly tag = 'ish-checkout-shipping-page';
 
   continueCheckout() {
     cy.get('button')

e2e/cypress/integration/pages/contact/contact.page.ts

@@ -1,7 +1,7 @@
 import { BreadcrumbModule } from '../breadcrumb.module';
 
 export class ContactPage {
-  readonly tag = 'ish-contact-page-container';
+  readonly tag = 'ish-contact-page';
   readonly breadcrumb = new BreadcrumbModule();
 
   static navigateTo() {

e2e/cypress/integration/pages/home.page.ts

@@ -1,7 +1,7 @@
 import { HeaderModule } from './header.module';
 
 export class HomePage {
-  readonly tag = 'ish-home-page-container';
+  readonly tag = 'ish-home-page';
 
   readonly header = new HeaderModule();
 

e2e/cypress/integration/pages/shopping/family.page.ts

@@ -7,7 +7,7 @@ export class FamilyPage {
 
   readonly header = new HeaderModule();
 
-  readonly productList = new ProductListModule('ish-product-listing-container');
+  readonly productList = new ProductListModule('ish-product-listing');
 
   static navigateTo(categoryUniqueId: string, page?: number) {
     cy.visit(`/category/${categoryUniqueId}${page ? `?page=${page}` : ''}`);

e2e/cypress/integration/pages/shopping/product-detail.page.ts

@@ -4,7 +4,7 @@ import { HeaderModule } from '../header.module';
 import { ProductListModule } from './product-list.module';
 
 export class ProductDetailPage {
-  readonly tag = 'ish-product-page-container';
+  readonly tag = 'ish-product-page';
 
   readonly header = new HeaderModule();
   readonly breadcrumb = new BreadcrumbModule();

e2e/cypress/integration/pages/shopping/product-list.module.ts

@@ -4,13 +4,13 @@ export class ProductListModule {
   constructor(private contextSelector: string) {}
 
   get visibleProducts() {
-    return cy.get(this.contextSelector).find('ish-product-item-container');
+    return cy.get(this.contextSelector).find('ish-product-item');
   }
 
   get visibleProductSKUs() {
     return cy
       .get(this.contextSelector)
-      .find('ish-product-item-container [data-testing-sku]')
+      .find('ish-product-item [data-testing-sku]')
       .then(array => {
         const skus = [];
         for (let index = 0; index < array.length; index++) {
@@ -29,24 +29,24 @@ export class ProductListModule {
   }
 
   productTile(sku: string) {
-    return cy.get(this.contextSelector).find(`ish-product-item-container div[data-testing-sku="${sku}"]`);
+    return cy.get(this.contextSelector).find(`ish-product-item div[data-testing-sku="${sku}"]`);
   }
 
   gotoProductDetailPageBySku(sku: string) {
     cy.get(this.contextSelector)
-      .find(`ish-product-item-container div[data-testing-sku="${sku}"]`)
+      .find(`ish-product-item div[data-testing-sku="${sku}"]`)
       .click();
   }
 
   addProductToCompareBySku(sku: string) {
     cy.get(this.contextSelector)
-      .find(`ish-product-item-container div[data-testing-sku="${sku}"] button.add-to-compare`)
+      .find(`ish-product-item div[data-testing-sku="${sku}"] button.add-to-compare`)
       .click();
   }
 
   addProductToQuoteRequest(sku: string) {
     cy.get(this.contextSelector)
-      .find(`ish-product-item-container div[data-testing-sku="${sku}"] [data-testing-id="addToQuoteButton"]`)
+      .find(`ish-product-item div[data-testing-sku="${sku}"] [data-testing-id="addToQuoteButton"]`)
       .click();
   }
 

e2e/cypress/integration/pages/shopping/quote-request.dialog.ts

@@ -1,5 +1,5 @@
 export class QuoteRequestDialog {
-  readonly tag = 'ish-product-add-to-quote-dialog-container';
+  readonly tag = 'ish-product-add-to-quote-dialog';
 
   private saveQuoteRequestButton = () => cy.get('[data-testing-id="saveQuoteRequest"]');
   private submitQuoteRequestButton = () => cy.get('[data-testing-id="submitQuoteRequest"]');

e2e/cypress/integration/pages/shopping/recently-viewed.page.ts

@@ -1,5 +1,5 @@
 export class RecentlyViewedPage {
-  readonly tag = 'ish-recently-page-container';
+  readonly tag = 'ish-recently-page';
 
   get recentlyViewedItems() {
     return cy.get('ish-recently-viewed-all ish-product-tile');

e2e/cypress/integration/pages/shopping/search-result.page.ts

@@ -10,7 +10,7 @@ export class SearchResultPage {
 
   readonly filterNavigation = new FilterNavigationModule();
 
-  readonly productList = new ProductListModule('ish-product-listing-container');
+  readonly productList = new ProductListModule('ish-product-listing');
 
   static navigateTo(term: string, page?: number) {
     cy.visit(`/search/${term}${page ? `?page=${page}` : ''}`);

e2e/test-universal.sh

@@ -14,8 +14,8 @@ universalTest() {
   [ "$res" -ne "0" ] && exit 1
 }
 
-universalTest 1 "${PWA_BASE_URL}/" "router-outlet><ish-home-page-container"
-universalTest 2 "${PWA_BASE_URL}/category/Computers.1835.151" "router-outlet><ish-category-page-container"
+universalTest 1 "${PWA_BASE_URL}/" "router-outlet><ish-home-page"
+universalTest 2 "${PWA_BASE_URL}/category/Computers.1835.151" "router-outlet><ish-category-page"
 universalTest 3 "${PWA_BASE_URL}/login" "Forgot your password?"
 universalTest 4 "${PWA_BASE_URL}/register" "Create Account"
 universalTest 5 "${PWA_BASE_URL}/category/Computers.1835" "<h1>Notebooks and PCs</h1>"

src/app/app.component.html

@@ -1,5 +1,5 @@
 <div [ngClass]="wrapperClasses$ | async">
-  <header data-testing-id="page-header" class="top"><ish-header-container></ish-header-container></header>
+  <header data-testing-id="page-header" class="top"><ish-header></ish-header></header>
 
   <div class="wrapper">
     <div role="main" class="container main-container" style="position: relative; min-height: 200px;">

src/app/app.component.spec.ts

@@ -11,8 +11,8 @@ import { findAllIshElements } from 'ish-core/utils/dev/html-query-utils';
 import { ngrxTesting } from 'ish-core/utils/dev/ngrx-testing';
 
 import { AppComponent } from './app.component';
-import { FooterComponent } from './shell/footer/components/footer/footer.component';
-import { HeaderContainerComponent } from './shell/header/containers/header/header.container';
+import { FooterComponent } from './shell/footer/footer/footer.component';
+import { HeaderComponent } from './shell/header/header/header.component';
 
 let translate: TranslateService;
 
@@ -26,7 +26,7 @@ describe('App Component', () => {
       declarations: [
         AppComponent,
         MockComponent(FooterComponent),
-        MockComponent(HeaderContainerComponent),
+        MockComponent(HeaderComponent),
         MockComponent(ServerHtmlDirective),
       ],
       imports: [
@@ -57,6 +57,6 @@ describe('App Component', () => {
   });
 
   it('should render header component on page', async(() => {
-    expect(findAllIshElements(element)).toContain('ish-header-container');
+    expect(findAllIshElements(element)).toContain('ish-header');
   }));
 });

src/app/core/guards/login.guard.ts

@@ -7,7 +7,7 @@ import { filter, first } from 'rxjs/operators';
 import { getUserAuthorized } from 'ish-core/store/user';
 import { getDeviceType } from 'ish-core/store/viewconf';
 import { whenTruthy } from 'ish-core/utils/operators';
-import { LazyLoginModalComponent } from 'ish-shell/header/components/lazy-login-modal/lazy-login-modal.component';
+import { LazyLoginModalComponent } from 'ish-shell/header/lazy-login-modal/lazy-login-modal.component';
 
 @Injectable({ providedIn: 'root' })
 export class LoginGuard implements CanActivate {

src/app/extensions/quoting/exports/account/components/lazy-quote-widget/lazy-quote-widget.component.ts → src/app/extensions/quoting/exports/account/lazy-quote-widget/lazy-quote-widget.component.ts

@@ -9,6 +9,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 export class LazyQuoteWidgetComponent {
   componentLocation = {
     moduleId: 'ish-extensions-quoting',
-    selector: 'ish-quote-widget-container',
+    selector: 'ish-quote-widget',
   };
 }

src/app/extensions/quoting/exports/basket/components/lazy-basket-add-to-quote/lazy-basket-add-to-quote.component.ts → src/app/extensions/quoting/exports/basket/lazy-basket-add-to-quote/lazy-basket-add-to-quote.component.ts

@@ -9,6 +9,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 export class LazyBasketAddToQuoteComponent {
   componentLocation = {
     moduleId: 'ish-extensions-quoting',
-    selector: 'ish-basket-add-to-quote-container',
+    selector: 'ish-basket-add-to-quote',
   };
 }

src/app/extensions/quoting/exports/product/components/lazy-product-add-to-quote/lazy-product-add-to-quote.component.ts → src/app/extensions/quoting/exports/product/lazy-product-add-to-quote/lazy-product-add-to-quote.component.ts

@@ -29,6 +29,6 @@ export class LazyProductAddToQuoteComponent {
 
   componentLocation = {
     moduleId: 'ish-extensions-quoting',
-    selector: 'ish-product-add-to-quote-container',
+    selector: 'ish-product-add-to-quote',
   };
 }

src/app/extensions/quoting/exports/quoting-exports.module.ts

@@ -3,9 +3,9 @@ import { ReactiveComponentLoaderModule } from '@wishtack/reactive-component-load
 
 import { FeatureToggleModule } from 'ish-core/feature-toggle.module';
 
-import { LazyQuoteWidgetComponent } from './account/components/lazy-quote-widget/lazy-quote-widget.component';
-import { LazyBasketAddToQuoteComponent } from './basket/components/lazy-basket-add-to-quote/lazy-basket-add-to-quote.component';
-import { LazyProductAddToQuoteComponent } from './product/components/lazy-product-add-to-quote/lazy-product-add-to-quote.component';
+import { LazyQuoteWidgetComponent } from './account/lazy-quote-widget/lazy-quote-widget.component';
+import { LazyBasketAddToQuoteComponent } from './basket/lazy-basket-add-to-quote/lazy-basket-add-to-quote.component';
+import { LazyProductAddToQuoteComponent } from './product/lazy-product-add-to-quote/lazy-product-add-to-quote.component';
 
 @NgModule({
   imports: [

src/app/extensions/quoting/pages/quote-edit/quote-edit-page.container.spec.ts → src/app/extensions/quoting/pages/quote-edit/quote-edit-page.component.spec.ts

@@ -7,30 +7,26 @@ import { MockComponent } from 'ng-mocks';
 
 import { shoppingReducers } from 'ish-core/store/shopping/shopping-store.module';
 import { ngrxTesting } from 'ish-core/utils/dev/ngrx-testing';
-import { LoadingComponent } from 'ish-shared/common/components/loading/loading.component';
+import { LoadingComponent } from 'ish-shared/components/common/loading/loading.component';
 
-import { QuoteEditComponent } from '../../shared/quote/components/quote-edit/quote-edit.component';
+import { QuoteEditComponent } from '../../shared/quote/quote-edit/quote-edit.component';
 import { LoadQuotes } from '../../store/quote';
 import { quotingReducers } from '../../store/quoting-store.module';
 
-import { QuoteEditPageContainerComponent } from './quote-edit-page.container';
+import { QuoteEditPageComponent } from './quote-edit-page.component';
 
-describe('Quote Edit Page Container', () => {
-  let component: QuoteEditPageContainerComponent;
-  let fixture: ComponentFixture<QuoteEditPageContainerComponent>;
+describe('Quote Edit Page Component', () => {
+  let component: QuoteEditPageComponent;
+  let fixture: ComponentFixture<QuoteEditPageComponent>;
   let element: HTMLElement;
   let store$: Store<{}>;
   let location: Location;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [
-        MockComponent(LoadingComponent),
-        MockComponent(QuoteEditComponent),
-        QuoteEditPageContainerComponent,
-      ],
+      declarations: [MockComponent(LoadingComponent), MockComponent(QuoteEditComponent), QuoteEditPageComponent],
       imports: [
-        RouterTestingModule.withRoutes([{ path: 'basket', component: QuoteEditPageContainerComponent }]),
+        RouterTestingModule.withRoutes([{ path: 'basket', component: QuoteEditPageComponent }]),
         TranslateModule.forRoot(),
         ngrxTesting({
           reducers: {
@@ -43,7 +39,7 @@ describe('Quote Edit Page Container', () => {
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(QuoteEditPageContainerComponent);
+    fixture = TestBed.createComponent(QuoteEditPageComponent);
     component = fixture.componentInstance;
     element = fixture.nativeElement;
 

src/app/extensions/quoting/pages/quote-edit/quote-edit-page.container.ts → src/app/extensions/quoting/pages/quote-edit/quote-edit-page.component.ts

@@ -10,11 +10,11 @@ import { QuotingFacade } from '../../facades/quoting.facade';
 import { Quote } from '../../models/quote/quote.model';
 
 @Component({
-  selector: 'ish-quote-edit-page-container',
-  templateUrl: './quote-edit-page.container.html',
+  selector: 'ish-quote-edit-page',
+  templateUrl: './quote-edit-page.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class QuoteEditPageContainerComponent implements OnInit {
+export class QuoteEditPageComponent implements OnInit {
   quote$: Observable<Quote>;
   quoteLoading$: Observable<boolean>;
   quoteError$: Observable<HttpError>;

src/app/extensions/quoting/pages/quote-edit/quote-edit-page.module.ts

@@ -3,12 +3,12 @@ import { RouterModule, Routes } from '@angular/router';
 
 import { QuotingModule } from '../../quoting.module';
 
-import { QuoteEditPageContainerComponent } from './quote-edit-page.container';
+import { QuoteEditPageComponent } from './quote-edit-page.component';
 
-const quoteEditPageRoutes: Routes = [{ path: ':quoteId', component: QuoteEditPageContainerComponent }];
+const quoteEditPageRoutes: Routes = [{ path: ':quoteId', component: QuoteEditPageComponent }];
 
 @NgModule({
-  declarations: [QuoteEditPageContainerComponent],
+  declarations: [QuoteEditPageComponent],
   imports: [QuotingModule, RouterModule.forChild(quoteEditPageRoutes)],
 })
 export class QuoteEditPageModule {}