From 82c85a1c818d5f08de2bb5eb0d55da458110ea77 Mon Sep 17 00:00:00 2001 From: Tom Williams Date: Mon, 16 Dec 2019 11:19:55 +0000 Subject: [PATCH 1/5] Update navigation unit tests --- .../__snapshots__/index.amp.test.jsx.snap | 203 ++++++ .../index.canonical.test.jsx.snap | 147 ++++ .../__snapshots__/index.test.jsx.snap | 654 +++++++++++++++++- .../containers/Navigation/index.amp.test.jsx | 34 + .../Navigation/index.canonical.test.jsx | 67 ++ src/app/containers/Navigation/index.test.jsx | 64 +- 6 files changed, 1128 insertions(+), 41 deletions(-) create mode 100644 src/app/containers/Navigation/__snapshots__/index.amp.test.jsx.snap create mode 100644 src/app/containers/Navigation/__snapshots__/index.canonical.test.jsx.snap create mode 100644 src/app/containers/Navigation/index.amp.test.jsx create mode 100644 src/app/containers/Navigation/index.canonical.test.jsx diff --git a/src/app/containers/Navigation/__snapshots__/index.amp.test.jsx.snap b/src/app/containers/Navigation/__snapshots__/index.amp.test.jsx.snap new file mode 100644 index 00000000000..30ed70676de --- /dev/null +++ b/src/app/containers/Navigation/__snapshots__/index.amp.test.jsx.snap @@ -0,0 +1,203 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`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 .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) { + .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% ); + } +} + + + + + + +
+ Dropdown +
+
+ +
+ + + + + +`; diff --git a/src/app/containers/Navigation/__snapshots__/index.canonical.test.jsx.snap b/src/app/containers/Navigation/__snapshots__/index.canonical.test.jsx.snap new file mode 100644 index 00000000000..744446bb619 --- /dev/null +++ b/src/app/containers/Navigation/__snapshots__/index.canonical.test.jsx.snap @@ -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% ); + } +} + + +`; diff --git a/src/app/containers/Navigation/__snapshots__/index.test.jsx.snap b/src/app/containers/Navigation/__snapshots__/index.test.jsx.snap index 748c8718269..1a18abc4cee 100644 --- a/src/app/containers/Navigation/__snapshots__/index.test.jsx.snap +++ b/src/app/containers/Navigation/__snapshots__/index.test.jsx.snap @@ -1,7 +1,12 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Navigation Container snapshots should render a Navigation with igbo links correctly 1`] = ` -.c10 { +exports[`Consent Banner Container should correctly render amp navigation 1`] = ` +.c3 { + color: #fff; + fill: currentColor; +} + +.c9 { -webkit-clip-path: inset(100%); clip-path: inset(100%); -webkit-clip: rect(1px,1px,1px,1px); @@ -13,11 +18,604 @@ exports[`Navigation Container snapshots should render a Navigation with igbo lin margin: 0; } +.c4 { + background-color: #222222; + clear: both; +} + +.c5 { + list-style-type: none; + margin: 0; + padding: 0 0.5rem; + border-bottom: 0.125rem solid #3F3F42; +} + +.c6 { + padding: 0.75rem 0; + border-bottom: 0.0625rem solid #3F3F42; +} + +.c6:last-child { + padding-bottom: 1rem; + border: 0; +} + +.c7 { + font-size: 0.9375rem; + line-height: 1.25rem; + font-family: ReithSans,Helvetica,Arial,sans-serif; + font-weight: 400; + font-style: normal; + color: #FFFFFF; + -webkit-text-decoration: none; + text-decoration: none; +} + +.c7:hover, +.c7:focus { + -webkit-text-decoration: underline; + text-decoration: underline; +} + +.c8 { + border-left: 0.25rem solid #FFFFFF; + padding-left: 0.5rem; +} + +.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; +} + +.c11 { + list-style-type: none; + padding: 0; + margin: 0; + position: relative; +} + +.c14 { + font-size: 0.9375rem; + line-height: 1.25rem; + font-family: ReithSans,Helvetica,Arial,sans-serif; + font-weight: 400; + font-style: normal; + color: #FDFDFD; + cursor: pointer; + -webkit-text-decoration: none; + text-decoration: none; + display: inline-block; + padding: 0.75rem 1rem; +} + +.c14:hover::after { + content: ''; + position: absolute; + left: 0; + right: 0; + bottom: 0; + border-bottom: 0.25rem solid #FFFFFF; + border-bottom: 0.3125rem solid #FFFFFF; +} + +.c14:focus::after { + content: ''; + position: absolute; + left: 0; + right: 0; + bottom: 0; + border-bottom: 0.25rem solid #FFFFFF; + top: 0; + border: 0.25rem solid #FFFFFF; +} + +.c16 { + font-size: 0.9375rem; + line-height: 1.25rem; + font-family: ReithSans,Helvetica,Arial,sans-serif; + font-weight: 400; + font-style: normal; + color: #FDFDFD; + cursor: pointer; + -webkit-text-decoration: none; + text-decoration: none; + display: inline-block; + padding: 0.75rem 1rem; +} + +.c16:hover::after { + content: ''; + position: absolute; + left: 0; + right: 0; + bottom: 0; + border-bottom: 0.25rem solid #FFFFFF; +} + +.c16:focus::after { + content: ''; + position: absolute; + left: 0; + right: 0; + bottom: 0; + border-bottom: 0.25rem solid #FFFFFF; + top: 0; + border: 0.25rem solid #FFFFFF; +} + +.c13 { + display: inline-block; + position: relative; + z-index: 2; +} + +.c15::after { + content: ''; + position: absolute; + left: 0; + right: 0; + bottom: 0; + border-bottom: 0.25rem solid #FFFFFF; +} + +.c0 { + position: relative; + background-color: #B80000; + border-top: 0.0625rem solid #FFFFFF; +} + +.c0 .c12::after { + left: 0; +} + +@media (min-width:37.5rem) { + .c4 { + display: none; + visibility: hidden; + } +} + +@media (min-width:20rem) and (max-width:37.4375rem) { + .c7 { + font-size: 1rem; + line-height: 1.25rem; + } +} + +@media (min-width:37.5rem) { + .c7 { + font-size: 1rem; + line-height: 1.25rem; + } +} + +@media (min-width:37.5rem) { + .c2 { + display: none; + visibility: hidden; + } +} + +@media (min-width:20rem) { + .c2 { + height: 2.75rem; + width: 2.75rem; + } +} + +@media (min-width:37.5rem) { + .c11 { + overflow: hidden; + } +} + +@media (min-width:20rem) and (max-width:37.4375rem) { + .c14 { + font-size: 1rem; + line-height: 1.25rem; + } +} + +@media (min-width:37.5rem) { + .c14 { + font-size: 1rem; + line-height: 1.25rem; + } +} + +@media (max-width:24.9375rem) { + .c14 { + padding: 0.75rem 0.5rem; + } +} + +@media (min-width:20rem) and (max-width:37.4375rem) { + .c16 { + font-size: 1rem; + line-height: 1.25rem; + } +} + +@media (min-width:37.5rem) { + .c16 { + font-size: 1rem; + line-height: 1.25rem; + } +} + +@media (max-width:24.9375rem) { + .c16 { + padding: 0.75rem 0.5rem; + } +} + +@media (max-width:37.4375rem) { + .c13:last-child { + margin-right: 3rem; + } +} + +@media (min-width:37.5rem) { + .c13::after { + content: ''; + position: absolute; + bottom: 0; + width: 80rem; + border-bottom: 0.0625rem solid #eab3b3; + z-index: -1; + } +} + +@media (max-width:37.4375rem) { + .c0.open { + background-color: #222222; + } +} + +@media (max-width:37.4375rem) { + .c10 { + 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; + } + + .c10::-webkit-scrollbar { + display: none; + } + + .c10: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% ); + } +} + + + + + + + +
+ +
+ + + + + +`; + +exports[`Consent Banner Container should correctly render canonical navigation 1`] = ` .c3 { color: #fff; fill: currentColor; } +.c10 { + -webkit-clip-path: inset(100%); + clip-path: inset(100%); + -webkit-clip: rect(1px,1px,1px,1px); + clip: rect(1px,1px,1px,1px); + height: 1px; + overflow: hidden; + position: absolute; + width: 1px; + margin: 0; +} + .c2 { position: relative; padding: 0; @@ -65,7 +663,7 @@ exports[`Navigation Container snapshots should render a Navigation with igbo lin .c8 { font-size: 0.9375rem; line-height: 1.25rem; - font-family: Helmet,Freesans,Helvetica,Arial,sans-serif; + font-family: ReithSans,Helvetica,Arial,sans-serif; font-weight: 400; font-style: normal; color: #FDFDFD; @@ -100,7 +698,7 @@ exports[`Navigation Container snapshots should render a Navigation with igbo lin .c11 { font-size: 0.9375rem; line-height: 1.25rem; - font-family: Helmet,Freesans,Helvetica,Arial,sans-serif; + font-family: ReithSans,Helvetica,Arial,sans-serif; font-weight: 400; font-style: normal; color: #FDFDFD; @@ -146,6 +744,10 @@ exports[`Navigation Container snapshots should render a Navigation with igbo lin border-bottom: 0.25rem solid #FFFFFF; } +.c12 .c6::after { + left: 0; +} + .c0 { position: relative; background-color: #B80000; @@ -277,7 +879,7 @@ exports[`Navigation Container snapshots should render a Navigation with igbo lin >