Merge pull request #2220 from alphagov/2125-allow-plugin-developers-t…

…o-specify-that-their-plugin-is-dependent-on-other-plugins

Specify plugin dependencies

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+- [#2220: Specify plugin dependencies](https://github.com/alphagov/govuk-prototype-kit/pull/2220)
+
 ## 13.9.1
 
 ### Fixes

__tests__/fixtures/mockPlugins/valid-plugin/govuk-prototype-kit.config.json

@@ -34,5 +34,12 @@
 		"path": "/templates/start-with-step-by-step.html",
 		"type": "nunjucks"
 	  }
+	],
+	"pluginDependencies": [
+	  {
+	    "packageName": "govuk-frontend",
+		  "minVersion": "4.5.0",
+		  "maxVersion": "5.5.0"
+	  }
 	]
   }

__tests__/spec/force-https-redirect.js

@@ -18,6 +18,10 @@ process.env.KIT_PROJECT_DIR = testDir
 process.env.NODE_ENV = 'production'
 process.env.USE_HTTPS = 'true'
 
+jest.mock('../../lib/plugins/packages.js', () => {
+  return {}
+})
+
 const app = require('../../server.js')
 
 describe('The Prototype Kit - force HTTPS redirect functionality', () => {

cypress/e2e/plugins/0-mock-plugin-tests/install-plugin-test.cypress.js → cypress/e2e/plugins/0-mock-plugin-tests/install-plugin-via-cli-test.cypress.js

@@ -29,7 +29,7 @@ const pluginBazViewMarkup = `
 {% endblock %}
 `
 
-describe('Single Plugin Test', async () => {
+describe('Install Plugin via CLI Test', async () => {
   before(() => {
     uninstallPlugin('plugin-baz')
     createFile(pluginBazView, { data: pluginBazViewMarkup })

cypress/e2e/plugins/0-mock-plugin-tests/install-plugin-via-ui-test.cypress.js

@@ -0,0 +1,105 @@
+const { installPlugin, uninstallPlugin } = require('../../utils')
+const path = require('path')
+const { loadTemplatesPage, managePluginsPagePath, performPluginAction, loadPluginsPage } = require('../plugin-utils')
+
+const panelCompleteQuery = '[aria-live="polite"] #panel-complete'
+const fixtures = path.join(Cypress.config('fixturesFolder'))
+const dependentPlugin = 'plugin-fee'
+const dependentPluginName = 'Plugin Fee'
+const dependentPluginLocation = path.join(fixtures, 'plugins', dependentPlugin)
+const dependencyPlugin = 'govuk-frontend'
+const dependencyPluginName = 'GOV.UK Frontend'
+
+function restore () {
+  installPlugin(dependencyPlugin)
+  uninstallPlugin(dependentPlugin)
+}
+
+describe('Install and uninstall Local Plugin via UI Test', async () => {
+  before(restore)
+  after(restore)
+
+  it(`The ${dependentPlugin} plugin templates are not available`, () => {
+    loadTemplatesPage()
+    cy.get(`[data-plugin-package-name="${dependentPlugin}"]`).should('not.exist')
+  })
+
+  it(`Install the ${dependentPlugin} plugin`, () => {
+    cy.task('waitUntilAppRestarts')
+    cy.visit(`${managePluginsPagePath}/install?package=${encodeURIComponent(dependentPlugin)}&version=${encodeURIComponent(dependentPluginLocation)}`)
+    cy.get('#plugin-action-button').click()
+
+    cy.get(panelCompleteQuery, { timeout: 20000 })
+      .should('be.visible')
+    cy.get('a').contains('Back to plugins').click()
+
+    cy.get(`[data-plugin-package-name="${dependentPlugin}"] button`).contains('Uninstall')
+  })
+
+  it(`The ${dependentPlugin} plugin templates are available`, () => {
+    loadTemplatesPage()
+    cy.get(`[data-plugin-package-name="${dependentPlugin}"]`).should('exist')
+  })
+
+  it('Uninstall the local plugin', () => {
+    loadPluginsPage()
+
+    cy.get(`[data-plugin-package-name="${dependentPlugin}"]`)
+      .scrollIntoView()
+      .find('button')
+      .contains('Uninstall')
+      .click()
+
+    performPluginAction('uninstall', dependentPlugin, dependentPluginName)
+  })
+
+  it(`The ${dependentPlugin} plugin templates are not available`, () => {
+    loadTemplatesPage()
+    cy.get(`[data-plugin-package-name="${dependentPlugin}"]`).should('not.exist')
+  })
+})
+
+describe('Install and uninstall Local Dependent Plugin via UI Test', async () => {
+  before(restore)
+  after(restore)
+
+  it(`The ${dependentPlugin} plugin templates are not available`, () => {
+    loadTemplatesPage()
+    cy.get(`[data-plugin-package-name="${dependentPlugin}"]`).should('not.exist')
+  })
+
+  it(`Uninstall the ${dependencyPlugin} to force the UI to ask for it later`, () => {
+    cy.task('waitUntilAppRestarts')
+    cy.visit(`${managePluginsPagePath}/uninstall?package=${encodeURIComponent(dependencyPlugin)}`)
+    cy.get('#plugin-action-button').click()
+    performPluginAction('uninstall', dependencyPlugin, dependencyPluginName)
+  })
+
+  it(`Install the ${dependentPlugin} plugin and the ${dependencyPlugin}`, () => {
+    cy.task('waitUntilAppRestarts')
+    cy.visit(`${managePluginsPagePath}/install?package=${encodeURIComponent(dependentPlugin)}&version=${encodeURIComponent(dependentPluginLocation)}`)
+    // Should list the dependency plugin
+    cy.get('li').contains(dependencyPluginName)
+    cy.get('#plugin-action-button').click()
+    performPluginAction('install', dependentPlugin, dependentPluginName)
+  })
+
+  it(`The ${dependentPlugin} plugin templates are available`, () => {
+    loadTemplatesPage()
+    cy.get(`[data-plugin-package-name="${dependentPlugin}"]`).should('exist')
+  })
+
+  it('Uninstall the dependency plugin', () => {
+    cy.task('waitUntilAppRestarts')
+    cy.visit(`${managePluginsPagePath}/uninstall?package=${encodeURIComponent(dependencyPlugin)}`)
+    // Should list the dependent plugin
+    cy.get('li').contains(dependentPluginName)
+    cy.get('#plugin-action-button').click()
+    performPluginAction('uninstall', dependencyPlugin, dependencyPluginName)
+  })
+
+  it(`The ${dependentPlugin} plugin templates are not available`, () => {
+    loadTemplatesPage()
+    cy.get(`[data-plugin-package-name="${dependentPlugin}"]`).should('not.exist')
+  })
+})

cypress/e2e/plugins/plugin-utils.js

@@ -28,7 +28,7 @@ async function loadTemplatesPage () {
 function performPluginAction (action, plugin, pluginName) {
   cy.task('log', `The ${plugin} plugin should be displayed`)
   cy.get('h2')
-    .contains(`${capitalize(action)} ${pluginName}`)
+    .contains(pluginName)
 
   const processingText = `${action === 'upgrade' ? 'Upgrad' : action}ing ...`
 

cypress/events/index.js

@@ -24,7 +24,7 @@ const https = require('https')
 // local dependencies
 const { starterDir } = require('../../lib/utils/paths')
 const { sleep } = require('../e2e/utils')
-const { requestHttpsJson } = require('../../lib/utils')
+const { requestHttpsJson } = require('../../lib/utils/requestHttps')
 
 const log = (message) => console.log(`${new Date().toLocaleTimeString()} => ${message}`)
 

cypress/fixtures/plugins/plugin-fee/govuk-prototype-kit.config.json

@@ -0,0 +1,14 @@
+{
+  "templates": [
+    {
+      "name": "Plugin Fee page",
+      "path": "/templates/fee.njk",
+      "type": "nunjucks"
+    }
+  ],
+  "sass": "/sass/fee.scss",
+  "pluginDependencies": [{
+    "packageName": "govuk-frontend",
+    "minVersion": "4.5.0"
+  }]
+}

cypress/fixtures/plugins/plugin-fee/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "plugin-fee",
+  "version": "1.0.0",
+  "dependencies": {
+    "govuk-prototype-kit": "file:../../../.."
+  }
+}

cypress/fixtures/plugins/plugin-fee/sass/fee.scss

@@ -0,0 +1,4 @@
+.plugin-fee-paragraph {
+  background: #d4351c;
+  color:  #ffdd00;
+}

cypress/fixtures/plugins/plugin-fee/templates/fee.njk

@@ -0,0 +1,10 @@
+{% extends "layouts/main.html" %}
+
+{% block pageTitle %}
+    GOV.UK page template – {{ serviceName }} – GOV.UK Prototype Kit
+{% endblock %}
+
+{% block content %}
+    <p class="plugin-fee-paragraph">Plugin fee styled paragraph</p>
+
+{% endblock %}

known-plugins.json

@@ -8,6 +8,10 @@
       "hmrc-frontend",
       "jquery",
       "notifications-node-client"
+    ],
+    "required": [
+      "govuk-prototype-kit",
+      "govuk-frontend"
     ]
   }
 }

lib/assets/javascripts/manage-prototype/manage-plugins.js

@@ -13,12 +13,16 @@
 
   const show = (id) => {
     const element = document.getElementById(id)
-    element.hidden = false
+    if (element) {
+      element.hidden = false
+    }
   }
 
   const hide = (id) => {
     const element = document.getElementById(id)
-    element.hidden = true
+    if (element) {
+      element.hidden = true
+    }
   }
 
   const showCompleteStatus = () => {
@@ -108,6 +112,9 @@
   }
 
   const performAction = (event) => {
+    hide('dependency-heading')
+    show('plugin-heading')
+
     if (!actionTimeoutId) {
       actionTimeoutId = setTimeout(() => {
         timedOut = true

lib/assets/javascripts/manage-prototype/manage-plugins.test.js

@@ -10,6 +10,8 @@ async function fetchResponse (data) {
 
 const loadedHTML = `
       <div>
+        <div id="dependency-heading"></div>
+        <div id="plugin-heading" hidden=""></div>
         <div id="panel-manual-instructions"></div>
         <div id="panel-processing" hidden=""></div>
         <div id="panel-complete" hidden=""></div>
@@ -20,6 +22,8 @@ const loadedHTML = `
 
 const processingHTML = `
       <div>
+        <div id="dependency-heading" hidden=""></div>
+        <div id="plugin-heading"></div>
         <div id="panel-manual-instructions" hidden=""></div>
         <div id="panel-processing"></div>
         <div id="panel-complete" hidden=""></div>
@@ -30,6 +34,8 @@ const processingHTML = `
 
 const completedHTML = `
       <div>
+        <div id="dependency-heading" hidden=""></div>
+        <div id="plugin-heading"></div>
         <div id="panel-manual-instructions" hidden=""></div>
         <div id="panel-processing" hidden=""></div>
         <div id="panel-complete"></div>
@@ -40,6 +46,8 @@ const completedHTML = `
 
 const errorHTML = `
       <div>
+        <div id="dependency-heading" hidden=""></div>
+        <div id="plugin-heading"></div>
         <div id="panel-manual-instructions" hidden=""></div>
         <div id="panel-processing" hidden=""></div>
         <div id="panel-complete" hidden=""></div>