I have a page (parent component) that has a button and when clicked, it brings up a primevue dialog. The code of the button and dialog are in a child component. By default the dialog is not visible. When I do a unit test, how can I render the dialog to appear? console.log(wrapper) just shows the button. Any help would be much appreciated.
describe('DialogBoxForm.vue', () => {
let wrapper: VueWrapper;
beforeEach(async () => {
wrapper = mount(DialogBoxForm, {
global: {
stubs: { teleport: true, Toast: false },
plugins: [pinia, PrimeVue]
}
});
await flushPromises();
});
console.log(wrapper)
Related
I am building a web application with nuxt js + jest
My nuxt js component codes:
export default {
mounted () {
document.addEventListener('click', this.eventClick)
},
destroyed () {
document.removeEventListener('click', this.eventClick)
},
methods: {
eventClick () {
console.log('click event triggered!')
}
}
}
My codes in jest:
import Dashboard from '~/pages/admin/dashboard'
test('test click', () => {
wrapper = mount(Dashboard)
wrapper.trigger('click')
})
The problem is:
jest cannot fire click event and the code console.log('click event triggered!') is not executed.
How can I fix the problem?
The event listener is on the document, so clicking the wrapper would not trigger the click event.
Instead, trigger the event on the document.body:
test('test click', () => {
const eventClick = jest.spyOn(Dashboard.options?.methods || Dashboard.methods, 'eventClick')
shallowMount(Dashboard)
document.body.click() 👈
expect(eventClick).toHaveBeenCalled()
})
demo
I'm using a custom loader component for my project, and my nuxt config looks like this:
loading: '~/components/common/loading.vue'
The problem is that this component doesn't throttle a few milli-seconds and with every page change, this flickers and causes a bad user experience. Is there any way to add a throttle as we'd normally add for the default component like throttle: 200 inside the loading object like,
loading: { throttle: 200 }
Since my loading option doesn't have an object, instead has a string/path to my custom loading component, I'm not sure what to do here.
Reference: https://nuxtjs.org/docs/2.x/features/loading
This is how I use a custom loading component using Vuetify overlay component with a throttle:
<template>
<v-overlay :value="loading">
<v-progress-circular
indeterminate
size="64"
/>
</v-overlay>
</template>
<script>
export default {
data: () => ({
loading: false
}),
methods: {
clear () {
clearTimeout(this._throttle)
},
start () {
this.clear()
this._throttle = setTimeout(() => {
this.loading = true
}, 200)
},
finish () {
this.clear()
this.loading = false
}
}
}
</script>
This is inspired by the Nuxt default loading component.
You could add a setTimeout within your start() method in your custom loader component ~/components/common/loading.vue.
methods: {
start() {
setTimeout(() => {
this.loading = true;
}, 2000);
},
finish() { ... }
}
I want to navigate and show popup when user interact with notification. I can handle if user intereact or clicks it and also can navigate to the page i want.
Then i'm tring to show popup with setstate but nothings happen.
This code works when user in Dashboard page
componentDidMount() {
PushNotification.configure({
onNotification: function (notification) {
if (notification) {
if (notification.userInteraction && notification.data.data == "true") {
NavigationService.navigate("Dashboard", {
visib: true,
});
setTimeout(
function () {
t.setState({ ovrlayVisible: true }, () => {
t.getMeetDetail(notification.data.dataId);
});
}.bind(this),
2000
);
}
}
},
requestPermissions: true,
});
}
I'm making it all in didmount. what should i do. Thank you
componentDidMount()
{
this._unsubscribe = this.props.navigation.addListener('focus', () =>
{//your set state code. this function run every time when you navigate to dashboard screen});
}
componentWillUnmount() {
this._unsubscribe();
}
decrease settimeout time
I'm using electron to develop a software. I have a frameless window. I create a titlebar myself using css code "-webkit-app-region: drag;", and I have a "maximize"/"unmaximize" button. The question is that, when I double click the title-bar, the window maximizes, but the "maximize"/"unmaximize" button does not change. I've tried to use ipc to communicate, but there's still a problem. The problem is that after I click the 'maximize' button, the window maximizes, but when I double click the "drag region", it triggers 'maximize' signal of the window. As we know, a normal software should trigger 'unmaximize' when I double click the "drag region".
main.js:
`
win.on('maximize', () => {
win.webContents.send('maximize-app-window')
})
win.on('unmaximize', () => {
win.webContents.send('unmaximize-app-window')
})
`
renderer.js:
`
<div v-if="maximizeType === 'maximize'"
class="icon-checkbox-unchecked" #click="maximizeAppWindow()"></div>
<div v-else
class="icon-window-restore-o" #click="unmaximizeAppWindow()"></div>
...(vue component code)
data: function () {
return {
maximizeType: 'maximize'
}
},
methods: {
maximizeAppWindow () {
this.maximizeType = 'unmaximize'
ipcRenderer.send('maximize-app-window')
},
unmaximizeAppWindow () {
this.maximizeType = 'maximize'
ipcRenderer.send('unmaximize-app-window')
},
},
...
mounted() {
ipcRenderer.on('maximize-app-window', (event) => {
this.maximizeType = 'unmaximize'
})
ipcRenderer.on('unmaximize-app-window', (event) => {
this.maximizeType = 'maximize'
})
}
`
I'm using the electron-vue boilerplate, and I want to make my mainWindow a fullScreen after clicking a button.
Electron Window API: electron.atom.io/docs/api/browser-window
HTML:
<button #click="setFullScreen">Switch to Full Screen</button>
Vue:
export default {
name: 'mainComponent',
methods: {
setFullScreen: function() {
mainWindow.setFullScreen(true);
}
}
This is not working. How can I use the Electron API in electron-vue?
and the index.js:
'use strict'
import { app, BrowserWindow } from 'electron'
let mainWindow
const winURL = process.env.NODE_ENV === 'development'
? `http://localhost:${require('../../../config').port}`
: `file://${__dirname}/index.html`
function createWindow () {
/**
* Initial window options
*/
mainWindow = new BrowserWindow({
height: 728,
width: 1024,
fullscreen: false,
})
mainWindow.loadURL(winURL)
mainWindow.on('closed', () => {
mainWindow = null
})
// eslint-disable-next-line no-console
console.log('mainWindow opened')
}
app.on('ready', createWindow)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (mainWindow === null) {
createWindow()
}
})
you will find it as it is in electron-Vue
the picture shows How the Structure of the folder
enter image description here
mainWindow is not available in your Vue code because it is defined in your main process.
In your single file component, however, you can import remote from electron, where you can get access to the current window. So your code would look something like this.
const {remote} = require("electron")
export default {
name: 'mainComponent',
methods: {
setFullScreen: function() {
remote.getCurrentWindow().setFullScreen(true);
}
}
}