diff --git a/projects/neuroglia/angular-ngrx-component-store-odata-table/src/lib/odata-table.store.spec.ts b/projects/neuroglia/angular-ngrx-component-store-odata-table/src/lib/odata-table.store.spec.ts
index 72ede78..e1c61cf 100644
--- a/projects/neuroglia/angular-ngrx-component-store-odata-table/src/lib/odata-table.store.spec.ts
+++ b/projects/neuroglia/angular-ngrx-component-store-odata-table/src/lib/odata-table.store.spec.ts
@@ -17,743 +17,20 @@ const config: ODataTableConfig = {
columnDefinitions: [],
};
-const expectedMetadata: Metadata = {
- $Version: '4.0',
- $EntityContainer: 'Default.Container',
- 'BlazorWasm7Mssql.Models.Sample': {
- Order: {
- $Kind: 'EntityType',
- $Key: ['Id'],
- Id: {
- $Type: 'Edm.Int32',
- },
- UserName: {
- $Nullable: true,
- },
- OrderDate: {
- $Type: 'Edm.DateTimeOffset',
- $Precision: 0,
- },
- OrderDetails: {
- $Kind: 'NavigationProperty',
- $Collection: true,
- $Type: 'BlazorWasm7Mssql.Models.Sample.OrderDetail',
- },
- },
- OrderDetail: {
- $Kind: 'EntityType',
- $Key: ['Id'],
- Id: {
- $Type: 'Edm.Int32',
- },
- Quantity: {
- $Type: 'Edm.Int32',
- },
- OrderId: {
- $Type: 'Edm.Int32',
- $Nullable: true,
- },
- ProductId: {
- $Type: 'Edm.Int32',
- $Nullable: true,
- },
- Order: {
- $Kind: 'NavigationProperty',
- $Type: 'BlazorWasm7Mssql.Models.Sample.Order',
- $ReferentialConstraint: {
- OrderId: 'Id',
- },
- },
- Product: {
- $Kind: 'NavigationProperty',
- $Type: 'BlazorWasm7Mssql.Models.Sample.Product',
- $ReferentialConstraint: {
- ProductId: 'Id',
- },
- },
- },
- Product: {
- $Kind: 'EntityType',
- $Key: ['Id'],
- Id: {
- $Type: 'Edm.Int32',
- },
- ProductName: {
- $Nullable: true,
- },
- ProductPrice: {
- $Type: 'Edm.Decimal',
- },
- ProductPicture: {
- $Nullable: true,
- },
- OrderDetails: {
- $Kind: 'NavigationProperty',
- $Collection: true,
- $Type: 'BlazorWasm7Mssql.Models.Sample.OrderDetail',
- },
- },
- },
- 'BlazorWasm7Mssql.Models.Northwind': {
- Category: {
- $Kind: 'EntityType',
- $Key: ['CategoryID'],
- CategoryID: {
- $Type: 'Edm.Int32',
- },
- CategoryName: {
- $Nullable: true,
- },
- Description: {
- $Nullable: true,
- },
- Picture: {
- $Nullable: true,
- },
- NorthwindProducts: {
- $Kind: 'NavigationProperty',
- $Collection: true,
- $Type: 'BlazorWasm7Mssql.Models.Northwind.NorthwindProduct',
- },
- },
- Customer: {
- $Kind: 'EntityType',
- $Key: ['CustomerID'],
- CustomerID: {},
- CompanyName: {
- $Nullable: true,
- },
- ContactName: {
- $Nullable: true,
- },
- ContactTitle: {
- $Nullable: true,
- },
- Address: {
- $Nullable: true,
- },
- City: {
- $Nullable: true,
- },
- Region: {
- $Nullable: true,
- },
- PostalCode: {
- $Nullable: true,
- },
- Country: {
- $Nullable: true,
- },
- Phone: {
- $Nullable: true,
- },
- Fax: {
- $Nullable: true,
- },
- CustomerCustomerDemos: {
- $Kind: 'NavigationProperty',
- $Collection: true,
- $Type: 'BlazorWasm7Mssql.Models.Northwind.CustomerCustomerDemo',
- },
- NorthwindOrders: {
- $Kind: 'NavigationProperty',
- $Collection: true,
- $Type: 'BlazorWasm7Mssql.Models.Northwind.NorthwindOrder',
- },
- },
- CustomerCustomerDemo: {
- $Kind: 'EntityType',
- $Key: ['CustomerID', 'CustomerTypeID'],
- CustomerID: {
- $Nullable: true,
- },
- CustomerTypeID: {},
- Customer: {
- $Kind: 'NavigationProperty',
- $Type: 'BlazorWasm7Mssql.Models.Northwind.Customer',
- $ReferentialConstraint: {
- CustomerID: 'CustomerID',
- },
- },
- CustomerDemographic: {
- $Kind: 'NavigationProperty',
- $Type: 'BlazorWasm7Mssql.Models.Northwind.CustomerDemographic',
- },
- },
- CustomerDemographic: {
- $Kind: 'EntityType',
- $Key: ['CustomerTypeID'],
- CustomerTypeID: {},
- CustomerDesc: {
- $Nullable: true,
- },
- CustomerCustomerDemos: {
- $Kind: 'NavigationProperty',
- $Collection: true,
- $Type: 'BlazorWasm7Mssql.Models.Northwind.CustomerCustomerDemo',
- },
- },
- Employee: {
- $Kind: 'EntityType',
- $Key: ['EmployeeID'],
- EmployeeID: {
- $Type: 'Edm.Int32',
- $Nullable: true,
- },
- LastName: {
- $Nullable: true,
- },
- FirstName: {
- $Nullable: true,
- },
- Title: {
- $Nullable: true,
- },
- TitleOfCourtesy: {
- $Nullable: true,
- },
- BirthDate: {
- $Type: 'Edm.DateTimeOffset',
- $Nullable: true,
- $Precision: 0,
- },
- HireDate: {
- $Type: 'Edm.DateTimeOffset',
- $Nullable: true,
- $Precision: 0,
- },
- Address: {
- $Nullable: true,
- },
- City: {
- $Nullable: true,
- },
- Region: {
- $Nullable: true,
- },
- PostalCode: {
- $Nullable: true,
- },
- Country: {
- $Nullable: true,
- },
- HomePhone: {
- $Nullable: true,
- },
- Extension: {
- $Nullable: true,
- },
- Photo: {
- $Nullable: true,
- },
- Notes: {
- $Nullable: true,
- },
- ReportsTo: {
- $Type: 'Edm.Int32',
- $Nullable: true,
- },
- PhotoPath: {
- $Nullable: true,
- },
- Employees1: {
- $Kind: 'NavigationProperty',
- $Collection: true,
- $Type: 'BlazorWasm7Mssql.Models.Northwind.Employee',
- },
- EmployeeTerritories: {
- $Kind: 'NavigationProperty',
- $Collection: true,
- $Type: 'BlazorWasm7Mssql.Models.Northwind.EmployeeTerritory',
- },
- NorthwindOrders: {
- $Kind: 'NavigationProperty',
- $Collection: true,
- $Type: 'BlazorWasm7Mssql.Models.Northwind.NorthwindOrder',
- },
- Employee1: {
- $Kind: 'NavigationProperty',
- $Type: 'BlazorWasm7Mssql.Models.Northwind.Employee',
- $ReferentialConstraint: {
- EmployeeID: 'EmployeeID',
- },
- },
- },
- EmployeeTerritory: {
- $Kind: 'EntityType',
- $Key: ['EmployeeID', 'TerritoryID'],
- EmployeeID: {
- $Type: 'Edm.Int32',
- $Nullable: true,
- },
- TerritoryID: {
- $Nullable: true,
- },
- Employee: {
- $Kind: 'NavigationProperty',
- $Type: 'BlazorWasm7Mssql.Models.Northwind.Employee',
- $ReferentialConstraint: {
- EmployeeID: 'EmployeeID',
- },
- },
- Territory: {
- $Kind: 'NavigationProperty',
- $Type: 'BlazorWasm7Mssql.Models.Northwind.Territory',
- $ReferentialConstraint: {
- TerritoryID: 'TerritoryID',
- },
- },
- },
- NorthwindOrder: {
- $Kind: 'EntityType',
- $Key: ['OrderID'],
- OrderID: {
- $Type: 'Edm.Int32',
- },
- CustomerID: {
- $Nullable: true,
- },
- EmployeeID: {
- $Type: 'Edm.Int32',
- $Nullable: true,
- },
- OrderDate: {
- $Type: 'Edm.DateTimeOffset',
- $Nullable: true,
- $Precision: 0,
- },
- RequiredDate: {
- $Type: 'Edm.DateTimeOffset',
- $Nullable: true,
- $Precision: 0,
- },
- ShippedDate: {
- $Type: 'Edm.DateTimeOffset',
- $Nullable: true,
- $Precision: 0,
- },
- ShipVia: {
- $Type: 'Edm.Int32',
- $Nullable: true,
- },
- Freight: {
- $Type: 'Edm.Decimal',
- $Nullable: true,
- },
- ShipName: {
- $Nullable: true,
- },
- ShipAddress: {
- $Nullable: true,
- },
- ShipCity: {
- $Nullable: true,
- },
- ShipRegion: {
- $Nullable: true,
- },
- ShipPostalCode: {
- $Nullable: true,
- },
- ShipCountry: {
- $Nullable: true,
- },
- NorthwindOrderDetails: {
- $Kind: 'NavigationProperty',
- $Collection: true,
- $Type: 'BlazorWasm7Mssql.Models.Northwind.NorthwindOrderDetail',
- },
- Customer: {
- $Kind: 'NavigationProperty',
- $Type: 'BlazorWasm7Mssql.Models.Northwind.Customer',
- $ReferentialConstraint: {
- CustomerID: 'CustomerID',
- },
- },
- Employee: {
- $Kind: 'NavigationProperty',
- $Type: 'BlazorWasm7Mssql.Models.Northwind.Employee',
- $ReferentialConstraint: {
- EmployeeID: 'EmployeeID',
- },
- },
- Shipper: {
- $Kind: 'NavigationProperty',
- $Type: 'BlazorWasm7Mssql.Models.Northwind.Shipper',
- },
- },
- NorthwindOrderDetail: {
- $Kind: 'EntityType',
- $Key: ['OrderID', 'ProductID'],
- OrderID: {
- $Type: 'Edm.Int32',
- },
- ProductID: {
- $Type: 'Edm.Int32',
- },
- UnitPrice: {
- $Type: 'Edm.Double',
- },
- Quantity: {
- $Type: 'Edm.Int16',
- },
- Discount: {
- $Type: 'Edm.Single',
- },
- NorthwindOrder: {
- $Kind: 'NavigationProperty',
- $Type: 'BlazorWasm7Mssql.Models.Northwind.NorthwindOrder',
- },
- NorthwindProduct: {
- $Kind: 'NavigationProperty',
- $Type: 'BlazorWasm7Mssql.Models.Northwind.NorthwindProduct',
- },
- },
- NorthwindProduct: {
- $Kind: 'EntityType',
- $Key: ['ProductID'],
- ProductID: {
- $Type: 'Edm.Int32',
- },
- ProductName: {
- $Nullable: true,
- },
- SupplierID: {
- $Type: 'Edm.Int32',
- $Nullable: true,
- },
- CategoryID: {
- $Type: 'Edm.Int32',
- $Nullable: true,
- },
- QuantityPerUnit: {
- $Nullable: true,
- },
- UnitPrice: {
- $Type: 'Edm.Decimal',
- $Nullable: true,
- },
- UnitsInStock: {
- $Type: 'Edm.Int16',
- $Nullable: true,
- },
- UnitsOnOrder: {
- $Type: 'Edm.Int16',
- $Nullable: true,
- },
- ReorderLevel: {
- $Type: 'Edm.Int16',
- $Nullable: true,
- },
- Discontinued: {
- $Type: 'Edm.Boolean',
- },
- NorthwindOrderDetails: {
- $Kind: 'NavigationProperty',
- $Collection: true,
- $Type: 'BlazorWasm7Mssql.Models.Northwind.NorthwindOrderDetail',
- },
- Supplier: {
- $Kind: 'NavigationProperty',
- $Type: 'BlazorWasm7Mssql.Models.Northwind.Supplier',
- $ReferentialConstraint: {
- SupplierID: 'SupplierID',
- },
- },
- Category: {
- $Kind: 'NavigationProperty',
- $Type: 'BlazorWasm7Mssql.Models.Northwind.Category',
- $ReferentialConstraint: {
- CategoryID: 'CategoryID',
- },
- },
- },
- Region: {
- $Kind: 'EntityType',
- $Key: ['RegionID'],
- RegionID: {
- $Type: 'Edm.Int32',
- },
- RegionDescription: {
- $Nullable: true,
- },
- Territories: {
- $Kind: 'NavigationProperty',
- $Collection: true,
- $Type: 'BlazorWasm7Mssql.Models.Northwind.Territory',
- },
- },
- Shipper: {
- $Kind: 'EntityType',
- $Key: ['ShipperID'],
- ShipperID: {
- $Type: 'Edm.Int32',
- },
- CompanyName: {
- $Nullable: true,
- },
- Phone: {
- $Nullable: true,
- },
- NorthwindOrders: {
- $Kind: 'NavigationProperty',
- $Collection: true,
- $Type: 'BlazorWasm7Mssql.Models.Northwind.NorthwindOrder',
- },
- },
- Supplier: {
- $Kind: 'EntityType',
- $Key: ['SupplierID'],
- SupplierID: {
- $Type: 'Edm.Int32',
- },
- CompanyName: {
- $Nullable: true,
- },
- ContactName: {
- $Nullable: true,
- },
- ContactTitle: {
- $Nullable: true,
- },
- Address: {
- $Nullable: true,
- },
- City: {
- $Nullable: true,
- },
- Region: {
- $Nullable: true,
- },
- PostalCode: {
- $Nullable: true,
- },
- Country: {
- $Nullable: true,
- },
- Phone: {
- $Nullable: true,
- },
- Fax: {
- $Nullable: true,
- },
- HomePage: {
- $Nullable: true,
- },
- NorthwindProducts: {
- $Kind: 'NavigationProperty',
- $Collection: true,
- $Type: 'BlazorWasm7Mssql.Models.Northwind.NorthwindProduct',
- },
- },
- Territory: {
- $Kind: 'EntityType',
- $Key: ['TerritoryID'],
- TerritoryID: {},
- TerritoryDescription: {
- $Nullable: true,
- },
- RegionID: {
- $Type: 'Edm.Int32',
- $Nullable: true,
- },
- EmployeeTerritories: {
- $Kind: 'NavigationProperty',
- $Collection: true,
- $Type: 'BlazorWasm7Mssql.Models.Northwind.EmployeeTerritory',
- },
- Region: {
- $Kind: 'NavigationProperty',
- $Type: 'BlazorWasm7Mssql.Models.Northwind.Region',
- $ReferentialConstraint: {
- RegionID: 'RegionID',
- },
- },
- },
- TestCustomers: {
- $Kind: 'EntityType',
- $Key: ['CustomerID'],
- CustomerID: {},
- CompanyName: {
- $Nullable: true,
- },
- ContactName: {
- $Nullable: true,
- },
- ContactTitle: {
- $Nullable: true,
- },
- Address: {
- $Nullable: true,
- },
- City: {
- $Nullable: true,
- },
- Region: {
- $Nullable: true,
- },
- PostalCode: {
- $Nullable: true,
- },
- Country: {
- $Nullable: true,
- },
- Phone: {
- $Nullable: true,
- },
- Fax: {
- $Nullable: true,
- },
- },
- },
- Default: {
- Container: {
- $Kind: 'EntityContainer',
- Orders: {
- $Collection: true,
- $Type: 'BlazorWasm7Mssql.Models.Sample.Order',
- $NavigationPropertyBinding: {
- OrderDetails: 'OrderDetails',
- },
- },
- OrderDetails: {
- $Collection: true,
- $Type: 'BlazorWasm7Mssql.Models.Sample.OrderDetail',
- $NavigationPropertyBinding: {
- Order: 'Orders',
- Product: 'Products',
- },
- },
- Products: {
- $Collection: true,
- $Type: 'BlazorWasm7Mssql.Models.Sample.Product',
- $NavigationPropertyBinding: {
- OrderDetails: 'OrderDetails',
- },
- },
- Categories: {
- $Collection: true,
- $Type: 'BlazorWasm7Mssql.Models.Northwind.Category',
- $NavigationPropertyBinding: {
- NorthwindProducts: 'NorthwindProducts',
- },
- },
- Customers: {
- $Collection: true,
- $Type: 'BlazorWasm7Mssql.Models.Northwind.Customer',
- $NavigationPropertyBinding: {
- CustomerCustomerDemos: 'CustomerCustomerDemos',
- NorthwindOrders: 'NorthwindOrders',
- },
- },
- CustomerCustomerDemos: {
- $Collection: true,
- $Type: 'BlazorWasm7Mssql.Models.Northwind.CustomerCustomerDemo',
- $NavigationPropertyBinding: {
- Customer: 'Customers',
- CustomerDemographic: 'CustomerDemographics',
- },
- },
- CustomerDemographics: {
- $Collection: true,
- $Type: 'BlazorWasm7Mssql.Models.Northwind.CustomerDemographic',
- $NavigationPropertyBinding: {
- CustomerCustomerDemos: 'CustomerCustomerDemos',
- },
- },
- Employees: {
- $Collection: true,
- $Type: 'BlazorWasm7Mssql.Models.Northwind.Employee',
- $NavigationPropertyBinding: {
- Employee1: 'Employees',
- Employees1: 'Employees',
- EmployeeTerritories: 'EmployeeTerritories',
- NorthwindOrders: 'NorthwindOrders',
- },
- },
- EmployeeTerritories: {
- $Collection: true,
- $Type: 'BlazorWasm7Mssql.Models.Northwind.EmployeeTerritory',
- $NavigationPropertyBinding: {
- Employee: 'Employees',
- Territory: 'Territories',
- },
- },
- NorthwindOrders: {
- $Collection: true,
- $Type: 'BlazorWasm7Mssql.Models.Northwind.NorthwindOrder',
- $NavigationPropertyBinding: {
- Customer: 'Customers',
- Employee: 'Employees',
- NorthwindOrderDetails: 'NorthwindOrderDetails',
- Shipper: 'Shippers',
- },
- },
- NorthwindOrderDetails: {
- $Collection: true,
- $Type: 'BlazorWasm7Mssql.Models.Northwind.NorthwindOrderDetail',
- $NavigationPropertyBinding: {
- NorthwindOrder: 'NorthwindOrders',
- NorthwindProduct: 'NorthwindProducts',
- },
- },
- NorthwindProducts: {
- $Collection: true,
- $Type: 'BlazorWasm7Mssql.Models.Northwind.NorthwindProduct',
- $NavigationPropertyBinding: {
- Category: 'Categories',
- NorthwindOrderDetails: 'NorthwindOrderDetails',
- Supplier: 'Suppliers',
- },
- },
- Regions: {
- $Collection: true,
- $Type: 'BlazorWasm7Mssql.Models.Northwind.Region',
- $NavigationPropertyBinding: {
- Territories: 'Territories',
- },
- },
- Shippers: {
- $Collection: true,
- $Type: 'BlazorWasm7Mssql.Models.Northwind.Shipper',
- $NavigationPropertyBinding: {
- NorthwindOrders: 'NorthwindOrders',
- },
- },
- Suppliers: {
- $Collection: true,
- $Type: 'BlazorWasm7Mssql.Models.Northwind.Supplier',
- $NavigationPropertyBinding: {
- NorthwindProducts: 'NorthwindProducts',
- },
- },
- Territories: {
- $Collection: true,
- $Type: 'BlazorWasm7Mssql.Models.Northwind.Territory',
- $NavigationPropertyBinding: {
- EmployeeTerritories: 'EmployeeTerritories',
- Region: 'Regions',
- },
- },
- TestCustomers: {
- $Collection: true,
- $Type: 'BlazorWasm7Mssql.Models.Northwind.TestCustomers',
- },
- },
- },
-};
-
describe('OData Table Store', () => {
let store: ODataTableStore;
+ let expectedMetadata: Metadata;
let expectedProductsResponse: ODataQueryResultDto<unknown>;
let expectedProductsWithSuppliersResponse: ODataQueryResultDto<unknown>;
beforeAll((done) => {
combineLatest([
+ from(fetch(testEndpoint + '$metadata?$format=json').then((res) => res.json())),
from(fetch(testEndpoint + config.entityName + '?$count=true').then((res) => res.json())),
from(fetch(testEndpoint + config.entityName + '?$count=true&expand=Supplier').then((res) => res.json())),
]).subscribe({
- next: ([products, productsWithSuppliers]) => {
+ next: ([metadata, products, productsWithSuppliers]) => {
+ expectedMetadata = metadata;
expectedProductsResponse = products;
expectedProductsWithSuppliersResponse = productsWithSuppliers;
done();
diff --git a/projects/neuroglia/angular-ui-material-odata-table/src/lib/angular-material-odata-table.component.spec.ts b/projects/neuroglia/angular-ui-material-odata-table/src/lib/angular-material-odata-table.component.spec.ts
index 26e386c..f2f7466 100644
--- a/projects/neuroglia/angular-ui-material-odata-table/src/lib/angular-material-odata-table.component.spec.ts
+++ b/projects/neuroglia/angular-ui-material-odata-table/src/lib/angular-material-odata-table.component.spec.ts
@@ -1,13 +1,113 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, ComponentFixtureAutoDetect, TestBed, fakeAsync } from '@angular/core/testing';
-import { NeurogliaNgMatDataTableComponent } from './angular-ui-material-odata-table.component';
+import { NeurogliaNgMatDataTableComponent } from './angular-material-odata-table.component';
+import { provideHttpClient } from '@angular/common/http';
+import { NamedLoggingServiceFactory } from '@neuroglia/angular-logging';
+import { HttpErrorObserverService, ODataQueryResultDto, UrlHelperService } from '@neuroglia/angular-rest-core';
+import { KeycloakService } from 'keycloak-angular';
+import { Metadata, ODataTableConfig, ODataTableStore } from '@neuroglia/angular-ngrx-component-store-odata-table';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { NeurogliaNgCommonModule } from '@neuroglia/angular-common';
+import { NeurogliaNgMatQueryableDataTableModule } from '@neuroglia/angular-ui-material-queryable-table';
+import { MatTableModule } from '@angular/material/table';
+import { MatSortModule } from '@angular/material/sort';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatSelectModule } from '@angular/material/select';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { NeurogliaNgUiJsonPresenterModule } from '@neuroglia/angular-ui-json-presenter';
+import { combineLatest, filter, from, take } from 'rxjs';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import {
+ expandRowColumnDefinition,
+ selectRowColumnDefinition,
+} from '@neuroglia/angular-ngrx-component-store-queryable-table';
+import { humanCase } from '@neuroglia/common';
+
+const testEndpoint = 'https://services.radzen.com/odata/Northwind/';
+
+const config: ODataTableConfig = {
+ dataSourceType: 'odata',
+ serviceUrl: testEndpoint,
+ entityName: 'NorthwindProducts',
+ useMetadata: true,
+ columnDefinitions: [],
+};
describe('NeurogliaNgMatDataTableComponent', () => {
- let component: NeurogliaNgMatDataTableComponent;
+ let expectedMetadata: Metadata;
+ let expectedProductsResponse: ODataQueryResultDto<unknown>;
+ let expectedProductsWithSuppliersResponse: ODataQueryResultDto<unknown>;
let fixture: ComponentFixture<NeurogliaNgMatDataTableComponent>;
+ let component: NeurogliaNgMatDataTableComponent;
+ let componentElement: HTMLElement;
+
+ beforeAll((done) => {
+ combineLatest([
+ from(fetch(testEndpoint + '$metadata?$format=json').then((res) => res.json())),
+ from(fetch(testEndpoint + config.entityName + '?$count=true').then((res) => res.json())),
+ from(fetch(testEndpoint + config.entityName + '?$count=true&expand=Supplier').then((res) => res.json())),
+ ]).subscribe({
+ next: ([metadata, products, productsWithSuppliers]) => {
+ expectedMetadata = metadata;
+ expectedProductsResponse = products;
+ expectedProductsWithSuppliersResponse = productsWithSuppliers;
+ done();
+ },
+ error: (err) => {
+ throw err;
+ },
+ });
+ });
beforeEach(async () => {
+ jasmine.DEFAULT_TIMEOUT_INTERVAL = 60000;
await TestBed.configureTestingModule({
+ providers: [
+ { provide: ComponentFixtureAutoDetect, useValue: true },
+ provideHttpClient(),
+ NamedLoggingServiceFactory,
+ HttpErrorObserverService,
+ UrlHelperService,
+ KeycloakService,
+ ODataTableStore,
+ ],
+ imports: [
+ NoopAnimationsModule,
+ FormsModule,
+ ReactiveFormsModule,
+ RouterModule,
+ NeurogliaNgCommonModule,
+ NeurogliaNgMatQueryableDataTableModule,
+
+ MatTableModule,
+ MatSortModule,
+ MatPaginatorModule,
+ MatProgressBarModule,
+ MatDialogModule,
+ MatIconModule,
+ MatFormFieldModule,
+ MatInputModule,
+ MatButtonModule,
+ MatSelectModule,
+ MatCheckboxModule,
+ MatButtonToggleModule,
+ MatExpansionModule,
+ MatDatepickerModule,
+ DragDropModule,
+
+ NeurogliaNgUiJsonPresenterModule,
+ ],
declarations: [NeurogliaNgMatDataTableComponent],
}).compileComponents();
});
@@ -15,10 +115,71 @@ describe('NeurogliaNgMatDataTableComponent', () => {
beforeEach(() => {
fixture = TestBed.createComponent(NeurogliaNgMatDataTableComponent);
component = fixture.componentInstance;
+ componentElement = fixture.nativeElement;
fixture.detectChanges();
});
- it('should create', () => {
- expect(component).toBeTruthy();
+ it('should display the data table', async () => {
+ component.isLoading$
+ .pipe(
+ filter((isLoading) => !isLoading),
+ take(1),
+ )
+ .subscribe({
+ next: async () => {
+ fixture.detectChanges();
+ },
+ });
+ fixture.componentRef.setInput('configuration', config);
+ fixture.detectChanges();
+ return fixture.whenStable().then(() => {
+ let expectedColumns = Object.entries(expectedMetadata['BlazorWasm7Mssql.Models.Northwind'].NorthwindProduct)
+ .filter(
+ ([key, info]: [string, any]) =>
+ !key.startsWith('$') && !info.$Collection && info.$Kind !== 'NavigationProperty',
+ )
+ .map(([key]) => key);
+ if (config.enableSelection === true) {
+ expectedColumns = [selectRowColumnDefinition.name, ...expectedColumns];
+ }
+ if (config.enableRowExpansion === true) {
+ expectedColumns = [expandRowColumnDefinition.name, ...expectedColumns];
+ }
+ let expectedColumnsCount = expectedColumns.length;
+ const facade = componentElement.querySelector('neuroglia-mat-queryable-table-facade');
+ const progressBar = componentElement.querySelector('mat-progress-bar');
+ const queryableTableEntry = componentElement.querySelector('neuroglia-mat-queryable-table-table');
+ const responsiveTable = componentElement.querySelector('.responsive-table > table');
+ const thead = responsiveTable?.querySelector('thead');
+ const headers = Array.from(thead?.querySelectorAll('th') || []);
+ const tbody = responsiveTable?.querySelector('tbody');
+ const rows = Array.from(tbody?.querySelectorAll('tr') || []);
+ const tfoot = responsiveTable?.querySelector('tfoot');
+ const footer = componentElement.querySelector('.table-footer');
+ const enableColumnSettings = footer?.querySelector('.column-settings');
+ const paginator = footer?.querySelector('mat-paginator');
+
+ expect(component).withContext('component').toBeDefined();
+ expect(facade).withContext('facade').toBeDefined();
+ expect(progressBar).withContext('progressBar').toBeDefined();
+ expect(queryableTableEntry).withContext('queryableTableEntry').toBeDefined();
+ expect(responsiveTable).withContext('responsiveTable').toBeDefined();
+ expect(thead).withContext('thead').toBeDefined();
+ expect(tbody).withContext('tbody').toBeDefined();
+ expect(tfoot).withContext('tfoot').toBeDefined();
+ expect(footer).withContext('footer').toBeDefined();
+ if (config.enableColumnSettings === false) {
+ expect(enableColumnSettings).withContext('enableColumnSettings').toBeFalsy();
+ } else {
+ expect(enableColumnSettings).withContext('enableColumnSettings').toBeDefined();
+ }
+ expect(paginator).withContext('paginator').toBeDefined();
+ expect(headers.length).withContext('headers count').toBe(expectedColumnsCount);
+ expect(rows.length).withContext('rows count').toBe(20);
+ expectedColumns.forEach((column, index) => {
+ const humanColumn = humanCase(column, true);
+ expect(headers[index].textContent).withContext(`header '${humanColumn}'(#${index})`).toContain(humanColumn);
+ });
+ });
});
});
diff --git a/projects/neuroglia/angular-ui-material-odata-table/src/lib/material-odata-table.store.ts b/projects/neuroglia/angular-ui-material-odata-table/src/lib/material-odata-table.store.ts
index 65293f1..3c9eb51 100644
--- a/projects/neuroglia/angular-ui-material-odata-table/src/lib/material-odata-table.store.ts
+++ b/projects/neuroglia/angular-ui-material-odata-table/src/lib/material-odata-table.store.ts
@@ -30,7 +30,7 @@ export class MaterialODataTableStore<
/**
* Shows a filter's dialog and handles the return
*/
- showFilterDialog(dialogType: Type<any>, columnDefinition: ColumnDefinition, filter: Filter | null) {
+ showFilterDialog(dialogType: Type<any>, columnDefinition: ColumnDefinition, filter: Filter | null): void {
const config = new MatDialogConfig();
config.data = { columnDefinition, filter } as FilterDialogData;
const dialogRef = this.dialog.open(dialogType, config);
@@ -57,7 +57,7 @@ export class MaterialODataTableStore<
/**
* Shows the columns settings dialog and handles the return
*/
- showColumnSettingsDialog() {
+ showColumnSettingsDialog(): void {
const config = new MatDialogConfig();
const columnDefinitions = this.get((state) => state.columnDefinitions)
.sort((prev, next) => (prev.position || 9999) - (next.position || 9999))
diff --git a/projects/neuroglia/angular-ui-material-queryable-table/src/lib/angular-material-queryable-table-facade.component.html b/projects/neuroglia/angular-ui-material-queryable-table/src/lib/angular-material-queryable-table-facade.component.html
index 269f301..0804a29 100644
--- a/projects/neuroglia/angular-ui-material-queryable-table/src/lib/angular-material-queryable-table-facade.component.html
+++ b/projects/neuroglia/angular-ui-material-queryable-table/src/lib/angular-material-queryable-table-facade.component.html
@@ -44,38 +44,24 @@
color="accent"
></mat-progress-bar>
<neuroglia-mat-queryable-table-table
- *ngIf="
- viewModel.dataSourceType &&
- viewModel.columnDefinitions &&
- viewModel.displayedColumns &&
- viewModel.count != null &&
- viewModel.filters &&
- viewModel.stickHeader &&
- viewModel.serviceUrl &&
- viewModel.entityName &&
- viewModel.enableSelection != null &&
- viewModel.selectedRows &&
- viewModel.enableRowExpansion &&
- viewModel.enableColumnSettings
- "
[table]="parent"
- [dataSourceType]="viewModel.dataSourceType"
+ [dataSourceType]="viewModel.dataSourceType!"
[dataSource]="viewModel.data"
- [columnDefinitions]="viewModel.columnDefinitions"
- [displayedColumns]="viewModel.displayedColumns"
+ [columnDefinitions]="viewModel.columnDefinitions!"
+ [displayedColumns]="viewModel.displayedColumns!"
[pageSize]="viewModel.pageSize"
[pageIndex]="viewModel.pageIndex"
- [count]="viewModel.count"
+ [count]="viewModel.count!"
[sort]="viewModel.sort"
- [filters]="viewModel.filters"
- [stickHeader]="viewModel.stickHeader"
- [serviceUrl]="viewModel.serviceUrl"
- [entityName]="viewModel.entityName"
- [enableSelection]="viewModel.enableSelection"
- [selectedRows]="viewModel.selectedRows"
- [enableRowExpansion]="viewModel.enableRowExpansion"
+ [filters]="viewModel.filters!"
+ [stickHeader]="viewModel.stickHeader!"
+ [serviceUrl]="viewModel.serviceUrl!"
+ [entityName]="viewModel.entityName!"
+ [enableSelection]="viewModel.enableSelection!"
+ [selectedRows]="viewModel.selectedRows!"
+ [enableRowExpansion]="viewModel.enableRowExpansion!"
[expandedRow]="viewModel.expandedRow"
- [enableColumnSettings]="viewModel.enableColumnSettings"
+ [enableColumnSettings]="viewModel.enableColumnSettings!"
(rowClicked)="parent.rowClicked.emit($event)"
(rowExpanded)="parent.onExpandRow($event)"
(selectionChange)="parent.onSelectionChange($event)"
diff --git a/projects/neuroglia/angular-ui-material-queryable-table/src/lib/components/table/table.component.html b/projects/neuroglia/angular-ui-material-queryable-table/src/lib/components/table/table.component.html
index c480da4..b710a23 100644
--- a/projects/neuroglia/angular-ui-material-queryable-table/src/lib/components/table/table.component.html
+++ b/projects/neuroglia/angular-ui-material-queryable-table/src/lib/components/table/table.component.html
@@ -83,7 +83,7 @@
</table>
</div>
<div class="table-footer">
- <button *ngIf="enableColumnSettings" mat-icon-button aria-label="Columns settings" (click)="showColumnSettings.emit()">
+ <button *ngIf="enableColumnSettings" class="column-settings" mat-icon-button aria-label="Columns settings" (click)="showColumnSettings.emit()">
<mat-icon>settings</mat-icon>
</button>
<mat-paginator