Testing the combobox

[gabrielpenhazup]

Hi, I'm trying to do the combobox component tests. But I can't test the visibility of the list and list items. I used fake timer and act. Does anyone have any suggestions?

[reidbarber]

Take a look at the setup in our ComboBox tests:

react-spectrum/packages/@react-spectrum/combobox/test/ComboBox.test.js

Lines 245 to 269 in 8fa814d

	describe('ComboBox', function () {
	beforeAll(function () {
	jest.spyOn(window.HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(() => 1000);
	jest.spyOn(window.HTMLElement.prototype, 'clientHeight', 'get').mockImplementation(() => 1000);
	window.HTMLElement.prototype.scrollIntoView = jest.fn();
	jest.spyOn(window.screen, 'width', 'get').mockImplementation(() => 1024);
	jest.useFakeTimers();
	});
	beforeEach(() => {
	load = jest
	.fn()
	.mockImplementationOnce(getFilterItems)
	.mockImplementationOnce(mockSecondCall)
	.mockImplementationOnce(mockSecondCall);
	});
	afterEach(() => {
	jest.clearAllMocks();
	act(() => jest.runAllTimers());
	});
	afterAll(function () {
	jest.restoreAllMocks();
	});

Particularly mocking screen height/width.

Also, this is related to #3703

[gabrielpenhazup]

I did some tests, and found the problem. When I am checking the state of the list the useAsyncList is still in loading state. I'm trying to mock him, without success yet.
I tested the combobox with a 'defined' list and it worked

[snowystinger]

if you're dealing with promises in tests and are using fakeTimers, you need to allow for the promise queue to be processed, this can be done in two ways

await act(async () => *advance timers*);
// or
act(() => Promise.resolve());

[gabrielpenhazup]

Thanks for the tip! I opted for the first option and it worked, I believe I can continue with the tests. Thank you to all participants of this help!