I'm trying test of Electron app with Spectron.
But I can't test client window javascript global variable.
Here is my simplified code.
Please help me.
Thanks.
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>MY ELECTRON</title>
<script type="text/javascript" src="script.js"></script>
<link href="./style.css" rel="stylesheet">
</head>
<body>
</body>
</html>
script.js
let mode;
function onload_func(){
mode = 'normal';
}
window.onload = onload_func;
spec.js
const Application = require('spectron').Application
const assert = require('assert')
const electronPath = require('electron')
const path = require('path')
let app;
describe('Application launch', function () {
this.timeout(10000)
beforeEach(function () {
app = new Application({
path: electronPath,
args: [path.join(__dirname, '../src')]
})
return app.start()
})
afterEach(function () {
if (app && app.isRunning()) {
return app.stop()
}
})
it('initial mode',function(){
assert.equal(app.client.mode,'normal');
})
})
I'm not sure if it will solve your specific tests, but app.browserWindow should do the trick since as they say:
It provides you access to the current BrowserWindow and contains all
the APIs.
Note that it's an alias to require('electron').remote.getCurrentWindow()
Read more: https://github.com/electron/spectron#browserwindow
Related
I want to call a function using eel that isn't available before the program runs.
With plain JS it works just fine, I need some workaround or something similar for TS.
Python file
import eel
eel.init('web', allowed_extensions=['.js', '.html'])
#eel.expose
def my_python_function():
print(2)
eel.start('index.html', mode='chrome', cmdline_args=['--kiosk'])
Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="myButton"></button>
<script type="text/javascript" src="/eel.js"></script>
<script type="module" src="js/index.js"></script>
</body>
</html>
Working JS
let button = document.getElementById("myButton");
button.onclick = buttonClicked;
function buttonClicked()
{
console.log("Clicked");
eel.my_python_function();
}
If I am not using TS in it's intended way I'm sorry, I'm a beginner in web dev.
The following code is what i tried in TS but didn't work
let button : HTMLElement | null= document.getElementById('myButton');
button?.addEventListener("click", buttonClicked)
function buttonClicked()
{
console.log("Clicked");
eel.my_python_function(); // Error here
}
I got it working by ignoring the error.
let button : HTMLElement | null= document.getElementById('myButton');
button?.addEventListener("click", buttonClicked)
function buttonClicked()
{
console.log("Clicked");
// #ts-ignore
eel.my_python_function();
}
I'm stuck. I tried many solutions but none of them works.
Trying to implement a module, I get this error message:
Uncaught ReferenceError: exports is not defined
I tried solution from Stack Overflow, but it does not work. Changing anything in tsconfing does not make any difference. I added var exports = {}; into scripts in HTML file and error changes from "exports" to "require" - dead end.
server node:
var fs = require('fs');
const express = require('express');
var path = require('path');
var { request } = require('http');
var app = express();
app.use(express.static(path.join(__dirname, 'public')));
app.listen(3533);
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="testing site">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>simple testin </title>
</head>
<body >
</body>
<script type="text/javascript" src="webscripts/run_scripts.js"></script>
<script type="text/javascript" src="webscripts/library.js"></script>
</html>
library.ts:
export function appearSomeTestingSentence() {
document.write('111111');
};
library.js:
"use strict";
exports.__esModule = true;
exports.appearSomeTestingSentence = void 0;
exports.appearSomeTestingSentence = function () {
document.write('111111');
};
run_scripts.ts:
import {appearSomeTestingSentence} from './library.js';
appearSomeTestingSentence();
run_scripts.js:
"use strict";
exports.__esModule = true;
var library_1 = require("./library");
library_1.appearSomeTestingSentence();
Finally i sort it out. I had to delete *.js files before i compile with tsc and i had to restart tsc after changing something in tsconfig. Problem solved after
changing module to"module" : "ESNext" in tsconfig file.
I am getting the console error '$ is not a function' when using Jquery with Jsdom. I am using the latest Jquery version 3.3.1 and Jsdom 13.2.0. I am also using Browserify in order to utilize require.
main.js
var jsdom = require('jsdom');
const { JSDOM } = jsdom;
const { window } = new JSDOM();
const { document } = (new JSDOM('')).window;
global.document = document;
var $ = jQuery = require('jquery')(window);
$("body").click(function() {
$("#name-tag").fadeOut("slow", function() {
// Animation complete.
});
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="scss/styles.css" />
<script src="js/bundle.js"></script>
</head>
<body>
<div id="name-tag">
<h1>Hello World</h1>
</div>
</body>
</html>
Get rid of (window) after require('jquery'), so it should just be:
var $ = jQuery = require('jquery');
What you've written is redefining $ and jQuery as if you'd done:
jQuery = require('jquery');
var $ = jQuery = jQuery(window);
BTW, you can't declare two variables by chaining assignments like that. Only the first variable is being declared locally, the second one is an assignment without a declaration. If you want to declare two variables and given them the same value, do it in two steps:
var $, jQuery;
$ = jQuery = require('jquery');
I have this javascript code that shows the current status of notification permission:
main.js
var $status = document.getElementById('status');
if ('Notification' in window) {
$status.innerText = Notification.permission;
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p>Current permission status is
<b id="status">unavailable</b>
</p>
<script src="/scripts/main.js"></script>
</body>
</html>
If I write the same code in a typescript file I am getting this error:
main.ts
var $status = document.getElementById('status');
if ('Notification' in window) {
$status.innerText = Notification.permission;
}
ERROR - Notification.permission
MESSAGE - Property 'permission' not exists on type
'new(title: string, options?: NotificationOptions): Notification;
prototype: Notification;
requestPermission(callback?: NotificationPermissionCallback):
Promise<string>;'
How to ignore this error?
Try casting Notification to the any type to avoid transpiler errors.
if ('Notification' in window) {
$status.innerText = (Notification as any).permission;
}
The other option is to include the Notification type's definition.
This is my script.js code:
var app = angular.module('starter', [])
app.provider('RouteHelpers', function () {
this.basepath = function (uri) {
return 'app/views/' + uri;
};
this.$get = function () {
};
});
app.config(function (RouteHelpers) {
console.log('Never gets here');
});
And this is index.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app='starter'>
</body>
</html>
And I'm getting this error in my browser: https://tinyurl.com/nbareaa
Does someone have an idea what is wrong in this code?
You have created a provider, which means if you try and inject it into your config function you must append Provider to the end of the providers name, for example:
app.config(function(RouteHelpersProvider){
});
You are getting the error because it cannot find the given injector. You can read more here under provider recipe.