admin app testId

xh · Oct 9, 2023 · 1c2a70d · 1c2a70d
1 parent 82f9228
commit 1c2a70d
Show file tree

Hide file tree

Showing 11 changed files with 36 additions and 20 deletions.
diff --git a/admin/AppComponent.ts b/admin/AppComponent.ts
@@ -30,7 +30,7 @@ export const AppComponent = hoistCmp({
 const tbar = hoistCmp.factory<AppModel>(({model}) =>
     appBar({
         icon: Icon.gears({size: '2x', prefix: 'fal'}),
-        leftItems: [tabSwitcher({enableOverflow: true})],
+        leftItems: [tabSwitcher({testId: 'tab-switcher', enableOverflow: true})],
         rightItems: [
             button({
                 icon: Icon.openExternal(),

diff --git a/admin/tabs/activity/ActivityTab.ts b/admin/tabs/activity/ActivityTab.ts
@@ -16,7 +16,7 @@ export const activityTab = hoistCmp.factory(() =>
     tabContainer({
         modelConfig: {
             route: 'default.activity',
-            switcher: {orientation: 'left'},
+            switcher: {orientation: 'left', testId: 'activity-tab-switcher'},
             tabs: [
                 {id: 'tracking', icon: Icon.analytics(), content: activityTrackingPanel},
                 {id: 'clientErrors', icon: Icon.warning(), content: clientErrorsPanel},

diff --git a/admin/tabs/general/GeneralTab.ts b/admin/tabs/general/GeneralTab.ts
@@ -6,7 +6,7 @@
  */
 import {configPanel} from '@xh/hoist/admin/tabs/general/config/ConfigPanel';
 import {tabContainer} from '@xh/hoist/cmp/tab';
-import {XH, hoistCmp} from '@xh/hoist/core';
+import {hoistCmp, XH} from '@xh/hoist/core';
 import {Icon} from '@xh/hoist/icon';
 import {aboutPanel} from './about/AboutPanel';
 import {alertBannerPanel} from './alertBanner/AlertBannerPanel';
@@ -16,7 +16,7 @@ export const generalTab = hoistCmp.factory(() =>
     tabContainer({
         modelConfig: {
             route: 'default.general',
-            switcher: {orientation: 'left'},
+            switcher: {orientation: 'left', testId: 'general-tab-switcher'},
             tabs: [
                 {id: 'about', icon: Icon.info(), content: aboutPanel},
                 {id: 'config', icon: Icon.settings(), content: configPanel},

diff --git a/admin/tabs/general/config/ConfigPanel.ts b/admin/tabs/general/config/ConfigPanel.ts
@@ -19,6 +19,7 @@ export const configPanel = hoistCmp.factory({
     render({model}) {
         return fragment(
             restGrid({
+                testId: 'config',
                 extraToolbarItems: () => {
                     return button({
                         icon: Icon.diff(),

diff --git a/admin/tabs/monitor/MonitorTab.ts b/admin/tabs/monitor/MonitorTab.ts
@@ -17,7 +17,7 @@ export const monitorTab = hoistCmp.factory(() => {
         ? tabContainer({
               modelConfig: {
                   route: 'default.monitor',
-                  switcher: {orientation: 'left'},
+                  switcher: {orientation: 'left', testId: 'monitor-tab-switcher'},
                   tabs: [
                       {id: 'status', icon: Icon.shieldCheck(), content: monitorResultsPanel},
                       {id: 'config', icon: Icon.settings(), content: monitorEditorPanel}

diff --git a/admin/tabs/server/ServerTab.ts b/admin/tabs/server/ServerTab.ts
@@ -20,7 +20,7 @@ export const serverTab = hoistCmp.factory(() =>
     tabContainer({
         modelConfig: {
             route: 'default.server',
-            switcher: {orientation: 'left'},
+            switcher: {orientation: 'left', testId: 'server-tab-switcher'},
             tabs: [
                 {id: 'logViewer', icon: Icon.fileText(), content: logViewer},
                 {id: 'logLevels', icon: Icon.settings(), content: logLevelPanel},

diff --git a/admin/tabs/userData/UserDataTab.ts b/admin/tabs/userData/UserDataTab.ts
@@ -15,7 +15,7 @@ export const userDataTab = hoistCmp.factory(() =>
     tabContainer({
         modelConfig: {
             route: 'default.userData',
-            switcher: {orientation: 'left'},
+            switcher: {orientation: 'left', testId: 'user-data-tab-switcher'},
             tabs: [
                 {
                     id: 'prefs',

diff --git a/desktop/cmp/record/RecordActionBar.ts b/desktop/cmp/record/RecordActionBar.ts
@@ -7,7 +7,7 @@
 
 import {Column, GridModel} from '@xh/hoist/cmp/grid';
 import {hoistCmp} from '@xh/hoist/core';
-import {RecordActionSpec, RecordAction, StoreRecord, StoreSelectionModel} from '@xh/hoist/data';
+import {RecordAction, RecordActionSpec, StoreRecord, StoreSelectionModel} from '@xh/hoist/data';
 import {buttonGroup, ButtonGroupProps} from '@xh/hoist/desktop/cmp/button';
 import '@xh/hoist/desktop/register';
 import {throwIf} from '@xh/hoist/utils/js';
@@ -52,8 +52,17 @@ export const [RecordActionBar, recordActionBar] = hoistCmp.withFactory<RecordAct
     className: 'xh-record-action-bar',
 
     render(props) {
-        const {actions, record, selModel, gridModel, column, buttonProps, vertical, ...rest} =
-            props;
+        const {
+            actions,
+            record,
+            selModel,
+            gridModel,
+            column,
+            buttonProps,
+            vertical,
+            testId,
+            ...rest
+        } = props;
 
         throwIf(
             !record && !selModel,
@@ -71,6 +80,7 @@ export const [RecordActionBar, recordActionBar] = hoistCmp.withFactory<RecordAct
                     selModel,
                     gridModel,
                     column,
+                    testId: `${testId}-${action.text}-action`,
                     ...buttonProps
                 })
             ),

diff --git a/desktop/cmp/rest/RestGrid.ts b/desktop/cmp/rest/RestGrid.ts
@@ -46,18 +46,21 @@ export const [RestGrid, restGrid] = hoistCmp.withFactory<RestGridProps>({
     model: uses(RestGridModel, {publishMode: 'limited'}),
     className: 'xh-rest-grid',
 
-    render({model, extraToolbarItems, mask = true, agOptions, formClassName, ...props}, ref) {
+    render(
+        {model, extraToolbarItems, mask = true, agOptions, formClassName, testId, ...props},
+        ref
+    ) {
         const {formModel, gridModel} = model;
 
         return fragment(
             panel({
                 ref,
                 ...props,
-                tbar: restGridToolbar({model, extraToolbarItems}),
-                item: grid({model: gridModel, agOptions}),
+                tbar: restGridToolbar({model, extraToolbarItems, testId}),
+                item: grid({model: gridModel, agOptions, testId: `${testId}-grid`}),
                 mask: getMaskFromProp(model, mask)
             }),
-            restForm({model: formModel, className: formClassName})
+            restForm({model: formModel, className: formClassName, testId: `${testId}-form`})
         );
     }
 });

diff --git a/desktop/cmp/rest/impl/RestForm.ts b/desktop/cmp/rest/impl/RestForm.ts
@@ -25,7 +25,7 @@ export const restForm = hoistCmp.factory({
     model: uses(RestFormModel),
     className: 'xh-rest-form',
 
-    render({model, className}) {
+    render({model, className, testId}) {
         const {isAdd, readonly, isOpen, dialogRef} = model;
         if (!isOpen) return null;
 
@@ -36,7 +36,7 @@ export const restForm = hoistCmp.factory({
             isOpen: true,
             isCloseButtonShown: false,
             item: panel({
-                item: formDisplay(),
+                item: formDisplay({testId}),
                 bbar: tbar(),
                 ref: dialogRef,
                 mask: 'onLoad'
@@ -45,7 +45,7 @@ export const restForm = hoistCmp.factory({
     }
 });
 
-const formDisplay = hoistCmp.factory<RestFormModel>(({model}) => {
+const formDisplay = hoistCmp.factory<RestFormModel>(({model, testId}) => {
     const formFields = model.editors.map(editor => restFormField({editor}));
 
     return form({
@@ -59,7 +59,8 @@ const formDisplay = hoistCmp.factory<RestFormModel>(({model}) => {
         item: div({
             className: 'xh-rest-form__body',
             items: formFields
-        })
+        }),
+        testId
     });
 });
 

diff --git a/desktop/cmp/rest/impl/RestGridToolbar.ts b/desktop/cmp/rest/impl/RestGridToolbar.ts
@@ -20,7 +20,7 @@ import {RestGridModel} from '../RestGridModel';
 export const restGridToolbar = hoistCmp.factory({
     model: uses(RestGridModel, {publishMode: 'limited'}),
 
-    render({model, extraToolbarItems}) {
+    render({model, extraToolbarItems, testId}) {
         const {unit, toolbarActions: actions, gridModel, readonly} = model;
 
         let extraItems = extraToolbarItems;
@@ -31,7 +31,8 @@ export const restGridToolbar = hoistCmp.factory({
             recordActionBar({
                 actions,
                 gridModel,
-                selModel: gridModel.selModel
+                selModel: gridModel.selModel,
+                testId
             }),
             toolbarSep({
                 omit: isEmpty(extraItems) || readonly