classList in jsdom

70 views

Skip to first unread message

Martin Neubauer

unread,

Apr 27, 2020, 9:29:19 AM4/27/20

to jsdom

Hi everyone,
i´m new in coding, and have a question. to the topic: i´m building a small electron application, which connects to a mySQL database. the connection is done in the main.js file, and index.html will be loaded. i want to show in this index.html a greed dot when the connection was successful, and a red dot when sequelize don´t connect.

the problem is, i got an error TypeError: Cannot read property 'classList' of null
and can´t find the problem. here is my code:

const {app, BrowserWindow} = require('electron');
const path = require('path');
var mysql = require('mysql');
const jsdom = require("jsdom");
const { JSDOM } = jsdom;
const { document } = (new JSDOM(`...`)).window;
const connState = document.getElementById("connection-state");
 var connection = mysql.createConnection({
      host: 'localhost',
      user: 'example',
      password: 'example',
      database: 'example'
    });

    function createWindow (tabName, imagePrefix, jQuery) {
      // Create the browser window.
      
      const mainWindow = new BrowserWindow({
        
        width: 930,
        height: 650,
        backgroundColor: '#153037',
        webPreferences: {
          preload: path.join(__dirname, 'preload.js')
        }
     
      })

      // and load the index.html of the app.
      mainWindow.loadFile('index.html')


      // Open the DevTools.
      // mainWindow.webContents.openDevTools()
      mainWindow.$ = mainWindow.jQuery = require('jquery');
      
    }

     

    // This method will be called when Electron has finished
    // initialization and is ready to create browser windows.
    // Some APIs can only be used after this event occurs.
    app.whenReady().then(createWindow)

    setTimeout(function(){

    connection.connect();
      const Sequelize = require("sequelize");
      const sequelize = new Sequelize('mysql://user:example@localhost/example');
      
      
      sequelize
      
        .authenticate()
        .then(() => {
          console.log('Connection successfully made.');
          connState.classList.add('connected');
          connState.classList.remove('not-connected');
        })
        .catch(() => {
          console.log('Error connecting to database');
          connState.classList.add("not-connected");
          connState.classList.remove("connected");
        });
      }, 5000);
    // Quit when all windows are closed.
    app.on('window-all-closed', function () {
      // On macOS it is common for applications and their menu bar
      // to stay active until the user quits explicitly with Cmd + Q
      if (process.platform !== 'darwin') app.quit()
    })

    app.on('activate', function () {
      // On macOS it's common to re-create a window in the app when the
      // dock icon is clicked and there are no other windows open.
      if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })

    // In this file you can include the rest of your app's specific main process
    // code. You can also put them in separate files and require them here.

the relevant part from index.html:

> <text class="titel"> Statusanzeige </text>
> 
>    <div class="connection" id="connection">
> 
>     <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
> 
>       <g transform="matrix(1.04747,0,0,1.04747,4.75659,4.03844)">
> 
>           <text x="21.032px" y="13.026px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:16px;fill:white;"> mit Datenbank verbunden</text>
> 
>       </g>
> 
>       <g transform="matrix(1.05652,0,0,1.18757,0.119163,-1.87565)">
> 
>         <ellipse id="connection-state" cx="12.963" cy="10" rx="8.519" ry="7.579"/>
> 
>       </g>
> 
>     </svg>
> 
>   </div>
> .connection {
> 
>     margin-top: 150px;
> 
>     margin-left: 30%;
> 
>     font-size: 15px;
> 
>     font-family: Arial, Helvetica, sans-serif;
> 
>     position: absolute;
> 
>     z-index: 30000000;
> 
> }
> 
> #connection-state {
> 
>   fill: grey;
> 
> }
> 
> #connection-state.connected {
> 
>   fill: rgb(78, 246, 0);
> 
> }
> 
> #connection-state.not-connected {
> 
>   fill: red;
> 
> }