@axinom/mosaic-ui 0.49.0-rc.1 → 0.49.0-rc.10

package/dist/{components/DynamicDataList/helpers/generateId.d.ts → utils/GenerateId.d.ts}

@@ -3,4 +3,4 @@
  * @returns UUID
  */
 export declare const uuid: () => string;
-//# sourceMappingURL=generateId.d.ts.map
+//# sourceMappingURL=GenerateId.d.ts.map

package/dist/utils/GenerateId.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GenerateId.d.ts","sourceRoot":"","sources":["../../src/utils/GenerateId.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,IAAI,QAAO,MAKvB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.49.0-rc.1",
+  "version": "0.49.0-rc.10",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -32,7 +32,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@axinom/mosaic-core": "^0.4.22-rc.1",
+    "@axinom/mosaic-core": "^0.4.22-rc.10",
     "@faker-js/faker": "^7.4.0",
     "@popperjs/core": "^2.11.8",
     "clsx": "^1.1.0",
@@ -105,5 +105,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "12934f9943fdd118ce15a3f5f274826e649d23fc"
+  "gitHead": "130dddd0b1efabb2f50d5cf5455e4f48f7309b34"
 }

package/src/components/DynamicDataList/DynamicDataList.spec.tsx

@@ -9,7 +9,8 @@ import { DynamicListRow } from './DynamicListRow/DynamicListRow';
 import { useDataHandler } from './helpers/useDataHandler';
 
 jest.mock('./helpers/useDataHandler');
-jest.mock('./helpers/generateId', () => ({
+
+jest.mock('../../utils/GenerateId', () => ({
   uuid: jest.fn().mockReturnValue('test-uuid'),
 }));
 

package/src/components/DynamicDataList/DynamicDataList.tsx

@@ -10,6 +10,7 @@ import {
 import { OptionalObjectSchema } from 'yup/lib/object';
 import { noop } from '../../helpers/utils';
 import { Data } from '../../types/data';
+import { uuid } from '../../utils/GenerateId';
 import { ActionData } from '../Actions';
 import { ObjectSchemaDefinition } from '../FormStation';
 import { DynamicListColumn } from './DynamicDataList.model';
@@ -21,7 +22,6 @@ import {
 } from './DynamicListDataEntry/DynamicListDataEntry';
 import { DynamicListHeader } from './DynamicListHeader/DynamicListHeader';
 import { DynamicListRow } from './DynamicListRow/DynamicListRow';
-import { uuid } from './helpers/generateId';
 import { useColumnDefs } from './helpers/useColumnDefs';
 import { useDataHandler } from './helpers/useDataHandler';
 import { useRowAnimation } from './helpers/useRowAnimation';

package/src/components/DynamicDataList/DynamicListRow/DynamicListRow.spec.tsx

@@ -407,6 +407,43 @@ describe('DynamicListRow', () => {
     expect(input.prop('value')).toBe(dataWithPosition.position);
   });
 
+  describe('DynamicListRow column text alignments', () => {
+    const alignments: {
+      horizontal: 'left' | 'right' | 'center' | undefined;
+      vertical: 'center' | 'start' | 'end' | undefined;
+    }[] = [
+      { horizontal: 'center', vertical: 'center' },
+      { horizontal: 'left', vertical: 'start' },
+      { horizontal: 'right', vertical: 'end' },
+      { horizontal: undefined, vertical: undefined },
+    ];
+
+    alignments.forEach(({ horizontal, vertical }) => {
+      it(`should apply the correct styles for justify-content: ${horizontal}, align-items: ${vertical}`, () => {
+        const wrapper = mount(
+          <DynamicListRow
+            columns={defaultColumns}
+            columnSizes={defaultProps.columnSizes}
+            data={dataWithPosition}
+            positionKey={'position'}
+            showPositionColumn={true}
+            horizontalTextAlign={horizontal}
+            verticalTextAlign={vertical}
+          />,
+        );
+
+        const wrapperDivs = wrapper.find('.wrapper');
+
+        wrapperDivs.forEach((node) => {
+          const style = node.prop('style');
+
+          expect(style).toHaveProperty('justifyContent', horizontal);
+          expect(style).toHaveProperty('alignItems', vertical);
+        });
+      });
+    });
+  });
+
   describe('tooltip', () => {
     it(`renders a tooltip using the 'title' html attribute by default`, () => {
       const wrapper = shallow(

package/src/components/DynamicDataList/DynamicListRow/DynamicListRow.tsx

@@ -179,6 +179,10 @@ export const DynamicListRow = <T extends Data>({
                 column.dataEntryRender !== undefined && allowEditing,
             })}
             key={column.key ?? (column.propertyName as string)}
+            style={{
+              justifyContent: horizontalTextAlign,
+              alignItems: verticalTextAlign,
+            }}
           >
             <div
               className={classes.column}

package/src/components/Explorer/Explorer.spec.tsx

@@ -24,7 +24,7 @@ import { MessageBar } from '../MessageBar';
 import { StationError } from '../models';
 import { PageHeaderAction } from '../PageHeader';
 import { PageHeader } from '../PageHeader/PageHeader';
-import { PageHeaderBulkActions } from '../PageHeader/PageHeaderBulkActions/PageHeaderBulkActions';
+import { PageHeaderActionsGroup } from '../PageHeader/PageHeaderActionsGroup/PageHeaderActionsGroup';
 import * as GS from '../Utils/State/GlobalState';
 import { Explorer, ExplorerProps } from './Explorer';
 import {
@@ -34,6 +34,10 @@ import {
 } from './Explorer.model';
 import { StationMessage } from './useStationMessage';
 
+jest.mock('../../utils/GenerateId', () => ({
+  uuid: jest.fn().mockReturnValue('test-uuid'),
+}));
+
 interface ExplorerTestData {
   id: number;
   title: string;
@@ -152,7 +156,6 @@ describe('Explorer', () => {
             columns={[{ propertyName: 'id' }]}
             dataProvider={provider}
             stationKey="mock-key"
-            openBulkActionsOnStart={true}
             bulkActions={[{ label: 'Something', onClick: jest.fn() }]}
           />,
         );
@@ -166,8 +169,9 @@ describe('Explorer', () => {
         await wrapper.update();
       });
 
-      wrapper.update();
-      expect(wrapper.find(PageHeader).prop('bulkActionsDisabled')).toBe(true);
+      expect(
+        wrapper.find(PageHeaderActionsGroup).prop('groupActionsDisabled'),
+      ).toBe(true);
     });
 
     it('enables bulk actions if filtered results are returned', async () => {
@@ -203,7 +207,10 @@ describe('Explorer', () => {
       });
 
       wrapper.update();
-      expect(wrapper.find(PageHeader).prop('bulkActionsDisabled')).toBe(false);
+
+      expect(
+        wrapper.find(PageHeaderActionsGroup).prop('groupActionsDisabled'),
+      ).toBe(false);
     });
 
     it('disables bulk actions if no filtered results are returned', async () => {
@@ -239,7 +246,9 @@ describe('Explorer', () => {
       });
 
       wrapper.update();
-      expect(wrapper.find(PageHeader).prop('bulkActionsDisabled')).toBe(true);
+      expect(
+        wrapper.find(PageHeaderActionsGroup).prop('groupActionsDisabled'),
+      ).toBe(true);
     });
 
     it('Reloads data when a bulk action with reloadData is triggered', async () => {
@@ -267,10 +276,10 @@ describe('Explorer', () => {
       // Initial Data Loading
       expect(spy).toHaveBeenCalledTimes(1);
 
-      const header = wrapper.find(PageHeader);
+      const bulkActions = wrapper.find(PageHeaderActionsGroup);
 
       await act(async () => {
-        header.prop('bulkActions')?.[0].onClick?.();
+        bulkActions.prop('actions')?.[0].onClick?.();
 
         await wrapper.update();
       });
@@ -301,9 +310,9 @@ describe('Explorer', () => {
         return wrapper;
       });
 
-      const header = wrapper.find(PageHeader);
+      const bulkActions = wrapper.find(PageHeaderActionsGroup);
       await act(async () => {
-        header.prop('bulkActions')?.[0].onClick?.();
+        bulkActions.prop('actions')?.[0].onClick?.();
         await wrapper.update();
       });
 
@@ -336,9 +345,9 @@ describe('Explorer', () => {
         return wrapper;
       });
 
-      const header = wrapper.find(PageHeader);
+      const bulkActions = wrapper.find(PageHeaderActionsGroup);
       await act(async () => {
-        header.prop('bulkActions')?.[0].onClick?.();
+        bulkActions.prop('actions')?.[0].onClick?.();
         await wrapper.update();
       });
 
@@ -401,7 +410,7 @@ describe('Explorer', () => {
     expectComponentReceivesValue(header, 'title');
     // expectComponentReceivesValue(header, 'actions');
     // expectComponentReceivesValue(header, 'bulkActions');
-    expectComponentReceivesValue(header, 'openBulkActionsOnStart');
+    // expectComponentReceivesValue(header, 'openBulkActionsOnStart');
 
     const filters = wrapper.find(Filters);
     expectComponentReceivesValue(filters, 'filters');
@@ -2025,9 +2034,10 @@ describe('Explorer', () => {
     });
 
     await act(async () => {
-      wrapper.find(PageHeaderBulkActions).prop('onBulkActionsToggled')!(true);
-
-      wrapper.find(PageHeaderBulkActions).prop('onBulkActionsToggled')!(false);
+      wrapper.find(PageHeaderActionsGroup).prop('onActionsGroupToggled')!(true);
+      wrapper.find(PageHeaderActionsGroup).prop('onActionsGroupToggled')!(
+        false,
+      );
     });
 
     expect(spy).toHaveBeenCalledTimes(2);

package/src/components/Explorer/Explorer.tsx

@@ -7,7 +7,7 @@ import {
   useEffect,
   useState,
 } from 'react';
-import { ActionData } from '..';
+import { ActionData, IconName } from '..';
 import { noop } from '../../helpers/utils';
 import { showNotification } from '../../initialize';
 import { Data } from '../../types/data';
@@ -23,7 +23,11 @@ import {
   ListSelectMode,
   SortData,
 } from '../List';
-import { PageHeader, PageHeaderActionProps } from '../PageHeader';
+import {
+  PageHeader,
+  PageHeaderActionItemProps,
+  PageHeaderActionProps,
+} from '../PageHeader';
 import { isPageHeaderNavigationAction } from '../PageHeader/PageHeaderAction/PageHeaderAction';
 import { PageHeaderJsActionProps } from '../PageHeader/PageHeaderAction/PageHeaderAction.model';
 import { getState, storeState } from '../Utils/State/GlobalState';
@@ -348,24 +352,48 @@ export const Explorer = React.forwardRef(function Explorer<T extends Data>(
     });
   };
 
-  const pageHeaderActionsHandler = (): PageHeaderActionProps[] => {
-    return (actions ?? []).map((action) => {
-      return isPageHeaderNavigationAction(action)
-        ? action
-        : {
-            ...action,
-            onClick: async () => {
-              try {
-                const result = await action.onClick();
-                if (result) {
-                  setStationMessage(errMsg(result));
+  const pageHeaderActionsHandler = (): PageHeaderActionItemProps[] => {
+    const headerActions: PageHeaderActionItemProps[] = [];
+
+    if (bulkActions && bulkActions.length > 0) {
+      headerActions.push({
+        label: 'Bulk Actions',
+        icon: IconName.Bulk,
+        kind: 'group',
+        actions: bulkActionsHandler(),
+        openActionsGroupOnStart: openBulkActionsOnStart,
+        onActionsGroupToggled: (isOpen) => {
+          setIsBulkOpen(isOpen);
+          onBulkActionsToggled(isOpen);
+        },
+        groupActionsDisabled:
+          itemSelection.items?.length === 0 || resultCount?.filtered === 0,
+      });
+      headerActions.push({ kind: 'spacer' });
+    }
+
+    actions?.forEach((action) => {
+      headerActions.push({
+        ...(isPageHeaderNavigationAction(action)
+          ? action
+          : {
+              ...action,
+              onClick: async () => {
+                try {
+                  const result = await action.onClick();
+                  if (result) {
+                    setStationMessage(errMsg(result));
+                  }
+                } catch (error) {
+                  setStationMessage(errMsg(error, errAction));
                 }
-              } catch (error) {
-                setStationMessage(errMsg(error, errAction));
-              }
-            },
-          };
+              },
+            }),
+        kind: 'action',
+      });
     });
+
+    return headerActions;
   };
 
   const bulkActionsHandler = (): PageHeaderJsActionProps[] => {
@@ -421,16 +449,7 @@ export const Explorer = React.forwardRef(function Explorer<T extends Data>(
       <PageHeader
         title={title}
         subtitle={resultsTitle}
-        actions={actions && pageHeaderActionsHandler()}
-        bulkActions={bulkActions && bulkActionsHandler()}
-        openBulkActionsOnStart={openBulkActionsOnStart}
-        bulkActionsDisabled={
-          itemSelection.items?.length === 0 || resultCount?.filtered === 0
-        }
-        onBulkActionsToggled={(isOpen) => {
-          setIsBulkOpen(isOpen);
-          onBulkActionsToggled(isOpen);
-        }}
+        actions={pageHeaderActionsHandler()}
         setTabTitle={setTabTitle}
       />
       {StationMessage}

package/src/components/Explorer/NavigationExplorer/NavigationExplorer.spec.tsx

@@ -117,7 +117,7 @@ describe('NavigationExplorer', () => {
       return wrapper;
     });
 
-    const action = wrapper.find(PageHeaderAction);
+    const action = wrapper.find(PageHeaderAction).last();
     expect(action.props().label).toBe('test');
   });
 
@@ -219,7 +219,7 @@ describe('NavigationExplorer', () => {
       return wrapper;
     });
 
-    const createAction = wrapper.find(PageHeaderAction);
+    const createAction = wrapper.find(PageHeaderAction).last();
 
     createAction.simulate('click');
 

package/src/components/Explorer/SelectionExplorer/SelectionExplorer.spec.tsx

@@ -3,14 +3,16 @@ import { noop } from 'lodash';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { actWithReturn } from '../../../helpers/testing';
-import * as app from '../../../initialize';
 import { Column } from '../../List';
-import { PageHeader } from '../../PageHeader';
-import { PageHeaderBulkActions } from '../../PageHeader/PageHeaderBulkActions/PageHeaderBulkActions';
+import { PageHeaderActionsGroup } from '../../PageHeader/PageHeaderActionsGroup/PageHeaderActionsGroup';
 import { Explorer } from '../Explorer';
 import { ExplorerDataProvider } from '../Explorer.model';
 import { SelectionExplorer } from './SelectionExplorer';
 
+jest.mock('../../../utils/GenerateId', () => ({
+  uuid: jest.fn().mockReturnValue('test-uuid'),
+}));
+
 interface SelectExplorerTestData {
   id: string;
   desc: string;
@@ -78,7 +80,7 @@ describe('SelectionExplorer', () => {
       return wrapper;
     });
 
-    const bulkActions = wrapper.find(PageHeaderBulkActions);
+    const bulkActions = wrapper.find(PageHeaderActionsGroup);
 
     expect(bulkActions.exists()).toBe(true);
   });
@@ -101,38 +103,12 @@ describe('SelectionExplorer', () => {
       return wrapper;
     });
 
-    const bulkActions = wrapper.find(PageHeaderBulkActions);
+    const bulkActions = wrapper.find(PageHeaderActionsGroup);
 
     expect(bulkActions.exists()).toBe(false);
   });
 
-  it('Does not call "showNotification" when "Apply Selection" is clicked', async () => {
-    const [provider] = getDataProvider();
-    const showNotificationSpy: jest.SpyInstance = jest.spyOn(
-      app,
-      'showNotification',
-    );
-
-    const wrapper = await actWithReturn(async () => {
-      const wrapper = mount(
-        <SelectionExplorer
-          columns={mockListColumns}
-          dataProvider={provider}
-          stationKey="mock-key"
-          allowBulkSelect={true}
-        />,
-      );
-      return wrapper;
-    });
-
-    const header = wrapper.find(PageHeader);
-    await act(async () => {
-      header.prop('bulkActions')?.[0].onClick?.();
-      await wrapper.update();
-    });
-
-    expect(showNotificationSpy).toHaveBeenCalledTimes(0);
-  });
+  it.todo('Does not call "showNotification" when "Apply Selection" is clicked');
 
   it('sends onSelection callback when the selection of a single item is triggered', async () => {
     const [provider] = getDataProvider();

package/src/components/Filters/Filter/Filter.tsx

@@ -21,6 +21,7 @@ import { SearcheableOptionsFilter } from '../SelectionTypes/SearcheableOptionsFi
 import classes from './Filter.scss';
 
 export interface FilterProps<T extends Data> {
+  selectOnFocus?: boolean;
   options: FilterType<T>;
   value?: FilterValue;
   index?: number;
@@ -42,6 +43,7 @@ export const Filter = <T extends Data>({
   onFilterChange,
   onFilterClicked,
   onValidate,
+  selectOnFocus = true,
 }: PropsWithChildren<FilterProps<T>>): JSX.Element => {
   const [isExpanded, setIsExpanded] = useState<boolean>(false);
   const [hasError, setHasError] = useState<boolean>(false);
@@ -116,6 +118,7 @@ export const Filter = <T extends Data>({
             }
             onError={onError}
             onValidate={onValidate}
+            selectOnFocus={selectOnFocus}
           />
         );
 

package/src/components/Filters/SelectionTypes/FreeTextFilter/FreeTextFilter.spec.tsx

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 import React from 'react';
 import { noop } from '../../../../helpers/utils';
 import { FreeTextFilter } from './FreeTextFilter';
@@ -42,4 +42,19 @@ describe('FreeTextFilter', () => {
 
     expect(error).toBeDefined();
   });
+
+  it('selects text on focus when selectOnFocus is true and there is a value', () => {
+    const mockValue = 'test value';
+    const spy = jest.fn();
+
+    const wrapper = mount(
+      <FreeTextFilter onSelect={spy} value={mockValue} selectOnFocus={true} />,
+    );
+    const input = wrapper.find('input');
+    input.simulate('focus');
+
+    const inputElement = input.getDOMNode<HTMLInputElement>();
+    expect(inputElement.selectionStart).toBe(0);
+    expect(inputElement.selectionEnd).toBe(mockValue.length);
+  });
 });

package/src/components/Filters/SelectionTypes/FreeTextFilter/FreeTextFilter.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { KeyboardEventHandler, useState } from 'react';
+import React, { KeyboardEventHandler, useRef, useState } from 'react';
 import { noop } from '../../../../helpers/utils';
 import { FilterValidationResult, FilterValue } from '../../Filters.model';
 import classes from './FreeTextFilter.scss';
@@ -17,6 +17,8 @@ export interface FreeTextFilterProps {
 
   /** CSS Class name for additional styles */
   className?: string;
+  /** Select text on focus if true (default: true) */
+  selectOnFocus?: boolean;
 }
 
 export const FreeTextFilter: React.FC<FreeTextFilterProps> = ({
@@ -25,11 +27,19 @@ export const FreeTextFilter: React.FC<FreeTextFilterProps> = ({
   onError = noop,
   onValidate: customValidate,
   className = '',
+  selectOnFocus = true,
 }) => {
   const [errorMsg, setErrorMsg] = useState<string>();
   const ENTER_KEY = 'Enter';
 
   const [valueLocal, setValue] = useState(value || '');
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const onFocusWrapper = (): void => {
+    if (selectOnFocus && valueLocal) {
+      inputRef.current?.select();
+    }
+  };
 
   const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (e) => {
     if (e.key === ENTER_KEY) {
@@ -55,11 +65,13 @@ export const FreeTextFilter: React.FC<FreeTextFilterProps> = ({
       )}
     >
       <input
+        ref={inputRef}
         autoFocus
         className={clsx(classes.inputValue, errorMsg && classes.hasError)}
         onKeyDown={handleKeyDown}
         value={valueLocal as string}
         onChange={(e) => setValue(e.target.value)}
+        onFocus={onFocusWrapper}
       />
       {errorMsg !== undefined && <small>{errorMsg}</small>}
     </div>

package/src/components/FormStation/FormStationHeader/FormStationHeader.tsx

@@ -1,10 +1,11 @@
 import { FormikValues, useFormikContext } from 'formik';
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { useHistory } from 'react-router-dom';
 import { SaveIndicatorType, setSaveIndicator } from '../../../initialize';
 import { IconName } from '../../Icons';
 import {
   PageHeader,
+  PageHeaderActionItemProps,
   PageHeaderActionType,
   PageHeaderProps,
 } from '../../PageHeader';
@@ -49,41 +50,44 @@ export const FormStationHeader: React.FC<
 
   const title = useTitle(titleProperty, defaultTitle);
 
+  const actions: PageHeaderActionItemProps[] = useMemo(() => {
+    const actionItems: PageHeaderActionItemProps[] = [];
+
+    if (dirty) {
+      actionItems.push({
+        label: 'Undo Changes',
+        icon: IconName.Undo,
+        kind: 'action',
+        actionType: PageHeaderActionType.Context,
+        onClick: () => {
+          resetForm();
+        },
+      });
+    }
+
+    if (cancelNavigationUrl) {
+      actionItems.push({
+        label: 'Cancel',
+        icon: IconName.X,
+        kind: 'action',
+        onClick: () => {
+          resetForm();
+          // If the form has errors, Navigation needs to be wrapped in a promise or timeout.
+          Promise.resolve().then(() => history.push(cancelNavigationUrl));
+        },
+      });
+    }
+
+    return actionItems;
+  }, [cancelNavigationUrl, dirty, history, resetForm]);
+
   return (
     <PageHeader
       title={title}
       subtitle={subtitle}
       className={className}
       setTabTitle={setTabTitle}
-      actions={[
-        ...(dirty === true // add undo action if form as been altered
-          ? [
-              {
-                label: 'Undo Changes',
-                icon: IconName.Undo,
-                actionType: PageHeaderActionType.Context,
-                onClick: () => {
-                  resetForm();
-                },
-              },
-            ]
-          : []),
-        ...(cancelNavigationUrl // add cancel action if applicable
-          ? [
-              {
-                label: 'Cancel',
-                icon: IconName.X,
-                onClick: () => {
-                  resetForm();
-                  // If the form has errors, Navigation needs to be wrapped in a promise or timeout.
-                  Promise.resolve().then(() =>
-                    history.push(cancelNavigationUrl),
-                  );
-                },
-              },
-            ]
-          : []),
-      ]}
+      actions={actions}
     />
   );
 };

package/src/components/List/ListRow/ListRow.scss

@@ -29,7 +29,6 @@
 
   .cellWrapper {
     display: grid;
-    align-content: center;
     width: 100%;
     height: 100%;
   }

package/src/components/List/ListRow/ListRow.spec.tsx

@@ -566,4 +566,39 @@ describe('ListRow', () => {
       expect(cell.prop('title')).toBe(mockValue);
     });
   });
+
+  describe('column text alignments', () => {
+    const alignments: {
+      horizontal: 'left' | 'right' | 'center';
+      vertical: 'center' | 'start' | 'end';
+    }[] = [
+      { horizontal: 'center', vertical: 'center' },
+      { horizontal: 'left', vertical: 'start' },
+      { horizontal: 'right', vertical: 'end' },
+    ];
+
+    alignments.forEach(({ horizontal, vertical }) => {
+      it(`should apply the correct styles for textAlign: ${horizontal}, alignSelf: ${vertical}`, () => {
+        const wrapper = mount(
+          <ListRow
+            {...mockProps}
+            columns={[{ propertyName: 'id', size: '1fr', label: 'id' }]}
+            horizontalTextAlign={horizontal}
+            verticalTextAlign={vertical}
+          />,
+        );
+
+        const wrapperDivs = wrapper.findWhere((node) =>
+          node.prop('data-test-id')?.startsWith('list-entry-property'),
+        );
+
+        wrapperDivs.forEach((node) => {
+          const style = node.prop('style');
+
+          expect(style).toHaveProperty('textAlign', horizontal);
+          expect(style).toHaveProperty('alignSelf', vertical);
+        });
+      });
+    });
+  });
 });