diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index db7131ac821..45a7cdb28e7 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -17,5 +17,5 @@ _A very high-level summary of easily-reproducible changes that can be understood **Testing:** - [ ] Automated (jest and/or cypress) tests added (for new features) or updated (for existing features) -- [ ] If necessary, I have run the local E2E non-smoke tests relevant to my changes (`CYPRESS_APP_ENV=local CYPRESS_SMOKE=false npm run test:e2e:interactive`) +- [ ] If necessary, I have run the local E2E non-smoke tests relevant to my changes (`CYPRESS_APP_ENV=local CYPRESS_SMOKE=false yarn run test:e2e:interactive`) - [ ] This PR requires manual testing diff --git a/.github/workflows/simorgh-e2e-tests.yml b/.github/workflows/simorgh-e2e-tests.yml index 4137b2ba76a..e19e8603d2b 100644 --- a/.github/workflows/simorgh-e2e-tests.yml +++ b/.github/workflows/simorgh-e2e-tests.yml @@ -25,5 +25,5 @@ jobs: - name: Run Simorgh E2Es uses: cypress-io/github-action@v2 with: - build: npm run build - start: npm start + build: yarn run build + start: yarn start diff --git a/.github/workflows/simorgh-misc-checks.yml b/.github/workflows/simorgh-misc-checks.yml index 524ddad2b99..833a6f765ac 100644 --- a/.github/workflows/simorgh-misc-checks.yml +++ b/.github/workflows/simorgh-misc-checks.yml @@ -62,10 +62,10 @@ jobs: run: npx apache2-license-checker - name: Duplicate Dependency Checker - run: npm run test:dependencies + run: yarn run test:dependencies - name: Linting - run: npm run test:lint + run: yarn run test:lint - name: NPM Audit run: npx audit-ci --config audit-ci.json diff --git a/AdHocCypress/README.md b/AdHocCypress/README.md index 9c39ee3b60f..0da32254b4b 100644 --- a/AdHocCypress/README.md +++ b/AdHocCypress/README.md @@ -1,17 +1,19 @@ # Ad Hoc Cypress Tests ## General approach to end-to-end (E2E) testing + This is documented in [the README in the primary directory of our cypress tests](https://github.com/bbc/simorgh/blob/latest/cypress/README.md). ## This suite of tests + The purpose of this test suite is to allow for testing of ad-hoc functionality within the Simorgh application, without affecting the tests which are executed as part of the End-to-End tests in both the Test and Live environments. ## Running Ad Hoc Tests -| Environment | Command | -| ----------- | --------------------------------------------- | -| local | `CYPRESS_APP_ENV=local npm run cypress:adhoc` | -| test | `CYPRESS_APP_ENV=test npm run cypress:adhoc` | -| live | `CYPRESS_APP_ENV=live npm run cypress:adhoc` | +| Environment | Command | +| ----------- | ---------------------------------------------- | +| local | `CYPRESS_APP_ENV=local yarn run cypress:adhoc` | +| test | `CYPRESS_APP_ENV=test yarn run cypress:adhoc` | +| live | `CYPRESS_APP_ENV=live yarn run cypress:adhoc` | As with the primary Cypress tests, the same [environment variables](https://github.com/bbc/simorgh#environment-variables) can also be used with the `cypress:adhoc` command diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6832b03dc29..bfa8706d780 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -144,7 +144,7 @@ Pick a JSON file under `data/news/articles/[id].json`, and: 1. add an example of your block somewhere in the `content.model.blocks` array. 2. add your new component to the `blockTypes` array. -Run `npm run dev` and you should see your component at your article of choice, eg http://localhost:7080/news/articles/c0000000001o +Run `yarn run dev` and you should see your component at your article of choice, eg http://localhost:7080/news/articles/c0000000001o #### Update the schema diff --git a/README.md b/README.md index 92d307db543..f075837aa49 100644 --- a/README.md +++ b/README.md @@ -179,7 +179,7 @@ yarn install To run this application locally, with hot-reloading, run ``` -npm run dev +yarn run dev ``` The application will start on [http://localhost:7080](http://localhost:7080). @@ -228,7 +228,7 @@ You can find other pages types by looking through our routes and their associate We use Storybook for developing components in isolation from the Simorgh Application. You can access this at [https://bbc.github.io/simorgh/](https://bbc.github.io/simorgh/) -To run locally `npm run storybook`, it will then be available at [http://localhost:9001/](http://localhost:9001/). Introduction to and documentation for Storybook is here: [https://storybook.js.org/basics/introduction/](https://storybook.js.org/basics/introduction/). +To run locally `yarn run storybook`, it will then be available at [http://localhost:9001/](http://localhost:9001/). Introduction to and documentation for Storybook is here: [https://storybook.js.org/basics/introduction/](https://storybook.js.org/basics/introduction/). When viewing Video stories locally, make sure to use a BBC domain, as outlined in the [changing request location section](https://github.com/bbc/simorgh#changing-request-location). Video will not work in the hosted version of Storybook linked above for this reason. @@ -239,9 +239,9 @@ Please also note that if you would like to see the components rendered with our ## Production build locally To run this application locally with a production build, run: -`npm run build && npm run start`. +`yarn run build && yarn run start`. -We use `npm run build` locally which bundles the application pointing at localhost for data and static assets. +We use `yarn run build` locally which bundles the application pointing at localhost for data and static assets. ## Using environment builds locally @@ -251,14 +251,14 @@ To run TEST bundles on localhost: - In `envConfig/test.env` change the values of: - `LOG_DIR='/var/log/simorgh'` to `LOG_DIR='log'` -- Then run `rm -rf build && npm run build:test && npm run start` +- Then run `rm -rf build && yarn run build:test && yarn run start` - Visit a test article: http://localhost:7080/news/articles/c0g992jmmkko To run LIVE bundles on localhost: - In `envConfig/live.env` change the values of: - `LOG_DIR='/var/log/simorgh'` to `LOG_DIR='log'` -- Then run `rm -rf build && npm run build:live && npm run start` +- Then run `rm -rf build && yarn run build:live && yarn run start` - Visit a live article: http://localhost:7080/news/articles/c8xxl4l3dzeo ## Changing request location @@ -281,15 +281,15 @@ On deployment `make buildCi` is run in the CI environment which creates bundles ### Bundle analysis reports -Every run of `npm run build` will update the bundle analysis files in the repo. To view a breakdown of the bundle size, open the generated html report in a browser `./reports/webpackBundleReport.html` This is generated via `webpack-bundle-analyzer`. The data is also available as json `./reports/webpackBundleReport.json`. +Every run of `yarn run build` will update the bundle analysis files in the repo. To view a breakdown of the bundle size, open the generated html report in a browser `./reports/webpackBundleReport.html` This is generated via `webpack-bundle-analyzer`. The data is also available as json `./reports/webpackBundleReport.json`. ## Tests ### Linting and unit tests -We have linting with the [Airbnb styleguide](https://github.com/airbnb/javascript/tree/master/react) and we use [Prettier](https://github.com/prettier/prettier) as a code formatter. They can be run with `npm run test:lint`. +We have linting with the [Airbnb styleguide](https://github.com/airbnb/javascript/tree/master/react) and we use [Prettier](https://github.com/prettier/prettier) as a code formatter. They can be run with `yarn run test:lint`. -We have [Jest](https://facebook.github.io/jest) unit tests that can be run with `npm run test:unit`. +We have [Jest](https://facebook.github.io/jest) unit tests that can be run with `yarn run test:unit`. `npm test` runs both sets of these. @@ -300,14 +300,14 @@ We have [Jest](https://facebook.github.io/jest) unit tests that can be run with We use [Cypress](https://www.cypress.io/) for our end-to-end tests. To run the [smoke tests](https://github.com/bbc/simorgh/tree/latest/cypress/integration#how-our-cypress-tests-work) locally, run this single command: ``` -npm run test:e2e +yarn run test:e2e ``` It will spin up a production server on port 7080 and run the Cypress tests against that. To run the smoke tests interactively, run: ``` -npm run test:e2e:interactive +yarn run test:e2e:interactive ``` This loads a user interface which easily allows for individual tests to be run alongside a visual stream of the browser, as the tests run. @@ -328,16 +328,16 @@ These commands can be run in combination. #### Full suite of tests -The default way to run the e2e suite aka `npm run test:e2e` or `npm run test:e2e:interactive` runs a subset of our tests, otherwise know as _smoke tests_. To run the full suite: +The default way to run the e2e suite aka `yarn run test:e2e` or `yarn run test:e2e:interactive` runs a subset of our tests, otherwise know as _smoke tests_. To run the full suite: -`CYPRESS_SMOKE=false npm run test:e2e` +`CYPRESS_SMOKE=false yarn run test:e2e` #### Limiting scope of runs Tests can be restricted to only run for a single service by specifying it using the `CYPRESS_ONLY_SERVICE` environment variable. For example: ``` -CYPRESS_ONLY_SERVICE=urdu npm run test:e2e +CYPRESS_ONLY_SERVICE=urdu yarn run test:e2e ``` To run only a particular spec it is necessary to invoke Cypress directly. First ensure Simorgh is already running in another tab and then run (for example, to only run article tests): @@ -357,7 +357,7 @@ Cypress .visit() function is locked to visiting a single domain per test. This b Here is an example command: ``` -CYPRESS_APP_ENV=test CYPRESS_UK=true CYPRESS_SMOKE=true npm run cypress +CYPRESS_APP_ENV=test CYPRESS_UK=true CYPRESS_SMOKE=true yarn run cypress ``` #### Running e2e outside EU @@ -369,13 +369,13 @@ Running Cypress tests outside the EU will not show the EU consent banners on AMP An example command will be: ``` -CYPRESS_SKIP_EU=true npm run cypress:interactive +CYPRESS_SKIP_EU=true yarn run cypress:interactive ``` The following command runs both simorgh and cypress: ``` -CYPRESS_APP_ENV=local CYPRESS_UK=true CYPRESS_SMOKE=true npm run test:e2e +CYPRESS_APP_ENV=local CYPRESS_UK=true CYPRESS_SMOKE=true yarn run test:e2e ``` CYPRESS_APP_ENV can also be set equal to 'test' and 'live'. diff --git a/cypress/integration/README.md b/cypress/integration/README.md index ccee13f7ac7..11ae1e560ae 100644 --- a/cypress/integration/README.md +++ b/cypress/integration/README.md @@ -6,7 +6,7 @@ We have a very bespoke approach to testing. We split our tests in 3 sections: Ap We only run a subset of these integrations tests in CI and CD (those we always run are called smoke tests), but have a regular [cron job](https://en.wikipedia.org/wiki/Cron) that runs all integration tests (a.k.a. e2e tests) in this directory against localhost, test.bbc.com and www.bbc.com. -If you would like to run e2e tests as it runs on the cron pass this env variable to cypress `CYPRESS_SMOKE=false`, so your script could be something like `CYPRESS_SMOKE=false npm run test:e2e`. +If you would like to run e2e tests as it runs on the cron pass this env variable to cypress `CYPRESS_SMOKE=false`, so your script could be something like `CYPRESS_SMOKE=false yarn run test:e2e`. ## [Config used in the tests](../support/config) diff --git a/docs/JavaScript-Bundling-Strategy.md b/docs/JavaScript-Bundling-Strategy.md index f87357d944c..650521c02b2 100644 --- a/docs/JavaScript-Bundling-Strategy.md +++ b/docs/JavaScript-Bundling-Strategy.md @@ -38,4 +38,4 @@ We use `@loadable/component` to code-split service specific and page type code i ### Total bundles sizes for each page type and service -We use a custom script to output the total JavaScript bundle size for each service and page type after every build. You can view this information in your terminal after running `npm run build`. +We use a custom script to output the total JavaScript bundle size for each service and page type after every build. You can view this information in your terminal after running `yarn run build`. diff --git a/docs/Rendering-Ads.md b/docs/Rendering-Ads.md index e89ac95e0fb..da78655f533 100644 --- a/docs/Rendering-Ads.md +++ b/docs/Rendering-Ads.md @@ -23,7 +23,7 @@ Given you are using Chrome browser. e.g. ![image](https://user-images.githubusercontent.com/30599794/90151074-40bd7f80-dd7e-11ea-985d-902ed04641ac.png) -3. Run local environment: `npm run dev`. If you would like to run with Simorgh's CSP Headers, run the following command: `npm run build && npm run start` +3. Run local environment: `yarn run dev`. If you would like to run with Simorgh's CSP Headers, run the following command: `yarn run build && yarn run start` 4. Visit the home page of one of the services with Ads enabled and append this query string to the url: `?site=test&ads-debug=true` @@ -53,7 +53,7 @@ If you are unable to set a proxy on one of the Windows a11y laptops, you won't b 4. If you can't set the `BBC-Adverts` header in the Windows laptop, you will need to remove [this](https://github.com/bbc/simorgh/blob/latest/src/app/containers/Ad/Canonical/index.jsx#L63) condition from the codebase to be able to render the ad -5. Run Simorgh with a production build `npm run build && npm run start` +5. Run Simorgh with a production build `yarn run build && yarn run start` 6. Connect to your machine running Simorgh using the Windows laptop by visiting the IP address of it appended with the correct query strings diff --git a/package.json b/package.json index 95f7cef06a5..8d3f9efa446 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "bbcA11y": "wait-on -t 20000 http://localhost:7080/status && bbc-a11y", "bbcA11y:ci": "wait-on -t 20000 http://localhost:7080/status && xvfb-run -a bbc-a11y", "build:local": "rm -rf build && cp envConfig/local.env .env && NODE_ENV=production webpack", - "build": "npm run build:local && node ./scripts/bundleSize/index.js", + "build": "yarn run build:local && node ./scripts/bundleSize/index.js", "build:profile": "rm -rf build && cp envConfig/local.env .env && IS_PROD_PROFILE=true NODE_ENV=production webpack", "build:live": "cp envConfig/live.env .env && NODE_ENV=production webpack", "build:live:debug": "rm -rf build && awk '{sub(/LOG_DIR=.+/,\"LOG_DIR='log'\")}1' envConfig/live.env > .env && NODE_ENV=production webpack", @@ -20,8 +20,8 @@ "build:test:debug": "rm -rf build && awk '{sub(/LOG_DIR=.+/,\"LOG_DIR='log'\")}1' envConfig/test.env > .env && NODE_ENV=production webpack", "cypress": "cypress run", "cypress:interactive": "cypress open", - "cypress:3rdParty": "npm run cypress -- --project ./3rdPartyCypress/.", - "cypress:adhoc": "npm run cypress:interactive -- --project ./AdHocCypress/.", + "cypress:3rdParty": "yarn run cypress -- --project ./3rdPartyCypress/.", + "cypress:adhoc": "yarn run cypress:interactive -- --project ./AdHocCypress/.", "dev": "rm -rf build && cp envConfig/local.env .env && run-p webpack:dev:client webpack:dev:server", "lighthouse": "./scripts/lighthouseRun.sh", "postshrinkwrap": "test -z $CI && ./scripts/packagelockHttps.sh; git update-index --assume-unchanged .env", @@ -29,18 +29,18 @@ "start": "NODE_ENV=production node build/server.js", "stop": "./scripts/killApp.sh", "storybook": "start-storybook -p 9001 -s .storybook/static -c .storybook", - "test": "npm run build && npm run test:local", - "test:local": "npm run test:lint && npm run test:dependencies && npm run test:unit && run-p --race start amp:validate && run-p --race start test:integration:ci", + "test": "yarn run build && yarn run test:local", + "test:local": "yarn run test:lint && yarn run test:dependencies && yarn run test:unit && run-p --race start amp:validate && run-p --race start test:integration:ci", "test:dependencies": "node ./scripts/dependencyCheck", - "test:e2e": "npm run stop && npm run build && run-p --race start cypress", - "test:e2e:interactive": "npm run stop && npm run build && run-p --race start cypress:interactive", + "test:e2e": "yarn run stop && yarn run build && run-p --race start cypress", + "test:e2e:interactive": "yarn run stop && yarn run build && run-p --race start cypress:interactive", "test:lint": "eslint --ext .js,jsx,json ./src ./data ./cypress ./.storybook ./webpack** && swagger-cli validate data/schema.yaml && stylelint 'src/**/*.js' 'src/**/*.jsx'", "test:puppeteer": "jest --ci --env=jsdom --colors ./puppeteer", "test:unit": "test -z $CI && jest --env=jsdom --coverage --colors --testPathIgnorePatterns=\"src/integration\" \"puppeteer\" || jest --ci --runInBand --env=jsdom --coverage --colors --testPathIgnorePatterns=\"src/integration\" \"puppeteer\"", - "test:unit:watch": "npm run test:unit -- --watch", + "test:unit:watch": "yarn run test:unit -- --watch", "test:integration": "node src/integration/utils/runTests/index.js", - "test:integration:ci": "JEST_SILENT_REPORTER_DOTS=true npm run test:integration -- --ci --onlyRunTests --reporters=jest-silent-reporter", - "test:linkey": "node scripts/linkeySetup.js && jest src/app/lib/config/services/*.test.js --verbose true; npm run test:linkey:cleanup", + "test:integration:ci": "JEST_SILENT_REPORTER_DOTS=true yarn run test:integration -- --ci --onlyRunTests --reporters=jest-silent-reporter", + "test:linkey": "node scripts/linkeySetup.js && jest src/app/lib/config/services/*.test.js --verbose true; yarn run test:linkey:cleanup", "test:linkey:cleanup": "find src/app/lib/config/services -type f -name '*.test.js' -delete", "updateMinorPatch": "rm -rf node_modules/ && yarn install && npm update && yarn install", "webpack:dev:client": "NODE_ENV=development webpack-dev-server --inline --hot --env.config='client'", @@ -50,7 +50,7 @@ "hooks": { "post-merge": "sh scripts/dependencyUpdateCheck.sh", "pre-commit": "lint-staged", - "pre-push": "sh scripts/stopPushOnLatest.sh && sh scripts/upToDateWithLatest.sh && sh scripts/enforceVersions.sh && npm run test:unit -- --changedSince=latest && npm run test:integration && apache2-license-checker" + "pre-push": "sh scripts/stopPushOnLatest.sh && sh scripts/upToDateWithLatest.sh && sh scripts/enforceVersions.sh && yarn run test:unit -- --changedSince=latest && yarn run test:integration && apache2-license-checker" } }, "repository": { diff --git a/src/integration/README.md b/src/integration/README.md index 05882f4ed6f..0caf3bcda45 100644 --- a/src/integration/README.md +++ b/src/integration/README.md @@ -7,49 +7,49 @@ These tests use the [Jest](#what-is-jest) test runner and operate in a [JSDOM](# To run the tests locally: ``` -npm run test:integration +yarn run test:integration ``` To run tests for a single page type with the watch task: ``` -npm run test:integration -- --pageTypes=articles --watch +yarn run test:integration -- --pageTypes=articles --watch ``` To run tests for multiple page types: ``` -npm run test:integration -- --pageTypes=articles,frontPage +yarn run test:integration -- --pageTypes=articles,frontPage ``` To run tests for a single page type with the watch task and webpack hot reloading of application code: ``` -npm run test:integration -- --pageTypes=liveRadio --watch --dev +yarn run test:integration -- --pageTypes=liveRadio --watch --dev ``` To run tests in CI so they fail if a snapshot was not captured: ``` -npm run test:integration:ci +yarn run test:integration:ci ``` To stop running tests immediately when there is a failure - NB this is useful when you want to reduce noise if there are a lot of failing tests and you want to inspect one failing test at a time: ``` -npm run test:integration -- --bail +yarn run test:integration -- --bail ``` To run tests updating existing snapshots ``` -npm run test:integration -- -u +yarn run test:integration -- -u ``` To run tests without building and starting the app ``` -npm run test:integration -- --onlyRunTests +yarn run test:integration -- --onlyRunTests ``` Any other Jest CLI args and flags can be passed along in the `test:integration` script. diff --git a/src/integration/utils/runTests/index.js b/src/integration/utils/runTests/index.js index cff0069ca52..173c6e2287a 100644 --- a/src/integration/utils/runTests/index.js +++ b/src/integration/utils/runTests/index.js @@ -27,14 +27,14 @@ const filesToTest = getFilesToTest(argv.pageTypes); const stopApp = () => new Promise(resolve => { - const child = exec('npm run stop'); + const child = exec('yarn run stop'); child.on('exit', resolve); }); const buildApp = () => new Promise(resolve => { - const child = exec('npm run build:local'); + const child = exec('yarn run build:local'); child.on('exit', resolve); }); @@ -42,7 +42,7 @@ const buildApp = () => const startApp = () => { return new Promise(resolve => { const child = exec( - `npm run ${ + `yarn run ${ isDev ? 'dev' : 'start' } & ./node_modules/.bin/wait-on -t 20000 http://localhost:7080/status`, ); diff --git a/src/server/utilities/cspHeader/index.js b/src/server/utilities/cspHeader/index.js index 365811b2ad0..5a26e9518a8 100644 --- a/src/server/utilities/cspHeader/index.js +++ b/src/server/utilities/cspHeader/index.js @@ -5,7 +5,7 @@ import { bbcDomains, advertisingServiceCountryDomains } from './domainLists'; /* * On localhost these CSP headers currently only apply on the production build. - * `npm run build && npm run start` & visit a localhost URL. + * `yarn run build && yarn run start` & visit a localhost URL. * View the developer console for errors. */ diff --git a/webpack.config.server.js b/webpack.config.server.js index 8ae437d08cb..5b0dc980742 100644 --- a/webpack.config.server.js +++ b/webpack.config.server.js @@ -45,7 +45,7 @@ module.exports = ({ resolvePath, START_DEV_SERVER }) => { const StartServerPlugin = require('start-server-webpack-plugin'); serverConfig.plugins = [ new webpack.HotModuleReplacementPlugin(), - new StartServerPlugin('server.js'), // only start the server if we've run `npm run dev` + new StartServerPlugin('server.js'), // only start the server if we've run `yarn run dev` ]; }