diff --git a/e2e/pages/preferences/wsl.ts b/e2e/pages/preferences/wsl.ts index a3fbeefee98..839f381ad6b 100644 --- a/e2e/pages/preferences/wsl.ts +++ b/e2e/pages/preferences/wsl.ts @@ -9,6 +9,9 @@ export class WslNav { readonly tabIntegrations: Locator; readonly tabNetwork: Locator; readonly tabProxy: Locator; + readonly alpha: Locator; + readonly beta: Locator; + readonly gamma: Locator; constructor(page: Page) { this.page = page; @@ -19,5 +22,8 @@ export class WslNav { this.tabProxy = page.locator('.tab >> text=Proxy'); this.wslIntegrations = page.locator('[data-test="wslIntegrations"]'); this.addressTitle = page.locator('[data-test="addressTitle"]'); + this.alpha = page.locator('[data-test="item-alpha"] input[type="checkbox"]'); + this.beta = page.locator('[data-test="item-beta"] input[type="checkbox"]'); + this.gamma = page.locator('[data-test="item-gamma"] input[type="checkbox"]'); } } diff --git a/e2e/wsl-integrations.e2e.spec.ts b/e2e/wsl-integrations.e2e.spec.ts index 566a60746ef..1607cd8425c 100644 --- a/e2e/wsl-integrations.e2e.spec.ts +++ b/e2e/wsl-integrations.e2e.spec.ts @@ -210,83 +210,94 @@ test.describe('WSL Integrations', () => { expect(wslIntegrationList.getByText('alpha')).not.toBeNull(); expect(wslIntegrationList.getByText('beta')).not.toBeNull(); expect(wslIntegrationList.getByText('gamma')).not.toBeNull(); - }); - /* - test('should show checkbox states', (async() => { - const integrations = wslPage.wslIntegrations; - const alpha = integrations.find(item => item.name === 'alpha'); - const beta = wslPage.getIntegration('beta'); - const gamma = wslPage.getIntegration('gamma'); - - await expect(alpha.locator).toHaveCount(1); - await expect(alpha.checkbox).not.toBeChecked(); - await expect(alpha.name).toHaveText('alpha'); - await expect(alpha.error).not.toBeVisible(); - - await expect(beta.locator).toHaveCount(1); - await expect(beta.checkbox).toBeChecked(); - await expect(beta.name).toHaveText('beta'); - await expect(beta.error).not.toBeVisible(); - - await expect(gamma.locator).toHaveCount(1); - await expect(gamma.checkbox).not.toBeChecked(); - await expect(gamma.name).toHaveText('gamma'); - await expect(gamma.error).toHaveText('some error'); + expect(await wslPage.alpha.isChecked()).toBeFalsy(); + expect(await wslPage.beta.isChecked()).toBeTruthy(); + expect(await wslPage.gamma.isChecked()).toBeFalsy(); + + const craftyErrorMessage = 'Error: some error'; + let parent = wslPage.page.locator('[data-test="item-alpha-parent"]'); + + await expect(parent.filter({ hasText: craftyErrorMessage })).toHaveCount(0); + parent = wslPage.page.locator('[data-test="item-beta-parent"]'); + await expect(parent.filter({ hasText: craftyErrorMessage })).toHaveCount(0); + parent = wslPage.page.locator('[data-test="item-gamma-parent"]'); + await expect(parent.filter({ hasText: craftyErrorMessage })).toHaveCount(1); }); test('should allow enabling integration', async() => { + // This is how we do a reload... const { wsl: wslPage } = new PreferencesPage(preferencesWindow); - await wslPage.reload(); - const integrations = wslPage.integrations; - await expect(integrations).toHaveCount(1, { timeout: 10_000 }); + await wslPage.tabIntegrations.click(); + await expect(wslPage.wslIntegrations).toBeVisible(); - const alpha = wslPage.getIntegration('alpha'); + await expect(wslPage.wslIntegrations).toHaveCount(1, { timeout: 10_000 }); + let alpha = wslPage.alpha; - await expect(alpha.checkbox).not.toBeChecked(); - await alpha.assertEnabled(); - await alpha.click(); - await alpha.assertDisabled(); + expect(await alpha.isChecked()).toBeFalsy(); + expect(await alpha.isEnabled()).toBeTruthy(); + // Don't know why force-true is necessary, playwright times out without it. + await alpha.click({ force: true }); await writeConfig({ alpha: true }); - await alpha.assertEnabled(); - await expect(alpha.checkbox).toBeChecked(); + // Now 'relocate' alpha + alpha = wslPage.alpha; + expect(await alpha.isChecked()).toBeTruthy(); + expect(await alpha.isEnabled()).toBeTruthy(); }); test('should allow disabling integration', async() => { - await wslPage.reload(); - const integrations = wslPage.integrations; + // This is how we do a reload... + const { wsl: wslPage } = new PreferencesPage(preferencesWindow); - await expect(integrations).toHaveCount(1, { timeout: 10_000 }); + await wslPage.tabIntegrations.click(); + await expect(wslPage.wslIntegrations).toBeVisible(); + await expect(wslPage.wslIntegrations).toHaveCount(1, { timeout: 10_000 }); - const beta = wslPage.getIntegration('beta'); + let beta = wslPage.beta; - await expect(beta.checkbox).toBeChecked(); - await beta.assertEnabled(); - await beta.click(); - await beta.assertDisabled(); + expect(await beta.isChecked()).toBeTruthy(); + expect(await beta.isEnabled()).toBeTruthy(); + await beta.click({ force: true }); await writeConfig({ beta: false }); - await beta.assertEnabled(); - await expect(beta.checkbox).not.toBeChecked(); + // Now 'relocate' beta + beta = wslPage.beta; + expect(await beta.isChecked()).toBeFalsy(); + expect(await beta.isEnabled()).toBeTruthy(); }); test('should update invalid reason', async() => { - await wslPage.reload(); - const integrations = wslPage.integrations; + const { wsl: wslPage } = new PreferencesPage(preferencesWindow); + const newErrorMessage = 'some other error'; - await expect(integrations).toHaveCount(1, { timeout: 10_000 }); + await wslPage.tabIntegrations.click(); + await expect(wslPage.wslIntegrations).toBeVisible(); + await expect(wslPage.wslIntegrations).toHaveCount(1, { timeout: 10_000 }); - const gamma = wslPage.getIntegration('gamma'); + const gamma = wslPage.gamma; + + expect(await gamma.isChecked()).toBeFalsy(); + await writeConfig({ gamma: newErrorMessage }); + }); - await gamma.assertDisabled(); - await expect(gamma.error).toHaveText('some error'); - await writeConfig({ gamma: 'some other error' }); + test('should see new invalid reason', async() => { + const { wsl: wslPage } = new PreferencesPage(preferencesWindow); + const newErrorMessage = 'some other error'; - await page.reload(); - const newGamma = (await navPage.navigateTo('WSLIntegrations')).getIntegration('gamma'); + await wslPage.tabIntegrations.click(); + await expect(wslPage.wslIntegrations).toBeVisible(); + await expect(wslPage.wslIntegrations).toHaveCount(1, { timeout: 10_000 }); - await expect(newGamma.error).toHaveText('some other error'); - await newGamma.assertDisabled(); + // The `isDisabled` locator simply doesn't work -- possibly because the actual DOM is + // div.checkbox-outer-container data-test=item-gamma + // label.checkbox-container disabled + // input type=checkbox value=true + // span.checkbox-custom role=checkbox + // + // and playwright doesn't give a way to get from `data-test=item-gamma` or the checkbox input elt to that label elt + // expect(await newGamma.isDisabled()).toBeTruthy(); + const parent = wslPage.page.locator('[data-test="item-gamma-parent"]'); + + await expect(parent.filter({ hasText: newErrorMessage })).toHaveCount(0); }); - */ }); diff --git a/pkg/rancher-desktop/components/WSLIntegration.vue b/pkg/rancher-desktop/components/WSLIntegration.vue index 5d55c8b05ac..cee157fffdf 100644 --- a/pkg/rancher-desktop/components/WSLIntegration.vue +++ b/pkg/rancher-desktop/components/WSLIntegration.vue @@ -4,13 +4,14 @@