Skip to content

Commit 5396f5f

Browse files
mikesurowiecmikesurowiec
authored
React: All landing pages (github#19943)
* default all remaining landing pages to react, update tests
1 parent 87f6bc3 commit 5396f5f

File tree

16 files changed

+135
-96
lines changed

16 files changed

+135
-96
lines changed

‎components/Header.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export const Header = () => {
3434
style={{ zIndex: 2 }}
3535
>
3636
{/* desktop header */}
37-
<div className="d-none d-lg-flex flex-justify-end">
37+
<div className="d-none d-lg-flex flex-justify-end" data-testid="desktop-header">
3838
{showVersionPicker && (
3939
<div className="py-2 mr-4">
4040
<HomepageVersionPicker />
@@ -54,7 +54,7 @@ export const Header = () => {
5454
</div>
5555

5656
{/* mobile header */}
57-
<div className="d-lg-none">
57+
<div className="d-lg-none" data-testid="mobile-header">
5858
<div className="d-flex flex-justify-between">
5959
<div className="d-flex flex-items-center" id="github-logo-mobile" role="banner">
6060
<Link aria-hidden="true" tabIndex={-1} href={`/${router.locale}`}>
@@ -71,6 +71,7 @@ export const Header = () => {
7171

7272
<div>
7373
<ButtonOutline
74+
data-testid="mobile-menu-button"
7475
css
7576
onClick={() => setIsMenuOpen(!isMenuOpen)}
7677
aria-label="Navigation Menu"

‎components/Search.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { useTranslation } from 'components/hooks/useTranslation'
55
import { sendEvent, EventType } from '../javascripts/events'
66
import { useMainContext } from './context/MainContext'
77
import { useVersion } from 'components/hooks/useVersion'
8+
import cx from 'classnames'
89

910
type SearchResult = {
1011
url: string
@@ -193,8 +194,9 @@ export function Search({ isStandalone = false, updateSearchParams = true, childr
193194
<div className="ais-SearchBox">
194195
<form role="search" className="ais-SearchBox-form" noValidate onSubmit={preventRefresh}>
195196
<input
197+
data-testid="site-search-input"
196198
ref={inputRef}
197-
className={'ais-SearchBox-input' + (isStandalone || query ? ' js-open' : '')}
199+
className={cx('ais-SearchBox-input', isStandalone || query ? 'js-open' : '')}
198200
type="search"
199201
placeholder={t`placeholder`}
200202
/* eslint-disable-next-line jsx-a11y/no-autofocus */

‎components/SidebarNav.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ export const SidebarNav = () => {
5555
width: 280px;
5656
height: 100vh;
5757
flex-shrink: 0;
58+
padding-bottom: 32px;
5859
}
5960
`}
6061
</style>

‎components/context/MainContext.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@ export const getMainContextFromRequest = (req: any): MainContextT => {
118118
currentProduct: req.context.productMap[req.context.currentProduct] || null,
119119
currentLayoutName: req.context.currentLayoutName,
120120
isHomepageVersion: req.context.currentVersion === 'homepage',
121-
error: req.context.error || '',
121+
error: req.context.error ? req.context.error.toString() : '',
122122
data: {
123123
ui: req.context.site.data.ui,
124124
reusables: {

‎components/context/ProductLandingContext.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ export const getFeaturedLinksFromReq = (req: any): Record<string, Array<Featured
7979
Object.entries(req.context.featuredLinks || {}).map(([key, entries]) => {
8080
return [
8181
key,
82-
(entries as Array<any> || []).map((entry: any) => ({
82+
((entries as Array<any>) || []).map((entry: any) => ({
8383
href: entry.href,
8484
title: entry.title,
8585
intro: entry.intro,
@@ -144,7 +144,7 @@ export const getProductLandingContextFromRequest = (req: any): ProductLandingCon
144144
? req.context.page.featuredLinks.popularHeading || req.context.site.data.ui.toc[key]
145145
: req.context.site.data.ui.toc[key],
146146
viewAllHref:
147-
key === 'guides' && !req.context.currentCategory && hasGuidesPage
147+
key === 'guides' && !req.context.currentCategory && hasGuidesPage
148148
? `${req.context.currentPath}/guides`
149149
: '',
150150
articles: links.map((link: any) => {

‎components/landing/ArticleList.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export const ArticleList = ({
4141
</div>
4242
)}
4343

44-
<ul className="list-style-none">
44+
<ul className="list-style-none" data-testid="article-list">
4545
{articles.map((link) => {
4646
return (
4747
<li key={link.href} className={cx(variant === 'compact' && 'border-top')}>

‎components/landing/CodeExampleCard.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export const CodeExampleCard = ({ example }: Props) => {
99
return (
1010
<a
1111
className="Box d-flex flex-column flex-justify-between height-full color-shadow-medium hover-shadow-large no-underline color-text-primary"
12+
data-testid="code-example-card"
1213
href={`https://github.com/${example.href}`}
1314
>
1415
<div className="p-4">

‎components/landing/CodeExamples.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ export const CodeExamples = () => {
3232
<div>
3333
<div className="pr-lg-3 mb-5 mt-3">
3434
<input
35+
data-testid="code-examples-input"
3536
className="input-lg py-2 px-3 col-12 col-lg-8 form-control"
3637
placeholder={t('search_code_examples')}
3738
type="search"
@@ -53,6 +54,7 @@ export const CodeExamples = () => {
5354

5455
{numVisible < productCodeExamples.length && !isSearching && (
5556
<button
57+
data-testid="code-examples-show-more"
5658
className="btn btn-outline float-right"
5759
onClick={() => setNumVisible(numVisible + PAGE_SIZE)}
5860
>
@@ -61,7 +63,10 @@ export const CodeExamples = () => {
6163
)}
6264

6365
{isSearching && searchResults.length === 0 && (
64-
<div className="py-4 text-center color-text-secondary font-mktg">
66+
<div
67+
data-testid="code-examples-no-results"
68+
className="py-4 text-center color-text-secondary font-mktg"
69+
>
6570
<div className="mb-3">
6671
<SearchIcon size={24} />{' '}
6772
</div>

‎components/landing/LandingSection.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,13 @@ export const LandingSection = ({ title, children, className, sectionLink, descri
1212
<div className={cx('container-xl px-3 px-md-6', className)} id={sectionLink}>
1313
{title && (
1414
<h2 className={cx('font-mktg h1 color-text-primary', !description ? 'mb-3' : 'mb-4')}>
15-
{sectionLink ? <a className="color-unset" href={`#${sectionLink}`}>{title}</a> : title}
15+
{sectionLink ? (
16+
<a className="color-unset" href={`#${sectionLink}`}>
17+
{title}
18+
</a>
19+
) : (
20+
title
21+
)}
1622
</h2>
1723
)}
1824
{description && (

‎components/landing/ProductArticlesList.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export const ProductArticlesList = () => {
1616
}
1717

1818
return (
19-
<div className="d-flex gutter flex-wrap">
19+
<div className="d-flex gutter flex-wrap" data-testid="product-articles-list">
2020
{currentProductTree.childPages.map((treeNode, i) => {
2121
if (treeNode.page.documentType === 'article') {
2222
return null
@@ -34,7 +34,9 @@ const ProductTreeNodeList = ({ treeNode }: { treeNode: ProductTreeNode }) => {
3434
return (
3535
<div className="col-12 col-lg-4 mb-6 height-full">
3636
<h4 className="mb-3">
37-
<Link className="color-unset" href={treeNode.href}>{treeNode.renderedFullTitle}</Link>
37+
<Link className="color-unset" href={treeNode.href}>
38+
{treeNode.renderedFullTitle}
39+
</Link>
3840
</h4>
3941

4042
<ul className="list-style-none">

0 commit comments

Comments
 (0)