Based off this question, I have written the following lifecycle function in my in my api/foo/model/foo.js file.
'use strict';
module.exports = {
async afterUpdate(modifications, filter, resultData) {
strapi.log.error('here');
console.log('there');
}
}
However, when I update a Foo in the Strapi admin console, nothing is logged. What am I missing?
I'm using Strapi 3, not Strapi 4.
The correct way to write the above code in Strapi 3 is
'use strict';
module.exports = {
lifecycles: {
async afterUpdate(event) {
strapi.log.error('here');
console.log('there');
}
}
}
And then, of course, you can remove the console.log statement because strapi.log works just fine.
Related
I've migrated from strapi v3 to strapi v4 and i wants to create custom endpoint 'events/me' by this code in "src/api/event/controllers" directory:
"use strict";
const { sanitizeEntity } = require("strapi-utils");
module.exports = {
// Get logged in users
async me(ctx) {
const user = ctx.state.user;
if (!user) {
return ctx.badRequest(null, [
{ messages: [{ id: "No authorization header was found" }] },
]);
}
const data = await strapi.services.events.find({ user: user.id });
if (!data) {
return ctx.notFound();
}
return sanitizeEntity(data, { model: strapi.models.events });
},
};
but i encountered to this error:
Cannot find module 'strapi-utils'
it seems that "strapi-utils" there isn't in strapi v4.
by addition, there isn't any "cofing/routes.json" file. this has been replaced by "route/event.js" file.
strapi document couldn't help me. Any help would be appreciated
You could import it from #strapi/utils.
The sanitize function of Strapi has a bit changed in v4: you have to use the Content API and provide the schema for the sanitized object.
Here you can find an example of use: https://github.com/strapi/strapi/blob/main/packages/plugins/users-permissions/server/controllers/user.js
New to cypress, but did a couple projects in Protractor and TestCafe.
I'm aware of the controversy using PO's in cypress, but due to the complexity / nature of our app, we're going with it.
Refactoring the test to remove PO's and include the app ID's works. With the page objects, we get the 'requires a DOM element' error.
// myPo.js
class LoginPage {
loginPageCon() {
return cy.get('#page-login');
}
forgotPasswordLnk() {
return cy.get('#forgotPassword');
}
emailTxt() {
return cy.get('#email');
}
forgotPasswordCon() {
return cy.get('#page-forgot-password');
}
}
export default LoginPage;
// myTest.spec.js
import loginPage from '../pageObjects/myPo.js';
const loginPage = new LoginPage();
describe('Authorization', () => {
it('can direct to the azure instance', () => {
cy.visitHome();
cy.get(loginPage.loginPageCon);
});
describe('Forgot Password', () => {
it('clicking forgot password sends you to the correct screen', () => {
cy.get(loginPage.forgotPasswordLnk).click();
cy.get(loginPage.forgotPasswordCon);
});
});
});
You are returning a function reference to cy.get() when you call cy.get(loginPage.forgotPasswordLink).
Change It to:
loginPage.forgotPasswordLink().click()
Your page object is already returning a chainable of cy.get()
I need help in running my Vue spa in the same domain as my laravel app , when running "npm run serve" in terminal I think it's working but when I go to the browser it's refusing connection. I haven't done the backend which I will use sanctum for handling API. Has anybody here have the same project working on like me? love to make conversations to solve this.
Thanks in advance
here is the vue.config.js file
const path = require('path')
const webpack = require('webpack')
const createThemeColorReplacerPlugin = require('./config/plugin.config')
function resolve (dir) {
return path.join(__dirname, dir)
}
/**
* check production or preview(pro.loacg.com only)
* #returns {boolean}
*/
function isProd () {
return process.env.NODE_ENV === 'production'
}
const assetsCDN = {
css: [],
// https://unpkg.com/browse/vue#2.6.10/
js: [
'//cdn.jsdelivr.net/npm/vue#2.6.10/dist/vue.min.js',
'//cdn.jsdelivr.net/npm/vue-router#3.1.3/dist/vue-router.min.js',
'//cdn.jsdelivr.net/npm/vuex#3.1.1/dist/vuex.min.js',
'//cdn.jsdelivr.net/npm/axios#0.19.0/dist/axios.min.js'
]
}
// webpack build externals
const prodExternals = {
vue: 'Vue',
'vue-router': 'VueRouter',
vuex: 'Vuex',
axios: 'axios'
}
// vue.config.js
const vueConfig = {
configureWebpack: {
// webpack plugins
plugins: [
// Ignore all locale files of moment.js
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
],
// if prod is on, add externals
externals: isProd() ? prodExternals : {}
},
chainWebpack: (config) => {
config.resolve.alias
.set('#$', resolve('src'))
const svgRule = config.module.rule('svg')
svgRule.uses.clear()
svgRule
.oneOf('inline')
.resourceQuery(/inline/)
.use('vue-svg-icon-loader')
.loader('vue-svg-icon-loader')
.end()
.end()
.oneOf('external')
.use('file-loader')
.loader('file-loader')
.options({
name: 'assets/[name].[hash:8].[ext]'
})
// if prod is on
// assets require on cdn
if (isProd()) {
config.plugin('html').tap(args => {
args[0].cdn = assetsCDN
return args
})
}
},
css: {
loaderOptions: {
less: {
modifyVars: {
// less vars，customize ant design theme
'primary-color': '#00B4E4',
// 'link-color': '#F5222D',
'border-radius-base': '4px'
},
javascriptEnabled: true
}
}
},
}
if (process.env.VUE_APP_PREVIEW === 'true') {
vueConfig.configureWebpack.plugins.push(createThemeColorReplacerPlugin())
}
module.exports = vueConfig
module.exports = {
devServer: {
host: 'app.paymate-ui.test'
}
}
If I understand you correctly, you want to use Laravel and Vue.js together in the same application folder?
Should be pretty easy then.
First off, build your application with Vue scaffolding for the frontend.
Then, make a route that redirects everything to a single controller method that returns a spa view. (Or use a closure)
In this view, include your app.js as an asset and include the main Vue component (something like <app></app>).
Then build your Vue app. All requests will now be forwarded to the spa view, which includes your app.js, which should bootstrap Vue.
I am using Vuetify to load an image:
<v-img :src="this.imageUrl" :lazy-src="defaultImage" v-on:error="onError" :width="100" :height="150"></v-img>
data () {
return {
defaultImage: require('#/assets/images/defaultImage.png'),
useFallbackImage: false
}
},
computed: {
imageUrl: function() {
return !this.useFallbackImage ? `http://foo/v1.0/bar/${this.propId}` : this.defaultImage;
}
},
methods: {
onError: function() {
this.useFallbackImage = true;
}
}
I don't know if the image exists, so I am letting the browser try, and if it doesn't then fallback to the default. This works just fine, but Vuetify annoyingly prints a bunch of junk to the console:
"[Vuetify] Image load failed ... found in ..."
I looked in the source code and it looks like they are indiscriminately printing to the console whenever an error even before the handler. But I thought I would try -- does anybody know of a way to squelch Vuetify here?
Thanks
You maybe able to do something like this:
import VImg from 'vuetify/lib/components/VImg'
export default VImg.extend({
name: 'VImageWrapper',
methods: {
onError() {
// leave empty
}
}
})
Taken from this thread:
https://github.com/vuetifyjs/vuetify/issues/6755
I'm trying to use page objects in Nightwatch js and am creating my own commands in that. For some reason now Nightwatch doesn't seem to recognise standard commands on browser and give me a type error on different commands. What am I doing wrong with my code?
I'm tried different things here already, for example adding 'this' or 'browser' in front of the command, which didn't help. My code has gone through many versions already I am not even sure anymore what all I've tried after Googling the error.
My pageObject:
const homePageCommands = {
deleteAllListItems: function (browser) {
browser
.elements('css selector', '#mytodos img', function (res) {
res.value.forEach(elementObject => {
browser.elementIdClick(elementObject.ELEMENT);
});
})
.api.pause(1000)
return this;
}
};
module.exports = {
url: "http://www.todolistme.net"
},
elements: {
myTodoList: {
selector: '#mytodos'
},
deleteItemButton: {
selector: 'img'
}
},
commands: [homePageCommands]
};
My test:
require('../nightwatch.conf.js');
module.exports = {
'Validate all todo list items can be removed' : function(browser) {
const homePage = browser.page.homePage();
homePage.navigate()
.deleteAllListItems(homePage)
// I have not continued the test yet because of the error
// Should assert that there are no list items left
}
};
Expected behaviour of the custom command is to iterate over the element and click on it.
Actual result:
TypeError: browser.elements is not a function
at Page.deleteAllListItems (/pageObjects/homePage.js:18:14)
at Object.Validate all todo list items can be removed (/specs/addToList.js:8:14)
at processTicksAndRejections (internal/process/next_tick.js:81:5)
And also:
Error while running .navigateTo() protocol action: invalid session id
Looks like you need to pass browser to the deleteAllListItems function instead of homePage on this line:
homePage.navigate()
.deleteAllListItems(homePage)