Fix Storybook Deployment

[sareh]

Resolves #311

Overall change: Fix storybook deployment on Jenkins CI

Code changes:

• Ensuring that npm run ci:packages runs npm ci at the top level and within each of the packages.

• Updated package-lock.json files for several packages since they were out of sync with their package.json file and gave the following error upon running an npm ci command in the relevant directory npm ERR! cipm can only install packages when your package.json and package-lock.json or npm-shrinkwrap.json are in sync. Please update your lock file with npm install before continuing.

• Updated Storybook glob pattern to ensure only stories from top level of components are pulled in to Storybook (without this, *stories.jsx files within node_modules are attempted to be loaded as well).

• Removed the prepare script since it was running even with an npm ci command. Instead of this, explicitly running the build script when it's needed, prior to publish.

• Updated snapshots for two components, since they're now generated after a ci installation, rather than being locally linked to other packages within Psammead.

• Ensure npm run build is run prior to unit tests

Note: locally I ran npx lerna exec -- head -n 3 package.json package-lock.json to see which packages had different versions in their package-lock file to their package.json file.

---

• I have assigned myself to this PR and the corresponding issues
• Tests added for new features
• Test engineer approval

[dr3]

LGTM (as a temp fix untill #297) :)

[sareh]

The deployment to storybook is working well, now. However:

npm run install:packages
npm run test

has all unit tests passing. Whereas running the CI command does not.

npm run ci:packages
npm run test

This gives a diff in the snapshots:

Summary of all failing tests
 FAIL  packages/components/psammead-brand/src/index.test.jsx
  ● Brand › should render correctly

    expect(value).toMatchSnapshot()

    Received value does not match stored snapshot "Brand should render correctly 1".

    - Snapshot
    + Received

    @@ -1,16 +1,5 @@
    - .c6 {
    -   -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;
    - }
    -
      .c0 {
        background-color: #B80000;
        height: 5rem;
        width: 100%;
      }
    @@ -99,11 +88,11 @@
                  d="m117.86 3.36h9.83v2.21h-7.35v5.29h7.1v2.22h-7.1v5.39h7.58v2.21h-10.06z M154.18,3.36h2.48l-7,17.41h-.55l-5.67-14.1-5.73,14.1h-.53l-7-17.41h2.5l4.78,12,4.81-12h2.35l4.83,12Z M163.38,13.43l-1.89-1.15A8.57,8.57,0,0,1,159,10.16a4,4,0,0,1-.75-2.41,4.26,4.26,0,0,1,1.42-3.33,5.31,5.31,0,0,1,3.69-1.28,7,7,0,0,1,4,1.22V7.17a5.74,5.74,0,0,0-4-1.8,3.34,3.34,0,0,0-2,.56,1.71,1.71,0,0,0-.78,1.44,2.22,2.22,0,0,0,.58,1.46,7.25,7.25,0,0,0,1.85,1.43l1.9,1.12Q168,13.28,168,16.21a4.42,4.42,0,0,1-1.4,3.39A5.11,5.11,0,0,1,163,20.9a7.63,7.63,0,0,1-4.68-1.58V16.17a5.84,5.84,0,0,0,4.65,2.55,2.93,2.93,0,0,0,1.94-.65,2,2,0,0,0,.78-1.63Q165.67,14.85,163.38,13.43Z"
                />
              </g>
            </svg>
            <span
    -         className="c6"
    +         className="VisuallyHiddenText-sc-1yjwwa5-0 LgsrE"
            >
              Default Brand Name
            </span>
          </span>
        </a>

      at Object.<anonymous> (packages/components/psammead-brand/node_modules/@bbc/psammead-test-helpers/dist/index.js:22:18)

 FAIL  packages/components/psammead-caption/src/index.test.jsx
  ● should render Caption with some offscreen text

    expect(value).toMatchSnapshot()

    Received value does not match stored snapshot "should render Caption with some offscreen text 1".

    - Snapshot
    + Received

    @@ -1,16 +1,5 @@
    - .c1 {
    -   -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;
    - }
    -
      .c0 {
        font-size: 0.9375em;
        line-height: 1.125rem;
        background-color: #D5D0CD;
        color: #404040;
    @@ -34,10 +23,10 @@
      <figcaption
        className="c0"
      >
        This is some Caption text
        <span
    -     className="c1"
    +     className="LgsrE"
        >
          Some offscreen text
        </span>
      </figcaption>

      at Object.<anonymous> (packages/components/psammead-caption/node_modules/@bbc/psammead-test-helpers/dist/index.js:22:18)


Snapshot Summary
 › 2 snapshots failed from 2 test suites. Inspect your code changes or run `npm run test:unit -- -u` to update them.

Since the ci:packages installation is the most accurate in terms of functionality - it isn't linking all other packages locally with lerna bootstrap like install:packages is, I think we should update these snapshots so they pass on CI, rather than with everything linked locally.

[pjlee11]

As spoke offline not sure how I feel about us losing this CSS across all our snapshots. Would be good to spend some time debugging it or at minimum opening a new issue to capture the loss of this to the reference LgsrE

[sareh]

Thanks for noting this, Phil. The issue seems localised to importing the @bbc/psammead-visually-hidden-text component. It's used in @bbc/psammead-brand and the tests for @bbc/psammead-caption.

I've looked through our repository and noted that these are the only two instances of a Psammead component pulling in another Psammead component (rather than utility). Since we're not npm linking all Psammead packages prior to generating snapshots, I believe this is an expected consequence of the change.

[dr3]

👍 LGTM, Fab work :)

[bcmn]

Looks good, definitely feels like lerna has outstayed it's welcome -- thanks for getting to the root of all these issues, Sareh!

[jamesbrumpton]

👍