mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(editor): Fix ResourceMapper unit tests (#6758)

Browse source 
* ✔️ Fix matching columns test

* ✔️ Fix multiple matching columns test

* ✔️ Removing `skip` from the last test
This commit is contained in:
Milorad FIlipović 2023-07-27 12:43:18 +02:00 committed by GitHub
parent efdab3e14d
commit 6a6fbb6e6c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 29 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
packages/editor-ui/src/components/ResourceMapper/MatchingColumnsSelect.vue
View file

@ -113,7 +113,12 @@ function onSelectionChange(value: string | string[]) {
}
function emitValueChanged() {
emit('matchingColumnsChanged', Array.isArray(state.selected) ? state.selected : [state.selected]);
if (state.selected) {
emit(
'matchingColumnsChanged',
Array.isArray(state.selected) ? state.selected : [state.selected],
);
}
}
defineExpose({
@ -140,7 +145,12 @@ defineExpose({
:teleported="teleported"
@update:modelValue="onSelectionChange"
>
<n8n-option v-for="field in availableMatchingFields" :key="field.id" :value="field.id">
<n8n-option
v-for="field in availableMatchingFields"
:key="field.id"
:value="field.id"
:data-test-id="`matching-column-option-${field.id}`"
>
{{ field.displayName }}
</n8n-option>
</n8n-select>

41
packages/editor-ui/src/components/__tests__/ResourceMapper.test.ts
View file

@ -1,4 +1,3 @@
import { within } from '@testing-library/vue';
import {
DEFAULT_SETUP,
MAPPING_COLUMNS_RESPONSE,
@ -108,7 +107,7 @@ describe('ResourceMapper.vue', () => {
expect(queryByTestId('mapping-mode-select')).not.toBeInTheDocument();
});
it.skip('renders field on top of the list when they are selected for matching', async () => {
it('renders field on top of the list when they are selected for matching', async () => {
const { container, getByTestId } = renderComponent(
{
props: {
@ -129,16 +128,16 @@ describe('ResourceMapper.vue', () => {
expect(getByTestId('resource-mapper-container')).toBeInTheDocument();
// Id should be the first field in the list
expect(container.querySelector('.parameter-item')).toContainHTML('id (using to match)');
// // Select Last Name as matching column
await userEvent.click(getByTestId('matching-column-select'));
const matchingColumnDropdown = getByTestId('matching-column-select');
await userEvent.click(within(matchingColumnDropdown).getByText('Last Name'));
// // Now, last name should be the first field in the list
expect(container.querySelector('.parameter-item')).toContainHTML('Last Name (using to match)');
// Select Last Name as matching column
await userEvent.click(getByTestId('matching-column-option-Last name'));
// Now, last name should be the first field in the list
expect(container.querySelector('.parameter-item div.title')).toHaveTextContent(
'Last name (using to match)',
);
});
it.skip('renders selected matching columns properly when multiple key matching is enabled', async () => {
const { getByTestId, getByText, queryByText } = renderComponent(
it('renders selected matching columns properly when multiple key matching is enabled', async () => {
const { getByTestId, getAllByText, queryByText } = renderComponent(
{
props: {
parameter: {
@ -156,25 +155,19 @@ describe('ResourceMapper.vue', () => {
);
await waitAllPromises();
expect(getByTestId('resource-mapper-container')).toBeInTheDocument();
const matchingColumnDropdown = getByTestId('matching-column-select');
await userEvent.click(matchingColumnDropdown);
await userEvent.click(within(matchingColumnDropdown).getByText('Username'));
// Both matching columns should be rendered in the dropdown
expect(getByTestId('matching-column-select')).toContainHTML(
'<span class="el-select__tags-text">id</span>',
);
expect(getByTestId('matching-column-select')).toContainHTML(
'<span class="el-select__tags-text">Username</span>',
);
await userEvent.click(getByTestId('matching-column-option-Username'));
// Both matching columns (id and Username) should be rendered in the dropdown
expect(
getByTestId('matching-column-select').querySelector('.el-select > div'),
).toHaveTextContent('idUsername');
// All selected columns should have correct labels
expect(getByText('id (using to match)')).toBeInTheDocument();
expect(getByText('Username (using to match)')).toBeInTheDocument();
expect(getAllByText('id (using to match)')[0]).toBeInTheDocument();
expect(getAllByText('Username (using to match)')[0]).toBeInTheDocument();
expect(queryByText('First Name (using to match)')).not.toBeInTheDocument();
});
it.skip('uses field words defined in node definition', async () => {
it('uses field words defined in node definition', async () => {
const { getByText } = renderComponent(
{
props: {