Use cucumber and XRAY in protractor - jasmine

I'm using Cucumber in my project with protractor and now I want to integrate it with Jira using XRAY but looking at the documentation, it uses jasmine and I don't know how to use both frameworks because if I put the code as indicated in the documentation using the "jasmine" framework instead of "custom" it doesn't recognize the cucumber sentences of the features.
Can someone help me? Thanks in advance
I include package.json and xrayconfig.ts .
xrayconfig.ts:
import { Config, protractor } from 'protractor';
import * as reporter from "cucumber-html-reporter";
import 'jasmine';
const XrayReporter = require('protractor-xray-reporter');
let onPrepareDefer;
let onCompleteDefer;
export let config: Config = {
directConnect: true,//Running chrome
capabilities: {
'browserName': 'chrome'
},
framework: 'jasmine',
frameworkPath: require.resolve('protractor-cucumber-framework'),
"types": ["chai", "cucumber", "node"],
specs: ['../Features/*.feature'],
cucumberOpts: {
tags:"#scenarioLola", //only executed this scenario
require: [
'../JSFiles/stepDefinitions/*.js' // accepts a glob
]
},
'onPrepare': function() {
let globals = require('protractor');
let browser = globals.browser;
onPrepareDefer = protractor.promise.defer();
onCompleteDefer = protractor.promise.defer();
const options = {
'screenshot': 'always',
'version': '1.0',
'jiraUser': 'user',
'jiraPassword': 'pwd',
'xrayUrl': 'https://jira.com/rest/raven/1.0/import/execution'
};
jasmine.getEnv().addReporter(XrayReporter(options, onPrepareDefer, onCompleteDefer, browser));
return onPrepareDefer.promise;
},
'onComplete': function() {
return onCompleteDefer.promise;
}
};
package.json
{
"name": "project",
"version": "1.0.0",
"description": "Project one",
"main": "index.js",
"scripts": {
"test": "protractor JSFiles/cucumberconfig.js",
"pretest": "tsc",
"protractor": "./node_modules/protractor/built/cli.js",
"webdriver-update": "./node_modules/.bin/webdriver-manager update"
},
"author": "Carol",
"license": "ISC",
"dependencies": {
"#types/cucumber": "^6.0.1",
"#types/jasmine": "^3.5.11",
"#types/jasminewd2": "2.0.8",
"#types/node": "^14.0.13",
"#types/jest": "^26.0.0",
"chai": "^4.2.0",
"chai-as-promised": "^7.1.1",
"cucumber": "^6.0.5",
"cucumber-html-reporter": "^5.2.0",
"jasmine": "~3.5.0",
"protractor-cucumber-framework": "^6.2.1",
"typescript": "~3.9.5",
"protractor-jasmine2-screenshot-reporter": "0.5.0"
},
"devDependencies": {
"install-peers": "^1.0.3",
"protractor": "^7.0.0",
"protractor-zephyr-reporter": "^1.2.1",
"ts-node": "^8.10.2",
"jasmine-spec-reporter": "5.0.2",
"jasmine-core": "3.5.0"
}
}

Related

Webpack module federation error: Cannot destructure property `ModuleFederationPlugin` of 'undefined' or 'null'

I am currently modifying the configuration file a Vue app (acting here as a host app) to implement the plugin of webpack : ModuleFederationPlugin.
The goal for me is to set up a micro-frontend architecture by getting a component from a remote app called "foo".
Here is the code to reproduce the issue :
config file host app :
const path = require("path");
const helpers = require("./config/helpers");
const { ModuleFederationPlugin } = require("webpack").container;
const config = {
configureWebpack: {
entry: {
polyfill: "#babel/polyfill",
},
stats: {
cached: false,
cachedAssets: false,
chunks: false,
chunkModules: false,
chunkOrigins: false,
modules: false,
},
devServer: {
historyApiFallback: true,
port: 8765,
},
plugins: [
new ModuleFederationPlugin({
name: "vue",
remotes: {
foo: "foo#http://localhost:5173/remoteEntry.js",
},
}),
],
},
pluginOptions: {
"style-resources-loader": {
preProcessor: "scss",
patterns: [],
},
},
};
module.exports = config;
package.json host app :
{
"name": "Test",
"version": "1.0.0",
"description": "Test",
"author": "Test",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"vue": "^2.6.10"
},
"devDependencies": {
"#babel/core": "7.7.2",
"#babel/plugin-transform-runtime": "7.6.2",
"#babel/preset-env": "7.7.1",
"#babel/register": "7.7.0",
"#vue/cli-plugin-babel": "^4.0.5",
"#vue/cli-plugin-eslint": "^4.0.5",
"#vue/cli-service": "^4.0.5",
"#vue/eslint-config-airbnb": "^5.0.0",
"babel-plugin-istanbul": "5.2.0",
"cache-loader": "^4.1.0",
"eventsource-polyfill": "0.9.6",
"image-webpack-loader": "^6.0.0",
"karma-webpack": "4.0.2",
"selenium-server": "3.141.59",
"url-loader": "^2.2.0",
"vue-cli-plugin-style-resources-loader": "^0.1.4",
"vue-loader": "15.7.2",
"vue-style-loader": "4.1.2",
"vue-template-compiler": "2.6.10",
"webpack": "^4.41.2",
"webpack-merge": "4.2.2"
},
"engines": {
"node": ">= 8.0.0",
"npm": ">= 5.0.0"
}
}
yarn version host app : 1.22.19
node version host app : v12.0.0
config file remote app :
import svgr from "vite-plugin-svgr"
import { defineConfig } from "vite"
import react from "#vitejs/plugin-react"
import * as path from "path"
import federation from "#originjs/vite-plugin-federation"
export default defineConfig({
plugins: [
svgr(),
react(),
federation({
name: "foo",
filename: "remoteEntry.js",
exposes: {
"./App": "./src/App.tsx",
},
}),
],
build: {
target: "esnext",
assetsDir: "assets",
},
server: {
host: "0.0.0.0",
port: 5173,
},
})
package.json file of the remote app :
{
"name": "test",
"version": "1.0.0",
"description": "test",
"author": "test",
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"build:prod": "tsc && vite build",
"build:demo": "tsc && vite build --mode demo",
"preview": "vite preview",
"lint:check": "eslint \"./src/**/*.{ts,tsx}\"",
"lint:fix": "eslint --fix \"./src/**/*.{ts,tsx}\"",
"prettier:check": "prettier --check .",
"prettier:fix": "prettier --write ."
},
"dependencies": {
"#emotion/react": "^11.10.0",
"#emotion/styled": "^11.10.0",
"#mui/icons-material": "^5.10.9",
"#mui/material": "^5.10.0",
"#mui/x-date-pickers": "^5.0.0",
"#originjs/vite-plugin-federation": "^1.1.11",
"axios": "^0.27.2",
"classnames": "^2.3.1",
"dayjs": "^1.11.5",
"i18next": "^21.8.14",
"moment": "^2.29.4",
"npm": "^8.19.2",
"react": "^18.2.0",
"react-charts": "=3.0.0-beta.30",
"react-confetti": "^6.1.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.33.1",
"react-i18next": "^11.18.1",
"react-number-format": "^5.0.1",
"react-router-dom": "^6.3.0"
},
"devDependencies": {
"#types/node": "^18.7.18",
"#types/react": "^18.0.15",
"#types/react-dom": "^18.0.6",
"#typescript-eslint/eslint-plugin": "^5.30.7",
"#typescript-eslint/parser": "^5.30.7",
"#vitejs/plugin-react": "^2.0.0",
"eslint": "^8.20.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-react": "^7.30.1",
"prettier": "^2.7.1",
"sass": "^1.55.0",
"typescript": "^4.6.4",
"vite": "^3.0.0",
"vite-plugin-svgr": "^2.2.1"
}
}
yarn version of the remote app : 1.22.19
node version of the remote app : v12.0.0
Here is what I get when running the host app with "yarn serve" :
error logs when launching the app
My goal is then to be able to use the component App from the remote app in the host app by importing it like that :
Vue.component("App", () => import("foo/App"));

Nativescript cannot find module '#nativescript/angular/router'

I am developing an app using nativescript and angular 11.0. For initial startup creating a login screen. Facing issues while running the application. Get the below exception. The issue happens only when routing is enabled in the module.
ERROR in ./app/login/login.component.ts
Module not found: Error: Can't resolve '#nativescript/angular/router' in 'D:\Mobile_dev\ns-ng-quiz\app-ns-ng\src\app\login'
# ./app/login/login.component.ts 3:0-64 5:0-51 40:113-132 78:38-57
# ./app/app.module.ts
# ./main.ts
ng update says everything is in order. Deleting node_modules folder and a fresh npm install did not help either.
Here is my package.json
{
"name": "#nativescript/template-hello-world-ng",
"main": "main.js",
"version": "7.0.8",
"author": "NativeScript Team <oss#nativescript.org>",
"description": "NativeScript Application",
"license": "SEE LICENSE IN <your-license-filename>",
"publishConfig": {
"access": "public"
},
"keywords": [
"nativescript",
"mobile",
"angular",
"{N}",
"template"
],
"repository": {
"type": "git",
"url": "<fill-your-repository-here>"
},
"bugs": {
"url": "https://github.com/NativeScript/NativeScript/issues"
},
"dependencies": {
"#angular/animations": "~11.0.0",
"#angular/common": "~11.0.0",
"#angular/compiler": "~11.0.0",
"#angular/core": "~11.0.0",
"#angular/forms": "~11.0.0",
"#angular/platform-browser": "~11.0.0",
"#angular/platform-browser-dynamic": "~11.0.0",
"#angular/router": "~11.0.0",
"#nativescript/angular": "~11.0.0",
"#nativescript/core": "~7.0.0",
"#nativescript/theme": "~3.0.0",
"reflect-metadata": "~0.1.12",
"rxjs": "^6.6.0",
"zone.js": "~0.11.1"
},
"devDependencies": {
"#angular/compiler-cli": "~11.0.0",
"#nativescript/android": "7.0.1",
"#nativescript/types": "~7.0.0",
"#nativescript/webpack": "~3.0.0",
"#ngtools/webpack": "~11.0.0",
"typescript": "~4.0.0"
},
"private": "true",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
}
}
Here is my app-routing.module.ts
import { LoginComponent } from './login/login.component';
import { HomeComponent } from './home/home.component';
import { NgModule } from "#angular/core";
import { Routes } from "#angular/router";
import { NativeScriptRouterModule } from "#nativescript/angular";
import { ItemsComponent } from "./item/items.component";
import { ItemDetailComponent } from "./item/item-detail.component";
const routes: Routes = [
{path: "", redirectTo: "/login", pathMatch: "full" },
{path:"login", component:LoginComponent},
{path:"home", component:HomeComponent}
//{ path: "", redirectTo: "/items", pathMatch: "full" },
// { path: "items", component: ItemsComponent },
// { path: "item/:id", component: ItemDetailComponent }
];
#NgModule({
imports: [NativeScriptRouterModule.forRoot(routes,{
enableTracing:true
})],
exports: [NativeScriptRouterModule]
})
export class AppRoutingModule { }
Project Structure in VSCode
You should be able to import both RouterExtensions for navigation and NativeScriptRouterModule in the module from #nativescript/angular instead of the previous #nativescript/angular/router path.
import { RouterExtensions } from '#nativescript/angular'

Nativescript 6 - environment specific files not working

I just recently migrated my app to NS 6 and I noticed that the environment specific files are not processed properly.
E.g. I have settings.debug.json and settings.release.json. In code, I reference them as import * as settings from '/settings.json' . In NS < 6, this used to work, but now I get an error that that settings.json does not exist.
I have very limited experience with Webpack. Is there a setting I need to configure there for this to work?
Here is my package.json
{
"name": "<app>",
"nativescript": {
"id": "<id>",
"tns-ios": {
"version": "6.0.1"
},
"tns-android": {
"version": "6.0.1"
}
},
"description": "",
"license": "SEE LICENSE IN <your-license-filename>",
"repository": "<fill-your-repository-here>",
"dependencies": {
"moment": "^2.24.0",
"nativescript-appversion": "^1.4.2",
"nativescript-geolocation": "5.1.0",
"nativescript-iqkeyboardmanager": "1.3.0",
"nativescript-loading-indicator": "2.4.0",
"nativescript-local-notifications": "3.1.0",
"nativescript-plugin-firebase": "9.0.2",
"nativescript-theme-core": "~1.0.4",
"tns-core-modules": "6.0.1"
},
"devDependencies": {
"nativescript-dev-webpack": "1.0.2",
"typescript": "3.4.5"
},
"readme": "",
"author": ""
}
Thank you.
You can conditionally load the files using the TNS_ENV variable.
const settings = TNS_ENV !== 'production' ? require('./settings.debug.json') : require('./settings.release.json')

NativeScript Importing NGXS module in app.module throw an error in log console

I'm new with NativeScript and I want to use a state management NGXS and implement to my app. I have installed NGXS with NPM: #ngxs/store #ngxs/logger-plugin and #ngxs/devtools-plugin.
So I added those NGXS module to my app.module.
import { NgModule, NO_ERRORS_SCHEMA } from "#angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { NativeScriptUISideDrawerModule } from "nativescript-ui-sidedrawer/angular";
import { NgxsModule } from '#ngxs/store';
import { NgxsLoggerPluginModule } from '#ngxs/logger-plugin';
import { NgxsReduxDevtoolsPluginModule } from '#ngxs/devtools-plugin';
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { PetState } from './_ngxs/pet/pet.state';
#NgModule({
bootstrap: [
AppComponent
],
imports: [
AppRoutingModule,
NativeScriptModule,
NativeScriptUISideDrawerModule,
NgxsModule.forRoot([
//if i uncomment PetState, in console log show me error, Failed to find module: "./pet.actions"
// PetState
]),
//if i uncomment `NgxsLoggerPluginModule.forRoot()`, in console log show me error, Failed to find module: "#ngxs/logger-plugin
// NgxsLoggerPluginModule.forRoot(),
//if i uncomment `NgxsReduxDevtoolsPluginModule.forRoot()`, in console log show me error, Failed to find module: "#ngxs/devstool-plugin
// NgxsReduxDevtoolsPluginModule.forRoot()
],
declarations: [
AppComponent
],
schemas: [
NO_ERRORS_SCHEMA
]
})
export class AppModule { }
After I added the ngxs module, I got 2 issues.
under NgxsModule.forRoot if I uncomment PetState it throw me error in console log, Failed to find module: "./pet.actions". Please refer
If I uncomment NgxsLoggerPluginModule.forRoot() / NgxsReduxDevtoolsPluginModule.forRoot() I will get error in console log and saying failed to find module #ngxs/logger-plugin / #ngxs/devstool-plugin
below is pet.state.ts codes
import { State, Action, Selector, StateContext } from '#ngxs/store';
import { Pet } from './pet.model';
import { AddPet, RemovePet } from './pet.actions';
export class PetStateModel {
pets: Pet[];
}
#State<PetStateModel>({
name: 'Pet',
defaults: {
pets: []
}
})
export class PetState {
#Selector()
static getPet(state: PetStateModel) {
return state.pets;
}
#Action(AddPet)
addPet({getState, patchState}: StateContext<PetStateModel>, { payload }: AddPet) {
const state = getState();
patchState({
pets: [...state.pets, payload]
})
}
#Action(RemovePet)
removePet({getState, patchState}: StateContext<PetStateModel>, { payload }: RemovePet) {
const state = getState();
patchState({
pets: state.pets.filter(a => a.name !== payload )
})
}
}
I really need someone can give some hand to help me fix the issues,
thanks,
Updated
here is my package.json
{
"nativescript": {
"id": "org.nativescript.pledgeCareSample",
"tns-android": {
"version": "5.2.1"
},
"tns-ios": {
"version": "5.2.0"
}
},
"description": "NativeScript Application",
"license": "SEE LICENSE IN <your-license-filename>",
"repository": "<fill-your-repository-here>",
"scripts": {
"lint": "tslint \"src/**/*.ts\""
},
"dependencies": {
"#angular/animations": "~7.2.0",
"#angular/common": "~7.2.0",
"#angular/compiler": "~7.2.0",
"#angular/core": "~7.2.0",
"#angular/forms": "~7.2.0",
"#angular/http": "~7.2.0",
"#angular/platform-browser": "~7.2.0",
"#angular/platform-browser-dynamic": "~7.2.0",
"#angular/router": "~7.2.0",
"#ngxs/storage-plugin": "^3.4.3",
"#ngxs/store": "^3.4.3",
"nativescript-angular": "~7.2.1",
"nativescript-theme-core": "~1.0.4",
"nativescript-ui-sidedrawer": "~5.1.0",
"nativescript-unit-test-runner": "^0.6.0",
"reflect-metadata": "~0.1.12",
"rxjs": "~6.3.0",
"tns-core-modules": "~5.2.0",
"zone.js": "~0.8.26"
},
"devDependencies": {
"#angular/compiler-cli": "~7.2.0",
"#nativescript/schematics": "~0.5.0",
"#ngtools/webpack": "~7.2.0",
"#ngxs/devtools-plugin": "^3.4.3",
"#ngxs/logger-plugin": "^3.4.3",
"#types/jasmine": "^3.3.12",
"codelyzer": "~4.5.0",
"karma": "4.0.1",
"karma-jasmine": "2.0.1",
"karma-nativescript-launcher": "0.4.0",
"nativescript-dev-sass": "~1.6.0",
"nativescript-dev-typescript": "~0.8.0",
"nativescript-dev-webpack": "~0.20.0",
"tslint": "~5.11.0"
},
"gitHead": "f548ec926e75201ab1b7c4a3a7ceefe7a4db15af",
"readme": "NativeScript Application"
}
Ok I found the solution. After few hours I found this solution here and with my solutions
Just need to remove node_modules, hook and platform folder then npm i and add the platform for both ios and android.
and 1 more thing I am not sure why, I uninstalled for #ngxs/logger-plugin and #ngxs/devtools-plugin and reinstall back to the dependency not in dev dependency.
anyway, for now it work for me.

React-redux app is no longer auto updating

I had a react-redux app working perfectly fine with the UI being auto updated after every file change, then I decided to plugin sass into my app and the auto-reloading stopped working. So in order to get sass in my app, I had to install sass-loader, node-sass, css-loader, etc. But one of the loaders needed webpack 2, so I switched from 1.15 to 2.0, now when I run "npm run dev" I see webpack recompile after every file change, but my UI isn't being auto reloaded in my browser. Can anyone help me troubleshoot this?
Here is my webpack config file:
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');
module.exports = {
context: path.join(__dirname, "src"),
devtool: debug ? "inline-sourcemap" : null,
entry: "./js/app.js",
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0'],
plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy', "transform-object-rest-spread"],
}
},
{
test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader'
}
]
},
output: {
path: __dirname + "/src/",
filename: "app.min.js"
},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],
};
An here is my package.json file:
{
"name": "campaign-viewer",
"version": "0.0.0",
"description": "Code challenge from MediaMath",
"main": "webpack.config.js",
"dependencies": {
"axios": "^0.12.0",
"babel-core": "^6.18.2",
"babel-loader": "^6.2.0",
"babel-plugin-add-module-exports": "^0.1.2",
"babel-plugin-react-html-attrs": "^2.0.0",
"babel-plugin-transform-class-properties": "^6.3.13",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-object-rest-spread": "^6.23.0",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-0": "^6.3.13",
"css-loader": "^0.28.4",
"moment": "^2.18.1",
"node-sass": "^4.5.3",
"react": "^0.14.6",
"react-datetime": "^2.8.10",
"react-dom": "^0.14.6",
"react-redux": "^4.4.5",
"redux": "^3.6.0",
"redux-logger": "^2.6.1",
"redux-promise-middleware": "^3.2.0",
"redux-thunk": "^2.1.0",
"sass-loader": "^6.0.6",
"style-loader": "^0.18.2",
"webpack": "^2.0.0",
"webpack-dev-server": "^1.14.1"
},
"devDependencies": {},
"scripts": {
"dev": "./node_modules/.bin/webpack-dev-server --content-base src --inline --hot",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Chris Stephenson",
"license": "ISC"
}
Looks like the problem was with using webpack-dev-server. When I used version 2.0.0 instead of 1.14.1 it started auto reloading again.

Resources