Testing Guide I have been following it.
NOTE : I have my app running without testing part.
Problem: I'm unable to load unit-tests.html. I think problem is very small but unable to figure it out. I'm using VisualCode and when I hit F5 it runs my app only. So how to load unit-tests.html?
My setup is as follow.
package.json
{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"test": "live-server --open=unit-tests.html",
//<------ I have added this as mentioned.
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
//<------ I tried to disable this line as well.
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
},
"license": "ISC",
"dependencies": {
"#angular/common": "2.0.0-rc.4",
"#angular/compiler": "2.0.0-rc.4",
"#angular/core": "2.0.0-rc.4",
"#angular/forms": "0.2.0",
"#angular/http": "2.0.0-rc.4",
"#angular/platform-browser": "2.0.0-rc.4",
"#angular/platform-browser-dynamic": "2.0.0-rc.4",
"#angular/router": "3.0.0-beta.1",
"#angular/router-deprecated": "2.0.0-rc.2",
"#angular/upgrade": "2.0.0-rc.4",
"systemjs": "0.19.27",
"core-js": "^2.4.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12",
"angular2-in-memory-web-api": "0.0.14",
"bootstrap": "^3.3.6"
},
"devDependencies": {
"concurrently": "^2.0.0",
"jasmine-core": "2.4.1",
"lite-server": "^2.2.0",
"typescript": "^1.8.10",
"typings": "^1.0.4"
}
}
unit-tests.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Ng App Unit Tests</title>
<link rel="stylesheet" href="../node_modules/jasmine-core/lib/jasmine-core/jasmine.css">
<script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
<script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
<script src="../node_modules/jasmine-core/lib/jasmine-core/boot.js"></script>
</head>
<body>
<script src="../node_modules/systemjs/dist/system.src.js"></script>
<script>
System.config({
packages: {
'app': {defaultExtension: 'js'}
}
});
System.import('app/app.spec')
.then(window.onload)
.catch(console.error.bind(console));
</script>
</body>
</html>
app.spec.ts (NOTE: within app folder, app.spec.ts is there)
it('true is true', () => expect(true).toEqual(true));
My unit-tests.html file :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Angular2 Unit Tests</title>
<link rel="stylesheet" href="../node_modules/jasmine-core/lib/jasmine-core/jasmine.css">
<script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
<script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
<script src="../node_modules/jasmine-core/lib/jasmine-core/boot.js"></script>
<script src="../node_modules/reflect-metadata/Reflect.js"></script>
<script src="../node_modules/zone.js/dist/zone.js"></script>
</head>
<body>
<!-- #1. add the system.js library -->
<script src="../node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<!--<script src="systemjs.builder.js"></script>-->
<script>
var fileList = ['sanity.spec'];
System.baseURL = 'bin/tests/';
multiImport(fileList)
.then(window.onload)
.catch(console.error.bind(console));
function multiImport(modules) {
return Promise.all(modules.map(function(m) { return System.import(m) }))
}
</script>
</body>
</html>
this makes it easy to tell system js to load multiple files
Related
i am following this tutorial https://www.youtube.com/watch?v=IZGNcSuwBZs&t=1265s
i have my css imported successfully as i can see in bundle file but its not effective in page can anyone help me with it
<!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>
<div class="container test">
<div class="row">
<div class="col-12 col-lg-4 col-xl-3">test column.1</div>
<div class="col-12 col-lg-4 col-xl-3">test column.2</div>
<div class="col-12 col-lg-4 col-xl-3">test column.3</div>
<div class="col-12 col-lg-4 col-xl-3">test column.4</div>
<div class="col-12 col-lg-4 col-xl-3">test column.5</div>
<div class="col-12 col-lg-4 col-xl-3">test column.6</div>
</div>
</div>
</body>
<script defer src="bundle.js"></script>
</html>
webpack config
const path = require('path');
module.exports = {
mode : "production",
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{ test: /\.css$/, use: 'css-loader' },
],
},
};
package json
{
"name": "getting-started-using-a-configuration",
"version": "1.0.0",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "serve dist"
},
"keywords": [],
"author": "",
"license": "MIT",
"dependencies": {
"lodash": "^4.17.21"
},
"devDependencies": {
"css-loader": "^6.7.1",
"serve": "^12.0.0",
"webpack": "^5.38.1",
"webpack-cli": "^4.7.2"
}
}
i believe screenshot will describe it more clearly
I have these scripts on my html page:
<!-- alpaca.js datetime date -->
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js"></script>
<link type="text/css" rel="stylesheet" href="https://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.css" />
And the code below assembles the alpaca form:
$("#form").alpaca({
"schema": {
"properties" : {
"name": {
"type":"string",
"title":"Name",
"required":true
},
"datetime": {
"title": "Datetime",
"description": "Pick your datetime.",
"format": "datetime"
}
}
},
"options": {
"fields" : {
"name": {
"type" : "text",
"size": 20
},
"datetime": {
"type": "datetime",
"picker": {
"format": "DD/MM/YYYY HH:mm:ss"
},
"manualEntry": true
}
}
}
});
But the datetime field doesn't allow me to enter the date and time
The calendar pop-up that appears is unconfigured, I can't even change the month, for example.
Do I need to do anything else for this datetime field to work properly?
I solved the problem by changing the scripts.
I accessed the showcase Alpaca page and I inspected the HTML
I discovered the scripts and I replaced them on my page.
The scripts below:
<!-- alpaca.js datetime date -->
<script type="text/javascript" src="http://www.alpacajs.org/lib/jquery-ui/jquery-ui.js"></script>
<link type="text/css" rel="stylesheet" href="http://www.alpacajs.org/lib/jquery-ui/themes/cupertino/jquery-ui.min.css" />
<script type="text/javascript" src="http://www.alpacajs.org/lib/jqueryui-timepicker-addon/dist/jquery-ui-timepicker-addon.js"></script>
<link type="text/css" rel="stylesheet" href="http://www.alpacajs.org/lib/jqueryui-timepicker-addon/dist/jquery-ui-timepicker-addon.css" />
<script type="text/javascript" src="http://www.alpacajs.org/lib/moment/min/moment-with-locales.min.js"></script>
<script type="text/javascript" src="http://www.alpacajs.org/lib/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
<link type="text/css" rel="stylesheet" href="http://www.alpacajs.org/lib/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css"/>
i am following tranversy Media Django-React tutorial. After the server is running ok, but the components in my App.js file are not displayed in the index.html. Kindly help on what could be wrong, all.
This is my project tree:
see the image
Then my app.js
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
class App extends Component {
render() {
return <h1>React App</h1>
}
}
ReactDOM.render(<App />, document.getElementById("app"));
My index.html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://bootswatch.com/4/cosmo/bootstrap.min.css">
<title>Lead Manager</title>
{%load static%}
</head>
<body>
<h1></h1>
<div id="app"></div>
<script>src="{%static "frontend/main.js"%}"</script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
index.js
import App from './components/App';
webpack.config.js
module.exports = {
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader:"babel-loader"
}
}]
}
}
The backend is working fine using the api.
Change this
<script>src="{%static "frontend/main.js"%}"</script>
to this
<script src="{%static "frontend/main.js"%}"></script>
I'm having some trouble getting the CSRF integration between Django and Angular to work. I made an earlier broader post about that here.. The problem is that logged in users can't make post-requests from the front-end, but they can make the exact same requests from Django's browsable API through forms.
I'm setting a {% csrf_token %} at the index template that Django serves and I am using Angular's built it XSRFS strategy to set attack a header to http requests, but I think the problem is that I'm not catching the value provided by Django's generated csrf token and can't figure out how to implement gathering that data and attaching it to my Angular http-request cookies. Here's the code for the module that provides the strategy:
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { NgModule } from '#angular/core';
import { HttpClientModule } from '#angular/common/http';
import { HttpModule, XSRFStrategy, CookieXSRFStrategy } from '#angular/http'
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { RegisterComponent } from './register/register.component';
import { LoginComponent } from './login/login.component';
import { AlertComponent } from './_directives/alert.component';
import { ProfileComponent } from './profile/profile.component';
import { AuthGuardService } from './_guards/auth-guard.service';
import { AlertService } from './_services/alert.service';
import { AuthService } from './_services/auth.service';
import { UserService } from './_services/User.service';
#NgModule({
declarations: [
AppComponent,
RegisterComponent,
LoginComponent,
AlertComponent,
ProfileComponent,
],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
AppRoutingModule,
HttpClientModule,
HttpModule
],
providers: [
{
provide: XSRFStrategy,
useValue: new CookieXSRFStrategy('csrftoken', 'X-CSRFToken')
}
],
bootstrap: [AppComponent]
})
export class AppModule { }
And here is the output from the browser with the csrf-value that I think I need to attach somehow:
<input type='hidden' name='csrfmiddlewaretoken' value='9FKUKSXHbJfLClZniDXIHrMu2AEUtPQr4mGDfNSOZURHYVyKGBYvREIuucN0UsEM' />
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AngularWebapp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="/static/runtime.js"></script><script type="text/javascript" src="/static/polyfills.js"></script><script type="text/javascript" src="/static/styles.js"></script><script type="text/javascript" src="/static/vendor.js"></script><script type="text/javascript" src="/static/main.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
Make sure that "csrfmidlewaretoken": {{csrf_token}} is submitted with the form.
Make sure {% csrf_token %} is inside <form></form> tags. If you are posting the data with ajax, add "csrfmidlewaretoken": {{csrf_token}} to your form data that is submitted.
I was trying to run a simple page that fetches data via iron-ajax and then renders it with a given template but had litarlly no success. Then I tried to run an example page from google and it's not working for me neither. Here's the example page I'm trying to run:
<html>
<head>
<title>iron-ajax</title>
<script src="/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="/iron-ajax/iron-ajax.html">
<link rel="import" href="/iron-image/iron-image.html">
<link rel="import" href="/paper-styles/classes/typography.html">
<link rel="import" href="/iron-flex-layout/classes/iron-flex-layout.html">
<style>
iron-image {
background-color: lightgray;
margin: 1em;
}
</style>
</head>
<body>
<template is="dom-bind" id="app">
<iron-ajax auto
url="https://www.googleapis.com/youtube/v3/search"
params='{"part":"snippet", "q":"polymer", "key": "AIzaSyAuecFZ9xJXbGDkQYWBmYrtzOGJD-iDIgI", "type": "video"}'
handle-as="json"
last-response="{{ajaxResponse}}"></iron-ajax>
<h1>Video Feed</h1>
<section class="flex layout horizontal wrap">
<template is="dom-repeat" items="[[ajaxResponse.items]]">
<div>
<h2>[[item.snippet.title]]</h2>
<iron-image src="[[item.snippet.thumbnails.high.url]]" width="256" height="256" sizing="cover" preload fade></iron-image>
<p>[[item.snippet.description]]</p>
</div>
</template>
</section>
</template>
<script>
var app = document.querySelector('#app');
app.url = function (videoId) {
return 'https://www.youtube.com/watch?v=' + videoId;
};
</script>
</body>
</html>
My bower.json contents:
{
"name": "my-first-polymer-app",
"description": "",
"main": "app.js",
"authors": [
"123"
],
"license": "MIT",
"moduleType": [],
"homepage": "",
"private": true,
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"polymer": "Polymer/polymer#1.1.0",
"flatiron-director": "Polymer/flatiron-director#~1.0.0",
"sortable-table": "~0.11.1"
}
}
I also tried import polymer.html with no change. Every import is working as I can see in a network tab in Chrome.
The actual endpoint is hit, I can see that in network tab of my chrome. Any ideas? Thanks in advance.