I'm trying to follow this article here to add cy.session() to my login function. However when I do this and then run my test, I get the error cy.session is not a function
I've set "experimentalSessionSupport": true in my cypress.json config file (and confirmed that my test is seeing this value as true too). From my understanding, that should be all I need to do, but obviously I'm missing something.
I'm using Cypress version 9.4.1. I've tried creating a custom login command instead (exactly as in the article) but just get the same error when running it.
My test works perfectly without the cy.session() command.
login.js:
class LoginPage {
...
login(username, password) {
cy.session([username, password], () => {
cy.visit('/login');
this.emailField.type(username);
this.passwordField.type(password);
this.loginButton.click();
});
}
}
export default new LoginPage();
cypress.json:
{
...
"experimentalSessionSupport": true
}
I'm using Cypress version 9.4.1.
Welp, this wasn't actually true. I was still on a version that didn't support cy.session(). Silly mistake on my end. It's now all working fine since upgrading Cypress.
Is it a Typescript error - TypeError: cy.[custom command] is not a function?
If so, the type definition is probably not added yet due to experimental flavour.
Add same definition as you would use for a custom command to the top of the test.
This is taken from the latest release.
declare namespace Cypress {
interface SessionOptions {
validate?: () => false | void
}
interface Chainable<Subject = any> {
session(
id: string | object,
setup?: SessionOptions['validate'],
options?: SessionOptions
): Chainable<null>
}
}
Related
I am going through a book on Test Driven Development in React. I've never written JavaScript tests before. The author presents the following Jest code in a file titled calc.test.js:
var add = require('./calc.js')
describe('calculator',function() {
it('add two numbers',function() {
expect(add(1,2)).toEqual(3)
})
})
but VS code automatically translates it to:
const { hasUncaughtExceptionCaptureCallback } = require('process')
const { isTypedArray } = require('util/types')
var add = require('./calc.js')
describe('calculator', function () {
isTypedArray('add two numbers', function () {
hasUncaughtExceptionCaptureCallback(add(1, 2).toEqual(3))
})
})
The author states that his version uses syntax "borrowed from" jasmine. Is that why VS Code changed it? How do I turn this feature off? Jest is installed.
Seems like vscode tries to autocomplete it and expect, and auto imports the modules process and utils/types.
Even though manually importing isn't required per the jest documentation:
In your test files, Jest puts each of these methods and objects into
the global environment. You don't have to require or import anything
to use them. However, if you prefer explicit imports, you can do
import {describe, expect, test} from '#jest/globals'.
You can silence vscode warnings by explicitly importing:
import {describe, expect, test} from '#jest/globals'
I have a Vue.js 2 project with Typescript. In the main.ts file, I've declared 2 variables, that I've wanted to access globally in my project:
// ...
Vue.prototype.$http = http; // this is the library imported from another file, contains various methods such as `get`, `post` etc.
Vue.prototype.$urls = urls; // this is JSON object, also imported from another file
new Vue({
store,
render: (h) => h(App),
}).$mount('#app');
In one of my components, let's call it User I have following mounted code block:
mounted(): void {
this.$http.get(`${this.$urls.getUser}/${this.userId}`);
}
Everything works fine when I'm running a local server (via npm run serve command), but when I create an app build (via npm run build command) and enter the app on the server (or the index.html file on my hdd) I receive following error:
TypeError: Cannot read property 'get' of undefined
at VueComponent.value (user.ts:62) // <-- this line is the one with $http.get from `mounted` hook
I'm not sure how to proceed with this, I've blindly tried to add those global values to various places e.g. in http.d.ts file I have the following:
import { KeyableInterface } from '#/interfaces/HelperInterfaces';
import Vue from 'vue';
declare module 'vue/types/vue' {
interface VueConstructor {
$http: KeyableInterface;
}
}
declare module 'vue/types/vue' {
interface Vue {
$http: KeyableInterface;
}
}
declare module 'vue/types/options' {
interface ComponentOptions<V extends Vue> {
http?: KeyableInterface
}
}
(I've also created urls.d.ts with similar code)
UPDATE #1:
I've tried also following approach - in my main.ts file:
const helperModules = {
/* eslint-disable-next-line #typescript-eslint/no-explicit-any */
install: (vueInstance: any) => {
vueInstance.prototype.$http = http;
vueInstance.prototype.$urls = urls;
},
};
Vue.use(helperModules);
But it still doesn't work (same error).
UPDATE #2:
I've also imported http utility into my user component, and added following console.log to existing mounted callback:
console.log(http, this.$http)
And while working on my localhost, it returns me twice the same value, but when I create a build it returns me:
Module {__esModule: true, Symbol(Symbol.toStringTag): "Module"}, undefined
Similar thing happens, when I add console.log(urls, this.$urls) - imported module is being logged, while prototyped one returns undefined.
Any thoughts? Will appreciate any help.
Finally I've overcome the problem by moving the prototyping parts from main.ts to App.ts file.
I'm not 100% sure if it's a valid "the Vue.js way" of solving this, as I've always declared that in main.js file - but I was using then JavaScript & it was "just working" as expected.
I try to write some basic e2e tests with testcafe on a React/Electron app. First I wrote a basic test getting the app Page Title:
App.e2e.js
import { Selector } from 'testcafe';
fixture`Electron App`.page('../../app/app.html');
test('should contain expected page title', async browser => {
await browser.expect(getPageTitle()).eql('Electron App');
});
The aboove test, it worked well!
But now I'm trying to add other tests like trying to login into the app with the next example:
App.e2e.js
import { Selector, Role } from 'testcafe';
const UserRole = Role('../../app/app.html', async t => {
await t
.typeText('input[name="email"]', 'user#user.com')
.typeText('input[name="password"]', 'secret')
.click(Selector('button[type=submit]').withText('Login'));
});
fixture`Electron App`
.page('../../app/app.html')
.beforeEach(async t => {
await t.useRole(UserRole);
});
test('Click a doc', async t => {
await t
.click(Selector('span').withText('Document'))
.expect(Selector('h1').withText('Document').exists)
.ok();
});
When I try to run e2e tests, I get a weird error like this:
Console output
ERROR Cannot prepare tests due to an error.
TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined
at resolveFileUrl (C:\Users\user\Git\electronApp\node_modules\testcafe\src\api\test-page-url.js:20:30)
at Object.resolvePageUrl (C:\Users\user\Git\electronApp\node_modules\testcafe\src\api\test-page-url.js:42:16)
at Proxy.createRole (C:\Users\user\Git\electronApp\node_modules\testcafe\src\role\index.js:73:17)
at Role (C:\Users\user\Git\electronApp\node_modules\testcafe\src\api\exportable-lib\index.js:15:17)
at Object.<anonymous> (C:\Users\user\Git\electronApp\tests\e2e\App.e2e.js:8:18)
at Function._execAsModule (C:\Users\user\Git\electronApp\node_modules\testcafe\src\compiler\test-file\api-based.js:50:13)
at ESNextTestFileCompiler._runCompiledCode (C:\Users\user\Git\electronApp\node_modules\testcafe\src\compiler\test-file\api-based.js:150:42)
at ESNextTestFileCompiler.execute (C:\Users\user\Git\electronApp\node_modules\testcafe\src\compiler\test-file\api-based.js:174:21)
at ESNextTestFileCompiler.compile (C:\Users\user\Git\electronApp\node_modules\testcafe\src\compiler\test-file\api-based.js:180:21)
at Compiler._getTests (C:\Users\user\Git\electronApp\node_modules\testcafe\src\compiler\index.js:86:31)
Type "testcafe -h" for help.
error Command failed with exit code 1.
It seems like testcafe can't find the correct path to launch the electron app, but in the first case the test worked with the same path. Is there something I'm missing?
Relative URLs in Roles are not supported yet. Keep track of this issue: Support relative urls in Roles. As a workaround, you can use an absolute path.
We have been able to ported all the code for from JS/ES6 project to typescript 3.x but we can't seem to get the following file ported correctly.
The short version of file looks like this:
index.js (original):
export const Log = require('./src/Log');
export const OidcClient = require('./src/OidcClient');
export default {
Log,
OidcClient
};
index.ts (ported):
import Log from './src/Log';
import { OidcClient } from './src/OidcClient';
export default {
Log,
OidcClient
};
The problem appears to be with the import LOG from './src/Log' vs. the export const Log = require('./src/Log'); statement. If we change the source file to use export LOG from './src/Log'; then the Log is undefined in the calling script file, just like the problem we are seeing in the ported version.
Intellisense, for the source file, states that the exported OidcClient statement is defined as
(property) OidcClient: typeof import("c:/.../src/OidcClient").
Whereas the ported version of the OidcClient statement is defined as
(property) OidcClient: typeof OidcClient.
How do we make this work from a TypeScript file?
For completeness
We are using webpack and built the output as a library, with these output settings:
libraryTarget: 'var',
library:'Oidc'
Thus the JS client should use the module like: Oidc.Log.Error(message). But the problem was Oidc.Log is undefine.
The clue
In the browser's debugger we noticed that Oidc is defined as a Module, which is what we expected, but it had a mysterious property called default which had everything we wanted within it. Okay, how to remove the default property and apply everything in it's part object, the Oidc module?
After 4 days of trial and error, we found the solution.
Solution
The documentation, and everything we could find, stated we should use:
export default { Log, OidcClient }
Out of desperation we finally tried removing the default keyword, as in:
export { Log, OidcClient }
and guess what? It worked!!
No more mysterious default property and all the types live off of the Oidc module as expected!
I am trying to include intercom npm package in my code base
but I am getting below error.
can you guys tell me how to fix it.
providing my code snippet below
app/app.component.ts(192,17): error TS2339: Property 'init' does not exist on type 'Intercom'.
package
https://www.npmjs.com/package/ng-intercom
ngOnInit(): void {
this.intercom.init({
app_id: "mobilecode",
// Supports all optional configuration.
widget: {
"activator": "#intercom"
}
});
providing whole code here since my codebase is huge
https://hastebin.com/nafocafaze.js
In your app-module:
import { IntercomModule } from 'ng-intercom';
#NgModule({
imports: [
...
IntercomModule.forRoot({
appId: <your_app_id>, // from your Intercom config
updateOnRouterChange: true // will automatically run `update` on router event changes. Default: `false`
})
...
]
})
I got it working (in 1.0.0-beta.11) by using update() instead of init(). What I did was change the line inside ngOnInit()
from
this.intercom.init({
to
this.intercom.update({
The whole block will then look like:
ngOnInit() {
this.intercom.update({
app_id: <app_id>,
// Supports all optional configuration.
widget: {
"activator": "#intercom"
}
});
}
Hope this helps!
(Another quickfix is downgrading to 1.0.0-beta.10 where init() does work.)