Why my object instance's variable were not be able to be accessed correctly in cypress/ it block? - cypress

In my class object, I have a variable named category, which would be initialed in constructor.
export class Page {
constructor(category) {
this.category = category;
}
categorySession = `[data-cy="${this.category}-form"]`
enterValue(Value){
cy.get(this.categorySession).find('Value').type(`${Value}`).should('have.value',`${Value}`)
}
}
When I run the test,
In cypress, it throws me a error [data-cy="undefined-form"], but never found it.
import {Page} from "./pages/valuePage"
const LiquidityPage = new Page('Liquidity')
console.log(LiquidityPage.category) <--- it show Liquidity
describe('E2E_case', () => {
describe('Portfolio Value', () => {
it('Input Portfolio Value', () => {
cy.visit('http://localhost:30087/')
LiquidityPage.enterValue(123) // this gives me this error - Timed out retrying after 4000ms: Expected to find element: [data-cy="undefined-form"], but never found it.
})
})
Why is that [data-cy="undefined-form"] but not as my expected value [data-cy="Liquidity-form"]

You would also need to set sessionCategory in the constructor.
That way you will avoid the undefined value in the selector string.
export class Page {
constructor(category) {
this.category = category;
this.categorySession = `[data-cy="${this.category}-form"]`
}
...
}
But that seems quite obvious, you must have tried it already?

Related

Using this.skip with cypress-json-failed results in: TypeError: Cannot read properties of undefined (reading 'message')

I am attempting to use a global beforeeach() algorithm defined in support/e2e to filter tests. This code works.
beforeEach(function () {
var testSuite = new Array();
testSuite = (Cypress.env('suites'));
if (!testSuite) {
return;
}
const testName = Cypress.mocha.getRunner().test.fullTitle().toLowerCase();
let matches = testSuite.some((value) => {
return (testName.includes(value))
});
if (!matches) {
this.skip();
}
return;
})
However, when using in conjunction with cypress-failed-log, tests that are skipped because of the prior algorithm are failing with this error:
TypeError: Cannot read properties of undefined (reading 'message')
Because this error occurred during a `after each` hook we are skipping all of the remaining tests.
at Context.onFailed (webpack:///./node_modules/cypress-failed-log/src/index.js:136:0)
This is what my plug in looks like. It works independent of the sorting algorithm and fails with the same message even if I only leave just the failed:required line and remove the code that uses the message object.
on('task', {
failed: require('cypress-failed-log/src/failed')()
,
log(message) {
console.log(message)
return null
},
table(message) {
console.table(message)
return null
}
})

Cypress: The 'task' event has not been registered in the plugins file. You must register it before using cy.task()

I am writing the end-to-end tests using Cypress for my web application. In my tests, I am trying to create a task, https://docs.cypress.io/api/commands/task. But it is throwing an error. Here is what I did.
I declared a task in the plugins/index.js file as follow.
module.exports = (on) => {
on("task", {
setTestId(id) {
testId = id;
return null;
},
getTestId() {
return testId;
}
});
};
Then I use the task in the test as follow.
cy.task('setTestId', 7654321);
When I run the tests, I am getting the following error.
The 'task' event has not been registered in the plugins file. You must register it before using cy.task()
As you can see, I tried this solution as well, Cypress task fails and complains that task event has not been registered in the plugins file. It did not work either. What is wrong with my code and how can I fix it?
You're missing some formatting (":" and "=>" and such). Try this:
module.exports = (on) => {
on("task", {
setTestId: (id) => {
testId = id;
return null;
},
getTestId: () => {
return testId;
}
});
};
Set the testId as you did:
cy.task('setTestId', 7654321);
And when you want to retrieve the testId, use:
cy.task('getTestId').then((testId) => {
cy.log(testId)
});

Says Jasmine spy is not being called, but I can see that its being called

I can't figure out why Jasmine is claiming that the function I'm spying on isn't being called, especially since it is logging in buildLinksObj when called through and not calling when I remove .and.callThrough() I feel like I've written similar code a bunch of times before without any problem. I'm using Jasmine 2.9
The error message I'm getting is:
1) addToLinks should call buildLinksObj if its given an object with children
it should add the personalized links to PageApp.meta.analytics.links
Expected spy buildLinksObj to have been called.
at UserContext.<anonymous> (http://localhost:9877webpack:///tests/specs/common/FetchPersonalContent.spec.js:854:0 <- tests/app-mcom.js:104553:48)
Here's the except of my code:
FetchPersonalContent.js
const buildLinksObj = (responseObj = {}, targetObj, PageApp) => {
console.log('it logs in buildLinksObj') // This is logging!
}
const addToLinks = (responseArr, personalizedLinks) => {
responseArr.forEach((media) => {
const type = media.type;
const typeObj = media[type];
buildLinksObj(typeObj, personalizedLinks, PageApp);
if (typeObj && typeObj.children) {
console.log('has children!')
console.log('typeObj.children is: ', typeObj.children);
typeObj.children.forEach((child) => {
console.log('has a child')
buildLinksObj(child, personalizedLinks, PageApp);
console.log('buildLinksObj was definitely called. what the heck?')
});
}
});
}
export {buildLinksObj, addToLinks, FetchPersonalContent as default,
};
FetchPersonalContent.spec.js
import * as FetchPersonalContent from '../../../src/FetchPersonalContent'; // my path is definitely correct
describe('it should add the personalized links to PageApp.meta.analytics.links', () => {
it('addToLinks should call buildLinksObj if its given an object with children ', () => {
spyOn(FetchPersonalContent, 'buildLinksObj').and.callThrough();
FetchPersonalContent.addToLinks([{
"personalId": 30718,
"type": "carousel",
"carousel": {}
}], {});
expect(FetchPersonalContent.buildLinksObj).toHaveBeenCalled();
});
});
I'd really appreciate any help!
I have a feeling FetchPersonalContent.buildLinksObj in the spec file is not pointing to the same instance as buildLinksObj in the FetchPersonalContent.js file.
Why is export {FetchPersonalContent as default} required? I am assuming you have shared the complete content of FetchPersonalContent.js in your question.
Possible solutions:
You can try removing FetchPersonalContent from the export statement.
Or
Instead of
export {buildLinksObj, addToLinks, FetchPersonalContent as default,
};
You can directly export the constants in FetchPersonalContent.js file.

Multiple stores within single component using NGXS

Using ngxs I have below setup,
user.state.ts
export class UserState { ... }
product.state.ts
export class ProductState { ... }
App.component.ts
import {UserState} from './user.state'
import {ProductState} from './product.state'
export class App{
/***
I am not sure but like ngrx we can't say,
private userStore:Store<UserState> <============ can we do it in constructor like it
***/
#Select(UserState.getUsers) Users$: Observable<IUsers[]>; // This works
#Select(ProductState.getProducts) Products$: Observable<IProducts[]>; // This works
constructor(private store : Store) {} //<==== Can we have Store<UserState> or Store<ProductState>
ngOnInit(){
/***
Below In 1 Case : when I type this.store.select(state => state.
after .(dot) it doesn't resolve to .Users(Case 1) or .Products(Case 2)
Question: So how can I use two different states for below cases????????????
***/
// 1 Case)
this.store.select(state => state.Users.Users).subscribe((users: IUsers[]) => {
this.users = users;
})
// 2 Case)
this.store.select(state => state.Products.Products).subscribe((products: IProducts[]) => {
this.products = products;
})
}
}
Is there any elegant way to do using NGXS????
I think this might help you
// Keep this as it is
#Select(UserState.getUsers) Users$: Observable<IUsers[]>;
#Select(ProductState.getProducts) Products$: Observable<IProducts[]>;
// And then use it like this
this.Users$.subscribe((users: IUsers[]) => {
this.users = users;
})
this.Products$.subscribe.((products: IProducts[]) => {
this.products = products;
})

cannot find the datastore during the compiling in Angular2

When I try to run my page in Wakanda studio 1.1.3, I am getting an error during the compiling when converting the TS to JS. It shows me an error stating "cannot find the datastore"; which is present in my wakanda database. Is anyone else getting the same error?
here is the code:
this.wakanda.catalog.then(ds=>{
ds.TestDatabase.testmethod().then(op=>{
console.log(op);
});
});
my wakanda.service.ts is of the following
import {WakandaClient} from 'wakanda-client/browser/no-promise';
export class Wakanda {
private _client: WakandaClient;
private _catalog;
constructor() {
//this._client = new WakandaClient({ host: 'http://127.0.0.1:8081' });
this._client = new WakandaClient({});
this._catalog = null;
}
get catalog() {
if (!this._catalog) {
return this._client.getCatalog().then(c => {
this._catalog = c;
return c;
});
}
return Promise.resolve(this._catalog);
}
get directory() {
return this._client.directory;
}
get wakandaClientVersion() {
return this._client.version();
}
}
where TestDatavase is a table in my datastore and has a method called testmethod.
[default]
/Users/adithyavinayak/Documents/Wakanda/solutions/TestDatabase/TestDatabase/web/src/app/home/home.component.ts:21:8
Property 'TestDatabase' does not exist on type 'Catalog'. [default]
Checking finished with 4 errors
This one happens even if i make a call to any datastore during compile time.
The solution for this problem is by using the return type of the catalog to any
this.wakanda.catalog.then((ds:any)=>{
ds.TestDatabase.testmethod().then(op=>{
console.log(op);
});
});
This one works without any problem during the time of compilation.

Resources