From 23f21ecbfaba5cc8384929edf4c5da7231f30ef4 Mon Sep 17 00:00:00 2001 From: George Adams Date: Fri, 13 Jan 2023 16:16:46 +0000 Subject: [PATCH] add more coverage --- src/__fixtures__/page.tsx | 31 +- src/components/LanguageSelector/index.tsx | 7 +- .../NavBar/__tests__/NavBar.test.tsx | 28 + .../NavBar/__tests__/NavBar.tests.tsx | 14 - .../__snapshots__/NavBar.test.tsx.snap | 644 ++++++++++++++++++ .../__snapshots__/NavBar.tests.tsx.snap | 313 --------- .../__snapshots__/blog.test.tsx.snap | 76 +++ .../supported-platforms.test.tsx.snap | 18 + src/pages/__tests__/blog.test.tsx | 10 + src/pages/supported-platforms.tsx | 43 +- .../__snapshots__/blogPost.test.tsx.snap | 22 - .../__snapshots__/docsPage.test.tsx.snap | 561 +++++++++++++++ src/templates/__tests__/blogPost.test.tsx | 12 +- src/templates/__tests__/docsPage.test.tsx | 52 ++ src/templates/authorPage.tsx | 5 - src/templates/blogPage.tsx | 5 - src/templates/blogPost.tsx | 22 +- src/templates/tagPage.tsx | 5 - src/types/index.tsx | 20 + .../__snapshots__/mdxComponents.test.tsx.snap | 111 +++ src/util/__tests__/mdxComponents.test.tsx | 45 ++ 21 files changed, 1620 insertions(+), 424 deletions(-) create mode 100644 src/components/NavBar/__tests__/NavBar.test.tsx delete mode 100644 src/components/NavBar/__tests__/NavBar.tests.tsx create mode 100644 src/components/NavBar/__tests__/__snapshots__/NavBar.test.tsx.snap delete mode 100644 src/components/NavBar/__tests__/__snapshots__/NavBar.tests.tsx.snap create mode 100644 src/templates/__tests__/__snapshots__/docsPage.test.tsx.snap create mode 100644 src/templates/__tests__/docsPage.test.tsx create mode 100644 src/util/__tests__/__snapshots__/mdxComponents.test.tsx.snap create mode 100644 src/util/__tests__/mdxComponents.test.tsx diff --git a/src/__fixtures__/page.tsx b/src/__fixtures__/page.tsx index 30ceada248..78042bd41c 100644 --- a/src/__fixtures__/page.tsx +++ b/src/__fixtures__/page.tsx @@ -1,6 +1,7 @@ import { MDXPage, SingleMDXPage, + SingleMDXDocPage, SiteMetaData } from '../types'; @@ -52,4 +53,32 @@ export const createSingleMDXData = (): { } } } -}); \ No newline at end of file +}); + +export const createMDXDocsData = (toc): { + mdx: SingleMDXDocPage; +} => ({ + mdx: { + id: 'mdx-1', + fields: { + slug: '/mdx/mdx-page-title', + }, + frontmatter: { + title: 'MDX Doc Page title', + authors: 'pmc, pmc2', + toc: toc ? true : false + }, + tableOfContents: { + items: [ + { + url: '#section1', + title: 'Section 1' + }, + { + url: '#section2', + title: 'Section 2' + } + ], + } + } +}); diff --git a/src/components/LanguageSelector/index.tsx b/src/components/LanguageSelector/index.tsx index 7bb4d9e6e7..34a140977c 100644 --- a/src/components/LanguageSelector/index.tsx +++ b/src/components/LanguageSelector/index.tsx @@ -53,12 +53,7 @@ const LanguageSelector = (): JSX.Element => { eventKey={lng} onClick={(e) => { e.preventDefault(); - if (location.pathname.includes('index')) { - let newPath = location.pathname.split("/index")[0].slice(3) - changeLanguage(lng, newPath); - } else { - changeLanguage(lng); - } + changeLanguage(lng); }} > diff --git a/src/components/NavBar/__tests__/NavBar.test.tsx b/src/components/NavBar/__tests__/NavBar.test.tsx new file mode 100644 index 0000000000..2e2788fc98 --- /dev/null +++ b/src/components/NavBar/__tests__/NavBar.test.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import { render } from '@testing-library/react'; +import { describe, it, expect } from "vitest" +import NavBar from '..'; + +describe('NavBar component', () => { + it('navbar renders correctly', () => { + const { container } = render( + + ); + expect(container).toMatchSnapshot(); + }); + + it('blog navbar renders correctly', () => { + global.window = Object.create(window); + const url = 'https://adoptium.net/blog'; + Object.defineProperty(window, 'location', { + value: { + href: url + } + }); + + const { container } = render( + + ); + expect(container).toMatchSnapshot(); + }); +}); diff --git a/src/components/NavBar/__tests__/NavBar.tests.tsx b/src/components/NavBar/__tests__/NavBar.tests.tsx deleted file mode 100644 index 61eabcc8c1..0000000000 --- a/src/components/NavBar/__tests__/NavBar.tests.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import { render } from '@testing-library/react'; -import { describe, it, expect } from "vitest" -import NavBar from '..'; - -describe('NavBar component', () => { - it('navbar renders correctly', () => { - const { container } = render( - - ); - expect(container).toMatchSnapshot(); - }); - -}); \ No newline at end of file diff --git a/src/components/NavBar/__tests__/__snapshots__/NavBar.test.tsx.snap b/src/components/NavBar/__tests__/__snapshots__/NavBar.test.tsx.snap new file mode 100644 index 0000000000..c5602ee121 --- /dev/null +++ b/src/components/NavBar/__tests__/__snapshots__/NavBar.test.tsx.snap @@ -0,0 +1,644 @@ +// Vitest Snapshot v1 + +exports[`NavBar component > blog navbar renders correctly 1`] = ` + +`; + +exports[`NavBar component > navbar renders correctly 1`] = ` + +`; diff --git a/src/components/NavBar/__tests__/__snapshots__/NavBar.tests.tsx.snap b/src/components/NavBar/__tests__/__snapshots__/NavBar.tests.tsx.snap deleted file mode 100644 index 9de65fa129..0000000000 --- a/src/components/NavBar/__tests__/__snapshots__/NavBar.tests.tsx.snap +++ /dev/null @@ -1,313 +0,0 @@ -// Vitest Snapshot v1 - -exports[`NavBar component > navbar renders correctly 1`] = ` - -`; diff --git a/src/pages/__tests__/__snapshots__/blog.test.tsx.snap b/src/pages/__tests__/__snapshots__/blog.test.tsx.snap index 8501bcb2d6..6085ba446a 100644 --- a/src/pages/__tests__/__snapshots__/blog.test.tsx.snap +++ b/src/pages/__tests__/__snapshots__/blog.test.tsx.snap @@ -1,5 +1,81 @@ // Vitest Snapshot v1 +exports[`Blog page > next page renders correctly 1`] = ` +
+
+
+
+ + +
+
+
+
+`; + exports[`Blog page > renders correctly 1`] = `
renders correctly 1`] = `

+ + @@ -1924,6 +1926,8 @@ exports[`Supported Platforms page > renders correctly 1`] = `

+ + @@ -2676,6 +2680,8 @@ exports[`Supported Platforms page > renders correctly 1`] = `

+ + @@ -3087,6 +3093,8 @@ exports[`Supported Platforms page > renders correctly 1`] = `

+ + @@ -3839,6 +3847,8 @@ exports[`Supported Platforms page > renders correctly 1`] = `

+ + @@ -4549,6 +4559,8 @@ exports[`Supported Platforms page > renders correctly 1`] = `

+ + @@ -4943,6 +4955,8 @@ exports[`Supported Platforms page > renders correctly 1`] = `

+ + @@ -5242,6 +5256,8 @@ exports[`Supported Platforms page > renders correctly 1`] = `

+ + @@ -5446,6 +5462,8 @@ exports[`Supported Platforms page > renders correctly 1`] = `

+ + diff --git a/src/pages/__tests__/blog.test.tsx b/src/pages/__tests__/blog.test.tsx index a3bbdca745..aaace92f82 100644 --- a/src/pages/__tests__/blog.test.tsx +++ b/src/pages/__tests__/blog.test.tsx @@ -16,6 +16,16 @@ describe('Blog page', () => { expect(pageContent).toMatchSnapshot(); }); + it('next page renders correctly', () => { + let mockData = createMDXData(); + mockData.allMdx.totalCount = 11; + const { container } = render(); + // eslint-disable-next-line + const pageContent = container.querySelector('main'); + + expect(pageContent).toMatchSnapshot(); + }); + it('head renders correctly', () => { const { container } = render(); // eslint-disable-next-line diff --git a/src/pages/supported-platforms.tsx b/src/pages/supported-platforms.tsx index 984f9fd68c..7a6dc1b520 100644 --- a/src/pages/supported-platforms.tsx +++ b/src/pages/supported-platforms.tsx @@ -39,32 +39,31 @@ const SupportedPlatformsPage = () => { { versionsActive.map((version, index) => ( -

{version}

+ +

{version}

+ ))} - - { Object.keys(versions).map((os, index) => ( - <> - -

{os}

+ { Object.keys(versions).map((os) => ( + + +

{os}

+ + {Object.keys(versions[os]).map((platform) => ( + +

{platform}

+ { versionsActive.map((version, index) => ( + +

+ {validator(versions[os][platform], version)} +

+ + ))} - {Object.keys(versions[os]).map((platform, index) => ( - -

{platform}

- { versionsActive.map((version, index) => ( - -

- {validator(versions[os][platform], version)} -

- - ))} - - ))} - - - ))} - + ))} + + ))}

1. These builds should work on any distribution with glibc version 2.12 or higher.

diff --git a/src/templates/__tests__/__snapshots__/blogPost.test.tsx.snap b/src/templates/__tests__/__snapshots__/blogPost.test.tsx.snap index 9e74ff2f13..48531c0e7d 100644 --- a/src/templates/__tests__/__snapshots__/blogPost.test.tsx.snap +++ b/src/templates/__tests__/__snapshots__/blogPost.test.tsx.snap @@ -1,27 +1,5 @@ // Vitest Snapshot v1 -exports[`BlogPost Template page > formatDiv renders correctly - inline code block 1`] = ` -
- - - test - - -
-`; - -exports[`BlogPost Template page > formatDiv renders correctly 1`] = ` -
-
-

- test -

-
-
-`; - exports[`BlogPost Template page > renders correctly - featured image 1`] = `
installation renders correctly 1`] = ` +
+
+
+
+
+

+ MDX Doc Page title +

+
+
+
+
+
+
+
+
+
+
+
+ bash +
+
+
    + + + +
+
+
+ 
+                      

+                      
+                        
+                          # Install the latest version
+                        
+                        

+                        
+                          $
+                        
+                        
+                          winget install 
+                        
+                        EclipseAdoptium.Temurin.17.JDK
+                      
+
+
+ 
+                      

+                      
+                        
+                          # Install a different version
+                        
+                        

+                        
+                          $
+                        
+                        
+                          winget install 
+                        
+                        EclipseAdoptium.Temurin.11.JDK
+                      
+
+
+ 
+                      

+                      
+                        
+                          # Upgrade the Winget package
+                        
+                        

+                        
+                          $
+                        
+                        
+                          winget upgrade 
+                        
+                        EclipseAdoptium.Temurin.17.JDK
+                      
+
+
+ 
+                      

+                      
+                        
+                          # Uninstall the Winget package
+                        
+                        

+                        
+                          $
+                        
+                        
+                          winget uninstall 
+                        
+                        EclipseAdoptium.Temurin.17.JDK
+                      
+
+ + Read documentation + +
+
+
+
+
+
+
+
+ sample docs +
+
+ DOCUMENTATION AUTHORS + +
+
+ + Help us make these docs great! + +
+ + All Adoptium docs are open source. See something that's wrong or unclear? + +
+ + + + + Edit this page + +
+
+
+
+
+
+`; + +exports[`Docs Template page > renders correctly 1`] = ` +
+
+
+
+
+

+ MDX Doc Page title +

+ sample docs +
+
+ DOCUMENTATION AUTHORS + +
+
+ + Help us make these docs great! + +
+ + All Adoptium docs are open source. See something that's wrong or unclear? + +
+ + + + + Edit this page + +
+
+
+
+
+
+`; + +exports[`Docs Template page > toc renders correctly 1`] = ` +
+
+
+
+
+

+ MDX Doc Page title +

+
+ + Table of Contents + + +
+ sample docs +
+
+ DOCUMENTATION AUTHORS + +
+
+ + Help us make these docs great! + +
+ + All Adoptium docs are open source. See something that's wrong or unclear? + +
+ + + + + Edit this page + +
+
+
+
+
+
+`; diff --git a/src/templates/__tests__/blogPost.test.tsx b/src/templates/__tests__/blogPost.test.tsx index 36ca6da650..3acf3e0312 100644 --- a/src/templates/__tests__/blogPost.test.tsx +++ b/src/templates/__tests__/blogPost.test.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { render } from '@testing-library/react'; -import BlogPost, { Head, formatDiv } from '../../templates/blogPost'; +import BlogPost, { Head } from '../../templates/blogPost'; import { describe, expect, it } from 'vitest' import { axe } from 'vitest-axe'; import { createSingleMDXData } from '../../__fixtures__/page'; @@ -53,16 +53,6 @@ describe('BlogPost Template page', () => { expect(pageContent).toMatchSnapshot(); }); - it('formatDiv renders correctly', () => { - const { container } = render(formatDiv({ dangerouslySetInnerHTML: { __html: '

test

' } })); - expect(container).toMatchSnapshot(); - }); - - it('formatDiv renders correctly - inline code block', () => { - const { container } = render(formatDiv({ dangerouslySetInnerHTML: { __html: 'test' } })); - expect(container).toMatchSnapshot(); - }); - it('head renders correctly', () => { const { container } = render(); // eslint-disable-next-line diff --git a/src/templates/__tests__/docsPage.test.tsx b/src/templates/__tests__/docsPage.test.tsx new file mode 100644 index 0000000000..96754b2d77 --- /dev/null +++ b/src/templates/__tests__/docsPage.test.tsx @@ -0,0 +1,52 @@ +import React from 'react'; +import { render } from '@testing-library/react'; +import DocsPage, { Head } from '../docsPage'; +import { describe, expect, it } from 'vitest' +import { axe } from 'vitest-axe'; +import { createMDXDocsData } from '../../__fixtures__/page'; + +let mockData = createMDXDocsData(false); +const pageContext = { + relativePath: 'docs/sample/index.md', +} + +describe('Docs Template page', () => { + it('renders correctly', () => { + const { container } = render(); + // eslint-disable-next-line + const pageContent = container.querySelector('main'); + + expect(pageContent).toMatchSnapshot(); + }); + + it('installation renders correctly', () => { + mockData.mdx.fields.slug = '/installation/'; + const { container } = render(); + // eslint-disable-next-line + const pageContent = container.querySelector('main'); + + expect(pageContent).toMatchSnapshot(); + }); + + it('toc renders correctly', () => { + let mockData = createMDXDocsData(true); + const { container } = render(); + // eslint-disable-next-line + const pageContent = container.querySelector('main'); + + expect(pageContent).toMatchSnapshot(); + }); + + it('head renders correctly', () => { + const { container } = render(); + // eslint-disable-next-line + const title = container.querySelector('title'); + expect(title?.textContent).toEqual('MDX Doc Page title | Adoptium'); + }); + + it('has no accessibility violations', async () => { + const { container } = render(); + const results = await axe(container); + expect(results).toHaveNoViolations(); + }); +}); \ No newline at end of file diff --git a/src/templates/authorPage.tsx b/src/templates/authorPage.tsx index 3e959883d3..03e290459f 100644 --- a/src/templates/authorPage.tsx +++ b/src/templates/authorPage.tsx @@ -60,11 +60,6 @@ export const Head = ({ pageContext }) => { export const authorPageQuery = graphql` query authorPageQuery($author: String!, $limit: Int!, $language: String!) { - site { - siteMetadata { - title - } - } allMdx( filter: {frontmatter: {author: {eq: $author}}} sort: {frontmatter: {date: DESC}} diff --git a/src/templates/blogPage.tsx b/src/templates/blogPage.tsx index 2e02164094..4d06351f13 100644 --- a/src/templates/blogPage.tsx +++ b/src/templates/blogPage.tsx @@ -81,11 +81,6 @@ export const Head = ({ pageContext }) => { export const blogPageQuery = graphql` query blogPageQuery($skip: Int!, $limit: Int!, $language: String!) { - site { - siteMetadata { - title - } - } allMdx( filter: {internal: {contentFilePath: { regex: "/blog/" }}}, sort: {frontmatter: {date: DESC} diff --git a/src/templates/blogPost.tsx b/src/templates/blogPost.tsx index 170b023c01..e0fdabee5e 100644 --- a/src/templates/blogPost.tsx +++ b/src/templates/blogPost.tsx @@ -7,29 +7,11 @@ import Layout from '../components/Layout'; import Seo from '../components/Seo'; import BlogAuthor from '../components/BlogAuthor'; import AuthorData from '../json/authors.json'; -import GuestPost from '../components/GuestPost'; import Byline from '../components/Byline'; import ShareButton from '../components/Share'; import Tags from '../components/Tags'; import Comments from '../components/Comments'; - -export const formatDiv = props => { - // convert inline code to code blocks - if (props.dangerouslySetInnerHTML.__html.includes('class="language-text"')) { - return - } else { - return
; - } -} - -const components = { - GuestPost, - blockquote: props =>
, - table: props => , - thead: props => , - li: props =>
  • , - div: formatDiv -}; +import { mdxComponents } from '../util/mdxComponents'; const BlogPostTemplate = ({ data, pageContext, location, children }) => { const post = data.mdx; @@ -48,7 +30,7 @@ const BlogPostTemplate = ({ data, pageContext, location, children }) => { - + {children} diff --git a/src/templates/tagPage.tsx b/src/templates/tagPage.tsx index c678e92290..3e509912a8 100644 --- a/src/templates/tagPage.tsx +++ b/src/templates/tagPage.tsx @@ -53,11 +53,6 @@ export const Head = ({ pageContext }) => { export const tagsPageQuery = graphql` query tagsPageQuery($tag: String!, $language: String!) { - site { - siteMetadata { - title - } - } allMdx( filter: {frontmatter: {tags: {eq: $tag}}} sort: {frontmatter: {date: DESC}} diff --git a/src/types/index.tsx b/src/types/index.tsx index d551ca0b22..6cd8e4bb3d 100644 --- a/src/types/index.tsx +++ b/src/types/index.tsx @@ -3,6 +3,7 @@ export interface File { } export interface MDXPage { + totalCount?: number; edges: MDXPageItem[]; } @@ -45,6 +46,25 @@ export interface SingleMDXPage { } } +export interface SingleMDXDocPage { + id: string; + fields: { + slug: string; + } + frontmatter: { + } + tableOfContents?: { + items: [ + tableOfContents[] + ] + } +} + +export interface tableOfContents { + title: string; + url: string; +} + export interface SiteMetaData { siteMetadata: { title: string; diff --git a/src/util/__tests__/__snapshots__/mdxComponents.test.tsx.snap b/src/util/__tests__/__snapshots__/mdxComponents.test.tsx.snap new file mode 100644 index 0000000000..042da5215f --- /dev/null +++ b/src/util/__tests__/__snapshots__/mdxComponents.test.tsx.snap @@ -0,0 +1,111 @@ +// Vitest Snapshot v1 + +exports[`mdxComponents > class renders correctly 1`] = ` +
    +
    + test +
    +
    +`; + +exports[`mdxComponents > collapsible renders correctly - with title 1`] = ` +
    +
    + + test + +
    + test +
    +
    +
    +`; + +exports[`mdxComponents > collapsible renders correctly 1`] = ` +
    +
    + test +
    +
    +`; + +exports[`mdxComponents > cross renders correctly 1`] = ` +
    + + + +
    +`; + +exports[`mdxComponents > formatDiv renders correctly - inline code block 1`] = ` +
    + + + test + + +
    +`; + +exports[`mdxComponents > formatDiv renders correctly 1`] = ` +
    +
    +

    + test +

    +
    +
    +`; + +exports[`mdxComponents > small renders correctly 1`] = ` +
    +
    + + test + +
    +`; + +exports[`mdxComponents > tick renders correctly 1`] = ` +
    + + + +
    +`; diff --git a/src/util/__tests__/mdxComponents.test.tsx b/src/util/__tests__/mdxComponents.test.tsx new file mode 100644 index 0000000000..c05f70a33c --- /dev/null +++ b/src/util/__tests__/mdxComponents.test.tsx @@ -0,0 +1,45 @@ +import { mdxComponents } from '../mdxComponents'; +import { render } from '@testing-library/react'; +import { describe, expect, it } from 'vitest'; + +describe('mdxComponents', () => { + it('formatDiv renders correctly', () => { + const { container } = render(mdxComponents.div({ dangerouslySetInnerHTML: { __html: '

    test

    ' } })); + expect(container).toMatchSnapshot(); + }); + + it('formatDiv renders correctly - inline code block', () => { + const { container } = render(mdxComponents.div({ dangerouslySetInnerHTML: { __html: 'test' } })); + expect(container).toMatchSnapshot(); + }); + + it('small renders correctly', () => { + const { container } = render(mdxComponents.Small({ children: 'test' })); + expect(container).toMatchSnapshot(); + }); + + it('tick renders correctly', () => { + const { container } = render(mdxComponents.Tick()); + expect(container).toMatchSnapshot(); + }); + + it('cross renders correctly', () => { + const { container } = render(mdxComponents.Cross()); + expect(container).toMatchSnapshot(); + }); + + it('collapsible renders correctly', () => { + const { container } = render(mdxComponents.Collapsible({ children: 'test' })); + expect(container).toMatchSnapshot(); + }); + + it('collapsible renders correctly - with title', () => { + const { container } = render(mdxComponents.Collapsible({ title: 'test', children: 'test' })); + expect(container).toMatchSnapshot(); + }); + + it('class renders correctly', () => { + const { container } = render(mdxComponents.Class({ name: 'test', children: 'test' })); + expect(container).toMatchSnapshot(); + }); +});