Playwright testing

CHANGELOG.md

@@ -3,9 +3,15 @@
 ## v4.0.0-SNAPSHOT - unreleased
 
 ### New Features
+* Automated testing via new built-in Hoist support and Playwright
 * Enhance Layout > DockContainer page to showcase new `DockViewModel.onClose` hook
 * Enhance Column Groups Grid example to showcase `ColumnGroup.showLeftRightBorders` functionality
 
+### Libraries
+* @xh/hoist 60.0.0
+* @playwright/test 1.38.1
+
+
 ## v3.3.0 - 2023-09-20
 
 ### Libraries

client-app/src/desktop/AppComponent.ts

@@ -21,7 +21,7 @@ export const AppComponent = hoistCmp({
             tbar: appBar({
                 icon: img({src: xhLogo, onClick: () => model.goHome()}),
                 title: null,
-                leftItems: [tabSwitcher({enableOverflow: true})],
+                leftItems: [tabSwitcher({testId: 'toplevel-tab-switcher', enableOverflow: true})],
                 rightItems: [
                     webSocketIndicator({iconOnly: true, marginRight: 4}),
                     appBarSeparator()
@@ -30,7 +30,8 @@ export const AppComponent = hoistCmp({
                 appMenuButtonProps: {
                     hideLogoutItem: false,
                     extraItems: [welcomeMsg({multiline: true})]
-                }
+                },
+                testId: 'appbar'
             }),
             hotkeys: [
                 {

client-app/src/desktop/AppModel.ts

@@ -139,7 +139,6 @@ export class AppModel extends HoistAppModel {
                             {name: 'standard', path: '/standard'},
                             {name: 'tree', path: '/tree?dims'},
                             {name: 'treeWithCheckBox', path: '/treeWithCheckBox'},
-                            {name: 'groupedRows', path: '/groupedRows'},
                             {name: 'groupedCols', path: '/groupedCols'},
                             {name: 'rest', path: '/rest'},
                             {name: 'inlineEditing', path: '/inlineEditing'},

client-app/src/desktop/common/grid/SampleGrid.ts

@@ -1,7 +1,7 @@
 import {grid, gridCountLabel} from '@xh/hoist/cmp/grid';
 import {filler, hbox, hframe, span, vframe} from '@xh/hoist/cmp/layout';
 import {storeFilterField} from '@xh/hoist/cmp/store';
-import {hoistCmp, uses, HoistProps, BoxProps} from '@xh/hoist/core';
+import {BoxProps, hoistCmp, HoistProps, uses} from '@xh/hoist/core';
 import {
     colAutosizeButton,
     colChooserButton,
@@ -34,7 +34,7 @@ export const [SampleGrid, sampleGrid] = hoistCmp.withFactory<SampleGridProps>({
     model: uses(SampleGridModel, {createDefault: true}),
     className: 'tb-sample-grid',
 
-    render({model, omitMask, omitGridTools, ...props}) {
+    render({model, omitMask, omitGridTools, testId, ...props}) {
         const {selectedRecords} = model.gridModel,
             selCount = selectedRecords.length;
 
@@ -55,7 +55,7 @@ export const [SampleGrid, sampleGrid] = hoistCmp.withFactory<SampleGridProps>({
             return panel({
                 ref: model.panelRef,
                 mask: omitMask ? null : 'onLoad',
-                item: grid(),
+                item: grid({testId}),
                 ...props
             });
         }
@@ -66,7 +66,7 @@ export const [SampleGrid, sampleGrid] = hoistCmp.withFactory<SampleGridProps>({
             ...props,
             item: hframe(
                 vframe(
-                    grid(),
+                    grid({testId}),
                     hbox({
                         items: [Icon.info(), selText],
                         className: 'tb-sample-grid__selbar'

client-app/src/desktop/common/grid/SampleTreeGrid.ts

@@ -21,7 +21,7 @@ export const [SampleTreeGrid, sampleTreeGrid] = hoistCmp.withFactory({
             tbar: [
                 refreshButton({model}),
                 toolbarSep(),
-                groupingChooser(),
+                groupingChooser({testId: 'grouping-chooser'}),
                 filler(),
                 gridCountLabel({includeChildren: true}),
                 gridFindField(),

client-app/src/desktop/tabs/charts/ChartsTab.ts

@@ -8,6 +8,7 @@ import {splitTreeMapPanel} from './SplitTreeMapPanel';
 
 export const chartsTab = hoistCmp.factory(() =>
     tabContainer({
+        testId: 'charts-tab',
         modelConfig: {
             route: 'default.charts',
             switcher: {orientation: 'left'},

client-app/src/desktop/tabs/charts/LineChartPanel.tsx

@@ -33,7 +33,7 @@ export const lineChartPanel = hoistCmp.factory({
                 height: '60%',
                 mask: 'onLoad',
                 tbar: tbar(),
-                item: chart()
+                item: chart({testId: 'line-chart'})
             }),
             links: [
                 {

client-app/src/desktop/tabs/examples/ExamplesTab.ts

@@ -73,6 +73,7 @@ const appTile = hoistCmp.factory<ExamplesTabModel>(({app, model}) => {
         title: app.title,
         icon: app.icon,
         compactHeader: true,
+        testId: app.title,
         items: div({
             className: 'tb-examples__app-tile__contents',
             items: app.text

client-app/src/desktop/tabs/forms/FormsTab.ts

@@ -6,6 +6,7 @@ import {toolbarFormPanel} from './ToolbarFormPanel';
 
 export const formsTab = hoistCmp.factory(() =>
     tabContainer({
+        testId: 'forms-tab',
         modelConfig: {
             route: 'default.forms',
             switcher: {orientation: 'left'},

client-app/src/desktop/tabs/forms/InputsPanel.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {form, FormModel} from '@xh/hoist/cmp/form';
-import {box, div, span, strong, filler, frame, hbox, hframe, vbox} from '@xh/hoist/cmp/layout';
+import {box, div, filler, frame, hbox, hframe, span, strong, vbox} from '@xh/hoist/cmp/layout';
 import {creates, hoistCmp, uses} from '@xh/hoist/core';
 import {button} from '@xh/hoist/desktop/cmp/button';
 import {formField} from '@xh/hoist/desktop/cmp/form';
@@ -28,6 +28,7 @@ import {wrapper} from '../../common';
 import './InputsPanel.scss';
 import {InputsPanelModel} from './InputsPanelModel';
 import {menu, menuItem, popover} from '@xh/hoist/kit/blueprint';
+import {TEST_ID} from '@xh/hoist/utils/js';
 
 export const inputsPanel = hoistCmp.factory({
     model: creates(InputsPanelModel),
@@ -71,6 +72,7 @@ export const inputsPanel = hoistCmp.factory({
 
 const formContents = hoistCmp.factory<InputsPanelModel>(({model}) =>
     form({
+        testId: 'hoist-inputs',
         fieldDefaults: {
             commitOnChange: model.commitOnChange
         },
@@ -314,7 +316,7 @@ const formContents = hoistCmp.factory<InputsPanelModel>(({model}) =>
 const row = hoistCmp.factory<FormModel>({
     model: uses(FormModel),
 
-    render({model, label, field, info, readonlyRenderer, fmtVal, layout = {}, children}) {
+    render({model, label, field, info, readonlyRenderer, fmtVal, layout = {}, testId, children}) {
         const fieldModel = model.fields[field];
 
         if (!layout.width) layout.flex = 1;
@@ -328,6 +330,7 @@ const row = hoistCmp.factory<FormModel>({
                     item: children,
                     label,
                     info,
+                    testId,
                     readonlyRenderer,
                     ...layout
                 })
@@ -382,6 +385,7 @@ const bbar = hoistCmp.factory<InputsPanelModel>(({model}) => {
         toolbarSep(),
         switchInput({
             model,
+            testId: 'inputs-panel-commit-radio',
             bind: 'commitOnChange',
             label: 'Commit on change'
         })
@@ -399,6 +403,7 @@ const fieldDisplay = hoistCmp.factory(({fieldModel, fmtVal}) => {
         }
     }
     return div({
+        [TEST_ID]: `inputs-panel-${fieldModel.name}`,
         className: 'inputs-panel-field-display',
         item: displayVal
     });

client-app/src/desktop/tabs/grids/GridsTab.ts

@@ -13,6 +13,7 @@ import './GridsTab.scss';
 
 export const gridsTab = hoistCmp.factory(() =>
     tabContainer({
+        testId: 'grids-tab',
         modelConfig: {
             route: 'default.grids',
             tabs: [

client-app/src/desktop/tabs/grids/StandardGridPanel.tsx

@@ -55,7 +55,7 @@ export const standardGridPanel = hoistCmp.factory(() =>
             title: 'Grids › Standard',
             icon: Icon.gridPanel(),
             className: 'tb-grid-wrapper-panel',
-            item: sampleGrid()
+            item: sampleGrid({testId: 'standard-grid'})
         })
     })
 );

client-app/src/desktop/tabs/layout/LayoutTab.ts

@@ -11,6 +11,7 @@ import {vboxContainerPanel} from './VBoxContainerPanel';
 
 export const layoutTab = hoistCmp.factory(() =>
     tabContainer({
+        testId: 'layout-tab',
         modelConfig: {
             route: 'default.layout',
             switcher: {orientation: 'left'},

client-app/src/desktop/tabs/layout/dashCanvas/DashCanvasPanel.tsx

@@ -1,4 +1,4 @@
-import {switchInput, numberInput} from '@xh/hoist/desktop/cmp/input';
+import {numberInput, switchInput} from '@xh/hoist/desktop/cmp/input';
 import {toolbar} from '@xh/hoist/desktop/cmp/toolbar';
 import React from 'react';
 import {creates, hoistCmp, HoistModel, managed, XH} from '@xh/hoist/core';
@@ -45,7 +45,7 @@ export const dashCanvasPanel = hoistCmp.factory({
                 height: '80%',
                 width: '80%',
                 item: model.renderDashboard
-                    ? frame(dashCanvas())
+                    ? frame(dashCanvas({testId: 'dash-canvas'}))
                     : frame({
                           item: 'The Dashboard is not rendered now and has been unmounted. When rendered again, its previous state will be restored.',
                           padding: 10

client-app/src/desktop/tabs/layout/dashContainer/DashContainerPanel.tsx

@@ -39,7 +39,7 @@ export const dashContainerPanel = hoistCmp.factory({
                 height: '80%',
                 width: '80%',
                 item: model.renderDashboard
-                    ? dashContainer()
+                    ? dashContainer({testId: 'dash-container'})
                     : frame({
                           item: 'The Dashboard is not rendered now and has been unmounted. When rendered again, its previous state will be restored.',
                           padding: 10

client-app/src/desktop/tabs/other/ClockPanel.ts

@@ -10,6 +10,7 @@ import {bindable, makeObservable} from '@xh/hoist/mobx';
 import {ONE_SECOND} from '@xh/hoist/utils/datetime';
 import {wrapper} from '../../common';
 import './ClockPanel.scss';
+import {getTestId} from '@xh/hoist/utils/js';
 
 export const clockPanel = hoistCmp.factory({
     model: creates(() => ClockPanelModel),
@@ -87,7 +88,17 @@ const clockCard = hoistCmp.factory<ClockPanelModel>({
         const {format, prefix, suffix, updateInterval} = model;
         return vbox({
             ...rest,
-            items: [div(label), clock({timezone, format, prefix, suffix, updateInterval})]
+            items: [
+                div(label),
+                clock({
+                    timezone,
+                    format,
+                    prefix,
+                    suffix,
+                    updateInterval,
+                    testId: getTestId('clock', label)
+                })
+            ]
         });
     }
 });

client-app/src/desktop/tabs/other/ErrorMessagePanel.tsx

@@ -4,7 +4,7 @@ import {button} from '@xh/hoist/desktop/cmp/button';
 import {errorMessage} from '@xh/hoist/desktop/cmp/error';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {Icon} from '@xh/hoist/icon';
-import {makeObservable, bindable} from '@xh/hoist/mobx';
+import {bindable, makeObservable} from '@xh/hoist/mobx';
 import React from 'react';
 import {wrapper} from '../../common';
 import './ClockPanel.scss';
@@ -47,7 +47,8 @@ export const errorMessagePanel = hoistCmp.factory({
                         actionButtonProps: {
                             icon: Icon.refresh(),
                             onClick: () => model.toggleError()
-                        }
+                        },
+                        testId: 'error-message'
                     }),
                     vframe({
                         omit: error,

client-app/src/desktop/tabs/other/OtherTab.ts

@@ -20,6 +20,7 @@ import {relativeTimestampPanel} from './RelativeTimestampPanel';
 
 export const otherTab = hoistCmp.factory(() =>
     tabContainer({
+        testId: 'other-tab',
         modelConfig: {
             route: 'default.other',
             switcher: {orientation: 'left'},

client-app/src/desktop/tabs/other/PinPadPanel.ts

@@ -1,6 +1,6 @@
 import {creates, hoistCmp, HoistModel, managed} from '@xh/hoist/core';
 import {h3, p} from '@xh/hoist/cmp/layout';
-import {action, observable, makeObservable} from '@xh/hoist/mobx';
+import {action, makeObservable, observable} from '@xh/hoist/mobx';
 import {pinPad, PinPadModel} from '@xh/hoist/cmp/pinpad';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {button} from '@xh/hoist/desktop/cmp/button';
@@ -33,7 +33,7 @@ export const pinPadPanel = hoistCmp.factory({
                 width: 380,
                 height: 500,
                 className: 'tb-pinpad-container',
-                item: !model.loggedIn ? pinPad() : secretPlans(),
+                item: !model.loggedIn ? pinPad({testId: 'pinpad'}) : secretPlans(),
                 bbar: [
                     button({
                         text: 'Reset',

client-app/src/desktop/tabs/panels/PanelsTab.ts

@@ -9,6 +9,7 @@ import './PanelsTab.scss';
 
 export const panelsTab = hoistCmp.factory(() =>
     tabContainer({
+        testId: 'panels-tab',
         modelConfig: {
             route: 'default.panels',
             switcher: {orientation: 'left'},

client-app/src/examples/todo/TaskDialog.ts

@@ -1,4 +1,4 @@
-import {uses, hoistCmp} from '@xh/hoist/core';
+import {hoistCmp, uses} from '@xh/hoist/core';
 import {Icon} from '@xh/hoist/icon';
 import {filler, hbox, vbox} from '@xh/hoist/cmp/layout';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
@@ -30,12 +30,13 @@ export const taskDialog = hoistCmp.factory({
 
 const formPanel = hoistCmp.factory(() =>
     panel({
-        item: form(
-            vbox({
+        item: form({
+            testId: 'task-dialog',
+            item: vbox({
                 items: [description(), dueDate()],
                 className: 'todo-form'
             })
-        ),
+        }),
         bbar: bbar()
     })
 );
@@ -68,10 +69,12 @@ const bbar = hoistCmp.factory<TaskDialogModel>(({model}) =>
     toolbar(
         filler(),
         button({
+            testId: 'cancel-task-edit-button',
             text: 'Cancel',
             onClick: () => model.close()
         }),
         button({
+            testId: 'save-task-button',
             text: 'OK',
             icon: Icon.check(),
             disabled: !model.formModel.isValid,

client-app/src/examples/todo/TaskDialogModel.ts

@@ -1,8 +1,8 @@
 import {HoistModel, managed} from '@xh/hoist/core';
 import {FormModel} from '@xh/hoist/cmp/form';
-import {required, lengthIs} from '@xh/hoist/data';
+import {lengthIs, required} from '@xh/hoist/data';
 import {LocalDate} from '@xh/hoist/utils/datetime';
-import {observable, action, makeObservable} from '@xh/hoist/mobx';
+import {action, makeObservable, observable} from '@xh/hoist/mobx';
 import {TodoPanelModel} from './TodoPanelModel';
 
 export class TaskDialogModel extends HoistModel {

client-app/src/examples/todo/TodoPanel.ts

@@ -18,7 +18,13 @@ export const todoPanel = hoistCmp.factory({
             ref: model.panelRef,
             mask: 'onLoad',
             tbar: tbar(),
-            items: [grid({agOptions: {suppressMakeColumnVisibleAfterUnGroup: true}}), taskDialog()],
+            items: [
+                grid({
+                    testId: 'todo-grid',
+                    agOptions: {suppressMakeColumnVisibleAfterUnGroup: true}
+                }),
+                taskDialog()
+            ],
             bbar: bbar()
         });
     }
@@ -49,11 +55,13 @@ const bbar = hoistCmp.factory<TodoPanelModel>(({model}) =>
         }),
         '-',
         switchInput({
+            testId: 'show-completed-switch',
             bind: 'showCompleted',
             label: 'Show Completed'
         }),
         filler(),
         button({
+            testId: 'reset-button',
             icon: Icon.reset(),
             intent: 'danger',
             tooltip: 'Reset to example defaults.',