create-appraisejs 0.2.0 → 0.3.0-alpha.1

package/templates/starter/automation/steps/actions/navigation.step.ts

@@ -0,0 +1,71 @@
+import { When, Then, CustomWorld, expect, SelectorName, resolveLocator, getEnvironment, generateRandomData, RandomDataType } from '../../../packages/cucumber-runtime/src/index.js'
+/**
+ * @name navigation
+ * @description Template steps that deals with browser navigation
+ * @type ACTION
+ */
+
+// This file is generated automatically. Add template steps to this group to generate content.
+
+/**
+ * @name navigate to url
+ * @description Navigate to the specified URL
+ * @icon NAVIGATION
+ */
+When('the user navigates to the {string} url', async function (this: CustomWorld, url: string) {
+  try {
+    await this.page.goto(url, { waitUntil: 'domcontentloaded' })
+  } catch (error) {
+    throw new Error(`Failed to navigate to the ${url} url: ${error}`)
+  }
+})
+
+/**
+ * @name navigate to environment base url
+ * @description Navigate to the base url of the selected environment
+ * @icon NAVIGATION
+ */
+When('the user navigates to the base url of the selected environment', async function (this: CustomWorld) {
+  try {
+    const environment = process.env.ENVIRONMENT as string
+    if (!environment) {
+      throw new Error('Environment is not set')
+    }
+    const environmentConfig = getEnvironment(environment)
+    if (!environmentConfig) {
+      throw new Error(`Environment ${environment} not found`)
+    }
+    await this.page.goto(environmentConfig.baseUrl, {
+      waitUntil: 'domcontentloaded',
+    })
+  } catch (error) {
+    throw new Error(`Failed to navigate to the base url of the selected environment: ${error}`)
+  }
+})
+
+/**
+ * @name reload
+ * @description Template step for reloading the current page
+ * @icon NAVIGATION
+ */
+When('the user reloads the page', async function (this: CustomWorld) {
+  try {
+    await this.page.reload()
+    await this.page.waitForLoadState('domcontentloaded')
+  } catch (error) {
+    throw new Error(`Failed to reload the page: ${error}`)
+  }
+})
+
+/**
+ * @name go back
+ * @description Template step for going back to the previous page
+ * @icon NAVIGATION
+ */
+When('the user goes back to the previous page', async function (this: CustomWorld) {
+  try {
+    await this.page.goBack({ waitUntil: 'domcontentloaded' })
+  } catch (error) {
+    throw new Error(`Failed to go back to the previous page: ${error}`)
+  }
+})

package/templates/starter/automation/steps/actions/random_data.step.ts

@@ -0,0 +1,144 @@
+import { When, Then, CustomWorld, expect, SelectorName, resolveLocator, getEnvironment, generateRandomData, RandomDataType } from '../../../packages/cucumber-runtime/src/index.js'
+/**
+ * @name random data
+ * @description Template steps that handles random data generation
+ * @type ACTION
+ */
+
+// This file is generated automatically. Add template steps to this group to generate content.
+
+/**
+ * @name generate random first name and save in variable
+ * @description Template step for generating a random first name and saving it inside a variable
+ * @icon DATA
+ */
+When(
+    'the user generates a random first name and stores it inside the variable {string}',
+    async function (this: CustomWorld, variableName: string) {
+        const data = generateRandomData(RandomDataType.FIRST_NAME);
+        try {
+            this.setVar(variableName, data);
+        } catch (error) {
+            throw new Error(`Failed to generate a random first name and store it inside the variable ${variableName}: ${error}`);
+        }
+    }
+);
+
+/**
+ * @name generate random last name and save in variable
+ * @description Template step for generating a random last name and saving it inside a variable
+ * @icon DATA
+ */
+When(
+    'the user generates a random last name and stores it inside the variable {string}',
+    async function (this: CustomWorld, variableName: string) {
+        const data = generateRandomData(RandomDataType.LAST_NAME);
+        try {
+            this.setVar(variableName, data);
+        } catch (error) {
+            throw new Error(`Failed to generate a random last name and store it inside the variable ${variableName}: ${error}`);
+        }
+    }
+);
+
+/**
+ * @name generate random email and save in variable
+ * @description Template step for generating a random email and saving it inside a variable
+ * @icon DATA
+ */
+When(
+    'the user generates a random email and stores it inside the variable {string}',
+    async function (this: CustomWorld, variableName: string) {
+        const data = generateRandomData(RandomDataType.EMAIL);
+        try {
+            this.setVar(variableName, data);
+        } catch (error) {
+            throw new Error(`Failed to generate a random email and store it inside the variable ${variableName}: ${error}`);
+        }
+    }
+);
+
+/**
+ * @name generate random password and save in variable
+ * @description Template step for generating a random password and saving it inside a variable
+ * @icon DATA
+ */
+When(
+    'the user generates a random password and stores it inside the variable {string}',
+    async function (this: CustomWorld, variableName: string) {
+        const data = generateRandomData(RandomDataType.PASSWORD);
+        try {
+            this.setVar(variableName, data);
+        } catch (error) {
+            throw new Error(`Failed to generate a random password and store it inside the variable ${variableName}: ${error}`);
+        }
+    }
+);
+
+/**
+ * @name generate random phone and save in variable
+ * @description Template step for generating a random phone and saving it inside a variable
+ * @icon DATA
+ */
+When(
+    'the user generates a random phone and stores it inside the variable {string}',
+    async function (this: CustomWorld, variableName: string) {
+        const data = generateRandomData(RandomDataType.PHONE);
+        try {
+            this.setVar(variableName, data);
+        } catch (error) {
+            throw new Error(`Failed to generate a random phone and store it inside the variable ${variableName}: ${error}`);
+        }
+    }
+);
+
+/**
+ * @name generate random address and save in variable
+ * @description Template step for generating a random address and saving it inside a variable
+ * @icon DATA
+ */
+When(
+    'the user generates a random address and stores it inside the variable {string}',
+    async function (this: CustomWorld, variableName: string) {
+        const data = generateRandomData(RandomDataType.ADDRESS);
+        try {
+            this.setVar(variableName, data);
+        } catch (error) {
+            throw new Error(`Failed to generate a random address and store it inside the variable ${variableName}: ${error}`);
+        }
+    }
+);
+
+/**
+ * @name generate random unique text and save in variable
+ * @description Template step for generating a random unique text and saving it inside a variable
+ * @icon DATA   
+ */
+When(
+    'the user generates a random unique text and stores it inside the variable {string}',
+    async function (this: CustomWorld, variableName: string) {
+        const data = generateRandomData(RandomDataType.UNIQUE_TEXT);
+        try {
+            this.setVar(variableName, data);
+        } catch (error) {
+            throw new Error(`Failed to generate a random unique text and store it inside the variable ${variableName}: ${error}`);
+        }
+    }
+);
+
+/**
+ * @name generate random full name and save in variable
+ * @description Template step for generating a random full name and saving it inside a variable
+ * @icon DATA
+ */
+When(
+    'the user generates a random full name and stores it inside the variable {string}',
+    async function (this: CustomWorld, variableName: string) {
+        const data = generateRandomData(RandomDataType.FULL_NAME);
+        try {
+            this.setVar(variableName, data);
+        } catch (error) {
+            throw new Error(`Failed to generate a random full name and store it inside the variable ${variableName}: ${error}`);
+        }
+    }
+);

package/templates/starter/automation/steps/actions/store.step.ts

@@ -0,0 +1,87 @@
+import { When, Then, CustomWorld, expect, SelectorName, resolveLocator, getEnvironment, generateRandomData, RandomDataType } from '../../../packages/cucumber-runtime/src/index.js'
+/**
+ * @name store
+ * @description Template steps that handle data storage
+ * @type ACTION
+ */
+
+// This file is generated automatically. Add template steps to this group to generate content.
+
+/**
+ * @name store element text
+ * @description Template step for storing element text inside a data variable to be referenced in later steps
+ * @icon STORE
+ */
+When(
+  'the user stores the {string} element text inside the variable {string}',
+  async function (
+    this: CustomWorld,
+    elementName: SelectorName,
+    storeVariableName: string
+  ) {
+    const selector = await resolveLocator(this.page, elementName);
+    if (!selector) {
+      throw new Error(`Selector ${elementName} not found`);
+    }
+    try {
+      const text = await this.page.locator(selector).textContent();
+      this.setVar(storeVariableName, text);
+    } catch (error) {
+      throw new Error(
+        `Failed to store the ${elementName} element text: ${error}`
+      );
+    }
+  }
+);
+
+/**
+ * @name store text input text
+ * @description Template step for storing text input element values inside a variable
+ * @icon STORE
+ */
+When(
+  'the user stores the {string} text input value inside the variable {string}',
+  async function (
+    this: CustomWorld,
+    fieldName: SelectorName,
+    variableName: string
+  ) {
+    const selector = await resolveLocator(this.page, fieldName);
+    if (!selector) {
+      throw new Error(`Selector ${fieldName} not found`);
+    }
+    try {
+      const value = await this.page.locator(selector).inputValue();
+      this.setVar(variableName, value);
+    } catch (error) {
+      throw new Error(
+        `Failed to store the ${fieldName} text input value: ${error}`
+      );
+    }
+  }
+);
+
+/**
+ * @name store textarea text
+ * @description Template step for storing textarea content inside a variable
+ * @icon STORE
+ */
+When(
+  'the user stores the {string} textarea input value inside the variable {string}',
+  async function (
+    this: CustomWorld,
+    elementName: SelectorName,
+    variableName: string
+  ) {
+    const selector = await resolveLocator(this.page, elementName);
+    if (!selector) {
+      throw new Error(`Selector ${elementName} not found`);
+    }
+    try {
+      const text = await this.page.locator(selector).inputValue();
+      this.setVar(variableName, text);
+    } catch (error) {
+      throw new Error(`Failed to store the ${elementName} textarea input value inside the variable ${variableName}: ${error}`);
+    }
+  }
+);

package/templates/starter/automation/steps/actions/wait.step.ts

@@ -0,0 +1,111 @@
+import { When, Then, CustomWorld, expect, SelectorName, resolveLocator, getEnvironment, generateRandomData, RandomDataType } from '../../../packages/cucumber-runtime/src/index.js'
+/**
+ * @name wait
+ * @description Template steps that handles waiting
+ * @type ACTION
+ */
+/**
+ * @name wait for page load
+ * @description Template step for waiting till page becomes interactive
+ * @icon WAIT
+ */
+When(
+  'the user waits for the current page to be loaded',
+  async function (this: CustomWorld) {
+    try {
+      await this.page.waitForLoadState('domcontentloaded');
+    } catch (error) {
+      throw new Error(
+        `Failed to wait for the current page to be loaded: ${error}`
+      );
+    }
+  }
+);
+
+/**
+ * @name wait for url route
+ * @description Template step for waiting for a url route to be loaded
+ * @icon WAIT
+ */
+When(
+  'the user waits for the route {string} to be loaded',
+  async function (this: CustomWorld, routeName: string) {
+    try {
+      const baseUrl = getEnvironment(process.env.ENVIRONMENT as string).baseUrl;
+      const sanitizedBaseUrl = baseUrl.endsWith('/')
+        ? baseUrl.slice(0, -1)
+        : baseUrl;
+      const sanitizedRouteName = routeName.startsWith('/')
+        ? routeName.slice(1)
+        : routeName;
+      const fullRoute = `${sanitizedBaseUrl}/${sanitizedRouteName}`;
+      await this.page.waitForURL(fullRoute, { waitUntil: 'domcontentloaded' });
+    } catch (error) {
+      throw new Error(
+        `Failed to wait for the route ${routeName} to be loaded: ${error}`
+      );
+    }
+  }
+);
+
+/**
+ * @name wait for element
+ * @description Template step for waiting for element to become visible
+ * @icon WAIT
+ */
+When(
+  'the user waits for the element {string} to become visible',
+  async function (this: CustomWorld, elementName: SelectorName) {
+    try {
+      const selector = await resolveLocator(this.page, elementName);
+      if (!selector) {
+        throw new Error(`Selector ${elementName} not found`);
+      }
+      await this.page.waitForSelector(selector, { state: 'visible' });
+    } catch (error) {
+      throw new Error(
+        `Failed to wait for the element ${elementName} to become visible: ${error}`
+      );
+    }
+  }
+);
+
+/**
+ * @name wait for element to disappear
+ * @description Template step for waiting for an element to disappear from viewport
+ * @icon WAIT
+ */
+When(
+  'the user waits for the {string} element to disappear',
+  async function (this: CustomWorld, elementName: SelectorName) {
+    try {
+      const selector = await resolveLocator(this.page, elementName);
+      if (!selector) {
+        throw new Error(`Selector ${elementName} not found`);
+      }
+      await this.page.waitForSelector(selector, { state: 'hidden' });
+    } catch (error) {
+      throw new Error(
+        `Failed to wait for the ${elementName} element to disappear: ${error}`
+      );
+    }
+  }
+);
+
+/**
+ * @name wait for specific amount of seconds
+ * @description Template step for waiting for for an specific amount of seconds before proceeding with next action
+ * @icon WAIT
+ */
+When(
+  'the user waits for {int} seconds',
+  async function (this: CustomWorld, waitTimeInSeconds: number) {
+    try {
+      await this.page.waitForTimeout(waitTimeInSeconds * 1000);
+    } catch (error) {
+      throw new Error(
+        `Failed to wait for ${waitTimeInSeconds} seconds: ${error}`
+      );
+    }
+  }
+);

package/templates/starter/automation/steps/validations/active_state_assertion.step.ts

@@ -0,0 +1,31 @@
+import { When, Then, CustomWorld, expect, SelectorName, resolveLocator, getEnvironment, generateRandomData, RandomDataType } from '../../../packages/cucumber-runtime/src/index.js'
+/**
+ * @name active state assertion
+ * @description Template steps for handling the validation of the active state of an element
+ * @type VALIDATION
+ */
+
+// This file is generated automatically. Add template steps to this group to generate content.
+
+/**
+ * @name assert element active
+ * @description Template step for validating whether an element is active or not
+ * @icon VALIDATION
+ */
+Then(
+  'the element {string} should have active status {boolean} ',
+  async function (this: CustomWorld, elementName: SelectorName, isActive: boolean) {
+    try {
+      const selector = await resolveLocator(this.page, elementName)
+      if (!selector) throw new Error(`Selector ${elementName} not found`)
+      const elementActiveStatus = await this.page.locator(selector).isEnabled({ timeout: 10000 })
+      if (isActive) {
+        void expect(elementActiveStatus, `Expected ${elementName} to be active`).to.be.true
+      } else {
+        void expect(elementActiveStatus, `Expected ${elementName} NOT to be active`).to.be.false
+      }
+    } catch (error) {
+      throw new Error(`Failed to validate the active status of the element ${elementName}: ${error}`)
+    }
+  },
+)

package/templates/starter/automation/steps/validations/navigation_assertion.step.ts

@@ -0,0 +1,23 @@
+import { When, Then, CustomWorld, expect, SelectorName, resolveLocator, getEnvironment, generateRandomData, RandomDataType } from '../../../packages/cucumber-runtime/src/index.js'
+/**
+ * @name navigation assertion
+ * @description Template steps that handles navigation validations
+ * @type VALIDATION
+ */
+
+// This file is generated automatically. Add template steps to this group to generate content.
+
+/**
+ * @name assert url route equals
+ * @description Template step for validating whether a url route equals the provided value or not
+ * @icon VALIDATION
+ */
+Then('the url route should be equal to {string}', async function (this: CustomWorld, route: string) {
+  try {
+    await this.page.waitForLoadState('networkidle')
+    const currentRoute = new URL(this.page.url()).pathname
+    expect(currentRoute, `Expected the current route to be "${route}"`).to.equal(route.toLowerCase())
+  } catch (error) {
+    throw new Error(`Failed to validate the equality of the current route to the route "${route}": ${error}`)
+  }
+})

package/templates/starter/automation/steps/validations/text_assertion.step.ts

@@ -0,0 +1,108 @@
+import { When, Then, CustomWorld, expect, SelectorName, resolveLocator, getEnvironment, generateRandomData, RandomDataType } from '../../../packages/cucumber-runtime/src/index.js'
+/**
+ * @name text assertion
+ * @description Template steps for asserting text inside elements
+ * @type VALIDATION
+ */
+
+// This file is generated automatically. Add template steps to this group to generate content.
+
+/**
+ * @name assert element contains text
+ * @description Template step for validating whether an element contains a certain text or not
+ * @icon VALIDATION
+ */
+Then(
+  'the element {string} should {boolean} contain the text {string}',
+  async function (
+    this: CustomWorld,
+    elementName: SelectorName,
+    shouldContain: boolean,
+    elementText: string
+  ) {
+    try {
+      const selector = await resolveLocator(this.page, elementName);
+      if (!selector) throw new Error(`Selector ${elementName} not found`);
+      const elementTextContent = await this.page
+        .locator(selector)
+        .textContent();
+
+      if (!elementTextContent)
+        throw new Error(
+          `Element ${elementName} does not have any text content`
+        );
+
+      if (shouldContain) {
+        expect(
+          elementTextContent,
+          `Expected ${elementName} to contain "${elementText}"`
+        ).to.contain(elementText);
+      } else {
+        expect(
+          elementTextContent,
+          `Expected ${elementName} NOT to contain "${elementText}"`
+        ).to.not.contain(elementText);
+      }
+    } catch (error) {
+      throw new Error(
+        `Failed to validate the containment of the text of the element ${elementName}: ${error}`
+      );
+    }
+  }
+);
+
+/**
+ * @name assert element equals text
+ * @description Template step for validating whether an element text equals a provided text or not
+ * @icon VALIDATION
+ */
+Then(
+  'the element {string} should {boolean} equal the text {string}',
+  async function (
+    this: CustomWorld,
+    elementName: SelectorName,
+    shouldEqual: boolean,
+    elementText: string
+  ) {
+    try {
+      const selector = await resolveLocator(this.page, elementName);
+      if (!selector) throw new Error(`Selector ${elementName} not found`);
+      const elementTextContent = await this.page
+        .locator(selector)
+        .textContent();
+      if (!elementTextContent)
+        throw new Error(
+          `Element ${elementName} does not have any text content`
+        );
+      if (shouldEqual) {
+        expect(
+          elementTextContent,
+          `Expected ${elementName} to equal "${elementText}"`
+        ).to.equal(elementText);
+      } else {
+        expect(
+          elementTextContent,
+          `Expected ${elementName} NOT to equal "${elementText}"`
+        ).to.not.equal(elementText);
+      }
+    } catch (error) {
+      throw new Error(
+        `Failed to validate the equality of the text of the element ${elementName}: ${error}`
+      );
+    }
+  }
+);
+
+/**
+ * @name assert element contains stored variable text
+ * @description Template step to validate whether an element text contains the text inside a stored variable
+ * @icon VALIDATION
+ */
+Then(
+  'the element {string} should contain the text inside the stored variable {string}',
+  async function (
+    this: CustomWorld,
+    _elementName: SelectorName,
+    _variableName: string
+  ) {}
+);

package/templates/starter/automation/steps/validations/visibility_assertion.step.ts

@@ -0,0 +1,27 @@
+import { When, Then, CustomWorld, expect, SelectorName, resolveLocator, getEnvironment, generateRandomData, RandomDataType } from '../../../packages/cucumber-runtime/src/index.js'
+/**
+ * @name visibility assertion
+ * @description Template steps that handles the assertion of element visibility states
+ * @type VALIDATION
+ */
+
+// This file is generated automatically. Add template steps to this group to generate content.
+
+/**
+ * @name assert element visible
+ * @description Template step for validating whether an element should be visible or not
+ * @icon VALIDATION
+ */
+Then(
+  'the visibility status of the {string} element should be {boolean}',
+  async function (this: CustomWorld, elementName: SelectorName, isVisible: boolean) {
+    try {
+      const selector = await resolveLocator(this.page, elementName)
+      if (!selector) throw new Error(`Selector ${elementName} not found`)
+      const elementVisibilityStatus = await this.page.locator(selector).isVisible({ timeout: 10000 })
+      expect(elementVisibilityStatus).to.equal(isVisible)
+    } catch (error) {
+      throw new Error(`Failed to validate the visibility of the element ${elementName}: ${error}`)
+    }
+  },
+)

package/templates/starter/components.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/app/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {
+    "@kokonutui": "https://kokonutui.com/r/{name}.json"
+  }
+}

package/templates/starter/cucumber.mjs

@@ -0,0 +1,16 @@
+// eslint-disable-next-line import/no-anonymous-default-export
+export default {
+  paths: ['automation/features/**/*.feature'],
+  import: [
+    'packages/cucumber-runtime/src/parameter-types.ts',
+    'automation/steps/**/*.ts',
+    'packages/cucumber-runtime/src/hooks.ts',
+    'packages/cucumber-runtime/src/world.ts',
+  ],
+  loader: ['ts-node/esm'],
+  format: [
+    'pretty',
+    process.env.REPORT_FORMAT ?? `json:${process.env.REPORT_PATH ?? 'automation/reports/cucumber.json'}`,
+  ],
+  publishQuiet: true,
+}

package/templates/starter/eslint.config.mjs

@@ -0,0 +1,20 @@
+import nextCoreWebVitals from 'eslint-config-next/core-web-vitals';
+import nextTypescript from 'eslint-config-next/typescript';
+
+const eslintConfig = [
+  ...nextCoreWebVitals,
+  ...nextTypescript,
+  {
+    ignores: [
+      'automation/steps/**/*.step.ts',
+      'automation/steps/**/*',
+      'packages/cucumber-runtime/dist/**/*',
+      'packages/locator-picker-companion/dist/**/*',
+      'packages/appraisejs/registry/**/*',
+      'templates/**/*',
+      'packages/create-appraisejs/templates/**/*',
+    ],
+  },
+];
+
+export default eslintConfig;