ci(PPDSC-2017): newskit integration test

.circleci/config.yml

@@ -860,6 +860,55 @@ jobs:
       - slack/status:
           <<: *slack_status
 
+  test_newskit_in_nextjs_app:
+    executor: cypress
+    steps:
+      - checkout
+      - attach_workspace:
+          at: ~/project
+      - run:
+          name: Install yalc and create-next-app
+          command: | 
+            yarn global add yalc && yarn add create-next-app@latest 
+      - run:
+          name: Yalc publish and run create-nextjs-app
+          command: | 
+            cd dist
+            yalc publish
+            cd ..
+            npx create-next-app@latest newskit-integration-test
+      - run: 
+          name: Prepare the NextJs app
+          command: |
+            echo "Adding nedded files into the NextJs app"
+
+            cp ./scripts/templates-integration-test/index.txt ./newskit-integration-test/pages/index.js
+            cp ./scripts/templates-integration-test/cypress.json ./newskit-integration-test/
+            mkdir -p ./newskit-integration-test/cypress/integration
+            cp ./scripts/templates-integration-test/theme-checker.spec.js ./newskit-integration-test/cypress/integration
+
+
+            echo "Installing needed packages into the NextJS app"
+
+            cd newskit-integration-test
+            yalc add newskit
+            yarn add start-server-and-test
+            # Temp downgrading React. Needed for avoiding Hydration error with React v18 https://github.com/vercel/next.js/discussions/35773
+            yarn add react@17.0.1
+            yarn add react-dom@17.0.1
+            yarn add -D cypress@9.1.0;
+      - run:
+          name: Serve and test app with Cypress
+          command: |
+            cd newskit-integration-test
+            yarn build
+            yarn start-test start 3000 'yarn cypress run'
+      - slack/status:
+          <<: *slack_status
+
+
+
+
 # ========== FILTERS START    ==========
 
 only_on_trigger_release_tag: &only_on_trigger_release_tag
@@ -912,6 +961,9 @@ workflows:
       - test_unit_docs:
           requires:
             - build_icons
+      - test_newskit_in_nextjs_app:
+          requires: 
+            - build_components
       - test_e2e_comps:
           context: ncu-product-platforms-context
           requires:
@@ -949,7 +1001,7 @@ workflows:
       - approve_publish_npm_pr:
           type: approval
           requires:
-            - build_components
+            - test_newskit_in_nextjs_app
             - lint
             - test_unit_comps
             - test_unit_docs
@@ -1086,12 +1138,15 @@ workflows:
           requires:
             - build_docs_dev
             - install_cypress
+      - test_newskit_in_nextjs_app:
+          requires: 
+            - build_components
 
       # Jobs for deploying unstable NewsKit version
       - approve_publish_npm_dev:
           type: approval
           requires:
-            - build_components
+            - test_newskit_in_nextjs_app
             - lint
             - test_unit_comps
             - test_unit_docs
@@ -1270,6 +1325,9 @@ workflows:
             - test_unit_docs
             - test_e2e_comps
             - test_e2e_docs_prod
+      - test_newskit_in_nextjs_app:
+          requires: 
+            - build_components
 
       - publish_npm:
           <<: *only_on_version_tag
@@ -1280,7 +1338,7 @@ workflows:
             - test_unit_docs
             - test_e2e_comps
             - test_e2e_docs_prod
-            - build_components
+            - test_newskit_in_nextjs_app
 
       # Deploying newskit.co.uk and storybook to Staging then to Prod environment.
       - eks_flux_deploy:

Makefile

@@ -15,6 +15,7 @@ BASE_URI = ${SITE_BASE_URL}${BASE_PATH}/
 install:
 	yarn install --frozen-lockfile
 
+# When changing the version, make sure it matches the one used in the `test_newskit_in_nextjs_app` CircleCI's job.
 install_cypress:
 	yarn add -D cypress@9.1.0;
 

scripts/templates-integration-test/cypress.json

@@ -0,0 +1,4 @@
+{
+  "baseUrl": "http://localhost:3000",
+  "video": false
+}

scripts/templates-integration-test/index.txt

@@ -0,0 +1,12 @@
+// Template for populating the index.js file in the NextJS app;
+// built from the `test_newskit_in_nextjs_app` CircleCi job.
+
+import {ThemeChecker, newskitLightTheme, ThemeProvider} from 'newskit';
+
+export default function Home() {
+  return (
+    <ThemeProvider theme={newskitLightTheme}>
+      <ThemeChecker />
+    </ThemeProvider>
+  );
+}

scripts/templates-integration-test/theme-checker.spec.js

@@ -0,0 +1,6 @@
+describe('Theme Checker', () => {
+  it('Visits the home page and expect to find a play pause button', () => {
+    cy.visit('/');
+    cy.get('[data-testid="audio-player-play-button"]');
+  });
+});