Enable status select in frontend

trento-project · May 6, 2024 · a05bc8d · a05bc8d
1 parent ead6bce
commit a05bc8d
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 4 deletions.
diff --git a/assets/js/pages/Users/UserForm.jsx b/assets/js/pages/Users/UserForm.jsx
@@ -213,9 +213,8 @@ function UserForm({
             <Select
               optionsName="status"
               options={['Enabled', 'Disabled']}
-              value={status}
-              disabled
-              onChange={({ target: { value } }) => {
+              value={statusState}
+              onChange={(value) => {
                 setStatus(value);
               }}
             />

diff --git a/assets/js/pages/Users/UserForm.stories.jsx b/assets/js/pages/Users/UserForm.stories.jsx
@@ -41,6 +41,15 @@ export default {
         type: 'text',
       },
     },
+    status: {
+      control: { type: 'radio' },
+      options: ['Enabled', 'Disabled'],
+      description: 'Status',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'Enabled' },
+      },
+    },
     createdAt: {
       description: 'User creation timestamp',
       control: {

diff --git a/assets/js/pages/Users/UserForm.test.jsx b/assets/js/pages/Users/UserForm.test.jsx
@@ -133,7 +133,7 @@ describe('UserForm', () => {
     expect(screen.getAllByText('Required field').length).toBe(3);
   });
 
-  it('saves the user', async () => {
+  it('should save the user', async () => {
     const user = userEvent.setup();
     const { fullname, email, username } = userFactory.build();
     const password = faker.internet.password();
@@ -158,4 +158,45 @@ describe('UserForm', () => {
       enabled: true,
     });
   });
+
+  it.each([
+    { option: 'Enabled', result: true },
+    { option: 'Disabled', result: false },
+  ])('should set the user status correctly', async ({ option, result }) => {
+    const user = userEvent.setup();
+    const mockOnSave = jest.fn();
+
+    const {
+      fullname,
+      email,
+      username,
+      created_at: createdAt,
+      updated_at: updatedAt,
+    } = userFactory.build();
+
+    await act(async () => {
+      render(
+        <UserForm
+          fullName={fullname}
+          emailAddress={email}
+          username={username}
+          createdAt={createdAt}
+          updatedAt={updatedAt}
+          editing
+          onSave={mockOnSave}
+        />
+      );
+    });
+
+    await user.click(screen.getByText('Enabled'));
+    await user.click(screen.getAllByText(option)[0]);
+
+    await user.click(screen.getByRole('button', { name: 'Create' }));
+
+    expect(mockOnSave).toHaveBeenNthCalledWith(1, {
+      fullname,
+      email,
+      enabled: result,
+    });
+  });
 });