Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Navigation: add unit tests and refactor AMP constants #4968

Merged
merged 10 commits into from
Dec 19, 2019
Merged

Navigation: add unit tests and refactor AMP constants #4968

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
82c85a1
Update navigation unit tests
tochwill Dec 16, 2019
0b269ca
Merge branch 'integrate-new-navigation' into navigation-unit-tests
tochwill Dec 16, 2019
46c3a15
Update snapshots
tochwill Dec 16, 2019
28ec794
Merge branch 'latest' into navigation-unit-tests
tochwill Dec 16, 2019
6b7df72
Merge branch 'integrate-new-navigation' into navigation-unit-tests
tochwill Dec 16, 2019
bf889c1
Refactor Nav container AMP constants
tochwill Dec 16, 2019
4847bf8
Update src/app/containers/Navigation/index.amp.test.jsx
tochwill Dec 17, 2019
8cbfa84
Merge branch 'integrate-new-navigation' into navigation-unit-tests
tochwill Dec 18, 2019
f8b0ba7
Merge branch 'navigation-unit-tests' of github.com:bbc/simorgh into n…
tochwill Dec 18, 2019
58660d3
Implement code review feedback
tochwill Dec 18, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
212 changes: 212 additions & 0 deletions src/app/containers/Navigation/__snapshots__/index.amp.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,212 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`AMP Navigation Snapshots should correctly render AMP navigation 1`] = `
.c3 {
color: #fff;
fill: currentColor;
}

.c2 {
position: relative;
padding: 0;
margin: 0;
background-color: transparent;
border: 0;
float: left;
height: 2.75rem;
width: 2.75rem;
}

.c2:hover,
.c2:focus {
box-shadow: inset 0 0 0 0.25rem #FFFFFF;
}

.c2:hover::after,
.c2:focus::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
border: 0.25rem solid #FFFFFF;
}

.c2 svg {
vertical-align: middle;
}

.c1 {
position: relative;
max-width: 80rem;
margin: 0 auto;
}

.c0 {
position: relative;
background-color: #B80000;
border-top: 0.0625rem solid #FFFFFF;
}

.c0 .c6::after {
left: 0;
}

@media (min-width:37.5rem) {
.c2 {
display: none;
visibility: hidden;
}
}

@media (min-width:20rem) {
.c2 {
height: 2.75rem;
width: 2.75rem;
}
}

@media (max-width:37.4375rem) {
.c0.open {
background-color: #222222;
}
}

@media (max-width:37.4375rem) {
.c4 {
white-space: nowrap;
overflow-x: scroll;
-webkit-scroll-behavior: smooth;
-moz-scroll-behavior: smooth;
-ms-scroll-behavior: smooth;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
-webkit-scrollbar-width: none;
-moz-scrollbar-width: none;
-ms-scrollbar-width: none;
scrollbar-width: none;
-ms-overflow-style: none;
}

.c4::-webkit-scrollbar {
display: none;
}

.c4:after {
content: ' ';
height: 100%;
width: 3rem;
position: absolute;
right: 0;
bottom: 0;
z-index: 3;
overflow: hidden;
pointer-events: none;
background: linear-gradient( to right,rgba(184,0,0,0) 0%,rgba(184,0,0,1) 100% );
}
}

@media (max-width:37.4375rem) {
.c5.scrollable-hidden {
display: none;
visibility: hidden;
}
}

<html>
<head>
<script
async="true"
custom-element="amp-bind"
src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"
/>
</head>
<body>
<div>
<nav
class="c0"
dir="ltr"
id="navigation-id"
role="navigation"
>
<div
class="c1"
>
<amp-state
id="menuState"
>
<script
type="application/json"
>
{"expanded":false}
</script>
</amp-state>
<button
aria-expanded="false"
aria-label="menu"
class="c2"
data-amp-bind-aria-expanded="menuState.expanded ? \\"true\\" : \\"false\\""
dir="ltr"
on="tap:AMP.setState({ menuState: { expanded: !menuState.expanded }}),
dropdown-menu.toggleVisibility,
scrollable-nav.toggleClass(class=scrollable-hidden),
navigation-id.toggleClass(class=open)
"
type="button"
>
<svg
aria-hidden="true"
class="c3"
data-amp-bind-hidden="menuState.expanded"
focusable="false"
height="2.75rem"
viewBox="0 0 44 44"
width="2.75rem"
>
<path
d="M12 29h21v-2.333H12V29zm0-5.833h21v-2.334H12v2.334zM12 15v2.333h21V15H12z"
/>
</svg>
<svg
aria-hidden="true"
class="c3"
data-amp-bind-hidden="!menuState.expanded"
focusable="false"
height="2.75rem"
hidden=""
viewBox="0 0 44 44"
width="2.75rem"
>
<path
d="M26.741 15L21.6 20.142 16.458 15 15 16.458l5.142 5.142L15 26.742l1.458 1.458 5.142-5.141 5.141 5.141 1.459-1.458-5.142-5.142 5.142-5.142z"
fill-rule="evenodd"
/>
</svg>
</button>
<div
data-testid="dropdown"
hidden=""
id="dropdown-menu"
>
Dropdown
</div>
<div
class="c4 c5"
dir="ltr"
id="scrollable-nav"
>
<ul
data-testid="scrollable-list"
>
<li>
List Items
</li>
</ul>
</div>
</div>
</nav>
</div>
</body>
</html>
`;
147 changes: 147 additions & 0 deletions src/app/containers/Navigation/__snapshots__/index.canonical.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,147 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Canonical Navigation snapshots should correctly render Canonical navigation 1`] = `
.c3 {
color: #fff;
fill: currentColor;
}

.c2 {
position: relative;
padding: 0;
margin: 0;
background-color: transparent;
border: 0;
float: left;
height: 2.75rem;
width: 2.75rem;
}

.c2:hover,
.c2:focus {
box-shadow: inset 0 0 0 0.25rem #FFFFFF;
}

.c2:hover::after,
.c2:focus::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
border: 0.25rem solid #FFFFFF;
}

.c2 svg {
vertical-align: middle;
}

.c1 {
position: relative;
max-width: 80rem;
margin: 0 auto;
}

.c0 {
position: relative;
background-color: #B80000;
border-top: 0.0625rem solid #FFFFFF;
}

.c0 .c5::after {
left: 0;
}

@media (min-width:37.5rem) {
.c2 {
display: none;
visibility: hidden;
}
}

@media (min-width:20rem) {
.c2 {
height: 2.75rem;
width: 2.75rem;
}
}

@media (max-width:37.4375rem) {
.c4 {
white-space: nowrap;
overflow-x: scroll;
-webkit-scroll-behavior: smooth;
-moz-scroll-behavior: smooth;
-ms-scroll-behavior: smooth;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
-webkit-scrollbar-width: none;
-moz-scrollbar-width: none;
-ms-scrollbar-width: none;
scrollbar-width: none;
-ms-overflow-style: none;
}

.c4::-webkit-scrollbar {
display: none;
}

.c4:after {
content: ' ';
height: 100%;
width: 3rem;
position: absolute;
right: 0;
bottom: 0;
z-index: 3;
overflow: hidden;
pointer-events: none;
background: linear-gradient( to right,rgba(184,0,0,0) 0%,rgba(184,0,0,1) 100% );
}
}

<nav
class="c0"
dir="ltr"
role="navigation"
>
<div
class="c1"
>
<button
aria-expanded="false"
aria-label="menu"
class="c2"
dir="ltr"
type="button"
>
<svg
aria-hidden="true"
class="c3"
focusable="false"
height="2.75rem"
viewBox="0 0 44 44"
width="2.75rem"
>
<path
d="M12 29h21v-2.333H12V29zm0-5.833h21v-2.334H12v2.334zM12 15v2.333h21V15H12z"
/>
</svg>
</button>
<div
aria-hidden="true"
class="c4"
dir="ltr"
>
<ul
data-testid="scrollable-list"
>
<li>
List Items
</li>
</ul>
</div>
</div>
</nav>
`;
Loading