Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[OF#5086] Fix showing soft requirement warning in hidden components #795

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions src/formio/components/SoftRequiredErrors.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,12 @@ class SoftRequiredErrors extends FormioContentField {
});

const missingFieldLabels = [];
// check which components have an empty value
// check which components are visible and have an empty value
for (const component of softRequiredComponents) {
const isEmpty = component.isEmpty();
if (isEmpty) missingFieldLabels.push(component.label);
const isComponentVisible = component.visible;

if (isEmpty && isComponentVisible) missingFieldLabels.push(component.label);
}

if (!missingFieldLabels.length) return '';
Expand Down
189 changes: 189 additions & 0 deletions src/formio/components/SoftRequiredErrors.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -109,3 +109,192 @@ export const FillField = {
});
},
};

export const WithFieldSetAndNestedComponent = {
name: 'With fieldset and nested component',
args: {
components: [
{
type: 'fieldset',
key: 'fieldset',
label: "Auto's",
groupLabel: 'Auto',
components: [
{
type: 'file',
key: 'file',
label: 'Soft required upload',
openForms: {softRequired: true},
},
],
},

{
type: 'softRequiredErrors',
html: `
<p>Not all required fields are filled out. That can get expensive!</p>

{{ missingFields }}

<p>Are you sure you want to continue?</p>
`,
},
],
},
play: async ({canvasElement}) => {
const canvas = within(canvasElement);

// needed for formio
await sleep(100);

expect(await canvas.findByText("Auto's")).toBeVisible();

await canvas.findByText('Not all required fields are filled out. That can get expensive!');
const list = await canvas.findByRole('list', {name: 'Empty fields'});
const listItem = within(list).getByRole('listitem');
expect(listItem.textContent).toEqual('Soft required upload');
},
};

export const WithFieldSetAndHiddenParent = {
name: 'With fieldset and hidden parent',
args: {
components: [
{
type: 'fieldset',
key: 'fieldset',
label: "Auto's",
groupLabel: 'Auto',
hidden: true,
components: [
{
type: 'file',
key: 'file',
label: 'Soft required upload',
openForms: {softRequired: true},
},
],
},

{
type: 'softRequiredErrors',
html: `
<p>Not all required fields are filled out. That can get expensive!</p>

{{ missingFields }}

<p>Are you sure you want to continue?</p>
`,
},
],
},
play: async ({canvasElement}) => {
const canvas = within(canvasElement);

// needed for formio
await sleep(100);

await expect(canvas.queryByText("Auto's")).not.toBeInTheDocument();
await expect(
canvas.queryByText('Not all required fields are filled out. That can get expensive!')
).not.toBeInTheDocument();
},
};

export const WithEditGridAndNestedComponent = {
name: 'With editgrid and nested component',
args: {
components: [
{
type: 'editgrid',
key: 'editgrid',
label: "Auto's",
groupLabel: 'Auto',
hidden: false,
components: [
{
type: 'file',
key: 'file',
label: 'Soft required upload',
openForms: {softRequired: true},
},
],
},

{
type: 'softRequiredErrors',
html: `
<p>Not all required fields are filled out. That can get expensive!</p>

{{ missingFields }}

<p>Are you sure you want to continue?</p>
`,
},
],
},
play: async ({canvasElement}) => {
const canvas = within(canvasElement);

// needed for formio
await sleep(100);

expect(await canvas.findByText("Auto's")).toBeVisible();

const addButton = await canvas.findByRole('button', {name: 'Add Another'});
await userEvent.click(addButton);

const saveButton = await canvas.findByRole('button', {name: 'Save'});
await userEvent.click(saveButton);

await canvas.findByText('Not all required fields are filled out. That can get expensive!');
const list = await canvas.findByRole('list', {name: 'Empty fields'});
const listItem = within(list).getByRole('listitem');
expect(listItem.textContent).toEqual('Soft required upload');
},
};

export const WithEditGridAndHiddenParent = {
name: 'With editgrid and hidden parent',
args: {
components: [
{
type: 'editgrid',
key: 'editgrid',
label: "Auto's",
groupLabel: 'Auto',
hidden: true,
components: [
{
type: 'file',
key: 'file',
label: 'Soft required upload',
openForms: {softRequired: true},
},
],
},

{
type: 'softRequiredErrors',
html: `
<p>Not all required fields are filled out. That can get expensive!</p>

{{ missingFields }}

<p>Are you sure you want to continue?</p>
`,
},
],
},
play: async ({canvasElement}) => {
const canvas = within(canvasElement);

// needed for formio
await sleep(100);

await expect(canvas.queryByText("Auto's")).not.toBeInTheDocument();
await expect(
canvas.queryByText('Not all required fields are filled out. That can get expensive!')
).not.toBeInTheDocument();
},
};