-
Notifications
You must be signed in to change notification settings - Fork 370
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
upcoming: [DI - 22836] - Added AddNotificationChannel component (#11511)
* upcoming: [22836] - Added Notification Channel Drawer component with relevant types,schemas * upcoming: [DI-22836] - adding changesets * upcoming: [DI-22836] - Renaming the type from ChannelTypes to ChannelType * upcoming: [DI-22836] - Fixing failing test * upcoming :[DI-22836] - Review changes: removing conditional rendering of Drawer component * upcoming: [DI-22836] - Review changes * upcoming: [DI-22836] - Removed the To label as per review comment
- Loading branch information
1 parent
a7ea42f
commit e51862d
Showing
11 changed files
with
504 additions
and
6 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "@linode/api-v4": Added | ||
| --- | ||
|
|
||
| Notification Channel related types to cloudpulse/alerts.ts ([#11511](https://github.com/linode/manager/pull/11511)) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "@linode/manager": Added | ||
| --- | ||
|
|
||
| AddNotificationChannel component with Unit tests with necessary changes for constants, CreateAlertDefinition and other components. ([#11511](https://github.com/linode/manager/pull/11511)) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| import Factory from 'src/factories/factoryProxy'; | ||
|
|
||
| import type { NotificationChannel } from '@linode/api-v4'; | ||
|
|
||
| export const notificationChannelFactory = Factory.Sync.makeFactory<NotificationChannel>( | ||
| { | ||
| alerts: [ | ||
| { | ||
| id: Number(Factory.each((i) => i)), | ||
| label: String(Factory.each((id) => `Alert-${id}`)), | ||
| type: 'alerts-definitions', | ||
| url: 'Sample', | ||
| }, | ||
| ], | ||
| channel_type: 'email', | ||
| content: { | ||
| email: { | ||
| email_addresses: ['[email protected]', '[email protected]'], | ||
| message: 'You have a new Alert', | ||
| subject: 'Sample Alert', | ||
| }, | ||
| }, | ||
| created_at: new Date().toISOString(), | ||
| created_by: 'user1', | ||
| id: Factory.each((i) => i), | ||
| label: Factory.each((id) => `Channel-${id}`), | ||
| status: 'Enabled', | ||
| type: 'custom', | ||
| updated_at: new Date().toISOString(), | ||
| updated_by: 'user1', | ||
| } | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
121 changes: 121 additions & 0 deletions
121
...atures/CloudPulse/Alerts/CreateAlert/NotificationChannels/AddNotificationChannel.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,121 @@ | ||
| import { within } from '@testing-library/react'; | ||
| import userEvent from '@testing-library/user-event'; | ||
| import * as React from 'react'; | ||
|
|
||
| import { notificationChannelFactory } from 'src/factories'; | ||
| import { renderWithTheme } from 'src/utilities/testHelpers'; | ||
|
|
||
| import { channelTypeOptions } from '../../constants'; | ||
| import { AddNotificationChannel } from './AddNotificationChannel'; | ||
|
|
||
| const mockData = [notificationChannelFactory.build()]; | ||
|
|
||
| describe('AddNotificationChannel component', () => { | ||
| const user = userEvent.setup(); | ||
| it('should render the components', () => { | ||
| const { getByLabelText, getByText } = renderWithTheme( | ||
| <AddNotificationChannel | ||
| isNotificationChannelsError={false} | ||
| isNotificationChannelsLoading={false} | ||
| onCancel={vi.fn()} | ||
| onSubmitAddNotification={vi.fn()} | ||
| templateData={mockData} | ||
| /> | ||
| ); | ||
| expect(getByText('Channel Settings')).toBeVisible(); | ||
| expect(getByLabelText('Type')).toBeVisible(); | ||
| expect(getByLabelText('Channel')).toBeVisible(); | ||
| }); | ||
|
|
||
| it('should render the type component with happy path and able to select an option', async () => { | ||
| const { findByRole, getByTestId } = renderWithTheme( | ||
| <AddNotificationChannel | ||
| isNotificationChannelsError={false} | ||
| isNotificationChannelsLoading={false} | ||
| onCancel={vi.fn()} | ||
| onSubmitAddNotification={vi.fn()} | ||
| templateData={mockData} | ||
| /> | ||
| ); | ||
| const channelTypeContainer = getByTestId('channel-type'); | ||
| const channelLabel = channelTypeOptions.find( | ||
| (option) => option.value === mockData[0].channel_type | ||
| )?.label; | ||
| user.click( | ||
| within(channelTypeContainer).getByRole('button', { name: 'Open' }) | ||
| ); | ||
| expect( | ||
| await findByRole('option', { | ||
| name: channelLabel, | ||
| }) | ||
| ).toBeInTheDocument(); | ||
|
|
||
| await userEvent.click(await findByRole('option', { name: channelLabel })); | ||
| expect(within(channelTypeContainer).getByRole('combobox')).toHaveAttribute( | ||
| 'value', | ||
| channelLabel | ||
| ); | ||
| }); | ||
| it('should render the label component with happy path and able to select an option', async () => { | ||
| const { findByRole, getByRole, getByTestId } = renderWithTheme( | ||
| <AddNotificationChannel | ||
| isNotificationChannelsError={false} | ||
| isNotificationChannelsLoading={false} | ||
| onCancel={vi.fn()} | ||
| onSubmitAddNotification={vi.fn()} | ||
| templateData={mockData} | ||
| /> | ||
| ); | ||
| // selecting the type as the label field is disabled with type is null | ||
| const channelTypeContainer = getByTestId('channel-type'); | ||
| await user.click( | ||
| within(channelTypeContainer).getByRole('button', { name: 'Open' }) | ||
| ); | ||
| await user.click( | ||
| await findByRole('option', { | ||
| name: 'Email', | ||
| }) | ||
| ); | ||
| expect(within(channelTypeContainer).getByRole('combobox')).toHaveAttribute( | ||
| 'value', | ||
| 'Email' | ||
| ); | ||
|
|
||
| const channelLabelContainer = getByTestId('channel-label'); | ||
| await user.click( | ||
| within(channelLabelContainer).getByRole('button', { name: 'Open' }) | ||
| ); | ||
| expect( | ||
| getByRole('option', { | ||
| name: mockData[0].label, | ||
| }) | ||
| ).toBeInTheDocument(); | ||
|
|
||
| await userEvent.click( | ||
| await findByRole('option', { | ||
| name: mockData[0].label, | ||
| }) | ||
| ); | ||
| expect(within(channelLabelContainer).getByRole('combobox')).toHaveAttribute( | ||
| 'value', | ||
| mockData[0].label | ||
| ); | ||
| }); | ||
|
|
||
| it('should render the error messages from the client side validation', async () => { | ||
| const { getAllByText, getByRole } = renderWithTheme( | ||
| <AddNotificationChannel | ||
| isNotificationChannelsError={false} | ||
| isNotificationChannelsLoading={false} | ||
| onCancel={vi.fn()} | ||
| onSubmitAddNotification={vi.fn()} | ||
| templateData={mockData} | ||
| /> | ||
| ); | ||
| await user.click(getByRole('button', { name: 'Add channel' })); | ||
| expect(getAllByText('This field is required.').length).toBe(2); | ||
| getAllByText('This field is required.').forEach((element) => { | ||
| expect(element).toBeVisible(); | ||
| }); | ||
| }); | ||
| }); |
Oops, something went wrong.