Cannot test datagrid component
Here is example.
https://codesandbox.io/s/g921o?file=/src/components/Home.js
Please check test console. screen.debug() doesn't return dom with dataSource of data grid.
How to test data grid with simple array or with CustomStore.
In my case this way helped, but then there is a problem of how to get updated number of rows if some action happened...
it("We are doing test1", async () => {
render(<Home />);
const rows = await screen.findAllByText(/Test\d/);
console.log(rows);
});
HERE they answer why the regular way doesn't work for their components...
Related
I have a list I'm rendering in my React app, and I need to test that I'm listing the list items in alphabetical order.
Initially I tried testing this by querying the document this way:
const a = getByText("a_item");
const el = a.parentElement?.parentElement?.nextSibling?.firstChild?.textContent;
expect(el).toEqual("b_item");
But this proved to be brittle. I don't want to test the HTML structure of each item. I only want to test that the list is alphabetical.
How can I test that the list is alphabetical without depending on the current HTML structure of the list?
Use String.search to find the indices of the strings in the document's HTML, and then assert that indices are in the correct order:
it("lists items alphabetically", async () => {
loadItems([
"b_item",
"a_item",
]);
await render(<App/>);
await waitFor(() => {
const html = document.body.innerHTML;
const a = html.search("a_item");
const b = html.search("b_item");
expect(a).toBeLessThan(b);
});
});
Note that this may not be ideal since it accesses the dom directly, which isn't considered best practice when using React Testing Library. I haven't tested this, but it would probably be better to use a regex matcher with a built-in React Testing Library query method:
it("lists items alphabetically", async () => {
loadItems([
"b_item",
"a_item",
]);
await render(<App/>);
expect(await screen.findByText(/a_item.+b_item/)).toBeInTheDocument();
});
I'm using react-admin and I have a list component that has some conditional display behavior based on permissions.
I'd like to write a simple Jest test that asserts the correct behavior (display the Edit button if admin, hide the Edit button if not admin), but I need to feed some mock records into my list component. How do I pass mock data to my list component?
There is (now) a dedicated paragraph on the documentation about testing permissions-based view: https://marmelab.com/react-admin/UnitTesting.html#testing-permissions
I also wrote an example of unit test available on the code base: UnitShow.spec.js
it('should show the user role in the second tab', () => {
const wrapper = shallow(<UserShow permissions="admin" />);
const tabs = wrapper.find(Tab);
const fields = tabs.at(1).find(TextField);
expect(fields.at(0).prop('source')).toBe('role');
});
I am new to Angular and need your help here. I have an Angular service that has the API calling function as shown below.
searcheBay() {
console.log("calling ebay service");
return this.httpClient.get (this.ebayURL);
}
and I am calling this function from the component as shown below.
this.searchService.searcheBay().subscribe((data) => {
this.svcdata = data
});
The data variable has complex JSON structure (see the image below).
The data I am looking to read is held by "searchResult" element. Could you suggest how to parse and extract the "searchResult" element? Thanks in advance.
I debugged in the Safari DEV console and see the element accessibility as shown below.
When I updated the same code in my component, I encounter compile: ERROR in src/app/search/search.component.ts(20,29): error TS2339: Property 'findItemsByKeywordsResponse' does not exist on type 'Object'. Please suggest your thoughts.
serviceOnButtonClick(){
this.searchService.searcheBay().subscribe((data) => {
this.svcdata = data.findItemsByKeywordsResponse[0].searchResult
});
#javapedia.net try this, if you response data Object is same as you shown in the image,
this.searchService.searcheBay().subscribe((data) => {
this.svcdata = data.findItemsByKeywordsResponse[0].searchResult;
console.log(this.svcdata);
});
Edit
this.searchService.searcheBay().subscribe((data: any) => {
this.svcdata = data.findItemsByKeywordsResponse[0].searchResult;
console.log(this.svcdata);
});
I ended up using the map projection as shown below. Hope this helps.
serviceOnButtonClick(){
this.searchService.searcheBay().pipe(map((data:any) => data.findItemsByKeywordsResponse[0].searchResult)).subscribe((data) => {
this.svcdata = data;
console.log(this.svcdata);
});
}
Working with angular2,nodejs,expressjs,mongodb.
i want all api to return data and show over html page.
here is my code for .ts file.
enter image description here
all apis tested working fine returns data form mongodb.
but very first api return data and shows over the html page.
in this case countphones api retuns data and other two not .
but when first is commented second starts showing data over the html
page.
the case is like first come only shows.
export class AppComponent {
phone$ = http.get("...").map(r => r.json())
laptop$ = http.get("...").map(r => r.json())
television$ = http.get("...").map(r => r.json())
ngOnInit(){
Observable
.forkJoin(this.phone$, this.laptop$, this.television$)
.subscribe(([phones, laptops, televisions])=>{
this.phones = phones;
this.laptios = laptops;
this.televisions = televisions;
});
}
}
I have a react-virtualized table where column sorting is enabled. My plan is to add a filter icon next to column headers and do a Material-UI popover when someone clicks on it.
So here is what I did:
I enabled headerRenderer
headerRenderer= {this.renderHeader}
My headerRenderer returns a component
renderHeader = (value) => {
// console.log(value)
return <ColumnFilterContainer label= {value.label} />
}
ColumnFilterContainer is as follows.
import React from 'react'
import ContentClear from 'material-ui/svg-icons/content/clear'
import FilterList from 'material-ui/svg-icons/content/filter-list'
const ColumnFilterContainer = (props) => {
const {label} = props
return <span>{label} <a onClick={console.log('TEST')} ><FilterList /></a></span>
}
export default ColumnFilterContainer
But when I click on the svg-icon it consoles out the 'TEST' but also resorts the table. How can I achieve what I would like to do. Is it doable?
Thanks
Table listens for clicks on sortable headers. (That is, columns that aren't tagged as disableSort that belong to a Table with a sort callback.)
In your case, if you have something within your sortable header that shouldn't trigger sorting- just prevent the event from bubbling and you should be fine. :)
Alternately you could also just ignore the next call to your sort function but I think that would be a hackish solution.