in html
<button mat-button class="p-0" (click)="addImage.click()" data-testid="addimagebutton">
<input type="file" #addImage (change)="addImageEvt($event)" accept="image/*" multiple hidden />
spec.ts
it('should call addImageEvt method on click', () => {
spyOn(component, 'addImageEvt').and.callThrough();
fixture.detectChanges();
const addImageButton = debugElement.query(
By.css('[data-testid="addimagebutton"]')
).nativeElement;
addImageButton.click();
addImageButton.dispatchEvent(new Event('change'));
let addImageChange = debugElement.query(By.css('#addImage'));
let addImageElement = addImageChange.nativeElement;
addImageElement.triggerEventHandler('change');
fixture.whenStable().then(() => {
expect(component.addImageEvt).toHaveBeenCalled();
});
it should return true,by calling the method. i did not get where i did mistake.. please help in write test case
Related
I have an input name address (created by a plugin in WordPress context).
When I type some text in this input, I would like to modify an alpine component (new dropdown component used for autocompletion).
Before I used that :
address.addEventListener('input', _.debounce(event => callApi(event.target.value), 250));
Instead of calling callApi function, i need to act on the toggle.
In the dropdown component, I can add :
#set-title.window="title = $event.detail"
but how from my debounce, call the toggle ?
I should be able to do $dispatch('set-title', 'Hello World!') somewhere ?
I specify that I cannot modify my basic input (perhaps in javascript)
Thanks for help
You can create an event listener inside the Alpine.js component's init() method and mutate the title variable from there:
<div>
<input type="text" id="address" />
</div>
<div x-data="myComponent">
<div x-text="title"></div>
</div>
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('myComponent', () => ({
title: '',
init() {
const address = document.getElementById('address')
address.addEventListener('input', _.debounce(event => {this.title = event.target.value}, 250)
});
}
}))
})
</script>
I'm facing one issue when clicking on the button this.reloadDatatable() is not called. how can I call reloadDatatable() function from toggle function? below is the demo code for that. Thank you.
<button type="button" #click="addSettingContainer.toggle();"></button>
Alpine.data('initOrderGrid', () => ({
addSettingContainer: {
toggle() {
this.reloadDatatable();
}
},
reloadDatatable: function() {
console.log('a');
},
}));
You cannot access the parent object's scope from a child object without some ugly hacks. However it seem that you want to use an event system: on a button click you want to reload the data table. Alpine.js has builtin event system, we can use the $dispatch function to emit a custom event and the x-on method to capture our custom event:
<div x-data="initOrderGrid"
#reload-data-table.window="reloadDatatable">
</div>
<div x-data>
<button #click="$dispatch('reload-data-table')">Reload data table</button>
</div>
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('initOrderGrid', () => ({
reloadDatatable() {
console.log('Data table reloaded');
}
}))
})
</script>
Currently I have a useLazyQuery hook which is fired on a button press (part of a search form).
The hook behaves normally, and is only fired when the button is pressed. However, once I've fired it once, it's then fired every time the component re-renders (usually due to state changes).
So if I search once, then edit the search fields, the results appear immediately, and I don't have to click on the search button again.
Not the UI I want, and it causes an error if you delete the search text entirely (as it's trying to search with null as the variable), is there any way to prevent the useLazyQuery from being refetched on re-render?
This can be worked around using useQuery dependent on a 'searching' state which gets toggled on when I click on the button. However I'd rather see if I can avoid adding complexity to the component.
const AddCardSidebar = props => {
const [searching, toggleSearching] = useState(false);
const [searchParams, setSearchParams] = useState({
name: ''
});
const [searchResults, setSearchResults] = useState([]);
const [selectedCard, setSelectedCard] = useState();
const [searchCardsQuery, searchCardsQueryResponse] = useLazyQuery(SEARCH_CARDS, {
variables: { searchParams },
onCompleted() {
setSearchResults(searchCardsQueryResponse.data.searchCards.cards);
}
});
...
return (
<div>
<h1>AddCardSidebar</h1>
<div>
{searchResults.length !== 0 &&
searchResults.map(result => {
return (
<img
key={result.scryfall_id}
src={result.image_uris.small}
alt={result.name}
onClick={() => setSelectedCard(result.scryfall_id)}
/>
);
})}
</div>
<form>
...
<button type='button' onClick={() => searchCardsQuery()}>
Search
</button>
</form>
...
</div>
);
};
You don't have to use async with the apollo client (you can, it works). But if you want to use useLazyQuery you just have to pass variables on the onClick and not directly on the useLazyQuery call.
With the above example, the solution would be:
function DelayedQuery() {
const [dog, setDog] = useState(null);
const [getDogPhoto] = useLazyQuery(GET_DOG_PHOTO, {
onCompleted: data => setDog(data.dog)
})
return (
<div>
{dog && <img src={dog.displayImage} />}
<button
onClick={() => getDogPhoto({ variables: { breed: 'bulldog' }})}
>
Click me!
</button>
</div>
);
}
The react-apollo documentation doesn't mention whether useLazyQuery should continue to fire the query when variables change, however they do suggest using the useApolloClient hook when you want to manually fire a query. They have an example which matches this use case (clicking a button fires the query).
function DelayedQuery() {
const [dog, setDog] = useState(null);
const client = useApolloClient();
return (
<div>
{dog && <img src={dog.displayImage} />}
<button
onClick={async () => {
const { data } = await client.query({
query: GET_DOG_PHOTO,
variables: { breed: 'bulldog' },
});
setDog(data.dog);
}}
>
Click me!
</button>
</div>
);
}
The Apollo Client documentation isn't explicit about this, but useLazyQuery, like useQuery, fetches from the cache first. If there is no change between queries, it will not refetch using a network call. In order to make a network call each time, you can change the fetchPolicy to network-only or cache-and-network depending on your use case (documentation link to the fetchPolicy options). So with a fetchPolicy change of network-only in your example, it'd look like this:
const AddCardSidebar = props => {
const [searching, toggleSearching] = useState(false);
const [searchParams, setSearchParams] = useState({
name: ''
});
const [searchResults, setSearchResults] = useState([]);
const [selectedCard, setSelectedCard] = useState();
const [searchCardsQuery, searchCardsQueryResponse] =
useLazyQuery(SEARCH_CARDS, {
variables: { searchParams },
fetchPolicy: 'network-only', //<-- only makes network requests
onCompleted() {
setSearchResults(searchCardsQueryResponse.data.searchCards.cards);
}
});
...
return (
<div>
<h1>AddCardSidebar</h1>
<div>
{searchResults.length !== 0 &&
searchResults.map(result => {
return (
<img
key={result.scryfall_id}
src={result.image_uris.small}
alt={result.name}
onClick={() => setSelectedCard(result.scryfall_id)}
/>
);
})}
</div>
<form>
...
<button type='button' onClick={() => searchCardsQuery()}>
Search
</button>
</form>
...
</div>
);
};
When using useLazyQuery, you can set nextFetchPolicy to "standby". This will prevent the query from firing again after the first fetch. For example, I'm using the hook inside of a Cart Context to fetch the cart from an E-Commerce Backend on initial load. After that, all the updates come from mutations of the cart.
How would you read the input value ?
On the reacjs site I see very complicated way !!
https://reactjs.org/docs/forms.html
I just want to read the value and submit it via ajax fetch() request. I.e. I don't need to manage bindings, events and such ...
The easiest way by far to read values from html controls is by using an event handler.
export default class myComponent extends Component {
person = {};
onChange = field => e => {
this.person[field] = e.target.value;
};
render() {
return (
<Input
id="firstName"
name="firstName"
autoComplete="firstName"
autoFocus
onChange={this.onChange('FirstName')}
/>
);
}
}
In the above code snippet we are basically telling react to fire the onChange member on an update of firstName control update. Our method will receive an event e, that has a handle to our control and we can basically probe it's value member to get what's typed in (much like jquery's $('#element').value()).
Why is it the easiest method? because it's generic enough to allow you to handle multiple inputs in a react component. Notice that, I'm also instructing React to pass me the control name in addition to the event, and using this method I can basically know exactly which of my inputs (in case of multiple) caused the event to fire.
Reading user input value is feasible and recommended via event handlers.
Below example would explain how to read input value and send it to the backend via fetch when Form is submitted
class Test extends Component{
constructor(props){
super(props);
this.state = {
name: “”
}
}
handleChange = event => {
this.setState({name: event.target.value});
}
handleSubmit = () => {
//send the value via fetch backend I.e., this.state.name
}
render(){
const { name } = this.state;
render(
<form onSubmit={this.handleSubmit}
<label>
Name:
<input type="text" value={name} onChange={this.handleChange} name="name" />
</label>
<input type="submit" value="Submit" />
</form>
)
}
}
just a quick question about the mvc JqueryUI framework,
i have a _layout.cshtml page which initializes a set of tabs
i have a view which has a jqueryUI datepicker on it.
the View is loaded Dynamically into the tabs and displayed, but if i load a subsequent instance of the View on the Tabs then the datepicker will only populate the first instance of the datepicker.
my question is this
1. MVC uses independent Objects to create independent Views with the same ids as on the views
2. JQueryUI uses the XML Dom with Unique Ids to create its base objects
so how are these supposed to work together.
my View is as follows
<div class="PoCreate">
<div id="pnlProject">
<fieldset>
<legend>Project</legend>
<label for="ProjectNo">
Project #:
</label>
<input type="text" name="ProjectNo" id="ProjectNo" />
<input type="button" name="btnProjectNo" id="btnProjectNo" data-linked-search="#Url.Action("Project", "SearchObj")"
value=".." />
</fieldset>
</div>
</div>
#Url.Script("~/scripts/PageScripts/_PoIndex.js")
The Script file contains
$('.PoCreate').PoCreate({});
and the PO function contains
$.fn.extend({
PoCreate: function (opt)
{
$(this).each(function ()
{
var _self = $(this.parentNode),
_opts = {}, tabIdContext = $(this.parentNode).attr('id');
$.extend(_opts, (opt || {}));
$('.date', _self).each(function ()
{
$(this).attr('id', tabIdContext + '-' + $(this).attr('id'));
$(this).datepicker(Globals.Dates).keypress(function (e) { return false; });
})
$(':button').button().filter('[data-linked-search]').click(function (e)
{
$.extendedAjax({ url: $(this).attr('data-linked-search'),
success: function (response)
{
$('#dialog-form').find('#dialog-search').html(response).dialog(Globals.Dialogs);
}
});
});
});
}
});
I found a way to solve this,
On the Create of the JQuery Widget i have to rename the ID of the DatePicker field so that it is unique for the Tab created.
so my TabId = ui-tab-01
and DatePickerId = DatePicker1
renaming the DatePickerId so that it is now ui-tab-01-DatePicker1