mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-17 01:56:46 +00:00
test(editor): Clean up duplicate DOM setup code in frontend tests (no-changelog) (#19382)
This commit is contained in:
@@ -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',
|
||||
|
||||
Reference in New Issue
Block a user