Mochai Chai test not running - javascript

I'm learning app testing at the moment, using this course: https://code.tutsplus.com/courses/angularjs-for-test-driven-development/
I'm on lesson 2.3 where we have Mocha and Chai installed, a test folder with main.spec.js setup and gulp task setup to serve the app and tests.
When he updated his main.spec.js file with this simple describe statement:
describe('The Address Book App', function() {
it ('should work', function() {
chai.assert.isArray([]);
});
});
It ran fine for him:
However here is my setup:
test/main.spec.js
describe('The Dashboard app', function() {
it ('should work', function() {
chai.assert.isArray([]);
});
});
Basic markup:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Mocha Spec Runner</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" href="../app/favicon.ico">
<link rel="apple-touch-icon" href="../app/assets/imgs/apple-touch-icon.png">
<link href="testing.css" rel="stylesheet">
</head>
<body>
<div id="mocha"></div>
<script src="../bower_components/mocha/mocha.js"></script>
<script>
mocha.setup('bdd');
</script>
<script src="../bower_components/chai/chai.js"></script>
<script>
mocha.run();
</script>
<script src="main.spec.js"></script>
</body>
</html>
However my test file isn't displaying my first test:
Gulpfile setup, same as the authors, cept PORT numbers are different:
gulp.task('serve', function() {
browserSync.init({
notify : false,
port : 3333,
server: {
baseDir: ['app'],
routes: {
'/bower_components' : 'bower_components'
}
}
});
});
gulp.task('serve-test', function() {
browserSync.init({
notify : false,
port : 4444,
server: {
baseDir: ['test', 'app'],
routes: {
'/bower_components' : 'bower_components'
}
}
});
});
Any idea why my first basic test isn't running?

Everything looks right except the ordering.
Just swap the
<script>
mocha.run();
</script>
with
<script src="main.spec.js"></script>
You want to run mocha at the end when all your specs and setup is done.

Related

require is not defined in an electron app

I am new to electron. While learning it i came across require not define error on browserwindow. So i searched about it and find out we should need to add nodeIntegration: true, so i did it but still it doesnt solve my problem.
here is my app.js (entry file)
function createWindow() {
win = new BrowserWindow({
webPreferences: {
nodeIntegration: true,
},
});
win.loadURL(
url.format({
pathname: path.join(__dirname, "index.html"),
protocol: "file",
slashes: true,
})
);
win.on("close", () => {
win = null;
});
}
app.on("ready", createWindow);
and my index.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>main renderer</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<h1>main renderer</h1>
<script>
require("./index.js")
</script>
</body>
</html>

What is wrong with my Babel configuration?

I have configured Babel for my project with ".babelrc" file. My .babelrc file is,
{
"presets": [
[
"#babel/preset-env",
{
"useBuiltIns": "entry"
}
]
]
}
I have imported "core-js/stable" and "regenerator-runtime/runtime" using index.js in my index.html as follows. I'm using Parcel as the packaging tool.
<!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">
<script src="../js/index.js"></script>
<title>Document</title>
</head>
<body>
<h1>Hello Second App</h1>
<script>
(() => {
console.log('welcome ...');
})();
function getUserById(id) {
return Promise.try(function () {
if (typeof id !== "number") {
throw new Error("id must be a number");
}
return "done";
});
}
getUserById();
</script>
</body>
</html>
Also as you can see I'm trying to use "Promise.try". But I'm getting
Promise.try is not a function
So why Babel is not fixing this? Please help me. I'm trying to understand Babel.

Can't load stylesheet, "MIME-type not supported"

I'm using gulp for a website using Bootstrap that I'm trying to set up. I'm able to successfully run gulp from the node.js command prompt:
gulp running from command line
But no stylesheets are applied to the webpage that loads:
screenshot of what loads
errors in console
I've already checked this post: Stylesheet not loaded because of MIME-type and can't find the answer to my problem in it.
This is my code structure:
code structure
This is my code:
index.html
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<title>Bootstrap 4 Layout</title>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,800">
<link rel='stylesheet' href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<script src="/js/jquery.min.js"></script>
<script src="/js/popper.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
</body>
</html>
gulpfile.js
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', gulp.series(function() {
return gulp.src(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'])
.pipe(sass())
.pipe(gulp.dest("src/css"))
.pipe(browserSync.stream());
}));
// Move the javascript files into our /src/js folder
gulp.task('js', gulp.series(function() {
return gulp.src(['node_modules/bootstrap/dist/js/bootstrap.min.js', 'node_modules/jquery/dist/jquery.min.js', 'node_modules/popper.js/dist/umd/popper.min.js'])
.pipe(gulp.dest("src/js"))
.pipe(browserSync.stream());
}));
// Static Server + watching scss/html files
gulp.task('serve', gulp.series('sass', function() {
browserSync.init({
server: {
baseDir: "./"
},
port: 8080,
open: true,
notify: false
});
gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'], gulp.series('sass'));
gulp.watch("src/*.html").on('change', browserSync.reload);
}));
gulp.task('default', gulp.series(['js','serve']))
running versions:
npm: 6.9.0
"devDependencies": {
"browser-sync": "^2.26.7",
"gulp": "^4.0.2",
"gulp-cli": "^2.2.0",
"gulp-sass": "^3.1.0"
},
"dependencies": {
"bootstrap": "^4.3.1",
"jquery": "^3.4.1",
"popper.js": "^1.15.0"
}
I have a feeling that the problem might be in gulpfile.js at the bottom here:
browserSync.init({
server: {
baseDir: "./"
},
port: 8080,
open: true,
notify: false
});
Also, I'm trying to follow https://www.youtube.com/watch?v=hnCmSXCZEpU&t=766s for getting bootstrap started and I know that a lot of people from the tutorial have had trouble with this part. Maybe this post can help them too..
EDIT 1
I tried using gulp serve, nothing changed. Here's a link to the edited gulpfile.js
Edited gulpfile.js
This is what npmjs.com says about gulp serve:
enter image description here

VegasJS are not working with bower

I am trying to use VegasJS as a slider, and Bower o manage my packages, but I am not able to run the vegas using bower, and Vegas aren't working at all, I tried to use without bower too, but was not successfully. It only occurs in my localserver, because I rewrite the exact same code in Codepen, and it works perfectly.
I'm using Gulp too, don't know if it will make some difference.
My HTML code:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Page Title</title>
<!-- CSS -->
<link rel="stylesheet" href="../bower_components/normalize-css/normalize.css">
<link rel="stylesheet" href="../bower_components/vegas/dist/vegas.min.css">
<link rel="stylesheet" href="../bower_components/owl.carousel/dist/assets/owl.carousel.css">
<link rel="stylesheet" href="./css/style.css">
<!-- JavaScript -->
<script type="text/javascript" src="../bower_components/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="../bower_components/vegas/dist/vegas.min.js"></script>
<script type="text/javascript" src="../bower_components/owl.carousel/dist/owl.carousel.js"></script>
<script type="text/javascript" src="./js/main.js"></script>
</head>
<body>
<header>
</header>
</body>
The CSS code:
* {
margin: 0;
padding: 0;
box-sizing: border-box; }
header {
height: 100vh;
background-color: crimson; }
The JavaScript code:
$("header").vegas({
slides: [
{ src: "https://unsplash.it/1000x1000?image=421" },
{ src: "https://unsplash.it/1000x1000?image=500" },
{ src: "https://unsplash.it/1000x1000?image=425" },
{ src: "https://unsplash.it/1000x1000?image=261" }
]
});
Gulpfile.js:
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var browserSync = require('browser-sync').create();
gulp.task('sass', function() {
return gulp.src('./public/sass/*.scss')
.pipe(sass.sync().on('error', sass.logError))
.pipe(sass())
.pipe(gulp.dest('./public/css'))
.pipe(browserSync.stream());
});
gulp.task('browser-sync', ['sass'], function() {
browserSync.init({
server: {
baseDir: "public",
routes: {
"/bower_components": "bower_components"
}
}
});
gulp.watch('./public/sass/**/*.scss', ['sass']);
gulp.watch('./public/*.html').on('change', browserSync.reload);
gulp.watch('./public/js/*.js').on('change', browserSync.reload);
});
gulp.task('autoprefixer', function() {
gulp.src('./public/css/style.css')
.pipe(autoprefixer({
"browserslist": [
"Chrome",
"Firefox",
"Explorer",
"Edge",
"iOS",
"Opera",
"Safari",
"ExplorerMobile",
"last 3 versions",
"> 1%"
],
cascade: false
}))
.pipe(gulp.dest('./public/css'))
});
gulp.task('watch', function() {
gulp.watch('./public/css/*.css', ['autoprefixer']);
});
gulp.task('default', ['sass', 'browser-sync', 'autoprefixer', 'watch']);
Everything seems to be working very well, with exception of Vegas, I don't know why in my localserver it aren't working.
In this case, I tested the Owl Carousel, and its working perfectly well, the only problem here, are the Vegas. I almost certainly the problem are on css link.
I tested in WebStorm and Atom IDE by the way.
Thanks for all the help, but I fixed it, what happens was, I commited the mistake of add the initialization without document ready property, the right way:
$(document).ready(function(){
$("header").vegas({
slides: [
{ src: "https://unsplash.it/1000x1000?image=421" },
{ src: "https://unsplash.it/1000x1000?image=500" },
{ src: "https://unsplash.it/1000x1000?image=425" },
{ src: "https://unsplash.it/1000x1000?image=261" }
]
});
});

App takes too long to load in production

I have pushed my angular 2 app on heroku but it takes too long to load.
is there a way to bundle everything up because right now i have this in my index.html
<html>
<head>
<base href="/">
<title>Angular 2 Arc</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<ng2-app>Loading...</ng2-app>
<!-- Load Angular 2 Core libraries -->
<script src="es6-shim/es6-shim.min.js"></script>
<script src="systemjs/dist/system-polyfills.js"></script>
<script src="angular2/bundles/angular2-polyfills.js"></script>
<script src="systemjs/dist/system.src.js"></script>
<script src="rxjs/bundles/Rx.js"></script>
<script src="angular2/bundles/angular2.dev.js"></script>
<script src="angular2/bundles/router.dev.js"></script>
<script src="angular2/bundles/http.js"></script>
<!-- Load Bootstrap and Jquery -->
<script src="lib/jquery/jquery.min.js" charset="utf-8"></script>
<script src="lib/bootstrap/js/bootstrap.min.js" charset="utf-8"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.0/gh-fork-ribbon.min.css" />
<link rel="stylesheet" href="/lib/bootstrap/css/bootstrap.min.css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="assets/css/app.css">
<!-- Configure SystemJS -->
<script>
System.config({
defaultJSExtensions: true,
packages: {
boot: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('js/boot')
.then(null, console.error.bind(console));
</script>
</body>
</html>
My setup is express server and system JS.
server.js
var express = require('express');
var bodyParser = require('body-parser')
var fs = require("fs");
// initialize express
var app = express();
// declare build and node_module paths
app.use(express.static("./build"));
app.use(express.static("./node_modules/"));
// parse request body
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())
var body;
// route to send json data from angular 2
app.post('/export', function(req, res){
body = req.body;
res.json("Got the data!");
fs.writeFile('parameters.json', JSON.stringify({body}, null, 4), function (err) {
if (err) return console.log(err);
console.log('Data json file created!');
});
});
// start server
app.listen(process.env.PORT || "3001", function(){
console.log("Express server running on localhost:3001");
});
If its the free heroku tier its probably because its sleeping when you request it?
You can minify and concatenate your js files to decrease load times.
Here is a guide on how to do that with gulp tasks:
https://caveofcode.com/2016/03/gulp-tasks-for-minification-and-concatenation-of-dependencies-in-angularjs/

Categories

Resources