I have created a straight forward project:
Angular 15
Material 15
webdriverio with typescript and angular harness service
#badisi/wdio-harness
The below test
import { MatButtonHarness } from '#angular/material/button/testing';
import { getHarness } from '#badisi/wdio-harness';
fdescribe("jgs-01", () => {
it("find some element", async () => {
await browser.url("http://localhost:4300/playwright");
const button = await getHarness(MatButtonHarness);
await button.click();
});
})
gives this error:
[0-0] 2023-01-26T14:39:41.342Z ERROR #wdio/runner: Error [ERR_REQUIRE_ESM]: require() of ES Module C:\...\wdio-05\node_modules\#angular\material\fesm2015\button\testing.mjs not supported.
[0-0] Instead change the require of C:\...\wdio-05\node_modules\#angular\material\fesm2015\button\testing.mjs to a dynamic import() which is available in all CommonJS modules.
Has anyone successfully used angular harnesses in webdriverio?
Related
I have an application running with Vue, and I am using testcafe to do end-to-end testing.
MyModule.ts
class MyModule {
public value: string;
constructor() {}
}
export default new MyModule();
Test cafe file
import MyModule from '../models/utils/MyModule';
fixture('Getting Started')
.page('http://localhost:8080/en/home/')
.before(async (ctx) => {
MyModule.value = 'Set by Test Cafe';
});
test('Get to the home page', async (t) => {
....
});
App.vue
<template>.....</template>
<script>
import TeMyModulestModule from '#/test/e2e/models/utils/MyModule';
export default {
created() {
console.log('MyModule.value', MyModule.value);
}
}
</script>
Actual result
MyModule.value undefined
Expected result
MyModule.value 'Set by Test Cafe'
Question
Is it possible to achieve this with testCafe? If so what am I doing wrong?
A TestCafe test fixture is a regular node.js script, and it is executed on the server side. You are trying to share your module between different contexts (node.js server-side and browser client-side).
You can put the specified value into the global window object using the ClientFunction or Inject Client Scripts approach and obtain it from the Vue script.
I am running into an issue where I am running multiple tests using supertest and jest. When there is only one test running then it works just fine but the second one throws the following error:
ReferenceError: You are trying to `import` a file after the Jest environment has been torn down.
I tested this with two very simple tests:
describe("Default API", () => {
describe("Default:", () => {
it("should create a user in the DB", (done) => {
request(app).get("/").expect(200, done);
});
it("should create a user in the DB", (done) => {
request(app).get("/").expect(200, done);
});
});
});
They are the same but the second one throws the error. If I run only the first one there is no issue. This must be a setup issue Does anyone have advice. In my index.ts where I have the main express code I export app as follows:
export default app;
This is at the bottom of the index.ts file.
I had the simular problem and toggle down the issue, in my case I want to use mysql2 to access mariadb. That Module try to autodetect the charset and do to try to lacy loading that encoding.
But I have not found a solution for that for now.
I am using for the first time the aurelia-testing package to test my HTML code.
I seem to have followed the docs to set up my test as follows:
describe('Contextual Menu HTML View test suite', function () {
let component: ComponentTester;
beforeEach(function () {
component = StageComponent
.withResources('../../src/components/modal/contextual-menu')
.inView('<contextual-menu is-active.two-way="activateMenu"></contextual-menu>')
.boundTo({ activateMenu: false });
});
it('should not add the is-active class to the root element', async function () {
await component.create(bootstrap);
const rootElement = await waitForDocumentElement('.qa-contextual-menu');
expect(rootElement.classList.contains('is-active')).toBe(false);
});
afterEach(function () {
component.dispose();
});
});
I tried using just bind instead of two-way but that fails too.
I tried both with a document.querySelector and with waitForDocumentElement, both cases fail, but anyways I assume the error comes from earlier.
I am getting an error and I am not sure why. Could you put on the tracks to identify the root cause of the following:
TypeError: Failed to execute 'replaceChild' on 'Node': parameter 1 is not of type 'Node'.
at Object.convert (/Users/lemoustachiste/work/lm-frontend/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/generated/Node.js:573:11)
at HTMLDivElement.replaceChild (/Users/lemoustachiste/work/lm-frontend/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/generated/Node.js:292:31)
at NodeJsDom.replaceNode (/Users/lemoustachiste/work/lm-frontend/node_modules/aurelia-pal-nodejs/dist/nodejs-dom.js:95:29)
at makeElementIntoAnchor (/Users/lemoustachiste/work/lm-frontend/node_modules/aurelia-templating/dist/commonjs/aurelia-templating.js:2432:19)
at applyInstructions (/Users/lemoustachiste/work/lm-frontend/node_modules/aurelia-templating/dist/commonjs/aurelia-templating.js:2479:17)
at ViewFactory.create (/Users/lemoustachiste/work/lm-frontend/node_modules/aurelia-templating/dist/commonjs/aurelia-templating.js:2707:7)
at TemplatingEngine.enhance (/Users/lemoustachiste/work/lm-frontend/node_modules/aurelia-templating/dist/commonjs/aurelia-templating.js:5290:24)
at /Users/lemoustachiste/work/lm-frontend/node_modules/aurelia-framework/dist/commonjs/aurelia-framework.js:176:28
at new Promise (<anonymous>)
at Aurelia.enhance (/Users/lemoustachiste/work/lm-frontend/node_modules/aurelia-framework/dist/commonjs/aurelia-framework.js:174:12)
Thanks a lot
I am not a jest user. So I simply used the scaffolded TS jest skeleton app from aurelia-cli (au new jest-skeleton --unattended --select typescript,jest,vscode). And found that to be working.
It seems the you are missing the following configuration in your jest.config.js.
testEnvironment: "node",
After only adding that, the tests started working.
I am following the instructions for Capacitor Camera APi https://capacitor.ionicframework.com/docs/guides/ionic-framework-app
The plugin works fine when running the application on an android device ionic capacitor run android -l but when serving the app on web I am getting this runtime error:
core.js:15724 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'split' of undefined
TypeError: Cannot read property 'split' of undefined
at camera.js:62
at new ZoneAwarePromise (zone.js:910)
at CameraPluginWeb.push../node_modules/#capacitor/core/dist/esm/web/camera.js.CameraPluginWeb._getCameraPhoto (camera.js:60)
at CameraPluginWeb.<anonymous> (camera.js:40)
at step (tslib.es6.js:99)
at Object.next (tslib.es6.js:80)
at tslib.es6.js:73
at new ZoneAwarePromise (zone.js:910)
at Module.__awaiter (tslib.es6.js:69)
at HTMLElement.<anonymous> (camera.js:29)
at resolvePromise (zone.js:831)
at zone.js:741
at rejected (tslib.es6.js:71)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
at Object.onInvoke (core.js:17299)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:390)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:150)
at zone.js:889
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Object.onInvokeTask (core.js:17290)
This is my code:
import {Injectable} from '#angular/core';
import {from, Observable} from 'rxjs';
import {CameraOptions, CameraResultType, CameraSource, Plugins} from '#capacitor/core';
const { Camera } = Plugins;
#Injectable()
export class MediaService {
takePhoto(): Observable<string | void> {
const options: CameraOptions = {
quality: 100,
allowEditing: false,
source: CameraSource.Camera,
resultType: CameraResultType.Base64
};
return from(Camera.getPhoto(options).then(photo => {
return 'data:image/png;base64,' + photo.base64String;
}).catch(err => {
console.error('Error: ', err);
}));
}
}
I also added these in main.ts
import { defineCustomElements } from '#ionic/pwa-elements/loader';
// Call the element loader after the platform has been bootstrapped
defineCustomElements(window);
Is there anything i am doing wrong or this is a bug in Capacitor Camera API
The problem is the camera can't be used from http, it needs https. Try running with ionic serve --ssl and update the capacitor.config.json to use the https url
"server": {
"url": "http://192.your.local.ip:8100"
}
If you are using Ionic With Capacitor then this is for you
1)install pwa element
"#ionic/pwa-elements": "^1.4.1",
2)In your main.ts file add this line
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));
// Call the element loader after the platform has been bootstrapped
defineCustomElements(window); // add this line
I'm starting writing some tests with Karma and for begging I just decided to try out simple test. However, I get two errors (one related with jasmine, and other with inject (I get same error when I try angular.inject):
two errors Firefox 22.0 (Windows) ConfigurationController encountered a declaration exception FAILED
TypeError: this.func.apply is not a function in
/adapter/lib/jasmine.js?1374202126000 (line 1145)
testacular.js:106
:9876/context.html:40
ReferenceError: inject is not defined in /var/lib/tomcat7/webapps/lunchtime/test/controllers/configuration-controller.js (line 7)
#/var/lib/tomcat7/webapps/lunchtime/test/controllers/configuration-controller.js:7
#/var/lib/tomcat7/webapps/lunchtime/test/controllers/configuration-controller.js:3
Firefox 22.0 (Windows): Executed 1 of 1 (1 FAILED) (0.48 secs / 0.011 secs)
I have simple controller:
app.controller("ConfigurationController", ["$scope", "$http", function($scope, $http) {
$scope.configuration = {};
}]);
And simple test:
'use strict';
describe('ConfigurationController', function() {
var scope, ctrl;
//you need to indicate your module in a test
beforeEach(angular.module('AmphinicyLunch'));
beforeEach(inject(function($rootScope) {
scope = $rootScope.$new();
ctrl = $controller("ConfigurationController", {$scope: scope})
}));
it("should have defined configuration", function($scope) {
dump($scope.configuration);
expect($scope.configuration).toEqual({});
});
});
For the inject error, you need to include angular-mocks.js. both module and inject are defined in that file. I'm afraid I don't know about the Jasmine error.
The solution for this is to include this in karma.conf.js:
files: [
'app/bower_components/angular/angular.js',
'app/bower_components/angular-mocks/angular-mocks.js', <--------- notice mocks here
'app/bower_components/angular-resource/angular-resource.js',
'app/bower_components/angular-cookies/angular-cookies.js',
'app/bower_components/angular-sanitize/angular-sanitize.js',
'app/bower_components/angular-route/angular-route.js',
'app/scripts/*.js',
'app/scripts/**/*.js',
'test/mock/**/*.js',
'test/spec/**/*.js'
],