I saw several Stackoverflow questions about this but I still couldn't solve my problem about switching pages.
I import the second Vue page. Then I call this.$navigateTo() on the page I imported. I don't get any errors after executing the method. Nothing happens! The method gets executed but the page doesn't change. The path to the second page is valid.
import SecondPage from './SecondPage';
export default {
methods: {
run(){
console.log('test')
this.$navigateTo(SecondPage)
}
}
}
this is the way I call the method:
<Button text="Check" #tap="run()" />
There is likely an error in the SecondPage.vue file. What you can try is change the $navigateTo call to have a catch statement:
import SecondPage from './SecondPage';
export default {
methods: {
run(){
console.log('test')
this.$navigateTo(SecondPage).catch(err => console.log('There was an error!', err))
}
}
}
See if it gives you a clue what might be wrong.
And just to make sure, SecondPage is indeed a <Page> component? (the root element is the Page?)
Related
i am getting this error when i run a test file. The test file uses methods declared in a page object file, please let me know how this can be fixed.
Error message
Page Object code
cy.get('.more-less-container').then(dropdown => {
if (dropdown.find('.name').contains('More')) {
cy.get('more-less-container').click();
} else {
console.log('folders are in expanded state');
}
});
class Folders {
Archive() {
dropdown();
cy.get('.category-content')
.find('[title="Archive"]')
.click()
.get('.folder-details')
.should('contain.text', 'Archive');
}
Trash() {
dropdown();
cy.get('.category-content')
.find('[title="Trash"]')
.click()
.get('.folder-details')
.should('contain.text', 'Trash');
}
Test code
/// <reference types="cypress" />
import { openFolder } from '../support/page-objects/sidebar/drafts';
describe('Verify mobile app download link redirections', () => {
before(() => {
cy.login();
});
});
it('Needs to open the drafts folder', () => {
openFolder.Drafts();
cy.get('.modal-close').click();
});
Not sure what i'm missing out here.
As I can see the cy.get(...) command (line 1) in your "Page Object code" file is not part of a class, and as such will be executed as soon as cypress is opened (ran), because that's how this support file is supposed to work, it's loaded and executed immediately (which means before any test are actually started). So the solution would be to move that command as part of the Folders class as a utility function, which later on you would explicitly call during your tests.
I've got a function, which upload image and I would like to after end this function navigate to next component. In app-routing.module.ts I made a necessary configuration, but I don't know, how to do navigation .
It sounds like you're using angular.
import { RouterExtensions } from 'nativescript-angular/router';
// ...
constructor(private routerEx: RouterExtensions) {
}
yourFunction(): void {
// do your stuff
this.routerEx.navigate(['your route']);
}
In my StackNavigator I want to sometimes block a navigation action. I thought to use onNavigationStateChange however it is not working.
Simple example:
render() {
return <Stack onNavigationStateChange={this.handleNavigate} />
}
handleNavigate = (stateOld, stateNew, action) => {
return false; // block it
}
However it is not blocking it. Does anyone have any ideas?
Use onShouldStartLoadWithRequest instead
http://facebook.github.io/react-native/docs/webview.html#onshouldstartloadwithrequest
i have encountered an issue, when making a text editor with support of image based tags. There is a need to move those tags around freely in the text, which is being made impractical by this issue.
Basically when I start dragging an image, and then drop it on desired location, one of two results can happen: A) it works as intended and B) the image is dropped to the end/beginning of the sentence. You can see the behaviour in attached gif. Resulting behavior
I'm using react and typescript combination for creating the page with quill being inserted in a component.
// TextEditor/index.tsx
import * as React from 'react';
import * as Quill from 'quill';
import { TextEditorState, TextEditorProps } from '../#types';
import { generateDelta } from '../#utils/generateDelta';
const formats = [
'image'
];
class TextEditor extends React.Component<TextEditorProps, TextEditorState> {
constructor(props: TextEditorProps) {
super(props);
this.state = {
Editor: undefined
}
}
componentDidMount() {
const self = this;
this.setState({Editor: new Quill('#editor-container', {formats: formats, debug: 'warn'})});
}
changeText(text: string) {
if(typeof(this.state.Editor) !== 'undefined') {
this.state.Editor.setContents(generateDelta(text), 'api');
}
}
render() {
return (
<div id="editor-container"></div>
);
}
}
export default TextEditor;
And the usage of this component in another component is just
// editor.tsx
import TextEditor from '../QuillEditor/TextEditor';
...
onUpdate(text: string) {
this.refs.targetEditor.changeText(text);
}
...
render() {
return (
...
<TextEditor
ref={'targetEditor'}
/>
...
)
}
I have tried to change the text editor to just contentEditable div and that worked flawlessly, so it shouldn't be because of some css glitch.
Has anyone some idea of what could be causing this?
EDIT Feb 6:
I have found out, that this issue is manifesting only in Chrome, as IE and MS Edge did not encountered this issue. I have tried to switch off all extensions, yet the issue is still there. Private mode also didn't help.
After few days of research I have figured out what is causing the issue.
The combination of Quill and React won't work, because of the way React 'steals' input events, while creating the shadow DOM. Basically, because it tries to process my input in contenteditable div created by Quill, it causes some actions to not fire, resulting in the weird behaviour. And because Quill tries to do it by itself, outside of React DOM.
This I have proved in my simple testing project, where adding a simple input tag anywhere on the page broke down the Quill editor.
Possible solution would be to use react-quill or some other component container, however I haven't managed to make it successfully work, or write some yourself, which would incorporate Quill to React in its DOM compatible way.
My view is
<Switch checked="{{ active }}" propertyChange="onCheckChange"/>
exports.onCheckChange = function(args)
{
//Api Service call
}
Actually I am binding the active value by API call and the issue is that onCheckChange gets executed during the initial binding with false value, so whenever I initially set the active==true by api service call and load the page, the onCheckChange is executed with checked==false, can anyone give me an idea about this please.
Note: Beginner in Nativescript
I battled with the checked property a lot so I opted for two-way binding, which behaves as expected:
// test.xml
<Switch [(ngModel)]="isUnicorn"></Switch>
// test.ts
isUnicorn: boolean = true;
......
if (this.isUnicorn) {
console.log("It is a unicorn");
}
Note that to get two-way binding to work you need to import NativeScriptFormsModule in app.module.ts or applicable module for instance:
// app.module.ts
import { NativeScriptFormsModule } from "nativescript-angular/forms";
......
#NgModule({
imports: [
NativeScriptFormsModule,
......
],
exports: [
NativeScriptFormsModule,
......
],
......
The two-way data-binding (described by leoncc) might be specific to the Angular NativeScript.
Here's a workaround without the two-way data binding, hopefully it will be easier to port to the plain NativeScript if needs be.
In the controller we can get the state of the Switch with a ViewChild query:
checked = true;
#ViewChild ('switch') private switch: ElementRef;
switched() {
let switch: Switch = this.switch.nativeElement;
this.checked = switch.checked}
And in the template we should invoke the switched change handler:
<Switch #switch [checked]="checked" (checkedChange)="switched()" class="switch"></Switch>