diff --git a/change/react-native-windows-75516c9de09c70517cc57dc3854efed7.json b/change/react-native-windows-75516c9de09c70517cc57dc3854efed7.json new file mode 100644 index 00000000000..29d64830223 --- /dev/null +++ b/change/react-native-windows-75516c9de09c70517cc57dc3854efed7.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "Add functional tests for FlatList component", + "packageName": "react-native-windows", + "email": "198982749+Copilot@users.noreply.github.com", + "dependentChangeType": "patch" +} \ No newline at end of file diff --git a/packages/e2e-test-app-fabric/test/FlatListComponentTest.test.ts b/packages/e2e-test-app-fabric/test/FlatListComponentTest.test.ts index 727e622c0fd..8cb290af278 100644 --- a/packages/e2e-test-app-fabric/test/FlatListComponentTest.test.ts +++ b/packages/e2e-test-app-fabric/test/FlatListComponentTest.test.ts @@ -126,4 +126,65 @@ describe('FlatList Tests', () => { const dump = await dumpVisualTree('flatlist-nested'); expect(dump).toMatchSnapshot(); }); + + test('FlatList styles should render correctly with multicolumn layout', async () => { + await searchBox('Multi'); + await goToFlatListExample('Multi Column'); + + const component = await app.findElementByTestID('flat_list'); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('flat_list'); + expect(dump).toMatchSnapshot(); + }); + + test('FlatList contents should update with search filtering', async () => { + await searchBox('Basic'); + await goToFlatListExample('Basic'); + + // Test filtering content with specific text + await searchBoxBasic('5'); + + const component = await app.findElementByTestID('flatlist-basic'); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('flatlist-basic'); + expect(dump).toMatchSnapshot(); + }); + + test('FlatList scrolling should work with inverted list', async () => { + await searchBox('Inverted'); + await goToFlatListExample('Inverted'); + + const component = await app.findElementByTestID('flat_list'); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('flat_list'); + expect(dump).toMatchSnapshot(); + }); + + test('FlatList footer should update correctly', async () => { + await searchBox('Basic'); + await goToFlatListExample('Basic'); + + // The basic example includes a footer by default, verify it's rendered + const component = await app.findElementByTestID('flatlist-basic'); + await component.waitForDisplayed({timeout: 5000}); + + // Look for footer content in the visual tree + const dump = await dumpVisualTree('flatlist-basic'); + expect(dump).toMatchSnapshot(); + expect(JSON.stringify(dump)).toContain('LIST FOOTER'); + }); + + test('FlatList header should update correctly', async () => { + await searchBox('Basic'); + await goToFlatListExample('Basic'); + + // The basic example includes a header by default, verify it's rendered + const component = await app.findElementByTestID('flatlist-basic'); + await component.waitForDisplayed({timeout: 5000}); + + // Look for header content in the visual tree + const dump = await dumpVisualTree('flatlist-basic'); + expect(dump).toMatchSnapshot(); + expect(JSON.stringify(dump)).toContain('LIST HEADER'); + }); });