Develop Reference

React testing library does not clear input form when simulating clear conditions

I have a search UI project with two separate components: one is a filter search component with the input form to search for applicable filter and the other is an applied filter component showing the applied filter with the option to clear. I want to test the behavior in jest that when clicking on the clear button from the applied filter component it clears the form input in the filter search component.
In the project, I have a state manager which observes the filters change and the clearing is done by calling a useState function to set the input value to empty when there is a state change with a matching, deselected filter. It works okay in manual tests.
The goal is to write the test only for the filter search component rather than rendering two components by simulating the state change of the filters update since I don't have access to the clear button. But after mocking the state change and making sure that the filter is deselected, the input box does not clear like it does in the expected UI. I don't know why the state change for the filter isn't clearing the input because it does clear on the test site.
it('clears input when old filters are removed', async () => {
mockAnswersActions({
setFilterOption,
setOffset,
executeFilterSearch: jest.fn().mockResolvedValue(labeledFilterSearchResponse)
});
render(<FilterSearch searchFields={searchFieldsProp} />);
const searchBarElement = screen.getByRole('textbox');
userEvent.type(searchBarElement, 'first name 1');
await waitFor(() => expect(screen.findByText('first name 1')));
userEvent.type(searchBarElement, '{arrowdown}{enter}');
await waitFor(() => {
expect(setFilterOption).toBeCalledWith({
fieldId: 'name',
matcher: Matcher.Equals,
value: 'first name 1',
displayName: 'first name 1',
selected: true
});
})
actions.setFilterOption({
fieldId: 'name',
matcher: Matcher.Equals,
value: 'first name 1',
displayName: 'first name 1',
selected: false
})
await waitFor(() => {
expect(setFilterOption).toBeCalledWith({
fieldId: 'name',
matcher: Matcher.Equals,
value: 'first name 1',
displayName: 'first name 1',
selected: false
});
})
expect(searchBarElement).toHaveValue('');
});

How to add an action opening a dropdown menu in Monaco Editor?

I know how to add an entry in the context menu of the Monaco editor, with editor.addAction. How to add an action which opens a dropdown list, as the "Command Palette" action?

As mentioned in this issue, the quick-open api is not yet implemented in monaco-editor. But after a series of in-depth research, I found a somewhat hacker solution.
First, you need to import IQuickInputService like below.
import * as monaco from 'monaco-editor/esm/vs/editor/editor.main.js';
import { IQuickInputService } from 'monaco-editor/esm/vs/platform/quickinput/common/quickInput';
Then, create our editor.
// Create your editor instance...
let editor = monaco.editor.create(
// ...
);
// Add a new command, for getting an accessor.
let quickInputCommand = editor.addCommand(0, (accessor, func) => {
// a hacker way to get the input service
let quickInputService = accessor.get(IQuickInputService)
func(quickInputService)
});
Finally, as an example, we can add an action.
editor.addAction({
id: "myQuickInput",
label: "Test Quick Input",
run: (editor) => {
// create quick input
editor.trigger("", quickInputCommand, (quickInput) => {
quickInput.pick([
{
type: 'item',
id: "my_quick_item",
label: "MyQuickItem",
},
{
type: 'item',
id: "my_quick_item2",
label: "MyQuickItem2",
},
{
type: 'item',
id: "my_quick_item3",
label: "MyQuickItem3",
},
]).then((selected) => {
console.log(selected)
})
})
}
})
For the interface of IQuickInputService, please refer to here here
If you do it right, when you run the action, you should get the same result as I did.

How to dynamically update the input text field value in angular formly?

I am using angular-formly in the angular 4 projects.
The scenario of the work is I have the list of the users and each user has got edit and delete button.
When a user clicks on the edit button a modal is shown up with 2 fields, one is an email address and another one to change the role of the user.
I am using <formly-form> to render the form onto the modal like this.
When edit button is clicked this modal gets opened, where I wanted to show the email address which is associated with the edit button which is clicked.
Also, I want to keep the role selected in the dropdown for that user.
Here is the formlyfieldconfig
{
key: 'email',
className: 'col-sm-4',
type: 'input',
defaultValue: '',
templateOptions: {
type: 'text',
label: 'Email',
disabled: true,
placeholder: ''
}
},
{
key: 'role',
className: 'col-sm-4',
type: 'select',
defaultValue: '',
templateOptions: {
label: 'Select Role',
options: [],
required: true
}
}
As you can see, above for email field I have kept defaultValue as null, whereas for role field I have kept defaultValue and options as null.
When a user clicks on the edit button, I am dynamically setting the defaultValue and options property which should reflect in the modal popup form.
private edituser(account):void {
this.updateModal.show();
let userData = updateuserdata;
this._PicklistApi.findById('5c45b9e06c0bbc57b5d43a66')
.subscribe(picklist => {
if(picklist && picklist['options'].length) {
_.find(userData,{'key': 'email'})
.defaultValue = account.email;
_.find(userData,{'key': 'role'})
.defaultValue = account.role;
_.find(userData,{'key': 'role'})
.templateOptions.options = [...picklist['options']];
}
});
this.updateuserdata = userData;
}
this._PicklistApi is a service object which will give me the list of all roles available.
updateuserdata will have the actual form field config which is passed to the <formly-form> component in HTML.
account parameter is user object having user data including email and role.
when a user clicks on the edit button edituser() gets called, and it sets the select options properly with the available roles.
But, it is not setting up defaultValue for both the email and role fields.
I am not able to understand this behavior as select options are getting set properly whereas it is not setting up the defaultValue for both the fields.
If I do console log then I do see that defaultValue is set for the both of the fields then why it isn't reflecting in the form.

How can we change the Notification message when we click the save button in listview in ng-admin?

In the listview/creation view , I am trying to add the custom notification message instead of default notification (please refer screenshot) when the user clicks the save button.
Can someone please let me know if there a way to add custom notification message ?enter image description here
var app = nga.entity('app').label('App'); // the API endpoint for users will be 'http://jsonplaceholder.typicode.com/users/:id
app.listView()
.title('App Lists')
.fields([
nga.field('id'),
nga.field('appName').label('App Name'),
nga.field('appId').label('App Id')
.validation({ required: true, pattern: '[A-Za-z0-9\.\-_]{1,50}' }),
nga.field('appSecret').label('App Secret'),
nga.field('userId').label('User Id'),
nga.field('description').label('App description'),
nga.field('published', 'choice').choices([
{ value: true, label: 'true' },
{ value: false, label: 'false' }
])
])
.exportFields([])
.listActions(['<app-property post="entry"></app-property>','edit', 'delete'])
.perPage(10) // limit the number of elements displayed per page. Default is 30.
.batchActions(['delete', '<my-custom-directive entries="selection"></my-custom-directive>'])
;

It might not be exactly what you're looking for, but on the latest branch (1.x.x), you can translate this message with:
myApp.config(['$translateProvider', function ($translateProvider) {
$translateProvider.translations('en', {
'CREATION_SUCCESS': 'My custom message onCreateSuccess()',
'EDITION_SUCCESS': 'My custom message onEditSuccess()'
});
$translateProvider.preferredLanguage('en');
}]);
See the translation chapter here: https://github.com/marmelab/ng-admin/blob/master/doc/Translation.md

Maybe you don't need it anymore, but I'll post it to those who will look here in future.
In ng-admin you have notification service which you could inject into your controller. Then you could do something like
this.notification.log(yourMsg, {addnCls: 'humane-flatty-success'};
To change default messages please look into the source of ng admin list directive.

How can I make a field in a meteor Simple Schema equal to a js variable and still let the user fill out the rest of the simple schema?

I am making a meteor web app where the user will click on a html button. Once this button is clicked, the user needs to be directed to another page with some forms generated by a meteor simple schema package. The first field in the simple schema needs to automatically be given a string value of "hello" and then the rest of the fields in the simple schema will be filled out by the user with the input fields on the page. What I am unsure about is how to get the first value automatically set to this string value. Here is some of the code I have:
The simple schema declaration:
LobbySchema = new SimpleSchema({
game: {
type: String,
label: "Game"
},
console: {
type: String,
label: "Console"
},
players: {
type: Number,
label: "Players"
},
mic: {
type: Boolean,
label: "Mic"
},
note: {
type: String,
label: "Note"
},
gamertag: {
type: String,
label: "Gamertag"
},
createdAt: {
type: Date,
label: "Created At",
autoValue: function(){
return new Date()
},
autoform: {
type: "hidden"
}
}
});
The first field there in the schema "game" needs to be given the value "hello" when the html button is clicked. Right now I can assign that value to a javascript variable using the button by having an onclick function:
function getElementText(elementID){
var elementText = "hello";
}
The button would call the getElementText function and have the elementText variable equal "hello". Now I need to assign the the first field in the simple schema to this variable value, "hello", then have it so the user can now fill out the rest of the schema with the input fields, automatically generated into the html with this code:
{{> quickForm collection="Lobby" id="insertLobbyForm" type="insert" class="newLobbyForm"}}
If you do not feel like providing the answer (maybe it happens to be more complicated than I think) then I would be very happy to receive a link to a site that might help me with this. I am also very willing to explain anything about the question if I did not explain the situation well enough above.

You can use the AutoForm hooks like this:
AutoForm.hooks({
app_create: {
before: {
method: function (doc) {
// Do whatever assignment you need to do here,
// like doc['game'] = "hello"; //then
return doc;
}
},
onSuccess: function (formType, result) {
},
onError: function (formType, error) {
}
}
});
Where here app_create is the id of the form you're sending with Autoform.