I am using QUnit+Sinon.js which works well natively.
The problem was occured when I tried to build it into a continous integration process.
I am using js-test-driver framework to be able to run it in continous integration enviroment.
In the past I used it without Sinon.js and it wasn't any problem with that.
But after I included the Sinon.js plugin, it doesn't work at all.
When I tried to run my tests it says:
D:/my/project/url/contentTest.js:60: TypeError: qTest is not a function
Total 0 tests (Passed: 0 Fails: 0 Errors: 0)(0.00 ms)
My js-test-driver configuration:
server: http://localhost:9879
load:
# QUnit related files
- qunit/lib/equiv.js
- qunit/lib/QUnitAdapter.js
- qunit/plugin/sinon-1.6.0.js
- qunit/plugin/sinon-qunit-1.0.0.js
# Dependencies
- external/jquery/1.7.2/jquery.min.js
# Files under test
- content.js
# Tests
- contentTest.js
The interesting thing is that there is a QUnit index.html file which works well (when I open this html, every tests passes):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>my tests</title>
<link rel="stylesheet" href="./qunit/lib/qunit-1.11.0.css">
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<!-- core -->
<script src="./qunit/lib/qunit-1.11.0.js"></script>
<script src="./qunit/plugin/sinon-1.6.0.js"></script>
<script src="./qunit/plugin/sinon-qunit-1.0.0.js"></script>
<!-- dependencies -->
<script src="./external/jquery/1.7.2/jquery.min.js"></script>
<!-- under test -->
<script src="./content.js"></script>
<!-- tests -->
<script src="./contentTest.js"></script>
</body>
</html>
So it seems there is a conflict with js-test-driver and Sinon.js. If I remove all related Sinon.js tests and the included sinon plugins, then it works.
If I just remove the sinon related tests, it still failes.
If I don't remove sinon.js but remove all tests and create an emty test with an "ok(true)" assert, then it still fails with the same error message (contentTest.js:60: TypeError: qTest is not a function), however my test file is consists just 10 row (how it could be an error in 60.th line when my file consists only 10 line?).
Thank you all for any helps in advance!
Not a solution, but perhaps an approach to get more information: can you run the js-test-driver scripts locally from a shell? Does it produce similar error details? At the very least, this will give you more information and a shorter feedback loop.
Related
I have created jest code coverage report using command npx jest --coverage. It creates coverage directory in the root as below:
laravel_project
- app
- config
- coverage
-- lcov-report
--- index.html
--- prettify.js
--- prettify.css
When I open the index.html on my local the report looks proper as below. (JS & CSS created by the command loads properly)
I am trying to display the same code coverage report using a route as below.
Route::get('/reports/jest-coverage', function () {
return File::get(base_path('coverage/lcov-report/index.html'));
});
but CSS and JS included in the index.html breaks as Laravel doesn't allow to load resourses outside the public directory.
The JS & CSS files are included as below in the index.html:
<link rel="stylesheet" href="prettify.css" />
<link rel="stylesheet" href="base.css" />
<script src="prettify.js"></script>
How I can achieve this without modifying coverage directory?
Is there any way in Laravel to achieve this?
Working with Jasmine with tests. To tests I used jasmine-browser-runner
like this jasmine-browser-runner runSpecs --config=spec/config/jasmine-browser.json
It works fine but in the terminal, I have dots .... and F.
To output nice results in the terminal, I've tried those npm packages
jasmine-spec-reporter and jasmine-console-reporter but they run in node and don't see web functions (like performance and other parts of the app because I do not use module.export and require)
Tried Jasmine Standalone configuration with jasmine-reporters from this repo https://github.com/larrymyers/jasmine-reporters
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jasmine Spec Runner v3.8.0</title>
<link rel="shortcut icon" type="image/png" href="lib/jasmine-3.8.0/jasmine_favicon.png">
<link rel="stylesheet" href="lib/jasmine-3.8.0/jasmine.css">
<script src="../reporter/terminal_reporter.js"></script>
<script src="lib/jasmine-3.8.0/jasmine.js"></script>
<script src="lib/jasmine-3.8.0/jasmine-html.js"></script>
<script src="lib/jasmine-3.8.0/boot.js"></script>
<script src="../reporter/reporterRunner.js"></script>
<script src="../js/utils.js"></script>
<script src="spec/UtilsSpec.js"></script>
</head>
<body>
</body>
</html>
It works too but output goes to the browser console, not in the terminal.
Tell, me please, how to manage jasmine to show nice results in the terminal console?
Maybe jasmine-browser-runner could work with terminal reporters somehow?
I am developing a Magento 2.3 site which was working but has stopped. When I try to get a page up, I get a blank screen. Although it looks empty, it actually contains a little content:
<!doctype html>
<html lang="en">
<head >
<meta charset="utf-8"/>
<meta name="description" content="Blah Blah"/>
<meta name="keywords" content="More blah blah"/>
<meta name="robots" content="INDEX,FOLLOW"/>
<title></title>
<link rel="icon" type="image/x-icon" href="http://www.magento2.domain/pub/media/favicon/stores/1/3-ladies-bg.jpg" />
<link rel="shortcut icon" type="image/x-icon" href="http://www.magento2.domain/pub/media/favicon/stores/1/3-ladies-bg.jpg" />
<link href='https://fonts.googleapis.com/css?family=Prosto+One' rel='stylesheet' type='text/css' />
<!--xxxabb2c66c7681e8f658-->
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-xxxx-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-131267613-1');
</script> </head>
<body data-container="body" data-mage-init='{"loaderAjax": {}, "loader": { "icon": "http://www.magento2.domain/pub/static/version1551796553/frontend/_view/en_GB/images/loader-2.gif"}}' class="cms-index-index page-layout-1column">
</body>
</html>
If I look in the system log, I see the following errors:
[2019-04-30 21:24:48] main.INFO: Broken reference: the 'theme.active.editor' element cannot be added as child to 'after.body.start', because the latter doesn't exist [] []
[2019-04-30 21:24:48] main.INFO: Broken reference: the 'logger' element cannot be added as child to 'after.body.start', because the latter doesn't exist [] []
I've enabled error logging but I get nothing. Can anyone help?
Alternatively, can somebody point me to a good map (or similar) of how magento 2 builds a page so I can try and track down the error.
I have tracked down the issue to a problem with pub/generated/metadata/global.php. Even regenerating it causes the same problem. If I delete the file everything seems to work ok. I confess to not understanding why!
I now avoid this by not running bin/magento setup:di:compile. I simply run php bin/magento setup:static-content:deploy.
I think this error is due to a broken reference in some XML file. You have not mentioned in which page you are getting this error. But you can trace it as below:
First of all, rename your default.xml from below path:
app/design/frontend/Vendor/Theme_name/Magento_Theme/layout/default.xml
Flush all the cache and check(php bin/magento cache:flush)
If you don't find anything then rename your page(homepage, listing, detail page, etc) related file.
For example, if you are getting this error on the homepage then rename cms_index_index.xml.It can reside in your theme or any custom extension.
Hopefully, this information can help you with the issue.
remove everything under generated folder except .htaccess file
I am using Magento 2.3.2 version. In production mode generating generated directory using setup:di:compile is working fine. However, in developer mode doing same is making all pages on frontend blank but not empty (content inside body tag is empty) so I deleted the generated folder and let it be created automatically as I access the site pages. Doing this resolved the issue for me.
Just go to Magento directory and then delete file generated by di:compile is path :-
magento\generated\metadata\global.php delete this file then after refersh your page.
This is temporary solution for this error in local server.
How do I add a third party js file to specific blade views?
Basically I want to add gridstack functionality in a dashboard page inside my new project.
I already tried downloading the js and css files from gridstack, I then placed the gridstack.js in the project's resources/assets/js/ folder, and the css files inside the project's resources/assets/css/ folder
The next step would be to load the files in the mixer. For that I thought that I could just go to /resources/assets/js/app.js and add the library
require("./bootstrap");
//Add the following two lines
require("./jquery-ui.min");
require("./gridstack");
then I ran npm run dev, which gave the following errors
ERROR Failed to compile with 20 errors
These dependencies were not found:
jquery-ui/data in ./resources/assets/js/gridstack.js
jquery-ui/disable-selection in ./resources/assets/js/gridstack.js
omitted 18 similar lines
To install them, you can run: npm install --save jquery-ui/data
jquery-ui/disable-selection jquery-ui/focusable jquery-ui/form
jquery-ui/ie jquery-ui/keycode jquery-ui/labels jquery-ui/jquery-1-7
jquery-ui/plugin jquery-ui/safe-blur jquery-ui/scroll-parent
jquery-ui/tabbable jquery-ui/unique-id jquery-ui/version
jquery-ui/widget jquery-ui/safe-active-element jquery-ui/widgets/mouse
jquery-ui/widgets/draggable jquery-ui/widgets/droppable
jquery-ui/widgets/resizable
Of course I tried to run npm install --save jquery-ui/data to see if it works and it does not:
npm ERR! Permission denied (publickey).
fatal: Could not read from remote repository.
Please make sure you have the correct access rights and the repository exists.
How can I add a simple js and css to my project without all these compilation errors...?
I also tried another approach: removed the requires from the above approach, and went for the webpack.mix.js file and made it look like this:
mix.js('resources/assets/js/app.js', 'public/js')
.js('resources/assets/js/app-landing.js', 'public/js/app-landing.js')
.js('resources/assets/js/jquery-ui.min.js', 'public/js')
.js('resources/assets/js/gridstack.js', 'public/js')
....
I then ran the npm run dev only to get the same error from above.
What is wrong here?
I tried to remove the jquery-ui refference and run the npm again... the exact same error
Also, I installed gridstack using npm in my project... but I have no idea how to directly use it. I should be able to use it, since it is "installed", but how?
I also did a npm cache clean, no effect
I also verified my versions of node and npm, they seem ok:
node v6.10.3
npm v3.10.10
EDIT
After removing the ./ from the require, and after removing the jquery-ui altogether (it was already loaded) I managed to get no more errors from the npm command.
However the gridstack functionality is just not there. I compared my sources with an official demo of gridstack and saw that they include 2 js files of gridstack:
<script src="../dist/gridstack.js"></script>
<script src="../dist/gridstack.jQueryUI.js"></script>
But Laravel mix does not agree with me adding the extra require. I get errors again from npm if in /resources/assets/js/app.js I put the following
require("./bootstrap");
require("gridstack");
require("gridstack.jQueryUI"); // nor does it work if I use gridstack.all.js or gridstack.jQueryUI.js
What can I do to get the gridstack full functionality inside my Laravel 5.4 project?
EDIT
What seemed to work is:
remove all changes done previously like the one in app.js
I copied webpack.config.js from node_modules/laravel-mix into my project's root folder
I added the bellow code
module.exports.resolve = {
extensions,
alias: {
'vue$': 'vue/dist/vue.common.js',
'jquery-ui': path.resolve(__dirname, 'node_modules/jquery-ui/ui')
}
};
In webpack.mix.js, I added the following:
mix.js('resources/assets/js/app.js', 'public/js')
.copy('node_modules/gridstack/dist/gridstack.all.js','public/js');
in package.json I added:
"devDependencies": {
...
"gridstack": "^0.3.0"
}
in the command line I did
sudo npm rebuild node-sass
then
sudo npm run dev
After I the above, npm compiles correctly the mix, bun now, I get a jQuery error in the frontend:
jQuery.Deferred exception: c.draggable is not a function
d.prototype.draggable#http://myproject.com/js/gridstack.all.js:16:1395
This points to the second part of the gridstack.all.js (right at the beginning of it, where jquery is defined... again)
Error seems to indicate that jquery is loaded more than once. But that is not a problem in a classic PHP app.
Any idea how to make this work?
The default laravel application requires by default Bootstrap, lodash and jquery, and when I add gridstack to the project, looks like somewhere there is a second require for jquery. I just don't get it.
Can anyone try to simulate what I am doing and tell me how they did
it?
you need to include gridstack via asset() then everything will be happy - for this example the files are in /public/js/dashboard
eg (the hootsuite grid demo page)
<!DOCTYPE html>
<html>
<head>
<title>Grid Demo</title>
<link rel="stylesheet" href="css/dashboard/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="{{ asset('js/dashboard/fixtures.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/dashboard/gridList.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/dashboard/jquery.gridList.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/dashboard/load.js') }}" type="text/javascript"></script>
</head>
<body>
<div class="header">
-
+
<p>
<a class="github-button" href="https://github.com/hootsuite/grid" data-style="mega" data-count-href="/hootsuite/grid/stargazers" data-count-api="/repos/hootsuite/grid#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star hootsuite/grid on GitHub">GitHub</a>
</p>
</div>
<div class="grid-container">
<ul id="grid" class="grid">
<li class="position-highlight">
<div class="inner"></div>
</li>
</ul>
</div>
<script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
</body>
</html>
There is an existing CK editor folder in my project. How can I find out it's version? Is it documented?
just make an alert as below in the config.js file, it gives the value
alert(CKEDITOR.version);
or you can see it directly in the file ckeditor_php4.php, for eg:
var $version = '3.6.3';
working demo :
alert(CKEDITOR.version);
console.log("CKEDITOR.version ==",CKEDITOR.version);
<head>
<meta charset="utf-8">
<title>CKEditor</title>
<script src="https://cdn.ckeditor.com/4.11.4/standard/ckeditor.js"></script>
</head>
<body>
<textarea id="editor1"></textarea>
<script>
CKEDITOR.replace( 'editor1' );
</script>
</body>
I checked version 3.6 and version info is located f.e. in:
/ckeditor/CHANGES.html
CKEditor Changelog
CKEditor 3.6.6.1
4.X uses mark down file:
/ckeditor/CHANGES.md
CKEditor 4 Changelog
====================
## CKEditor 4.4.1
CKEDITOR.version
running this in the console should tell you the version.
And as for the documentation, you can find it in this URL:
https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR.html#property-version
In latest CKEditors there is a button in default panel "?". Click it and you'll see version number. Otherwise if button not exist you need to check source files. At the beginning they definitely should contain author data & version number.
CKEDITOR.version will give current version of CKEDITOR
alert(CKEDITOR.version);
console.log("CKEDITOR.version ==",CKEDITOR.version);
<head>
<meta charset="utf-8">
<title>CKEditor</title>
<script src="https://cdn.ckeditor.com/4.11.4/standard/ckeditor.js"></script>
</head>
<body>
<textarea id="editor1"></textarea>
<script>
CKEDITOR.replace( 'editor1' );
</script>
</body>
Look inside the ckeditor/ckeditor.js file. At the top of the file, you can find the version.