diff --git a/src/containers/Organization/Registration/Registration.module.css b/src/containers/Organization/Registration/Registration.module.css deleted file mode 100644 index 316d41ea8..000000000 --- a/src/containers/Organization/Registration/Registration.module.css +++ /dev/null @@ -1,52 +0,0 @@ -.Tooltip { - width: 143px; - height: 48px; - background-color: #042c19 !important; - font-size: 10px; - line-height: 1.2; - border-radius: 8px; - font-weight: 400; -} - -.HelperLink { - margin-top: 4px !important; - text-align: right; - color: #93a29b !important; - line-height: 1 !important; - font-size: 14px !important; - font-weight: normal !important; - padding-right: 16px; -} - -.InputAdornment { - cursor: pointer !important; -} - -.Wrapper :global(.MuiFormControlLabel-root) { - display: flex; - align-items: flex-start; -} - -.Wrapper :global(.MuiFormControlLabel-label) { - color: #93a29b !important; - padding: 10px 0px; - line-height: 1.2; - font-size: 14px; - font-weight: 400 !important; -} - -.Wrapper :global(.MuiIconButton-label) { - position: relative; - z-index: 0; -} - -.Wrapper :global(.MuiIconButton-label:after) { - content: ''; - left: 4px; - top: 4px; - height: 15px; - width: 15px; - position: absolute; - background-color: white; - z-index: -1; -} diff --git a/src/containers/Organization/Registration/Registration.test.tsx b/src/containers/Organization/Registration/Registration.test.tsx deleted file mode 100644 index 03175acce..000000000 --- a/src/containers/Organization/Registration/Registration.test.tsx +++ /dev/null @@ -1,103 +0,0 @@ -import { fireEvent, render, screen, waitFor, act } from '@testing-library/react'; -import { MemoryRouter } from 'react-router-dom'; -import { GoogleReCaptchaProvider } from 'react-google-recaptcha-v3'; -import axios from 'axios'; -import { vi } from 'vitest'; - -import { Registration } from './Registration'; - -vi.mock('axios'); -const mockedAxios = axios as any; - -vi.mock('react-google-recaptcha-v3', async () => { - const mod = await vi.importActual('react-google-recaptcha-v3'); - return { - ...mod, - useGoogleReCaptcha: () => { - return { - executeRecaptcha: () => { - return 'test token'; - }, - }; - }, - }; -}); - -const props = { - title: 'Setup your NGO on Glific', - buttonText: 'GET STARTED', - handleStep: vi.fn(), -}; - -const wrapper = ( - - - - - -); - -describe('', () => { - beforeEach(() => { - vi.resetAllMocks(); - }); - - test('it should render correctly', async () => { - const { findByTestId } = render(wrapper); - - const registration = await findByTestId('RegistrationContainer'); - expect(registration).toHaveTextContent('Setup your NGO on Glific'); - }); - - test('onboard org correctly', async () => { - render(wrapper); - - const captcha = screen.getByTestId('captcha-button'); - expect(captcha).toBeInTheDocument(); - - waitFor(() => { - const inputElements = screen.getAllByRole('textbox'); - - fireEvent.change(inputElements[0], { target: { value: 'JaneDoe' } }); - fireEvent.change(inputElements[1], { target: { value: '919978776554' } }); - fireEvent.change(inputElements[2], { target: { value: 'Test App' } }); - fireEvent.change(inputElements[3], { target: { value: 'Vt5Ufo9RXpktxLdcX0awjrrYaWK0GowE' } }); - fireEvent.change(inputElements[4], { target: { value: 'test' } }); - fireEvent.change(inputElements[5], { target: { value: 'glific@glific.com' } }); - // click on continue - }); - const button = screen.getByText('GET STARTED'); - fireEvent.click(button); - - const responseData = { data: { is_valid: true, messages: [] } }; - act(() => { - mockedAxios.post.mockImplementationOnce(() => Promise.resolve(responseData)); - }); - }); - - test('it should submit the form correctly and give global error', async () => { - render(wrapper); - - const captcha = screen.getByTestId('captcha-button'); - expect(captcha).toBeInTheDocument(); - - waitFor(() => { - const inputElements = screen.getAllByRole('textbox'); - - fireEvent.change(inputElements[0], { target: { value: 'JaneDoe' } }); - fireEvent.change(inputElements[1], { target: { value: '919978776554' } }); - fireEvent.change(inputElements[2], { target: { value: 'Test App' } }); - fireEvent.change(inputElements[3], { target: { value: 'Vt5Ufo9RXpktxLdcX0awjrrYaWK0GowE' } }); - fireEvent.change(inputElements[4], { target: { value: 'test' } }); - fireEvent.change(inputElements[5], { target: { value: 'glific@glific.com' } }); - // click on continue - }); - const button = screen.getByText('GET STARTED'); - fireEvent.click(button); - - const responseData = { data: { is_valid: false, messages: [] } }; - act(() => { - mockedAxios.post.mockImplementationOnce(() => Promise.resolve(responseData)); - }); - }); -}); diff --git a/src/containers/Organization/Registration/Registration.tsx b/src/containers/Organization/Registration/Registration.tsx deleted file mode 100644 index d4236c5a5..000000000 --- a/src/containers/Organization/Registration/Registration.tsx +++ /dev/null @@ -1,196 +0,0 @@ -import { useState } from 'react'; -import axios from 'axios'; -import { InputAdornment, Link } from '@mui/material'; -import * as Yup from 'yup'; - -import { Input } from 'components/UI/Form/Input/Input'; -import { PhoneInput } from 'components/UI/Form/PhoneInput/PhoneInput'; -import Tooltip from 'components/UI/Tooltip/Tooltip'; -import { Checkbox } from 'components/UI/Form/Checkbox/Checkbox'; -import { ONBOARD_URL } from 'config'; -import InfoIcon from 'assets/images/icons/Info.svg?react'; -import { GUPSHUP_ACCOUNT_CREATION } from 'common/constants'; -import { Organization } from '../Organization'; -import styles from './Registration.module.css'; - -export interface RegistrationProps { - title: string; - buttonText: string; - handleStep?: any; -} - -const InfoAdornment = ( - - - - - -); - -const HelperLink = ( - - Help? - -); - -const CheckBoxWrapper = (props: any) => ( -
- -
-); - -const FormSchema = Yup.object().shape({ - name: Yup.string().required('NGO name is required'), - phone: Yup.string().required('Your chatbot number is required'), - app_name: Yup.string().required('App name is required'), - api_key: Yup.string() - .test('len', 'Invalid API Key', (val) => val?.length === 32) - .required('API key is required'), - email: Yup.string().email().required('Email is required'), - shortcode: Yup.string() - .matches(/^[a-z0-9]+$/i, 'Only alphanumeric characters are allowed') - .required('NGO shortcode url is required'), -}); - -const initialFormValues = { - name: '', - phone: '', - app_name: '', - api_key: '', - email: '', - shortcode: '', - addSupportStaff: true, - token: '', -}; - -const supportCheckboxTitle = - 'I agree to let Glific team create a support staff account on my Glific setup. This allows us to get better troubleshooting response to our issues.'; - -export const Registration = ({ title, buttonText, handleStep }: RegistrationProps) => { - const [registrationError, setRegistrationError] = useState(''); - const [code, setCode] = useState('shortcode'); - const [redirect, setRedirect] = useState(false); - - if (redirect) { - handleStep(); - } - - const formFields = (shortcode: string) => [ - { - component: Input, - name: 'name', - type: 'text', - placeholder: 'NGO name', - darkMode: true, - }, - { - component: PhoneInput, - name: 'phone', - type: 'phone', - placeholder: 'NGO WhatsApp number', - helperText: 'Please enter a phone number.', - }, - { - component: Input, - name: 'app_name', - type: 'text', - placeholder: 'App name', - darkMode: true, - }, - { - component: Input, - name: 'api_key', - type: 'text', - placeholder: 'GupShup API keys', - helperText: HelperLink, - darkMode: true, - }, - { - component: Input, - name: 'shortcode', - type: 'text', - placeholder: 'URL Shortcode', - endAdornment: InfoAdornment, - darkMode: true, - helperText: `www.${shortcode}.tides.coloredcow.com`, - inputProp: { - onChange: (event: any) => { - const { value } = event.target; - let text = 'shortcode'; - if (value) text = value; - setCode(text); - }, - }, - }, - { - component: Input, - name: 'email', - type: 'text', - darkMode: true, - placeholder: 'Your email id', - }, - { - component: CheckBoxWrapper, - name: 'addSupportStaff', - title: supportCheckboxTitle, - darkCheckbox: false, - checkboxType: 'iagree', - }, - ]; - - const handleSubmit = (values: any, setErrors: any, setLoading: any) => { - if (!values.token) { - return; - } - axios - .post(ONBOARD_URL, values) - .then(({ data }: { data: any }) => { - if (data.is_valid) { - setRedirect(true); - } else { - setRegistrationError(data.messages?.global); - if (setErrors && setLoading) { - const errors = data.messages; - delete errors.global; - setErrors(errors); - setLoading(false); - } - } - }) - .catch((error: any) => { - if (error.response?.data && error.response?.data?.error) { - setRegistrationError({ - global: error.response.data.error.message, - }); - } else { - setRegistrationError({ - global: 'Sorry! an error occured. Please contact the technical team for support', - }); - } - setLoading(false); - }); - }; - - return ( - - ); -}; - -export default Registration; diff --git a/src/containers/Tag/Tag.test.tsx b/src/containers/Tag/Tag.test.tsx index 7bc5fa41a..6422091e7 100644 --- a/src/containers/Tag/Tag.test.tsx +++ b/src/containers/Tag/Tag.test.tsx @@ -1,22 +1,25 @@ import { MockedProvider } from '@apollo/client/testing'; -import { render, waitFor } from '@testing-library/react'; +import { fireEvent, render, screen, waitFor } from '@testing-library/react'; import { MemoryRouter, Route, Routes } from 'react-router-dom'; import { vi } from 'vitest'; import { getOrganizationLanguagesQuery, getOrganizationQuery } from 'mocks/Organization'; -import { getTagQuery, filterTagQuery, getFilterTagQuery } from 'mocks/Tag'; +import { getTagQuery, filterTagQuery, getFilterTagQuery, createTag } from 'mocks/Tag'; import { Tag } from './Tag'; import { setOrganizationServices } from 'services/AuthService'; import { getRoleNameQuery } from 'mocks/Role'; +import * as Notification from 'common/notification'; setOrganizationServices('{"__typename":"OrganizationServicesResult","rolesAndPermission":true}'); const mocks = [ ...getOrganizationQuery, getTagQuery, + getTagQuery, filterTagQuery, getOrganizationLanguagesQuery, getFilterTagQuery, getRoleNameQuery, + createTag, ]; const mockUseLocationValue: any = { @@ -26,12 +29,12 @@ const mockUseLocationValue: any = { state: null, }; +const notificationSpy = vi.spyOn(Notification, 'setNotification'); vi.mock('react-router-dom', async () => ({ ...((await vi.importActual('react-router-dom')) as {}), useLocation: () => { return mockUseLocationValue; }, - useParams: () => ({ id: 13 }), })); const tag = () => ( @@ -49,6 +52,27 @@ it('should render Tag', async () => { }); }); +it('should create the tag', async () => { + render( + + + + + + ); + await waitFor(() => { + expect(screen.getByText('Add a new tag')).toBeInTheDocument(); + }); + + fireEvent.change(screen.getByRole('textbox'), { target: { value: 'tag' } }); + + fireEvent.click(screen.getByTestId('submitActionButton')); + + await waitFor(() => { + expect(notificationSpy).toHaveBeenCalled(); + }); +}); + it('should edit the tag', async () => { const edittag = () => ( diff --git a/src/mocks/Tag.tsx b/src/mocks/Tag.tsx index 705a25f71..9d06f9d97 100644 --- a/src/mocks/Tag.tsx +++ b/src/mocks/Tag.tsx @@ -1,10 +1,11 @@ +import { CREATE_LABEL } from 'graphql/mutations/Tags'; import { GET_TAG, FILTER_TAGS, GET_TAGS, GET_TAG_COUNT } from 'graphql/queries/Tags'; export const getTagQuery = { request: { query: GET_TAG, variables: { - id: 13, + id: '13', }, }, @@ -109,3 +110,26 @@ export const countTagQuery = { }, }, }; + +export const createTag = { + request: { + query: CREATE_LABEL, + variables: { + input: { + label: 'tag', + language_id: '1', + }, + }, + }, + result: { + data: { + createTag: { + errors: null, + tag: { + id: '4', + label: 'tag', + }, + }, + }, + }, +};