Merge pull request #80 from dnbexperience/wip/prepare-screenshot-tests

prepare for screenshot tests
dnbexperience · Feb 6, 2019 · 1ff3c1c · 1ff3c1c
2 parents 7598601 + a88105c
commit 1ff3c1c
Show file tree

Hide file tree

Showing 54 changed files with 1,104 additions and 738 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -71,6 +71,10 @@ jobs:
           name: Build the portal, just to test if the build is successful
           command: yarn build-ci
 
+      - run:
+          name: Run screenshot tests
+          command: test-ci-screenshots
+
   deploy-release:
     docker:
       - image: circleci/node:10.6
@@ -109,6 +113,10 @@ jobs:
           name: Build the portal
           command: yarn build-ci
 
+      - run:
+          name: Run screenshot tests
+          command: test-ci-screenshots
+
       - run:
           name: Deploy the portal
           command: yarn deploy-ci

diff --git a/.drone.yml b/.drone.yml
@@ -47,6 +47,7 @@ steps:
       - yarn test-ci
       - yarn prepublish-ci
       - yarn build-ci
+      - yarn test-ci-screenshots
     when:
       event:
         - push
@@ -80,6 +81,7 @@ steps:
       - yarn test-ci
       - yarn prepublish-ci
       - yarn build-ci
+      - yarn test-ci-screenshots
       - yarn deploy-ci
       - yarn publish-ci
     when:

diff --git a/.travis.yml b/.travis.yml
@@ -31,11 +31,11 @@ jobs:
 
     - stage: deploy-preview
       name: Build a portal preview
-      script: yarn audit-ci && yarn lint-ci && yarn test-ci && yarn prepublish-ci && yarn build-ci
+      script: yarn audit-ci && yarn lint-ci && yarn test-ci && yarn prepublish-ci && yarn build-ci && test-ci-screenshots
 
     - stage: deploy-release
       name: Deploy portal and make eventually NPM release
-      script: yarn audit-ci && yarn lint-ci && yarn test-ci && yarn prepublish-ci && yarn build-ci && yarn deploy-ci && yarn publish-ci
+      script: yarn audit-ci && yarn lint-ci && yarn test-ci && yarn prepublish-ci && yarn build-ci && test-ci-screenshots && yarn deploy-ci && yarn publish-ci
 
 stages:
   - name: test

diff --git a/package.json b/package.json
@@ -28,7 +28,7 @@
     "test": "yarn workspace dnb-ui-lib test",
     "test:update": "yarn workspace dnb-ui-lib test:update",
     "test-ci": "yarn workspace dnb-ui-lib test-ci && yarn workspace dnb-design-system-portal test-ci",
-    "test-ci:update": "yarn test-ci --updateSnapshot"
+    "test-ci-screenshots": "yarn workspace dnb-ui-lib test-ci-screenshots"
   },
   "devDependencies": {
     "husky": "^1.3.1"

diff --git a/packages/dnb-design-system-portal/package.json b/packages/dnb-design-system-portal/package.json
@@ -34,7 +34,7 @@
     "start": "rm -rf .cache | cross-env DEBUG=gatsby:query-watcher gatsby develop",
     "test": "jest --watch",
     "test-ci": "jest --ci",
-    "test:staged": "jest --bail --findRelatedTests :#keep this whitespace",
+    "test:staged": "jest --bail --findRelatedTests ",
     "test:update": "jest --updateSnapshot",
     "prettier:components": "prettier --loglevel warn --write './src/uilib/{components,patterns}/**/*.{js,md}' './src/pages/uilib/{components,elements,patterns}/*.{js,md}'",
     "prettier:diff": "prettier --list-different '{scripts,stories,src}/**/*.{js,md}'",
@@ -71,15 +71,15 @@
     "del": "^3.0.0",
     "emotion": "^10.0.7",
     "enzyme": "^3.8.0",
-    "enzyme-adapter-react-16": "^1.9.0",
+    "enzyme-adapter-react-16": "^1.9.1",
     "enzyme-to-json": "^3.3.5",
     "eslint": "^5.13.0",
     "eslint-plugin-import": "^2.16.0",
     "eslint-plugin-jsx-a11y": "^6.2.1",
     "eslint-plugin-react": "^7.12.4",
     "front-matter": "^3.0.1",
     "fs-extra": "^7.0.1",
-    "gatsby": "^2.0.114",
+    "gatsby": "^2.0.115",
     "gatsby-link": "^2.0.10",
     "gatsby-mdx": "^0.3.5",
     "gatsby-plugin-catch-links": "^2.0.10",
@@ -93,7 +93,7 @@
     "gatsby-remark-images": "^3.0.3",
     "gatsby-source-filesystem": "^2.0.20",
     "gh-pages": "^2.0.1",
-    "jest": "^23.6.0",
+    "jest": "^24.1.0",
     "jest-css-modules": "^1.1.0",
     "jest-emotion": "^10.0.7",
     "jest-raw-loader": "^1.0.1",
@@ -112,7 +112,7 @@
     "react-fake-props": "^0.3.1",
     "react-helmet": "^5.2.0",
     "react-live": "^1.12.0",
-    "react-live-replacement": "https://github.com/tujoworker/react-live/",
+    "react-live-replacement": "https://github.com/tujoworker/react-live/tarball/d9a44a8b8093a3cb57734d901200f7b66cd30515",
     "stylelint": "^9.10.1",
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-processor-styled-components": "^1.5.2"

diff --git a/packages/dnb-design-system-portal/src/core/jest/jestSetup.js b/packages/dnb-design-system-portal/src/core/jest/jestSetup.js
@@ -3,7 +3,6 @@
  *
  */
 
-// import '@babel/polyfill' // jest v24 may have usage of this
 import { createSerializer } from 'jest-emotion'
 import fakeProps from 'react-fake-props'
 import { mount, render, shallow } from './enzyme'

diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/button/Examples.js b/packages/dnb-design-system-portal/src/pages/uilib/components/button/Examples.js
@@ -86,7 +86,6 @@ class Example extends PureComponent {
         </ComponentBox>
         <ComponentBox>
           {/* @jsx */ `
-<>
 <Button
   text="Primary button with href"
   href="?no-cache=1"
@@ -102,12 +101,10 @@ class Example extends PureComponent {
   icon_position="left"
   icon="chevron_left"
 />
-</>
           `}
         </ComponentBox>
         <ComponentBox scope={{ question }}>
           {/* @jsx */ `
-<>
   <Button
     title="Disabled Icon only Button"
     icon="calendar"
@@ -125,7 +122,6 @@ class Example extends PureComponent {
     icon={question}
   />
   <p className="example-caption">Button with Icon only</p>
-</>
           `}
         </ComponentBox>
         <ComponentBox scope={{ Bell }}>

diff --git a/packages/dnb-design-system-portal/src/pages/uilib/usage/accessibility/icons.md b/packages/dnb-design-system-portal/src/pages/uilib/usage/accessibility/icons.md
@@ -26,9 +26,7 @@ Use `size="auto"` to force the icon to inherit the size of its parent element.
 
 <ComponentBox scope={{Beach}}>
 {`
-<>
-  <h1>My H1 with an Icon <Icon icon={Beach} title="Beach" size="auto" /></h1>
-  <h4>My H4 with the same Icon <Icon icon={Beach} title="Beach" size="auto" /></h4>
-</>
+<h1>My H1 with an Icon <Icon icon={Beach} title="Beach" size="auto" /></h1>
+<h4>My H4 with the same Icon <Icon icon={Beach} title="Beach" size="auto" /></h4>
 `}
 </ComponentBox>
diff --git a/...esign-system-portal/src/pages/uilib/usage/customisation/component-properties.md b/...esign-system-portal/src/pages/uilib/usage/customisation/component-properties.md
@@ -18,19 +18,17 @@ But here You have some examples. You can even modify them right away in the Brow
 
 <ComponentBox>
 {`
-<>
-  <Button
-    variant="secondary"
-    text="Secondary Button"
-    icon="chevron_right_medium"
-    size="large"
-  />
-  <Button
-    icon="chevron_right"
-    icon_size="medium"
-    size="large"
-  />
-</>
+<Button
+  variant="secondary"
+  text="Secondary Button"
+  icon="chevron_right_medium"
+  size="large"
+/>
+<Button
+  icon="chevron_right"
+  icon_size="medium"
+  size="large"
+/>
 `}
 </ComponentBox>
 

diff --git a/packages/dnb-design-system-portal/src/shared/inlineTags/CodeBlock.js b/packages/dnb-design-system-portal/src/shared/inlineTags/CodeBlock.js
@@ -188,7 +188,12 @@ class LiveCode extends PureComponent {
           )}
           {showSyntax && (
             <Syntax>
-              <Code source={generateElement({ code: codeToUse, scope })} />
+              <Code
+                source={generateElement({
+                  code: `<>${codeToUse}</>`,
+                  scope
+                })}
+              />
             </Syntax>
           )}
         </LiveProvider>

diff --git a/packages/dnb-design-system-portal/src/shared/parts/Layout.js b/packages/dnb-design-system-portal/src/shared/parts/Layout.js
@@ -3,21 +3,22 @@
  *
  */
 
-import { setPageFocusElement } from 'dnb-ui-lib/src/shared/tools'
 import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
 import { Link } from 'gatsby'
+import classnames from 'classnames'
+import styled from '@emotion/styled'
+import { css, Global } from '@emotion/core'
 
-import PropTypes from 'prop-types'
 import MainMenu from '../menu/MainMenu'
 import Sidebar from '../menu/SidebarMenu'
 import StickyMenuBar from '../menu/StickyMenuBar'
 import { markdownStyle } from './Markdown'
-import styled from '@emotion/styled'
-import { css, Global } from '@emotion/core'
-import classnames from 'classnames'
 import { buildVersion } from '../../../package.json'
 import { MainMenuProvider } from '../menu/MainMenuContext'
 import { SidebarMenuProvider } from '../menu/SidebarMenuContext'
+import { setPageFocusElement } from 'dnb-ui-lib/src/shared/tools'
+import { Logo } from 'dnb-ui-lib/src'
 
 class Layout extends PureComponent {
   static propTypes = {
@@ -37,9 +38,7 @@ class Layout extends PureComponent {
           {/* Load the StickyMenuBar to make use of the grid demo */}
           <StickyMenuBar preventBarVisibility={true} />
           <Content className="fullscreen-page">
-            <MaxWidth className="dnb-app-content-inner">
-              {children}
-            </MaxWidth>
+            <Main className="dnb-app-content-inner">{children}</Main>
           </Content>
           <Footer />
         </div>
@@ -58,8 +57,8 @@ class Layout extends PureComponent {
           <Wrapper className="content-wrapper">
             <Sidebar location={location} showAll={false} />
             <Content>
-              <MaxWidth className="dnb-app-content-inner">
-                {children}
+              <MaxWidth>
+                <Main className="dnb-app-content-inner">{children}</Main>
                 <Footer />
               </MaxWidth>
             </Content>
@@ -93,7 +92,7 @@ const Wrapper = styled.div`
 `
 
 const Content = ({ className, children }) => (
-  <Main
+  <ContentWrapper
     tabIndex="-1"
     id="dnb-app-content"
     className={classnames(
@@ -105,7 +104,7 @@ const Content = ({ className, children }) => (
     css={markdownStyle}
   >
     {children}
-  </Main>
+  </ContentWrapper>
 )
 Content.propTypes = {
   children: PropTypes.node.isRequired,
@@ -115,7 +114,7 @@ Content.defaultProps = {
   className: null
 }
 
-const Main = styled.main`
+const ContentWrapper = styled.div`
   position: relative;
   z-index: 2; /* heigher than styled.aside */
 
@@ -131,8 +130,8 @@ const Main = styled.main`
   padding: 0;
 
   /* we use padding here, insted of margin,
-    because applyPageFocus is else scrolling the page unwanted
-    height of StickyMenuBar - 1px border */
+  because applyPageFocus is else scrolling the page unwanted
+  height of StickyMenuBar - 1px border */
   padding-top: 4rem;
 
   .dnb-app-content-inner {
@@ -160,47 +159,57 @@ const Main = styled.main`
   }
 `
 
-const MaxWidth = styled.div`
-  max-width: 100%;
-  width: 50vw;
+const Main = styled.main`
+  width: 100%;
   padding: 0 2rem;
+`
+
+const MaxWidth = styled.div`
+  width: 100%;
 
-  @media (max-width: 120rem) {
-    width: 100%;
-    position: relative;
+  /* for whider screens */
+  @media (min-width: 70em) {
+    max-width: 70vw;
   }
 `
 
 const FooterWrapper = styled.footer`
   position: relative;
   z-index: 2; /* 1 heigher than aside */
 
-  margin-top: 3rem;
-  padding: 1rem 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  padding: 1rem;
 
   border-top: 1px solid var(--color-black-border);
-  text-align: left;
+  background-color: var(--color-emerald-green);
 
-  .is-fullscreen & {
-    padding: 1rem;
-    background: var(--color-mint-green-12);
+  &,
+  a {
+    color: var(--color-white);
   }
-
   a {
     margin-left: 1rem;
   }
+  small {
+    padding: 0 2rem;
+  }
 
   .toggle-grid {
     margin-left: 1rem;
   }
 `
 const Footer = () => (
   <FooterWrapper>
+    <Logo height="40" color="white" />
     <small>
       Last Portal update: {buildVersion}
       <Link to="/license" className="dnb-no-anchor-underline">
         Copyright (c) 2018-present DNB.no
       </Link>
     </small>
+    <span />
   </FooterWrapper>
 )