|
| 1 | +/* |
| 2 | +Copyright 2025 The Karmada Authors. |
| 3 | +Licensed under the Apache License, Version 2.0 (the "License"); |
| 4 | +you may not use this file except in compliance with the License. |
| 5 | +You may obtain a copy of the License at |
| 6 | + http://www.apache.org/licenses/LICENSE-2.0 |
| 7 | +Unless required by applicable law or agreed to in writing, software |
| 8 | +distributed under the License is distributed on an "AS IS" BASIS, |
| 9 | +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| 10 | +See the License for the specific language governing permissions and |
| 11 | +limitations under the License. |
| 12 | +*/ |
| 13 | + |
| 14 | +import { test, expect } from '@playwright/test'; |
| 15 | +import { setupDashboardAuthentication, generateTestPropagationPolicyYaml, deleteK8sPropagationPolicy, getPropagationPolicyNameFromYaml } from './test-utils'; |
| 16 | + |
| 17 | +test.beforeEach(async ({ page }) => { |
| 18 | + await setupDashboardAuthentication(page); |
| 19 | +}); |
| 20 | + |
| 21 | +test('should create a new propagationpolicy', async ({ page }) => { |
| 22 | + // Open Policies menu |
| 23 | + await page.click('text=Policies'); |
| 24 | + |
| 25 | + // Click Propagation Policy menu item |
| 26 | + const propagationPolicyMenuItem = page.locator('text=Propagation Policy'); |
| 27 | + await propagationPolicyMenuItem.waitFor({ state: 'visible', timeout: 30000 }); |
| 28 | + await propagationPolicyMenuItem.click(); |
| 29 | + |
| 30 | + // Click Namespace level tab |
| 31 | + const namespaceLevelTab = page.locator('role=option[name="Namespace level"]'); |
| 32 | + await namespaceLevelTab.waitFor({ state: 'visible', timeout: 30000 }); |
| 33 | + await namespaceLevelTab.click(); |
| 34 | + |
| 35 | + // Verify selected state |
| 36 | + await expect(namespaceLevelTab).toHaveAttribute('aria-selected', 'true'); |
| 37 | + await expect(page.locator('table')).toBeVisible({ timeout: 30000 }); |
| 38 | + await page.click('button:has-text("Add")'); |
| 39 | + await page.waitForSelector('[role="dialog"]', { timeout: 10000 }); |
| 40 | + |
| 41 | + // Listen for API calls |
| 42 | + const apiRequestPromise = page.waitForResponse(response => { |
| 43 | + return response.url().includes('/api/v1/propagationpolicy') && response.status() === 200; |
| 44 | + }, { timeout: 15000 }); |
| 45 | + |
| 46 | + const testPropagationPolicyYaml = generateTestPropagationPolicyYaml(); |
| 47 | + |
| 48 | + // Set Monaco editor DOM content |
| 49 | + await page.evaluate((yaml) => { |
| 50 | + const textarea = document.querySelector('.monaco-editor textarea') as HTMLTextAreaElement; |
| 51 | + if (textarea) { |
| 52 | + textarea.value = yaml; |
| 53 | + textarea.focus(); |
| 54 | + } |
| 55 | + }, testPropagationPolicyYaml); |
| 56 | + |
| 57 | + /* eslint-disable */ |
| 58 | + // Call React onChange callback to update component state |
| 59 | + await page.evaluate((yaml) => { |
| 60 | + |
| 61 | + const findReactFiber = (element: any) => { |
| 62 | + const keys = Object.keys(element); |
| 63 | + return keys.find(key => key.startsWith('__reactFiber') || key.startsWith('__reactInternalInstance')); |
| 64 | + }; |
| 65 | + |
| 66 | + const monacoContainer = document.querySelector('.monaco-editor'); |
| 67 | + if (monacoContainer) { |
| 68 | + const fiberKey = findReactFiber(monacoContainer); |
| 69 | + if (fiberKey) { |
| 70 | + let fiber = (monacoContainer as any)[fiberKey]; |
| 71 | + |
| 72 | + while (fiber) { |
| 73 | + if (fiber.memoizedProps && fiber.memoizedProps.onChange) { |
| 74 | + fiber.memoizedProps.onChange(yaml); |
| 75 | + return; |
| 76 | + } |
| 77 | + fiber = fiber.return; |
| 78 | + } |
| 79 | + } |
| 80 | + } |
| 81 | + |
| 82 | + const dialog = document.querySelector('[role="dialog"]'); |
| 83 | + if (dialog) { |
| 84 | + const fiberKey = findReactFiber(dialog); |
| 85 | + if (fiberKey) { |
| 86 | + let fiber = (dialog as any)[fiberKey]; |
| 87 | + |
| 88 | + const traverse = (node: any, depth = 0) => { |
| 89 | + if (!node || depth > 20) return false; |
| 90 | + |
| 91 | + if (node.memoizedProps && node.memoizedProps.onChange) { |
| 92 | + node.memoizedProps.onChange(yaml); |
| 93 | + return true; |
| 94 | + } |
| 95 | + |
| 96 | + if (node.child && traverse(node.child, depth + 1)) return true; |
| 97 | + if (node.sibling && traverse(node.sibling, depth + 1)) return true; |
| 98 | + |
| 99 | + return false; |
| 100 | + }; |
| 101 | + |
| 102 | + traverse(fiber); |
| 103 | + } |
| 104 | + } |
| 105 | + }, testPropagationPolicyYaml); |
| 106 | + /* eslint-enable */ |
| 107 | + |
| 108 | + // Wait for submit button to become enabled |
| 109 | + await expect(page.locator('[role="dialog"] button:has-text("Submit")')).toBeEnabled(); |
| 110 | + await page.click('[role="dialog"] button:has-text("Submit")'); |
| 111 | + |
| 112 | + // Wait for API call to succeed |
| 113 | + await apiRequestPromise; |
| 114 | + |
| 115 | + // Wait for dialog to close |
| 116 | + await page.waitForSelector('[role="dialog"]', { state: 'detached', timeout: 5000 }).catch(() => { |
| 117 | + // Dialog may already be closed |
| 118 | + }); |
| 119 | + |
| 120 | + // Verify new propagationpolicy appears in list |
| 121 | + const propagationPolicyName = getPropagationPolicyNameFromYaml(testPropagationPolicyYaml); |
| 122 | + |
| 123 | + // Assert propagationpolicy name exists |
| 124 | + expect(propagationPolicyName).toBeTruthy(); |
| 125 | + expect(propagationPolicyName).toBeDefined(); |
| 126 | + |
| 127 | + try { |
| 128 | + await expect(page.locator('table').locator(`text=${propagationPolicyName}`)).toBeVisible({ |
| 129 | + timeout: 15000 |
| 130 | + }); |
| 131 | + } catch { |
| 132 | + // If not shown immediately in list, may be due to cache or refresh delay |
| 133 | + // But API success indicates propagationpolicy was created |
| 134 | + } |
| 135 | + |
| 136 | + // Cleanup: Delete the created propagationpolicy |
| 137 | + try { |
| 138 | + await deleteK8sPropagationPolicy(propagationPolicyName, 'default'); |
| 139 | + } catch (error) { |
| 140 | + console.warn(`Failed to cleanup propagationpolicy ${propagationPolicyName}:`, error); |
| 141 | + } |
| 142 | + |
| 143 | + // Debug |
| 144 | + if(process.env.DEBUG === 'true'){ |
| 145 | + await page.screenshot({ path: 'debug-propagationpolicy-create.png', fullPage: true }); |
| 146 | + } |
| 147 | + |
| 148 | +}); |
0 commit comments