test: verify read operation for list keys in browsers module

* extend the API to support adding list keys
* extend browser page locators to provide helper for checking the state of the list keys details drawer
* added e2e test to verify whether the information related to a list key is proplery displayed in the details drawer

re #RI-6570

Author: valkirilov

tests/playwright/helpers/api/api-keys.ts

@@ -62,6 +62,31 @@ export class APIKeyRequests {
             throw new Error('The creation of new Hash key request failed')
     }
 
+    async addListKeyApi(
+        keyParameters: { keyName: string; elements: string[]; expire?: number },
+        databaseParameters: AddNewDatabaseParameters,
+    ): Promise<void> {
+        const databaseId = await this.databaseAPIRequests.getDatabaseIdByName(
+            databaseParameters.databaseName,
+        )
+        const requestBody = {
+            keyName: Buffer.from(keyParameters.keyName, 'utf-8'),
+            elements: keyParameters.elements.map((element) =>
+                Buffer.from(element, 'utf-8'),
+            ),
+            expire: keyParameters?.expire,
+        }
+
+        const response = await this.apiClient.post(
+            `/databases/${databaseId}/list?encoding=buffer`,
+            requestBody,
+        )
+
+        if (response.status !== 201) {
+            throw new Error('The creation of new List key request failed')
+        }
+    }
+
     async addStreamKeyApi(
         keyParameters: StreamKeyParameters,
         databaseParameters: AddNewDatabaseParameters,

tests/playwright/pageObjects/browser-page.ts

@@ -529,7 +529,9 @@ export class BrowserPage extends BasePage {
         this.setMembersList = page.getByTestId('set-member-value-')
         this.zsetMembersList = page.getByTestId('zset-member-value-')
         this.zsetScoresList = page.getByTestId('zset_content-value-')
-        this.listElementsList = page.getByTestId('list_content-value-')
+        this.listElementsList = page.locator(
+            '[data-testid^="list_content-value-"]',
+        )
         this.jsonKeyValue = page.getByTestId('json-data')
         this.jsonError = page.getByTestId('edit-json-error')
         this.tooltip = page.locator('[role="tooltip"]')
@@ -1380,4 +1382,19 @@ export class BrowserPage extends BasePage {
     async getKeyTTL(): Promise<string | null> {
         return this.keyDetailsTTL.textContent()
     }
+
+    async getAllListElements(): Promise<string[]> {
+        // Get all list elements' text content
+        const elements = await this.listElementsList.all()
+        const values: string[] = []
+
+        for (let i = 0; i < elements.length; i += 1) {
+            const text = await elements[i].textContent()
+            if (text && text.trim()) {
+                values.push(text.trim())
+            }
+        }
+
+        return values
+    }
 }

tests/playwright/tests/browser/keys-read.spec.ts

@@ -157,4 +157,70 @@ test.describe('Browser - Read Key Details', () => {
         const isDetailsClosed = await browserPage.isKeyDetailsClosed()
         expect(isDetailsClosed).toBe(true)
     })
+
+    test('should open key details when clicking on list key', async ({
+        api: { keyService },
+    }) => {
+        const listElements = [
+            faker.lorem.word(),
+            faker.lorem.word(),
+            faker.lorem.word(),
+        ]
+        const keyTTL = 3600 // 1 hour
+
+        // Create a list key with multiple elements using API
+        await keyService.addListKeyApi(
+            { keyName, elements: listElements, expire: keyTTL },
+            ossStandaloneConfig,
+        )
+
+        // Search for the key to ensure it's visible
+        await browserPage.searchByKeyName(keyName)
+
+        // Click on the key to open details
+        await browserPage.openKeyDetailsByKeyName(keyName)
+
+        // Verify key details panel is open
+        const isDetailsOpen = await browserPage.isKeyDetailsOpen(keyName)
+        expect(isDetailsOpen).toBe(true)
+
+        // Verify list elements are displayed
+        const displayedElements = await browserPage.getAllListElements()
+        expect(displayedElements).toHaveLength(listElements.length)
+
+        // Verify all expected elements are present (order might be different)
+        listElements.forEach((expectedElement) => {
+            expect(displayedElements).toContain(expectedElement)
+        })
+
+        // Verify the key length shows correct number of elements
+        const keyLength = await browserPage.getKeyLength()
+        expect(keyLength).toBe(listElements.length.toString())
+
+        // Verify the key size (bytes) is displayed correctly
+        const keySizeText = await browserPage.keySizeDetails.textContent()
+        expect(keySizeText).toBeTruthy()
+
+        // Verify the TTL value is displayed correctly
+        const displayedTTL = await browserPage.getKeyTTL()
+        expect(displayedTTL).toContain('TTL:')
+
+        // Extract the TTL value from the text and verify it's within expected range
+        const ttlMatch = displayedTTL?.match(/TTL:\s*(\d+|No limit)/)
+        expect(ttlMatch).toBeTruthy()
+
+        if (ttlMatch && ttlMatch[1] !== 'No limit') {
+            const actualTTL = parseInt(ttlMatch[1], 10)
+            // TTL should be close to what we set (allowing for some time passage during test execution)
+            expect(actualTTL).toBeGreaterThan(keyTTL - 60)
+            expect(actualTTL).toBeLessThanOrEqual(keyTTL)
+        }
+
+        // Close the details
+        await browserPage.closeKeyDetails()
+
+        // Verify details are closed
+        const isDetailsClosed = await browserPage.isKeyDetailsClosed()
+        expect(isDetailsClosed).toBe(true)
+    })
 })