27 |
47 |
48 |
67 |
83 | 26 | Still have questions?{' '} 27 | 32 | Contact us 33 | 34 |
35 |{children}
25 | ),
26 | }));
27 |
28 | jest.mock('../FAQItem', () => ({
29 | FAQItem: ({ question, answer }: { question: string; answer: string }) => (
30 |
31 |
34 | ),
35 | }));
36 |
37 | describe('FAQ component', () => {
38 | test('renders without crashing', () => {
39 | render({question}
32 |{answer}
33 |
9 |
10 |
21 |
22 |
63 |
64 | {/* Shadow effect */}
65 |
66 |
67 | 23 | Follow the guide below to setup sync for your Taskwarrior clients 24 |
25 | 26 |
27 |
37 | 38 |
46 | 47 |
62 | 28 | Here are your credentials 29 |
30 |
31 | You may use your own as well, but make sure to use the same
32 | credentials on each client.
33 |
Also, the tasks won't be stored on our database if you do
34 | so.
35 |
37 | 38 |
UUID
39 |
40 |
45 |
41 |
43 | {props.uuid}
42 | 46 | 47 |
48 | Encryption Secret 49 |
50 |
51 |
61 |
52 |
56 |
53 | {props.encryption_secret}
54 |
55 |
28 |
42 |
74 | );
75 |
--------------------------------------------------------------------------------
/frontend/src/components/HomeComponents/Navbar/NavbarMobile.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Sheet,
3 | SheetContent,
4 | SheetHeader,
5 | SheetTitle,
6 | SheetTrigger,
7 | } from '@/components/ui/sheet';
8 | import { url } from '@/components/utils/URLs';
9 | import { GitHubLogoIcon } from '@radix-ui/react-icons';
10 | import { Menu } from 'lucide-react';
11 | import { ModeToggle } from '../../utils/theme-mode-toggle';
12 | import { buttonVariants } from '@/components/ui/button';
13 | import {
14 | routeList,
15 | deleteAllTasks,
16 | handleLogout,
17 | RouteProps,
18 | Props,
19 | } from './navbar-utils';
20 |
21 | export const NavbarMobile = (
22 | props: Props & { setIsOpen: (isOpen: boolean) => void; isOpen: boolean } & {
23 | isLoading: boolean;
24 | setIsLoading: (val: boolean) => void;
25 | }
26 | ) => (
27 |
28 |
43 |
44 |
45 |
46 | CN
48 |
49 |
50 |
51 | {props.email}
52 | deleteAllTasks(props)}
55 | >
56 |
59 | window.open(url.githubRepoURL, '_blank')}
61 | >
62 |
65 |
66 |
69 |
70 |
71 |
73 | Log out
68 |
25 | handleCopy(copyText)}>
31 |
34 |
35 |
36 | );
37 | };
38 |
--------------------------------------------------------------------------------
/frontend/src/components/HomeComponents/SetupGuide/__tests__/CopyableCode.test.tsx:
--------------------------------------------------------------------------------
1 | import { render, screen, fireEvent, waitFor } from '@testing-library/react';
2 | import { CopyableCode } from '../CopyableCode';
3 | import { toast } from 'react-toastify';
4 |
5 | // Mock the toast function
6 | jest.mock('react-toastify', () => ({
7 | toast: {
8 | success: jest.fn(),
9 | },
10 | }));
11 |
12 | // Mock CopyIcon
13 | jest.mock('lucide-react', () => ({
14 | CopyIcon: () => ,
15 | }));
16 |
17 | describe('CopyableCode', () => {
18 | const sampleText = 'Sample code';
19 | const sampleCopyText = 'Copy this text';
20 |
21 | it('renders correctly with given text', () => {
22 | render(
26 |
30 |
27 | {text}
28 |
29 |
10 | {text}
11 |
12 | ),
13 | }));
14 |
15 | describe('SetupGuide Component', () => {
16 | const props: Props = {
17 | name: 'test-name',
18 | encryption_secret: 'test-encryption-secret',
19 | uuid: 'test-uuid',
20 | };
21 |
22 | test('renders SetupGuide component with correct text', () => {
23 | render(
19 |
27 |
42 |
50 |
51 | );
52 | };
53 |
54 | export default Pagination;
55 |
--------------------------------------------------------------------------------
/frontend/src/components/HomeComponents/Tasks/__tests__/Pagination.test.tsx:
--------------------------------------------------------------------------------
1 | import { render, screen, fireEvent } from '@testing-library/react';
2 | import Pagination from '../Pagination';
3 |
4 | describe('Pagination', () => {
5 | const mockPaginate = jest.fn();
6 | const mockGetDisplayedPages = jest.fn((totalPages, _currentPage) => {
7 | const pages = [];
8 | for (let i = 1; i <= totalPages; i++) {
9 | pages.push(i);
10 | }
11 | return pages;
12 | });
13 |
14 | beforeEach(() => {
15 | mockPaginate.mockClear();
16 | });
17 |
18 | const renderComponent = (currentPage: number, totalPages: number) => {
19 | return render(
20 |
33 |
54 |
34 |
53 |
35 |
52 |
36 |
51 | 37 | 38 | About{' '} 39 | 40 | CCSync 41 |
42 |
43 | CCSync uses a hosted Taskchampion Sync Server instance that
44 | helps users to sync tasks across all your Taskwarrior 3.0
45 | clients and higher.
46 |
47 | Users can sign in using Google and generate their secret keys to
48 | setup synchronisation on their Taskwarrior clients.
49 |
68 | 69 | Contact{' '} 70 | 71 | Us 72 |
73 | 74 |75 |
80 | {contactList.map(({ icon, name, position, url }: ContactProps) => (
81 |
89 |
90 |
91 | {icon}
92 |
93 | {name}
94 |
95 |
96 | {position}
97 |
98 |
99 |
101 |
102 | ))}
103 |
104 | 24 | Still have questions?{' '} 25 | 30 | Contact us 31 | 32 |
33 |{children}
25 | ),
26 | }));
27 |
28 | jest.mock('../FAQItem', () => ({
29 | FAQItem: ({ question, answer }: { question: string; answer: string }) => (
30 |
31 |
34 | ),
35 | }));
36 |
37 | describe('FAQ component', () => {
38 | test('renders without crashing', () => {
39 | render({question}
32 |{answer}
33 |
11 |
12 |
26 |
27 |
49 |
50 | 13 | 14 | CCSync 15 | {' '} 16 | - the hosted solution 17 |
{' '} 18 | for syncing with all your{' '} 19 |20 | 21 | Taskwarrior 22 | {' '} 23 | clients 24 |
25 |28 | Effortlessly sync your tasks across all your TaskWarrior clients 29 |
30 | 31 |
32 |
33 |
36 |
37 |
44 | Github Repository
45 |
48 |
51 |
53 |
54 |
55 |
14 |
21 |
22 |
23 | Keep your data safe with top-notch security features.
24 |
25 |
26 |
27 |
34 |
35 |
36 |
41 |
42 |
43 |
50 |
51 |
52 |
54 |
55 |
56 |
63 |
64 |
65 |
72 |
73 |
74 |
75 | );
76 | };
77 |
--------------------------------------------------------------------------------
/frontend/src/components/LandingComponents/Hero/__tests__/Hero.test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render, screen } from '@testing-library/react';
3 | import { Hero } from '../Hero';
4 | import { url } from '@/components/utils/URLs';
5 |
6 | // mocking the HeroCards component
7 | jest.mock('../HeroCards', () => ({
8 | HeroCards: () => 37 | Sign in to generate your keys in order to sync across all your 38 | Taskwarrior clients 39 |
40 |Hassle-free sync across all devices
53 |Have any issues or queries?
66 |67 | 68 | Contact us 69 | 70 |
71 |HeroCards Component
,
9 | }));
10 |
11 | // mocking the buttonVariants function
12 | jest.mock('../../../ui/button', () => ({
13 | Button: ({
14 | children,
15 | className,
16 | }: {
17 | children: React.ReactNode;
18 | className?: string;
19 | }) => ,
20 | buttonVariants: ({ variant }: { variant: string }) => `btn-${variant}`,
21 | }));
22 |
23 | describe('Hero Component', () => {
24 | test('renders Hero component with correct text and elements', () => {
25 | render(63 | How It{' '} 64 | 65 | Works{' '} 66 | 67 |
68 |69 |
70 |
74 | {features.map(({ icon, title, description }: FeatureProps) => (
75 |
83 |
84 |
85 |
86 | {icon}
87 | {title}
88 |
89 |
90 | {description}
91 |
92 |
93 | ))}
94 |
95 |
22 |
24 |
25 |
26 |
27 |
28 |
29 |
30 | );
31 | };
32 |
--------------------------------------------------------------------------------
/frontend/src/components/LandingComponents/Navbar/NavbarMobile.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 | import {
3 | Sheet,
4 | SheetContent,
5 | SheetHeader,
6 | SheetTitle,
7 | SheetTrigger,
8 | } from '@/components/ui/sheet';
9 | import { Button, buttonVariants } from '../../ui/button';
10 | import { Menu } from 'lucide-react';
11 | import { ModeToggle } from '../../utils/theme-mode-toggle';
12 | import { routeList } from './navbar-utils';
13 | import { url } from '@/components/utils/URLs';
14 |
15 | export const NavbarMobile = () => {
16 | const [isOpen, setIsOpen] = useStateMocked Navbar
,
7 | }));
8 | jest.mock('../HomeComponents/Hero/Hero', () => ({
9 | Hero: () => Mocked Hero
,
10 | }));
11 | jest.mock('../HomeComponents/Footer/Footer', () => ({
12 | Footer: () => Mocked Footer
,
13 | }));
14 | jest.mock('../HomeComponents/SetupGuide/SetupGuide', () => ({
15 | SetupGuide: () => Mocked SetupGuide
,
16 | }));
17 | jest.mock('../HomeComponents/FAQ/FAQ', () => ({
18 | FAQ: () => Mocked FAQ
,
19 | }));
20 | jest.mock('../HomeComponents/Tasks/Tasks', () => ({
21 | Tasks: () => Mocked Tasks
,
22 | }));
23 |
24 | const mockedNavigate = jest.fn();
25 | jest.mock('react-router', () => ({
26 | useNavigate: () => mockedNavigate,
27 | }));
28 | jest.mock('@/components/utils/URLs', () => ({
29 | url: {
30 | backendURL: 'http://mocked-backend-url/',
31 | containerOrigin: 'http://mocked-origin/',
32 | frontendURL: 'http://mocked-frontend-url/',
33 | },
34 | }));
35 |
36 | // Mock fetch
37 | global.fetch = jest.fn(() =>
38 | Promise.resolve({
39 | ok: true,
40 | json: () =>
41 | Promise.resolve({
42 | picture: 'mocked-picture-url',
43 | email: 'mocked-email',
44 | encryption_secret: 'mocked-encryption-secret',
45 | uuid: 'mocked-uuid',
46 | name: 'mocked-name',
47 | }),
48 | })
49 | ) as jest.Mock;
50 |
51 | describe('HomePage', () => {
52 | afterEach(() => {
53 | jest.clearAllMocks();
54 | });
55 |
56 | it('renders correctly when user info is fetched successfully', async () => {
57 | render(Mocked Navbar
,
7 | }));
8 | jest.mock('../LandingComponents/Hero/Hero', () => ({
9 | Hero: () => Mocked Hero
,
10 | }));
11 | jest.mock('../LandingComponents/About/About', () => ({
12 | About: () => Mocked About
,
13 | }));
14 | jest.mock('../LandingComponents/HowItWorks/HowItWorks', () => ({
15 | HowItWorks: () => Mocked HowItWorks
,
16 | }));
17 | jest.mock('../LandingComponents/Contact/Contact', () => ({
18 | Contact: () => Mocked Contact
,
19 | }));
20 | jest.mock('../LandingComponents/FAQ/FAQ', () => ({
21 | FAQ: () => Mocked FAQ
,
22 | }));
23 | jest.mock('../LandingComponents/Footer/Footer', () => ({
24 | Footer: () => Mocked Footer
,
25 | }));
26 | jest.mock('../../components/utils/ScrollToTop', () => ({
27 | ScrollToTop: () => Mocked ScrollToTop
,
28 | }));
29 |
30 | describe('LandingPage', () => {
31 | it('renders all components correctly', () => {
32 | render(
53 | {children}
54 |
55 |
10 |
15 |
16 | ));
17 | Table.displayName = 'Table';
18 |
19 | const TableHeader = React.forwardRef<
20 | HTMLTableSectionElement,
21 | React.HTMLAttributes
37 | {theme}
38 |
39 |
40 | );
41 | };
42 |
43 | test('should use default theme if no theme is stored in localStorage', () => {
44 | render(
45 |