@postxl/generator 0.57.1 → 0.58.0

package/dist/generator.js

@@ -89,7 +89,7 @@ const CONFIG_SCHEMA = zod_1.z
     .object({
     pathToDataLib: zod_1.z.string().optional(),
     pathToDbLib: zod_1.z.string().optional(),
-    pathToCypress: zod_1.z.string().optional(),
+    pathToPlaywright: zod_1.z.string().optional(),
     pathToE2ELib: zod_1.z.string().optional(),
     pathToImportExport: zod_1.z.string().optional(),
     pathToActions: zod_1.z.string().optional(),
@@ -114,8 +114,8 @@ const CONFIG_SCHEMA = zod_1.z
     return {
         paths: {
             dataLibPath: (0, types_1.toPath)(s.pathToDataLib || './backend/libs/data/src/'),
+            playwrightPath: (0, types_1.toPath)(s.pathToPlaywright || './e2e/'),
             dbLibPath: (0, types_1.toPath)(s.pathToDbLib || './backend/libs/db/src/'),
-            cypressPath: (0, types_1.toPath)(s.pathToCypress || './e2e/cypress/'),
             e2eLibPath: (0, types_1.toPath)(s.pathToE2ELib || './backend/libs/e2e/src/'),
             importExportPath: (0, types_1.toPath)(s.pathToImportExport || './backend/libs/import-export/src/'),
             actionsPath: (0, types_1.toPath)(s.pathToActions || './backend/libs/actions/src/'),

package/dist/generators/indices/selectors.generator.d.ts

@@ -1,5 +1,5 @@
 /**
- * Generates list of component selectors for Cypress tests.
+ * Generates list of component selectors for E2E tests.
  *
  * Note: This generator does not need the models or meta data passed in.
  * Instead it uses the SelectorCollector singleton that already collected all ids during the generation process of the individual models.

package/dist/generators/indices/selectors.generator.js

@@ -11,7 +11,7 @@ const HARDCODED_IDS = [
     'confirmationModal-buttons-cancel',
 ];
 /**
- * Generates list of component selectors for Cypress tests.
+ * Generates list of component selectors for E2E tests.
  *
  * Note: This generator does not need the models or meta data passed in.
  * Instead it uses the SelectorCollector singleton that already collected all ids during the generation process of the individual models.
@@ -22,9 +22,10 @@ function generateSelectors() {
     const object = {};
     const ids = [...HARDCODED_IDS, ...collectedIds];
     ids.sort();
-    ids.map((id) => {
-        addCypressSelectorToNestedObject({ object, id });
-    });
+    for (const id of ids) {
+        const keys = id.split('-');
+        extendObject(object, keys, `[data-test-id=${id}]`);
+    }
     const selectors = JSON.stringify(object, null, 2);
     return /* ts */ `
   export const SELECTORS =
@@ -32,13 +33,6 @@ function generateSelectors() {
   `;
 }
 exports.generateSelectors = generateSelectors;
-/**
- * Converts an id like `post-create-name` to a nested object like `{post: {create: {name: '[data-cy=post-create-name]'}}}`.
- */
-function addCypressSelectorToNestedObject({ object, id, }) {
-    const keys = id.split('-');
-    extendObject(object, keys, `[data-cy=${id}]`);
-}
 /**
  * Recursively traverses the keys and adds the value to the object in a nested way.
  * E.g. `{object, keys: ['post', 'create', 'name'], value}` will extend `object` with `{post: {create: {name: value}}}`.

package/dist/generators/models/admin.page.generator.js

@@ -44,7 +44,7 @@ export default function Admin${meta.internalSingularNameCapitalized}Page() {
             <Spacer key="Spacer" />
 
             <ActionWrapper key="GlobalFilter">
-              <Button label={t['Create']} icon="plus" fill="fill" __cypress_selector__="indexPage-buttons-create" onClick={() => setIsCreateModalOpen(true)}/>
+              <Button label={t['Create']} icon="plus" fill="fill" __e2e_selector__="indexPage-buttons-create" onClick={() => setIsCreateModalOpen(true)}/>
             </ActionWrapper>
           </ActionsBarWrapper>
         </Header>

package/dist/generators/models/react.generator/library.generator.js

@@ -61,13 +61,13 @@ function generateModelLibraryComponents({ model, meta }) {
                   label: 'Edit',
                   icon: 'pencil-on-paper',
                   onClick: () => setIsEditModalOpen(true),
-                  __cypress_action_selector__: "${selectorCollector.idFor('edit', { typePrefix: 'actions' })}",
+                  __e2e_action_selector__: "${selectorCollector.idFor('edit', { typePrefix: 'actions' })}",
                 },
                 {
                   label: 'Delete',
                   icon: 'trash',
                   onClick: () => setIsDeleteModalOpen(true),
-                  __cypress_action_selector__: "${selectorCollector.idFor('delete', { typePrefix: 'actions' })}",
+                  __e2e_action_selector__: "${selectorCollector.idFor('delete', { typePrefix: 'actions' })}",
                 },
               ]}
             />

package/dist/generators/models/react.generator/lookup.generator.js

@@ -3,12 +3,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateModelLookupComponents = void 0;
 const id_collector_1 = require("../../../lib/id-collector");
 const imports_1 = require("../../../lib/imports");
+/**
+ * Returns a selector string that links the component to the global selectors index.
+ */
+function selector(meta, typePrefix, options) {
+    var _a;
+    const selectorCollector = id_collector_1.SelectorCollector.from(meta.seed.constantName + '-formComponents');
+    return selectorCollector.idFor((_a = options === null || options === void 0 ? void 0 : options.element) !== null && _a !== void 0 ? _a : '', { typePrefix });
+}
 /**
  * Utility generator that generates lookup components for a given model.
  */
 function generateModelLookupComponents({ model, meta }) {
     const { react: { context, components }, } = meta;
-    const selectorCollector = id_collector_1.SelectorCollector.from(meta.seed.constantName + '-formComponents');
     const imports = imports_1.ImportsGenerator.from(meta.react.folderPath)
         .addImport({
         items: [context.hookFnName],
@@ -54,10 +61,7 @@ export const ${components.forms.selectInputName} = ({
     options={list}
     ${labelProp}
     loading={!ready} 
-    __cypress_field_selector__={
-        delegated.__cypress_field_selector__ 
-        ?? "${selectorCollector.idFor('', { typePrefix: 'selectInput' })}"
-      }
+    __e2e_field_selector__="${selector(meta, 'selectInput')}"
     {...delegated}
   />
 }
@@ -71,10 +75,7 @@ export const ${components.forms.selectFieldName} = ({
     options={list}
     ${labelProp}
     loading={!ready} 
-    __cypress_field_selector__={
-      delegated.__cypress_field_selector__ 
-      ?? "${selectorCollector.idFor('', { typePrefix: 'selectField' })}"
-    }
+    __e2e_field_selector__="${selector(meta, 'selectField')}"
     {...delegated}
   />
 }
@@ -90,10 +91,7 @@ export const ${components.forms.menuSelectInputName} = ({
     options={list}
     ${labelProp}
     loading={!ready} 
-    __cypress_options_selector__={
-      delegated.__cypress_options_selector__ 
-      ?? "${selectorCollector.idFor('', { typePrefix: 'menuSelectInput' })}"
-    }
+    __e2e_options_selector__="${selector(meta, 'menuSelectInput')}"
     {...delegated}
   />
 }
@@ -107,10 +105,7 @@ export const ${components.forms.menuSelectFieldName} = ({
     options={list}
     ${labelProp}
     loading={!ready} 
-    __cypress_options_selector__={
-      delegated.__cypress_options_selector__ 
-      ?? "${selectorCollector.idFor('', { typePrefix: 'menuSelectField' })}"
-    }
+    __e2e_options_selector__="${selector(meta, 'menuSelectField')}"
     {...delegated}
   />
 }
@@ -126,14 +121,8 @@ export const ${components.forms.searchInputName} = ({
     options={list}
     ${labelProp}
     loading={!ready} 
-    __cypress_combobox_selector__={
-      delegated.__cypress_combobox_selector__ 
-      ?? "${selectorCollector.idFor('field', { typePrefix: 'searchInput' })}"
-    }
-    __cypress_options_selector__={
-      delegated.__cypress_options_selector__ 
-      ?? "${selectorCollector.idFor('options', { typePrefix: 'searchInput' })}"
-    }
+    __e2e_combobox_selector__="${selector(meta, 'searchInput', { element: 'field' })}"
+    __e2e_options_selector__="${selector(meta, 'searchInput', { element: 'options' })}"
     {...delegated}
   />
 }
@@ -147,14 +136,8 @@ export const ${components.forms.searchFieldName} = ({
     options={list}
     ${labelProp}
     loading={!ready} 
-    __cypress_combobox_selector__={
-      delegated.__cypress_combobox_selector__ 
-      ?? "${selectorCollector.idFor('field', { typePrefix: 'searchField' })}"
-    }
-    __cypress_options_selector__={
-      delegated.__cypress_options_selector__ 
-      ?? "${selectorCollector.idFor('options', { typePrefix: 'searchField' })}"
-    }
+    __e2e_combobox_selector__="${selector(meta, 'searchField', { element: 'field' })}"
+    __e2e_options_selector__="${selector(meta, 'searchField', { element: 'options' })}"
     {...delegated}
   />
 }
@@ -169,10 +152,7 @@ export const ${components.forms.tableSelectInputName} = ({
     options={list}
     ${labelProp}
     loading={!ready} 
-    __cypress_input_field_selector__={
-      delegated.__cypress_input_field_selector__
-      ?? "${selectorCollector.idFor('', { typePrefix: 'tableSelectInput' })}"
-    }
+    __e2e_input_field_selector__="${selector(meta, 'tableSelectInput')}"
     {...delegated}
   />
 }
@@ -186,10 +166,7 @@ export const ${components.forms.tableSelectFieldName} = ({
     options={list}
     ${labelProp}
     loading={!ready} 
-    __cypress_input_field_selector__={
-      delegated.__cypress_input_field_selector__ 
-      ?? "${selectorCollector.idFor('', { typePrefix: 'tableSelectField' })}"
-    }
+    __e2e_input_field_selector__="${selector(meta, 'tableSelectField')}"
     {...delegated}
   />
 }

package/dist/generators/models/react.generator/modals.generator.js

@@ -150,7 +150,7 @@ export const ${modals.createComponentName} = ({
               fill="fill"
               onClick={submitForm}
               loading={isSubmitting}
-              __cypress_selector__="${selectorCollector.idFor('submit', { typePrefix: 'buttons' })}"
+              __e2e_selector__="${selectorCollector.idFor('submit', { typePrefix: 'buttons' })}"
             />
 					}>
 						${getFormFieldComponents({ model, selectorCollector })}
@@ -286,7 +286,7 @@ export const ${components.modals.editComponentName} = ({
                 color="primary"
                 onClick={submitForm}
                 loading={isSubmitting}
-                __cypress_selector__="${selectorCollector.idFor('submit', { typePrefix: 'buttons' })}"
+                __e2e_selector__="${selectorCollector.idFor('submit', { typePrefix: 'buttons' })}"
               />
             }
           >
@@ -584,7 +584,7 @@ function getFormFieldComponents({ model, selectorCollector, }) {
                 <Typed.TextField 
                   name="${formikFieldName}"
                   placeholder="Type..."
-                  __cypress_field_selector__="${selectorCollector.idFor(field.name, { typePrefix: 'fields' })}"
+                  __e2e_field_selector__="${selectorCollector.idFor(field.name, { typePrefix: 'fields' })}"
                 />
               </div>
             `);
@@ -602,7 +602,7 @@ function getFormFieldComponents({ model, selectorCollector, }) {
                   name="${formikFieldName}"
                   placeholder="2511"
                   decimals={${decimals}}
-                  __cypress_field_selector__="${selectorCollector.idFor(field.name, { typePrefix: 'fields' })}"
+                  __e2e_field_selector__="${selectorCollector.idFor(field.name, { typePrefix: 'fields' })}"
                 />
               </div>
             `);
@@ -615,7 +615,7 @@ function getFormFieldComponents({ model, selectorCollector, }) {
                 <Typed.CheckBoxField 
                   name="${formikFieldName}" 
                   label="${label}" 
-                  __cypress_field_selector__="${selectorCollector.idFor(field.name, { typePrefix: 'fields' })}"
+                  __e2e_field_selector__="${selectorCollector.idFor(field.name, { typePrefix: 'fields' })}"
                 />
               </div>
             `);
@@ -640,8 +640,8 @@ function getFormFieldComponents({ model, selectorCollector, }) {
             <Typed.${refMeta.react.components.forms.searchFieldName} 
               name="${formikFieldName}" 
               placeholder="Search..." 
-              __cypress_options_selector__="${selectorCollector.idFor(field.name, { typePrefix: 'options' })}"
-              __cypress_combobox_selector__="${selectorCollector.idFor(field.name, { typePrefix: 'fields' })}"
+              __e2e_options_selector__="${selectorCollector.idFor(field.name, { typePrefix: 'options' })}"
+              __e2e_combobox_selector__="${selectorCollector.idFor(field.name, { typePrefix: 'fields' })}"
             />
           </div>
         `);
@@ -655,7 +655,7 @@ function getFormFieldComponents({ model, selectorCollector, }) {
             <Typed.${enumMeta.react.selectFieldName} 
               name="${formikFieldName}" 
               placeholder="Search..." 
-              __cypress_field_selector__="${selectorCollector.idFor(field.name, { typePrefix: 'fields' })}"
+              __e2e_field_selector__="${selectorCollector.idFor(field.name, { typePrefix: 'fields' })}"
             />
           </div>
         `);

package/dist/lib/meta.js

@@ -154,11 +154,11 @@ function getSchemaMetadata({ config }) {
         },
         e2e: {
             dataMocker: {
-                filePath: Types.toPath(`${config.paths.cypressPath}support/data-mocker.class`),
-                stubImportPath: Types.toPath(`${config.paths.cypressPath}support/stubs`),
-                stubIndexFilePath: Types.toPath(`${config.paths.cypressPath}support/stubs/index`),
+                filePath: Types.toPath(`${config.paths.playwrightPath}support/data-mocker.class`),
+                stubImportPath: Types.toPath(`${config.paths.playwrightPath}support/stubs`),
+                stubIndexFilePath: Types.toPath(`${config.paths.playwrightPath}support/stubs/index`),
             },
-            selectorsFilePath: Types.toPath(`${config.paths.cypressPath}support/selectors`),
+            selectorsFilePath: Types.toPath(`${config.paths.playwrightPath}support/selectors`),
         },
         importExport: {
             importPath: Types.toBackendModulePath(`@backend/import-export`),
@@ -311,7 +311,7 @@ function getModelMetadata({ model }) {
             dataServiceIdName: Types.toVariableName(`${uncapitalized}`),
         },
         e2e: {
-            dataMockerStubFilePath: Types.toPath(`${config.paths.cypressPath}support/stubs/${camelCase}.stub`),
+            dataMockerStubFilePath: Types.toPath(`${config.paths.playwrightPath}support/stubs/${camelCase}.stub`),
         },
         importExport: {
             exportDataPropertyName: Types.toVariableName(`${capitalizedPlural}`),

package/dist/lib/schema/schema.d.ts

@@ -23,9 +23,9 @@ export type SchemaConfig = {
          */
         businessLogicPath: Types.FilePath;
         /**
-         * Path to the directory containing Cypress project.
+         * Path to the directory containing Playwright project.
          */
-        cypressPath: Types.FilePath;
+        playwrightPath: Types.FilePath;
         /**
          * Path to the directory containing e2e tests.
          */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@postxl/generator",
-  "version": "0.57.1",
+  "version": "0.58.0",
   "main": "./dist/generator.js",
   "typings": "./dist/generator.d.ts",
   "bin": {