diff --git a/components/ActiveLocalizedLink.tsx b/components/ActiveLocalizedLink.tsx new file mode 100644 index 0000000000000..4aeee45df2d4a --- /dev/null +++ b/components/ActiveLocalizedLink.tsx @@ -0,0 +1,61 @@ +import { useRouter } from 'next/router'; +import { useState, useEffect, type FC } from 'react'; +import classNames from 'classnames'; +import LocalizedLink from './LocalizedLink'; +import type { LinkProps } from 'next/link'; +import type { PropsWithChildren } from 'react'; + +type ActiveLocalizedLinkProps = PropsWithChildren & + LinkProps & { + className?: string; + activeClassName: string; + }; + +const ActiveLocalizedLink: FC = ({ + children, + activeClassName, + className, + ...props +}) => { + const { asPath, isReady } = useRouter(); + const [computedClassName, setComputedClassName] = useState(className); + + useEffect(() => { + // Check if the router fields are updated client-side + if (isReady) { + // Dynamic route will be matched via props.as + // Static route will be matched via props.href + const linkPathName = new URL( + (props.as || props.href) as string, + location.href + ).pathname; + + // Using URL().pathname to get rid of query and hash + const currentPathName = new URL(asPath, location.href).pathname; + + const newClassName = classNames(className, { + activeClassName: linkPathName === currentPathName, + }); + + if (newClassName !== computedClassName) { + setComputedClassName(newClassName); + } + } + }, [ + asPath, + isReady, + props.as, + props.href, + activeClassName, + className, + computedClassName, + ]); + + return ( + + {children} + + ); +}; + +export default ActiveLocalizedLink; diff --git a/components/Api/DataTag/__tests__/__snapshots__/index.test.tsx.snap b/components/Api/DataTag/__tests__/__snapshots__/index.test.tsx.snap new file mode 100644 index 0000000000000..2bd80b1a138f5 --- /dev/null +++ b/components/Api/DataTag/__tests__/__snapshots__/index.test.tsx.snap @@ -0,0 +1,34 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Data Tag component renders with blue background color when tag is 'M' 1`] = ` +
+ + M + +
+`; + +exports[`Data Tag component renders with red background color when tag is 'E' 1`] = ` +
+ + E + +
+`; + +exports[`Data Tag component renders with yellow background color when tag is 'C' 1`] = ` +
+ + C + +
+`; diff --git a/components/Api/DataTag/__tests__/index.test.tsx b/components/Api/DataTag/__tests__/index.test.tsx new file mode 100644 index 0000000000000..8e4d5c7cda5f3 --- /dev/null +++ b/components/Api/DataTag/__tests__/index.test.tsx @@ -0,0 +1,25 @@ +import { render } from '@testing-library/react'; +import DataTag from '../index'; + +describe('Data Tag component', () => { + it(`renders with red background color when tag is 'E'`, () => { + const { container } = render(); + + expect(container).toHaveStyle('background-color: var(--danger6)'); + expect(container).toMatchSnapshot(); + }); + + it(`renders with yellow background color when tag is 'C'`, () => { + const { container } = render(); + + expect(container).toHaveStyle('background-color: var(--warning4)'); + expect(container).toMatchSnapshot(); + }); + + it(`renders with blue background color when tag is 'M'`, () => { + const { container } = render(); + + expect(container).toHaveStyle('background-color: var(--info6)'); + expect(container).toMatchSnapshot(); + }); +}); diff --git a/components/Article/Alert/__tests__/__snapshots__/index.test.tsx.snap b/components/Article/Alert/__tests__/__snapshots__/index.test.tsx.snap new file mode 100644 index 0000000000000..abc4e76fd5f6a --- /dev/null +++ b/components/Article/Alert/__tests__/__snapshots__/index.test.tsx.snap @@ -0,0 +1,19 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Alert component should render correctly 1`] = ` +
+
+
+`; + +exports[`Alert component should support passing children into the component 1`] = ` +
+
+ This is an alert +
+
+`; diff --git a/components/Article/Alert/__tests__/index.test.tsx b/components/Article/Alert/__tests__/index.test.tsx new file mode 100644 index 0000000000000..b5e7b898f47ad --- /dev/null +++ b/components/Article/Alert/__tests__/index.test.tsx @@ -0,0 +1,16 @@ +import { render } from '@testing-library/react'; +import Alert from '../index'; + +describe('Alert component', () => { + it('should render correctly', () => { + const { container } = render(); + + expect(container).toMatchSnapshot(); + }); + + it('should support passing children into the component', () => { + const { container } = render(This is an alert); + + expect(container).toMatchSnapshot(); + }); +}); diff --git a/components/Article/AuthorList/Author/__tests__/__snapshots__/index.test.tsx.snap b/components/Article/AuthorList/Author/__tests__/__snapshots__/index.test.tsx.snap new file mode 100644 index 0000000000000..f7d9312442eb7 --- /dev/null +++ b/components/Article/AuthorList/Author/__tests__/__snapshots__/index.test.tsx.snap @@ -0,0 +1,53 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Author component does not render without a username 1`] = ` +
+
  • + + + +
    • +
    +`; + +exports[`Author component renders correctly 1`] = ` +
    +
  • + + test-author + +
    • +
    +`; diff --git a/components/Article/AuthorList/Author/__tests__/index.test.tsx b/components/Article/AuthorList/Author/__tests__/index.test.tsx new file mode 100644 index 0000000000000..b1db41e5d4742 --- /dev/null +++ b/components/Article/AuthorList/Author/__tests__/index.test.tsx @@ -0,0 +1,24 @@ +import { render } from '@testing-library/react'; +import { IntlProvider } from 'react-intl'; +import Author from '..'; + +describe('Author component', () => { + it('renders correctly', () => { + const username = 'test-author'; + const { container } = render( + {}}> + + + ); + expect(container).toMatchSnapshot(); + }); + + it('does not render without a username', () => { + const { container } = render( + {}}> + + + ); + expect(container).toMatchSnapshot(); + }); +}); diff --git a/components/Article/AuthorList/__tests__/__snapshots__/authors-list.test.tsx.snap b/components/Article/AuthorList/__tests__/__snapshots__/authors-list.test.tsx.snap new file mode 100644 index 0000000000000..a5b6115c59044 --- /dev/null +++ b/components/Article/AuthorList/__tests__/__snapshots__/authors-list.test.tsx.snap @@ -0,0 +1,55 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`AuthorsList component renders correctly 1`] = ` +
    +
    + components.article.authorList.title + +
    +
    +`; diff --git a/components/Article/AuthorList/__tests__/authors-list.test.tsx b/components/Article/AuthorList/__tests__/authors-list.test.tsx new file mode 100644 index 0000000000000..c1cb4aaff940b --- /dev/null +++ b/components/Article/AuthorList/__tests__/authors-list.test.tsx @@ -0,0 +1,15 @@ +import { render } from '@testing-library/react'; +import { IntlProvider } from 'react-intl'; +import AuthorsList from '..'; + +describe('AuthorsList component', () => { + it('renders correctly', () => { + const authors = ['test-author', 'another-test-author']; + const { container } = render( + {}}> + + + ); + expect(container).toMatchSnapshot(); + }); +}); diff --git a/components/Article/BlockQuote/__tests__/__snapshots__/index.test.tsx.snap b/components/Article/BlockQuote/__tests__/__snapshots__/index.test.tsx.snap new file mode 100644 index 0000000000000..d26d87cee0ea7 --- /dev/null +++ b/components/Article/BlockQuote/__tests__/__snapshots__/index.test.tsx.snap @@ -0,0 +1,34 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`BlockQuote component should render correctly 1`] = ` +
    +
    +
    +`; + +exports[`BlockQuote component should support passing children into the component 1`] = ` +
    +
    + This is a block quote +
    +
    +`; + +exports[`BlockQuote component should support passing multiple children into the component 1`] = ` +
    +
    +

    + This is a block quote +

    +

    + This is a block quote +

    +
    +
    +`; diff --git a/components/Article/BlockQuote/__tests__/index.test.tsx b/components/Article/BlockQuote/__tests__/index.test.tsx new file mode 100644 index 0000000000000..8f5909ef68c66 --- /dev/null +++ b/components/Article/BlockQuote/__tests__/index.test.tsx @@ -0,0 +1,29 @@ +import { render } from '@testing-library/react'; +import BlockQuote from '../index'; + +describe('BlockQuote component', () => { + it('should render correctly', () => { + const { container } = render(
    ); + + expect(container).toMatchSnapshot(); + }); + + it('should support passing children into the component', () => { + const { container } = render( +
    This is a block quote
    + ); + + expect(container).toMatchSnapshot(); + }); + + it('should support passing multiple children into the component', () => { + const { container } = render( +
    +

    This is a block quote

    +

    This is a block quote

    +
    + ); + + expect(container).toMatchSnapshot(); + }); +}); diff --git a/components/Article/EditLink/__tests__/__snapshots__/index.test.tsx.snap b/components/Article/EditLink/__tests__/__snapshots__/index.test.tsx.snap new file mode 100644 index 0000000000000..5e39c384a0b3e --- /dev/null +++ b/components/Article/EditLink/__tests__/__snapshots__/index.test.tsx.snap @@ -0,0 +1,61 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`EditLink component edit mode renders correctly 1`] = ` + +`; + +exports[`EditLink component renders without a relative path 1`] = `
    `; + +exports[`EditLink component translate mode renders correctly 1`] = ` + +`; diff --git a/components/Blog/BlogCard/__tests__/__snapshots__/index.test.tsx.snap b/components/Blog/BlogCard/__tests__/__snapshots__/index.test.tsx.snap new file mode 100644 index 0000000000000..430876477be63 --- /dev/null +++ b/components/Blog/BlogCard/__tests__/__snapshots__/index.test.tsx.snap @@ -0,0 +1,46 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`BlogCard component renders correctly 1`] = ` +
    +
    +
    + + Sample Test Blog + +
    + + category-mock + + + 1 min read + +
    +
    +
    +

    + April 21, 2023 +

    +

    + components.blog.blogCard.author.by + + + Bat Man + +

    +
    +
    +
    +`; diff --git a/components/Blog/BlogCard/__tests__/index.test.tsx b/components/Blog/BlogCard/__tests__/index.test.tsx new file mode 100644 index 0000000000000..3a2b31ef998eb --- /dev/null +++ b/components/Blog/BlogCard/__tests__/index.test.tsx @@ -0,0 +1,32 @@ +import { render } from '@testing-library/react'; +import { IntlProvider } from 'react-intl'; + +import BlogCard from '..'; + +jest.mock('next/router', () => ({ + useRouter: jest.fn().mockReturnValue({}), +})); + +jest.mock('../../../../hooks/useLocale', () => ({ + useLocale: jest.fn().mockReturnValue({ + currentLocale: {}, + }), +})); + +describe('BlogCard component', () => { + it('renders correctly', () => { + const { container } = render( + {}}> + + + ); + expect(container).toMatchSnapshot(); + }); +}); diff --git a/components/Common/AnimatedPlaceholder/__tests__/__snapshots__/index.test.tsx.snap b/components/Common/AnimatedPlaceholder/__tests__/__snapshots__/index.test.tsx.snap new file mode 100644 index 0000000000000..cdb93e8192bcb --- /dev/null +++ b/components/Common/AnimatedPlaceholder/__tests__/__snapshots__/index.test.tsx.snap @@ -0,0 +1,35 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`AnimatedPlaceholder component should render correctly with default skeleton 1`] = ` +
    +
    +
    +
    +
    +
    +
    +
    +
    +`; + +exports[`AnimatedPlaceholder component should support passing loader skeleton from outside 1`] = ` +
    +
    +
    +
    +
    +`; diff --git a/components/Common/AnimatedPlaceholder/__tests__/index.test.tsx b/components/Common/AnimatedPlaceholder/__tests__/index.test.tsx new file mode 100644 index 0000000000000..a6ed849a159e2 --- /dev/null +++ b/components/Common/AnimatedPlaceholder/__tests__/index.test.tsx @@ -0,0 +1,20 @@ +import { render } from '@testing-library/react'; +import AnimatedPlaceholder from './../index'; + +describe('AnimatedPlaceholder component', () => { + it('should render correctly with default skeleton', () => { + const { container } = render(); + + expect(container).toMatchSnapshot(); + }); + + it('should support passing loader skeleton from outside', () => { + const { container } = render( + +
    + + ); + + expect(container).toMatchSnapshot(); + }); +}); diff --git a/components/Common/DarkModeToggle/__tests__/__snapshots__/index.test.tsx.snap b/components/Common/DarkModeToggle/__tests__/__snapshots__/index.test.tsx.snap new file mode 100644 index 0000000000000..6f3759d5005b0 --- /dev/null +++ b/components/Common/DarkModeToggle/__tests__/__snapshots__/index.test.tsx.snap @@ -0,0 +1,49 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`DarkModeToggle Component render dark mode toggle 1`] = ` +
    + +
    +`; diff --git a/components/Common/SectionTitle/__tests__/__snapshots__/SectionTitle.test.tsx.snap b/components/Common/SectionTitle/__tests__/__snapshots__/SectionTitle.test.tsx.snap new file mode 100644 index 0000000000000..b628f4982d33b --- /dev/null +++ b/components/Common/SectionTitle/__tests__/__snapshots__/SectionTitle.test.tsx.snap @@ -0,0 +1,17 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`SectionTitle component renders correctly with data 1`] = ` +
    +
    + home / + previous / + + current + +
    +
    +`; diff --git a/components/Home/NodeFeatures/__test__/__snapshots__/index.test.tsx.snap b/components/Home/NodeFeatures/__test__/__snapshots__/index.test.tsx.snap new file mode 100644 index 0000000000000..187988e6d43f5 --- /dev/null +++ b/components/Home/NodeFeatures/__test__/__snapshots__/index.test.tsx.snap @@ -0,0 +1,97 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`NodeFeatures should render 1`] = ` +
    +
    +
    + + + + +

    + pages.index.features.javascript.title +

    +

    + pages.index.features.javascript.description +

    +
    +
    + + + +

    + pages.index.features.openSource.title +

    +

    + pages.index.features.openSource.description +

    +
    +
    + + + + +

    + pages.index.features.everywhere.title +

    +

    + pages.index.features.everywhere.description +

    +
    +
    +
    +`; diff --git a/components/Home/NodeFeatures/__test__/index.test.tsx b/components/Home/NodeFeatures/__test__/index.test.tsx new file mode 100644 index 0000000000000..11fd0c5177601 --- /dev/null +++ b/components/Home/NodeFeatures/__test__/index.test.tsx @@ -0,0 +1,14 @@ +import { render } from '@testing-library/react'; +import { IntlProvider } from 'react-intl'; +import NodeFeatures from '../index'; + +describe('NodeFeatures', () => { + it('should render', () => { + const { container } = render( + {}}> + + + ); + expect(container).toMatchSnapshot(); + }); +}); diff --git a/components/Sections/NewFooter/__tests__/__snapshots__/index.test.tsx.snap b/components/Sections/NewFooter/__tests__/__snapshots__/index.test.tsx.snap new file mode 100644 index 0000000000000..56f24adf2645d --- /dev/null +++ b/components/Sections/NewFooter/__tests__/__snapshots__/index.test.tsx.snap @@ -0,0 +1,165 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Tests for Footer component renders correctly 1`] = ` + +`; diff --git a/components/Sections/NewFooter/__tests__/index.test.tsx b/components/Sections/NewFooter/__tests__/index.test.tsx new file mode 100644 index 0000000000000..7f003ffbd7d93 --- /dev/null +++ b/components/Sections/NewFooter/__tests__/index.test.tsx @@ -0,0 +1,29 @@ +import { render } from '@testing-library/react'; +import { IntlProvider } from 'react-intl'; +import Footer from '..'; + +// mock useRouter +jest.mock('next/router', () => ({ + useRouter() { + return { + locale: 'en', + }; + }, +})); + +jest.mock('../../../../hooks/useLocale', () => ({ + useLocale: () => ({ + currentLocale: { code: 'en', name: 'English', localName: 'English' }, + }), +})); + +describe('Tests for Footer component', () => { + it('renders correctly', () => { + const { container } = render( + {}}> +