Fix category hiding in Angular Material

Previously, the Angular Material category renderer didn't consider
categories' visbilities and always showed themy.
This prefilters visible categories before rendering them in
the template.

Fix unit test by moving the setting of the new UI schema in the
jsonFormsService after it was reassigned in the component.
With this, when the event is triggered on the subscription, the new schema is
already present. This is necessary for the new changes and also fixes
the previously commented out assertion.

packages/angular-material/src/layouts/categorization-layout.renderer.ts

@@ -26,8 +26,11 @@ import {
   and,
   Categorization,
   categorizationHasCategory,
+  Category,
   defaultJsonFormsI18nState,
   deriveLabelForUISchemaElement,
+  getAjv,
+  isVisible,
   JsonFormsState,
   Labelable,
   mapStateToLayoutProps,
@@ -47,7 +50,7 @@ import { Subscription } from 'rxjs';
   template: `
     <mat-tab-group dynamicHeight="true" [fxHide]="hidden">
       <mat-tab
-        *ngFor="let category of uischema.elements; let i = index"
+        *ngFor="let category of visibleCategories; let i = index"
         [label]="categoryLabels[i]"
       >
         <div *ngFor="let element of category.elements">
@@ -61,6 +64,7 @@ export class CategorizationTabLayoutRenderer
   extends JsonFormsBaseRenderer<Categorization>
   implements OnInit, OnDestroy {
   hidden: boolean;
+  visibleCategories: (Category | Categorization)[];
   private subscription: Subscription;
   categoryLabels: string[];
 
@@ -73,7 +77,9 @@ export class CategorizationTabLayoutRenderer
       next: (state: JsonFormsState) => {
         const props = mapStateToLayoutProps(state, this.getOwnProps());
         this.hidden = !props.visible;
-        this.categoryLabels = this.uischema.elements.map(
+        this.visibleCategories =  this.uischema.elements.filter((category: Category | Categorization) =>
+          isVisible(category, props.data, undefined, getAjv(state)));
+        this.categoryLabels = this.visibleCategories.map(
           element => deriveLabelForUISchemaElement(element as Labelable<boolean>,
             state.jsonforms.i18n?.translate ?? defaultJsonFormsI18nState.translate));
       }

packages/angular-material/test/categorization-tab-layout.spec.ts

@@ -271,9 +271,9 @@ describe('Categorization tab layout', () => {
           }
         ]
       };
-      getJsonFormsService(component).setUiSchema(newUischema);
       component.uischema = newUischema;
       fixture.detectChanges();
+      getJsonFormsService(component).setUiSchema(newUischema);
 
       fixture.whenRenderingDone().then(() => {
         fixture.detectChanges();
@@ -284,8 +284,7 @@ describe('Categorization tab layout', () => {
         expect(tabGroup2._tabs.length).toBe(3);
         const lastTab: MatTab = tabGroup2._tabs.last;
         expect(lastTab.isActive).toBeFalsy();
-        // there are update issues within the tests so that the new ui schema is not assigned to `this.uischema` within the renderer
-        // expect(lastTab.textLabel).toBe('quux');
+        expect(lastTab.textLabel).toBe('quux');
       });
     });
   }));