bbc / simorgh Goto Github PK

Is your feature request related to a problem? Please describe.
We should map over and parse text blocks and render paragraphs.

Describe the solution you'd like
A Text component that maps thorough blocks and renders text into a paragraph element.

Additional context
The Text component should be separated into its own file, and not integrate with other components.

Snyk is reporting a vulnerability with a low severity in the 'braces' package of '[email protected]': https://snyk.io/test/github/bbc/simorgh#npm:braces:20180219

We should fix this.

Is your feature request related to a problem? Please describe.
Every time Greenkeeper update one of our dependencies, our package.lock file falls out of date. We need to automate this in order to save dev time.

Describe the solution you'd like
The ideal solution would make use of https://github.com/greenkeeperio/greenkeeper-lockfile

Describe alternatives you've considered

• Updating the package.lock file manually every time (time consuming)
• Adding another build step for updating this file (unnecessarily complex)

Additional context
N/A.

Describe the bug
Travis CI builds are slow ~8 minutes.

Suggestions:

1. to cache .npm & .cache directories.
2. to parallelise the tests a) npm test b) test:e2e:ci c) test:storybook:ci

Is your feature request related to a problem? Please describe.
We should create a SubHeading component that takes the sub-heading block as a prop. The SubHeading component should then parse the props and render a h2 element from the props.

Describe the solution you'd like
A SubHeading component that reaches into the subheading block, extracts the needed properties and renders a h2 element.

The SubHeading component should be separated into its own file, and not integrate with other components - integration will be done in another PR.

Is your feature request related to a problem? Please describe.
We should create an Image component that takes the image block as a prop. The Image component should then parse the props and render an img element from the props.

The element can just render a random image but should have the alt text and caption (if applicable).

Describe the solution you'd like
An Image component that maps thorough blocks and renders an img element containing the altText, caption (if applicable) and a random image src.

Additional context
The Image component should be separated into its own file, and not integrate with other components. We will do this in another PR.

Describe the bug
One of the Cypress end to end tests is failing on the latest branch.

To Reproduce
Steps to reproduce the behavior:
Go to the latest branch. Run end to end tests according to instructions here https://github.com/bbc/simorgh#end-to-end-tests

Expected behavior
No error

Screenshots

Describe the bug
When we run the Jest tests, npm run test:unit we get this warning

Warning: React depends on requestAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills

To Reproduce
Steps to reproduce the behavior:

1. npm run test:unit
2. Type a and click enter to run all tests
3. See error

Expected behavior
No error

Additional context
Add any other context about the problem here.

Is your feature request related to a problem? Please describe.
We have a lot of JSON files in our repo and CRing them is tedious given that we have to lint each one each time.

Describe the solution you'd like
Add JSON linting to eslint

Is your feature request related to a problem? Please describe.
For external readers and also BBC staff the long term aim of this repo is unclear and they will be unaware of what we (core maintainers) have extensively planned re the medium term (next few months) deliverables.

Describe the solution you'd like
Add documentation which is highly accessible which addresses all points above.

Describe alternatives you've considered
Define and use milestones - can be done or not as part of the above.

Describe the bug
The e2e test scripts fail unless you already have cypress installed.

To Reproduce
Most simply try it on a machine which has never run cypress, follow readme setup instructions and then run e2e tests

Expected behavior
e2e tests run

Additional context
Can be fixed by making cypress a dev dependency

We have various article scenarios as JSON in/data/, but no schema.

A schema should be added. @PaulChinkwende defined a drafted schema for the Article in https://swagger.io/tools/swaggerhub/ some time ago, we should set this up to match the examples in /data and then validate our data against it with automated tests.

We must use the OpenAPI 3.0 Schema and I strongly advise using YAML to allow comments.

I suggest using something like: https://www.npmjs.com/package/swagger-cli and https://www.npmjs.com/package/swaggest-test

NB we should validate all our test articles in the repo. In the future, this test can be run on real article payloads on load of the article page so errors can be caught pre-parsing. For now though we only need to test our data endpoints.

Is your feature request related to a problem? Please describe.
We now serve static article data over /data/scenario-[NUMBER].json and we should be able to fetch a single scenario (01).

Describe the solution you'd like
In the Article component fetch the data in a getInitialProps function call and return the response as a prop.

Additional context
This is a prerequisite for #45 and routing.

This depends on #37.

Snyk is reporting a vulnerability with a medium severity in the 'content-type-parser' package of '[email protected]': https://snyk.io/test/github/bbc/simorgh#npm:content-type-parser:20170905

We should fix this.

Is your feature request related to a problem? Please describe.
We currently (and unadvertised) have this app publicly available. We should ensure it isn't indexed by search engines by accident now or before we want to make it discoverable.

Describe the solution you'd like
Add nofollow link, google description: https://support.google.com/webmasters/answer/96569?hl=en

Additional context
This seems a little odd to do on the public repo, but I think it's critical for us. I suggest we add a comment and note in the readme explaining that if this repo is to be used by others it should be removed. Also we must add a TODO item to remove the nofollow once we're ready for production scale usage (our infrastructure defined in a private repo is ready for millions of concurrent visits).

Is your feature request related to a problem? Please describe.
We should add cypress tests to ensure the application /status url returns a 200

Is your feature request related to a problem? Please describe.
https://github.com/bbc/simorgh/tree/latest/data currently only has two examples

Describe the solution you'd like
We want to add at least a dozen more examples, specifically variants of articles in English.

Additional context
We have this in an excel and we want to write it up in JSON format and add it to the repo

Currently running the e2e tests requires having 2 tabs - one to run the server and one to run the tests.

We tried chaining the starting of the server and running the tests (npm run dev & cypress run), however it doesn't stop the server which then causes issues.

This ticket is to find a way to stop the server.

Initial thoughts:
*explore if there is support within razzle/node server to easily stop a running server
*kill the port the server is running on after the tests finish
*use a package like forever to start and stop the server

NB we also want to change the command to run tests against the production server

Is your feature request related to a problem? Please describe.
We should be able to run our e2e tests easily against both dev and production builds.

Describe the solution you'd like
Add a variable to the npm test:e2e script so that it can be run against prod.
EG: npm test:e2e --env=prod

Describe alternatives you've considered
This could be separated out into a new script.
EG: npm test:e2e:prod

Additional context
This work is dependant on #58 being finished as it requires the chaining of starting the server and running the tests.

Is your feature request related to a problem? Please describe.
Now we can fetch article data dynamically, we should validate the id param to ensure that we do not fetch article data needlessly.

Describe the solution you'd like
A validation of the id parameter before fetching data to ensure that it is in the format scenario-[number].

Additional context
Depends on #136.

Is your feature request related to a problem? Please describe.
Improve quality of code in commits and pushes

Describe the solution you'd like
Add git hook for precommit (lint) and prepush(test)

Describe alternatives you've considered
Forcing everyone to use eslint in their editor (impractical really)

Chiefly for @jamesbrumpton to add e2e tests to the Storybook setup

Is your feature request related to a problem? Please describe.
We should update the Video component to render a Video player.
The Video component should parse the props and render a video using the BBC SMP player.

We have examples in the Video container storybook http://localhost:7080/simorgh/?selectedKind=Video%20Container
Note that SMP only works on BBC domains, so it will not be visible on the hosted version of Storybook. However, you can see this locally.

Describe the solution you'd like

• Have a working video player locally, using Storybook.
• Should have the correct poster image
• Test that when the video is clicked on, the video plays (as in the frame changes)
• Test that when the video is navigated to via keyboard & pressed 'enter', the video plays (as in the frame changes)
• Duration should be passed in, in seconds, to the SMP & it should display in 01:23 format on the play button.

Testing notes

Checking data that we're passing it matches the player, since the actual player's functionality is self-contained within SMP.

• Dev insight: Unit tests should be sufficient.

Additional context
SMP cookbook: http://cookbook.tools.bbc.co.uk/news
Proof of concept PR: https://github.com/bbc/simorgh/pull/202/files

Describe the bug
Fix the undefined proptype to be propType for blockId

To Reproduce
Steps to reproduce the behavior:

1. Run npm test

Expected behavior
blockId should be propType.string, not proptype.string.

Is your feature request related to a problem? Please describe.
There is no main content in the Article component.

Describe the solution you'd like
Integrate the MainContent component with the Article component. The props that are passed should be hard-coded.

Will need to update the Article stories with data variants, and tests including integration tests.

Additional context
Depends on #45.

Is your feature request related to a problem? Please describe.
Currently, end to end tests are not run on CI - only linting and unit tests are.
This can cause problems, such as this one, where Cypress end to end tests that were merged into latest failed.

Describe the solution you'd like
To add end to end tests on Travis CI

Blocked by: #54

Create a new component in simorgh to render a very basic BBC News header.

This should contain:
*A red background
*White text saying BBC NEWS
*A link from the text to https://www.bbc.com/news

Notes
*We will build a component library to move this component to in a separate issue in the near future, but first we will do a basic render of our articles

Is your feature request related to a problem? Please describe.
We want to use styled-components for all component styling, we need to add it to the repo before we can use it. It therefore blocks a lot of other issues.

Additional context
We should add an obvious style to the Article component as the proof it works on the main route and also test it in Storybook.

The public directory that is statically served here: https://github.com/bbc/simorgh/blob/latest/src/server/index.js#L13, uses the RAZZLE_PUBLIC_DIR build time environment variable.

This variable is an absolute path. This is problematic the Simorgh application is built on a different environment that it is served from; the variable is a path to a directory that does not exist.

We should override the variable to be a relative path to the public directory.

Is your feature request related to a problem? Please describe.
As a precursor for fetching article data dynamically, rather than it be hard-coded, we need to parameterise the Article component route.

Describe the solution you'd like
Parameterise the article path with an id parameter. The route can look something like /article/:id. Follow the information here.

Soft dependency on: #51

Is your feature request related to a problem? Please describe.
We currently serve all articles via /data we actually only want to serve a subset in our production build.

Describe the solution you'd like
Restrict the routing/serving of the articles in /data including those added in #51 (and other similar issues if and when they arise) to only the subset that are real and publishable articles.

Is your feature request related to a problem? Please describe.
Linting doesn't run on the tests, it only runs on the /src folder.

Describe the solution you'd like
Alter the linting script so it runs on cypress tests also.

Similar blocks of code found in 2 locations. Consider refactoring.

https://codeclimate.com/github/bbc/simorgh/src/app/components/Article.test.jsx#issue_5b1566349e97810001000024

Is your feature request related to a problem? Please describe.
We should render blocks JSON to the DOM as string.

Describe the solution you'd like
Using the props that will be passed by #43, we should loop through the blocks object and stringify each block and render it to the DOM.

Additional context
Depends on:

• #43

Is your feature request related to a problem? Please describe.
The current Pull Request Template refers to JIRA tickets. We are now not using JIRA, but instead using Github Issues.

Describe the solution you'd like
The Pull Request Template should be updated to remove references to JIRA and add references to Issues.

Is your feature request related to a problem? Please describe.
#67 adds code coverage we should report this back to the repo

Describe the solution you'd like
Probably to be done via Travis CI and reporting the coverage to code climate

Additional context
Blocked by: #67

Describe the bug
Greenkeeper should be reading the package.json and reporting on a PR the up-to-date status of the branch dependencies. It isn't doing this (or anything it would seem).

To Reproduce
See the greenkeeper check on any PR

Additional context
NB github has also stopped mapping the dependencies under insights. This indicates some parsing error of our package.json could be causing both bugs.

I suspect greenkeeper also isn't opening the PRs for us when a dependency is found to be out of date, but I haven't checked yet.

We should add code coverage reports to our tests.

Jest now comes with Istanbul.js which creates code coverage reports
https://istanbul.js.org/docs/tutorials/jest/
https://github.com/facebook/jest/blob/master/docs/Configuration.md

Add thresholds at 90%, to encourage high code coverage.
Outcomes - when we run 'npm test' in our application, we can see the percentage test coverage.

Is your feature request related to a problem? Please describe.
We should parse the Headline block and render it.

Describe the solution you'd like
A Headline component that reaches into the Headline block, extracts the needed properties and renders a h1 element.

The Headline component should be separated into its own file, and not integrate with other components. Render into a h1 element, not this component. Integration will be done in another PR.

Blocked by: #54

Create a new component in simorgh to render a very basic BBC News footer.

This should contain:
*A grey background
*Copyright text

Notes
*The text should be something along the lines of Copyright © 2018 BBC. The BBC is not responsible for the content of external sites. (TBC)
*We should try to automate this so we don't have to keep updating it
*We will build a component library to move this component to in a separate issue in the near future, but first we will do a basic render of our articles

Is your feature request related to a problem? Please describe.
Now we have a parameterised route, we should fetch article data dynamically.

Describe the solution you'd like
Extract the match parameter from the parameters passed to getInitialProps, extract the id and interpolate the value and this string. Follow the information here.

Additional context
Depends on #135.

Is your feature request related to a problem? Please describe.
Add a Service Worker and a manifest.json file. These are needed to make the application a Progressive Web App and later on save data offline.

Describe the solution you'd like
Register a service worker on the / route.

Describe the bug
It appears as though you have some packages in the dependencies section of your package.json that ought to be in devDependencies instead. Examples include https://github.com/bbc/simorgh/blob/latest/package.json#L34-L41 and https://github.com/bbc/simorgh/blob/latest/package.json#L44

To Reproduce
Can be observed in https://github.com/bbc/simorgh/blob/latest/package.json and will be apparent in the node_modules folder when the app is installed via npm install simorgh

Expected behavior
Packages such as eslint-config-airbnb are not needed when simorgh is installed via npm install simorgh on a production server and should therefore not be installed.

Desktop (please complete the following information):

• OS: macOS 10.13.5
• Node v10.0.0, npm 6.1.0

Additional context
This could have been an oversight / misunderstanding or it could be that you have a lint rule jobby enforcing this. If the latter, I think the rule needs fixing too.

Is your feature request related to a problem? Please describe.
The MainContent component currently defines a Headline component that is a styled h1 element. We should copy it to the Headline component.

Describe the solution you'd like
Move the styled h1 component to the Headline component.

Additional context
We should not integrate the Headline component with the MainContent component, this integration will happen elsewhere.

Depends on #116.

Lighthouse is a tool that can be run within Google Chrome's Dev Tools. The same tool can also be run via CI. This task is to add the Lighthouse Best Practice tool as a separate npm script task lighthouse. We can do this by installing lighthouse-cli as a dependency.

https://github.com/googlechrome/lighthouse

There is configuration information here: https://github.com/GoogleChrome/lighthouse/blob/master/docs/configuration.md
This task will not include running the task as part of the build pipeline, since our page does not meet our threshold (90%) and will fail until we add a manifest with a short_name.

Outcome
When we run npm run lighthouse, we see the results of the Lighthouse Best Practice tests in the cli.

Use npm ci instead of npm install in the Travis build.

This can be significantly faster than a regular npm install since it skips some user-facing features.
It's more strict than a regular install, which can help catch errors or inconsistencies caused by the incrementally-installed local environments of most npm users.
https://docs.npmjs.com/cli/ci

Is your feature request related to a problem? Please describe.
There's no need to manually import each story. It's wasteful and easy to forget

Describe the solution you'd like
Use this https://storybook.js.org/basics/writing-stories/#loading-stories-dynamically

Is your feature request related to a problem? Please describe.

Currently running the lighthouse tests require having 2 tabs - one to run the server and one to run the tests.

Describe the solution you'd like

We should run one command e.g npm run lighthouse which does both start the server and runs our lighthouse tests sequentially all in one cli tab. Similar to our e2e tests.

Describe the bug
When running the application locally some machines encounter an FSevent error when running npm test.

To Reproduce
npm test

Expected behavior
Should run the tests without error.

Screenshots

Local setup

• OS: 10:13
• Node: 8.11.2
• NPM: 6.1

Additional context
I haven't yet figured out the difference between a machine setup that works and one that doesn't.