I'm following along this tutorial to get the vuex store in cypress while running e2e tests.
As I use vue-cli (#vue/cli 4.3.1), with the #vue/cli-plugin-e2e-cypress.
As of this setup, I don't have an app.js, rather a main.js.
But if I put the needed code in the main.js, it does not work:
/**
* Start APP
*/
const app = new Vue({
router,
render: h => h(App),
}).$mount('#app');
if (window.Cypress) {
console.log('Running in Cypress');
// only available during E2E tests
window.app = app;
} else {
console.log('NOT Running in Cypress');
}
If I run it from cypress, I doesn't log anything from main.js to the console.
In cypress, when I try to get the store
cy.window().its('app.$store')
I get the error:
Timed out retrying: cy.its() errored because the property: app does not exist on your subject.
How can I get it running with vue-cli?
Related
I have a bot command which is an image scraper, and it uses puppeteer. I have the puppeteer files downloaded into my VSC(Visual Studio Code) and when I run the bot from the VSC terminal, the image scraper function works. I can commit the files that I use onto GitHub, which is then linked to Heroku. But when I try to host the bot on Heroku and use the image scraper command, Heroku gives UnhandledPromiseRejectionWarning: Error: Failed to launch the browser process! I have also added the puppeteer buildpack to my heroku project as well, and that doesn't seem to fix the problem. One solution I've seen is adding { args: ['--no-sandbox'] } to the code, but I'm not sure where to add it. Where can I add the --no-sandbox, or is there another fix to this problem? Thanks
Image Scraper code:
var Scraper = require('images-scraper');
const google = new Scraper({
puppeteer: {
headless: true
}
})
module.exports = {
name: 'image',
description: 'sends img to channel',
async execute(client, message, args){
const image_query = args.join(' ');
let rng = Math.round(Math.random()*10)
if(!image_query) return message.channel.send('Unable to find image');
const image_results = await google.scrape(image_query, 100);
message.channel.send(image_results[rng].url);
}
}
Edit (for image-scraper)
You can use all puppeteer.launch options as normal, with the puppeteer option. You can do it like this.
const google = new Scraper({
puppeteer: {
headless: true,
args: ["--no-sandbox"],
},
});
You can read more about using image-scraper on Heroku here.
Previous (for puppeteer)
As you mentioned you can add --no-sandbox argument to your code like this.
const browser = await puppeteer.launch({
args: [
'--no-sandbox',
],
});
You can read the puppeteer.launch documentation here.
If this doesn't help you, you should check out the official troubleshooting guide on running Puppeteer on Heroku.
I wish to render a page using Nuxt's renderAndGetWindow in order to test the values returned by my API.
Here's how I do it:
// Nuxt instance
let nuxt = null;
// Our page to test
let homePage = null;
beforeAll(async (done) => {
// Configuration
const rootDir = resolve(__dirname, '../..');
let config = {};
config = require(resolve(rootDir, 'nuxt.config.js'));
config.rootDir = rootDir; // project folder
config.env.isDev = false; // dev build
config.mode = 'universal'; // Isomorphic application
nuxt = new Nuxt(config);
await new Builder(nuxt).build();
nuxt.listen(3001, 'localhost');
homePage = await nuxt.renderAndGetWindow('http://localhost:3001/');
});
Which gives me 2 distinct errors:
console.error node_modules/jest-jasmine2/build/jasmine/Env.js:157
Unhandled error
console.error node_modules/jest-jasmine2/build/jasmine/Env.js:158
TypeError: setInterval(...).unref is not a function
And
Timeout - Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout.
at mapper (node_modules/jest-jasmine2/build/queue_runner.js:41:52)
I get this ever since I switched from Ava to Jest.
Am I handling my rendering wrong?
unref
The default test environment for Jest is a browser-like environment through jsdom.
unref is a special function provided by Node. It is not implemented in browsers or in jsdom, but it is implemented in the "node" test environment in Jest.
It looks like testing a Nuxt app requires both a Node environment to start a server, and a jsdom environment to test the resulting UI.
This can be done by setting the test environment to "node" and initializing a window using jsdom during the test setup.
timeout
Jest will "wait if you provide an argument to the test function, usually called done". This applies to test functions and setup functions like beforeAll.
Your beforeAll function has an argument done that is never called. Jest will wait until either done is called or the timeout configured with jest.setTimeout expires (defaults to 5 seconds).
You are using an async function and are using await on what looks to be the asynchronous part of the function so you don't need done. Change your beforeAll function to not take any parameters and that will prevent Jest from waiting for done to be called.
In my tests starting the Nuxt server takes quite a while so you can pass a timeout value as an additional parameter to beforeAll to increase the timeout for just that function.
Here is an updated test with these changes:
/**
* #jest-environment node
*/
// TODO: Set the environment to "node" in the Jest config and remove this docblock
// TODO: Move this to a setup file
const { JSDOM } = require('jsdom');
const { window } = new JSDOM(); // initialize window using jsdom
const resolve = require('path').resolve;
const { Nuxt, Builder } = require('nuxt');
// Nuxt instance
let nuxt = null;
// Our page to test
let homePage = null;
beforeAll(async () => {
// Configuration
const rootDir = resolve(__dirname, '../..');
let config = {};
config = require(resolve(rootDir, 'nuxt.config.js'));
config.rootDir = rootDir; // project folder
config.env.isDev = false; // dev build
config.mode = 'universal'; // Isomorphic application
nuxt = new Nuxt(config);
await new Builder(nuxt).build();
nuxt.listen(3001, 'localhost');
homePage = await nuxt.renderAndGetWindow('http://localhost:3001/');
}, 20000); // Give the beforeAll function a large timeout
afterAll(() => {
nuxt.close();
});
describe('homepage', () => {
it('should do something', () => {
});
});
I'm trying to build an app using Tone.js on top of Nuxt.js. Tone.js requires the browser's Web Audio API and as Nuxt renders stuff on the server side my build keeps failing.
Nuxt addresses this in the plugin documentation and I've followed that approach in my nuxt.config.js file writing:
module.exports = {
plugins: [{src: '~node_modules/tone/build/Tone.js', ssr: false }],
}
however that results in this error: [nuxt] Error while initializing app TypeError: Cannot read property 'isUndef' of undefined. Looking at Tone's source I'm pretty sure this is because I'm getting it because the code is still being executed on the server side.
I've seen solutions putting the js file into the static folder and checking process.browser but both result in Tone being undefined.
My question seems to be the same as this one if it's helpful additional context
Instead of import a plugin, in your page.vue you can init Tone.js in the mounted() method, because this function is run only from client-side.
Example of page/test.vue file:
<template>
<div>
Tone.js
</div>
</template>
<script>
export default {
mounted() {
var Tone = require("Tone");
var synth = new Tone.Synth().toMaster();
synth.triggerAttackRelease("C4", "8n");
}
}
</script>
I'm playing with vueJS and trying to grab some data from an ajax request.
Heres my code:
new Vue({
el: '#recipeList',
ready: function () {
this.fetchRecipes();
},
methods: {
fetchRecipes: function () {
this.$http.get('/recipes/ajax', function (recipes) {
this.$set('recipes') = recipes;
});
}
}})
The html code is fine, I doubt you need to see that.
The documentation says that this is how you do a ajax request, however the $http object does not appear to be set.
Here is the console error I am receiving:
TypeError: undefined is not an object (evaluating 'this.$http.get')
fetchRecipesapp.js:10
(anonymous function)vue.js:307
readyapp.js:5
_callHookvue.js:8197
readyvue.js:10169
$mountvue.js:10155
_initvue.js:8054
Vuevue.js:80
global codeapp.js:1
app.js:10
$http.get is for Vue Resource. Make sure you are pulling that in properly. i.e., add vue-resource to your package.json, then npm install, then...
var Vue = require('vue');
Vue.use(require('vue-resource'));
Also, make sure your root path is set up properly.
Vue.http.options.root = '/your-root-path';
Hope it helps! :-)
I just upgraded from Angular.js 1.1.3 to 1.2.10 and my $httpBackend tests started failing. Im using QUnit 1.12.0 as a testing framework.
I have the following setup in my tests.
(function () {
var fittingDataServiceMock,
injector,
ctrl,
$scope,
$httpBackend;
module("Fitting Controller Test", {
setup: function() {
injector = angular.injector(['ngMock', 'ng','fittingApp']);
$scope = injector.get('$rootScope').$new();
$httpBackend = injector.get('$httpBackend');
fittingDataServiceMock = injector.get('fittingDataService');
//expects a post on controller creation
$httpBackend.expectPOST('/app_dev.php/client_api/command').respond("hello");
ctrl = injector.get('$controller')(DoubleVariableController, { $scope: $scope, fittingDataService: fittingDataServiceMock });
$httpBackend.flush();
},
teardown: function() {
}
test ("DoubleVariableController Simple Test", function() {
$httpBackend.expectPOST('/app_dev.php/client_api/command').respond(200, {data: "Hello"});
// make an AJAX Posts
$httpBackend.flush();
}
});
In this case, I get two failing tests
First Error:
Setup failed on DoubleVariableController Simple Test: No pending request to flush!
at Error (native)
at Function.$httpBackend.flush (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular-mocks.js:1148:34)
Second Error:
Died on test #2 ... No pending request to flush !
Error: No pending request to flush !
at Error (native)
at Function.$httpBackend.flush (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular-mocks.js:1148:34)
I don't know why all the sudden, post requests are not going through. The tests worked fine using Angular 1.1.3. Any ideas?
As 1.2.x has move ngRoute to separate file you have to include it after angular.js in your tests configuration file.