test(editor): Clean up duplicate DOM setup code in frontend tests (no-changelog) (#19382)

This commit is contained in:
Csaba Tuncsik
2025-09-11 12:28:20 +02:00
committed by GitHub
parent 1e00a7c788
commit ff1f9ff69e
32 changed files with 72 additions and 202 deletions

View File

@@ -2,9 +2,9 @@ import { createComponentRenderer } from '@/__tests__/render';
import { createTestingPinia } from '@pinia/testing';
import { API_KEY_CREATE_OR_EDIT_MODAL_KEY } from '@/constants';
import { STORES } from '@n8n/stores';
import { cleanupAppModals, createAppModals, mockedStore, retry } from '@/__tests__/utils';
import { mockedStore, retry } from '@/__tests__/utils';
import ApiKeyEditModal from './ApiKeyCreateOrEditModal.vue';
import { fireEvent } from '@testing-library/vue';
import userEvent from '@testing-library/user-event';
import { useApiKeysStore } from '@/stores/apiKeys.store';
import { DateTime } from 'luxon';
@@ -40,13 +40,11 @@ const settingsStore = mockedStore(useSettingsStore);
describe('ApiKeyCreateOrEditModal', () => {
beforeEach(() => {
createAppModals();
apiKeysStore.availableScopes = ['user:create', 'user:list'];
settingsStore.settings.enterprise = createMockEnterpriseSettings({ apiKeyScopes: false });
});
afterEach(() => {
cleanupAppModals();
vi.clearAllMocks();
});
@@ -68,9 +66,9 @@ describe('ApiKeyCreateOrEditModal', () => {
expect(inputLabel).toBeInTheDocument();
expect(saveButton).toBeInTheDocument();
await fireEvent.update(inputLabel, 'new label');
await userEvent.type(inputLabel, 'new label');
await fireEvent.click(saveButton);
await userEvent.click(saveButton);
expect(getByText('API Key Created')).toBeInTheDocument();
@@ -114,23 +112,23 @@ describe('ApiKeyCreateOrEditModal', () => {
expect(saveButton).toBeInTheDocument();
expect(expirationSelect).toBeInTheDocument();
await fireEvent.update(inputLabel, 'new label');
await userEvent.type(inputLabel, 'new label');
await fireEvent.click(expirationSelect);
await userEvent.click(expirationSelect);
const customOption = getByText('Custom');
expect(customOption).toBeInTheDocument();
await fireEvent.click(customOption);
await userEvent.click(customOption);
const customExpirationInput = getByPlaceholderText('yyyy-mm-dd');
expect(customExpirationInput).toBeInTheDocument();
await fireEvent.input(customExpirationInput, '2029-12-31');
await userEvent.type(customExpirationInput, '2029-12-31');
await fireEvent.click(saveButton);
await userEvent.click(saveButton);
expect(getByText('***456')).toBeInTheDocument();
@@ -167,17 +165,17 @@ describe('ApiKeyCreateOrEditModal', () => {
expect(saveButton).toBeInTheDocument();
expect(expirationSelect).toBeInTheDocument();
await fireEvent.update(inputLabel, 'new label');
await userEvent.type(inputLabel, 'new label');
await fireEvent.click(expirationSelect);
await userEvent.click(expirationSelect);
const noExpirationOption = getByText('No Expiration');
expect(noExpirationOption).toBeInTheDocument();
await fireEvent.click(noExpirationOption);
await userEvent.click(noExpirationOption);
await fireEvent.click(saveButton);
await userEvent.click(saveButton);
expect(getByText('API Key Created')).toBeInTheDocument();
@@ -215,22 +213,22 @@ describe('ApiKeyCreateOrEditModal', () => {
expect(scopesSelect).toBeInTheDocument();
expect(saveButton).toBeInTheDocument();
await fireEvent.update(inputLabel, 'new label');
await userEvent.type(inputLabel, 'new label');
await fireEvent.click(scopesSelect);
await userEvent.click(scopesSelect);
const userCreateScope = getByText('user:create');
expect(userCreateScope).toBeInTheDocument();
await fireEvent.click(userCreateScope);
await userEvent.click(userCreateScope);
const [userCreateTag, userCreateSelectOption] = getAllByText('user:create');
expect(userCreateTag).toBeInTheDocument();
expect(userCreateSelectOption).toBeInTheDocument();
await fireEvent.click(saveButton);
await userEvent.click(saveButton);
expect(getByText('API Key Created')).toBeInTheDocument();
@@ -250,7 +248,7 @@ describe('ApiKeyCreateOrEditModal', () => {
apiKeysStore.createApiKey.mockResolvedValue(testApiKey);
const { getByText, getByPlaceholderText, getByTestId, getAllByText } = renderComponent({
const { getByText, getByPlaceholderText, getByTestId, getByRole } = renderComponent({
props: {
mode: 'new',
},
@@ -271,23 +269,23 @@ describe('ApiKeyCreateOrEditModal', () => {
expect(scopesSelect).toBeInTheDocument();
expect(saveButton).toBeInTheDocument();
await fireEvent.update(inputLabel, 'new label');
await userEvent.type(inputLabel, 'new label');
await fireEvent.click(scopesSelect);
await userEvent.click(scopesSelect);
const userCreateScope = getAllByText('user:create');
// Use separate semantic queries instead of destructuring
// The text is nested inside .el-select__tags-text which is inside .el-tag
const userCreateTag = getByText('user:create', { selector: '.el-select__tags-text' });
const userCreateSelectOption = getByRole('option', { name: 'user:create' });
const [userCreateTag, userCreateSelectOption] = userCreateScope;
expect(userCreateTag).toBeInTheDocument();
expect(userCreateSelectOption).toBeInTheDocument();
expect(userCreateSelectOption).toBeInTheDocument();
expect(userCreateSelectOption).toHaveClass('is-disabled');
expect(userCreateSelectOption.parentNode).toHaveClass('is-disabled');
await userEvent.click(userCreateSelectOption);
await fireEvent.click(userCreateSelectOption);
await fireEvent.click(saveButton);
await userEvent.click(saveButton);
expect(getByText('API Key Created')).toBeInTheDocument();
@@ -328,13 +326,14 @@ describe('ApiKeyCreateOrEditModal', () => {
expect((labelInput as unknown as HTMLInputElement).value).toBe('new api key');
await fireEvent.update(labelInput, 'updated api key');
await userEvent.clear(labelInput);
await userEvent.type(labelInput, 'updated api key');
const saveButton = getByText('Save');
expect(saveButton).toBeInTheDocument();
await fireEvent.click(saveButton);
await userEvent.click(saveButton);
expect(apiKeysStore.updateApiKey).toHaveBeenCalledWith('123', {
label: 'updated api key',