Only determine that a plugin is installed if the package.json for the plugin exists where it is expected.

Author: BenSurgisonGDS

CHANGELOG.md

@@ -4,6 +4,8 @@
 
 ### Fixes
 
+- [#2251: Fix plugin page failure after updating to 13.10.0](https://github.com/alphagov/govuk-prototype-kit/pull/2251)
+
 - [#2253: Add comments to the prototype-starter filters file](https://github.com/alphagov/govuk-prototype-kit/pull/2253)
 
 ## 13.10.0

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

@@ -6,7 +6,7 @@ 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 dependentPluginLocation = [fixtures, 'plugins', dependentPlugin].join(Cypress.config('pathSeparator'))
 const dependencyPlugin = 'govuk-frontend'
 const dependencyPluginName = 'GOV.UK Frontend'
 

cypress/e2e/plugins/2-prototype-kit-plugin-tests/handle-plugin-installation-mismatch.cypress.js

@@ -0,0 +1,42 @@
+const { replaceInFile, waitForApplication, uninstallPlugin, log } = require('../../utils')
+const path = require('path')
+const plugin = '@govuk-prototype-kit/task-list'
+const pluginVersion = '1.1.1'
+const originalText = '"dependencies": {'
+const replacementText = `"dependencies": { "${plugin}": "${pluginVersion}",`
+const pkgJsonFile = path.join(Cypress.env('projectFolder'), 'package.json')
+const pluginsPage = '/manage-prototype/plugins'
+
+function restore () {
+  uninstallPlugin(plugin)
+}
+
+describe('Handle a plugin installation mismatch', () => {
+  before(restore)
+  after(restore)
+
+  it('where the prototype package.json specifies a dependency that has not been installed', () => {
+    waitForApplication()
+
+    log(`Add ${plugin} to the dependencies within the package.json`)
+    replaceInFile(pkgJsonFile, originalText, '', replacementText)
+
+    log(`Make sure ${plugin} is displayed as not installed`)
+    cy.visit(pluginsPage)
+    cy.get(`[data-plugin-package-name="${plugin}"]`)
+      .scrollIntoView()
+      .find('button')
+      .contains('Install')
+
+    log('Force the plugins to be installed with an npm install')
+    cy.exec(`cd ${Cypress.env('projectFolder')} && npm install`)
+
+    log(`Make sure ${plugin} is displayed as installed`)
+    waitForApplication()
+    cy.visit(pluginsPage)
+    cy.get(`[data-plugin-package-name="${plugin}"]`)
+      .scrollIntoView()
+      .find('button')
+      .contains('Uninstall')
+  })
+})

cypress/e2e/utils.js

@@ -1,35 +1,36 @@
-
 const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
 
+const log = (message) => cy.task('log', message)
+
 const authenticate = () => {
   const password = Cypress.env('password')
   if (password) {
-    cy.task('log', `Authenticating with ${password}`)
+    log(`Authenticating with ${password}`)
     cy.get('input#password').type(password)
     cy.get('form').submit()
   }
 }
 
 const waitForApplication = async (path = '/index') => {
-  cy.task('log', `Waiting for app to restart and load ${path} page`)
+  log(`Waiting for app to restart and load ${path} page`)
   cy.task('waitUntilAppRestarts')
   cy.visit(path)
   cy.get('.govuk-header__logotype-text')
     .should('contains.text', 'GOV.UK')
 }
 
 const copyFile = (source, target) => {
-  cy.task('log', `Copy ${source} to ${target}`)
+  log(`Copy ${source} to ${target}`)
   cy.task('copyFile', { source, target })
 }
 
 const deleteFile = (filename) => {
-  cy.task('log', `Delete ${filename}`)
+  log(`Delete ${filename}`)
   cy.task('deleteFile', { filename })
 }
 
 const createFile = (filename, options) => {
-  cy.task('log', `Create ${filename}`)
+  log(`Create ${filename}`)
   cy.task('createFile', { filename, ...options })
 }
 
@@ -38,7 +39,7 @@ const replaceInFile = (filename, originalText, source, newText) => {
 }
 
 function uninstallPlugin (plugin) {
-  cy.task('log', `Uninstalling ${plugin}`)
+  log(`Uninstalling ${plugin}`)
   cy.exec(`cd ${Cypress.env('projectFolder')} && npm uninstall ${plugin}`)
   cy.task('pluginUninstalled', { plugin, timeout: 15000 })
 }
@@ -47,18 +48,19 @@ function installPlugin (plugin, version = '') {
   if (version) {
     version = '@' + version
   }
-  cy.task('log', `Installing ${plugin}${version}`)
+  log(`Installing ${plugin}${version}`)
   cy.exec(`cd ${Cypress.env('projectFolder')} && npm install ${plugin}${version} --save-exact `)
   if (plugin.startsWith('file:')) {
     plugin = plugin.substring(plugin.lastIndexOf('/') + 1)
   }
-  cy.task('log', `Waiting for ${plugin}${version} to be installed`)
+  log(`Waiting for ${plugin}${version} to be installed`)
   cy.task('pluginInstalled', { plugin, version, timeout: 15000 })
 }
 
 module.exports = {
   authenticate,
   sleep,
+  log,
   waitForApplication,
   copyFile,
   deleteFile,

lib/dev-server.js

@@ -105,7 +105,8 @@ function runNodemon (port) {
     script: path.join(packageDir, 'listen-on-port.js'),
     ignore: [
       'app/assets/*'
-    ]
+    ],
+    delay: 1000
   }
 
   const linkedDependencyDirectories = fs.readdirSync(nodeModulesPath).map(dirName => {

lib/manage-prototype-handlers.js

@@ -40,9 +40,10 @@ const {
 
 async function isValidVersion (packageName, version) {
   const { versions = [], localVersion } = await lookupPackageInfo(packageName, version)
-  const isVersionValid = [...versions, localVersion].includes(version)
+  const validVersions = [...versions, localVersion]
+  const isVersionValid = validVersions.includes(version)
   if (!isVersionValid) {
-    console.log('version', version, ' is not valid, valid options are:\n\n', versions)
+    console.log('version', version, ' is not valid, valid options are:\n\n', validVersions)
   }
   return isVersionValid
 }

lib/plugins/packages.js

@@ -14,6 +14,7 @@ const projectPackage = require(path.join(projectDir, 'package.json'))
 const config = require('../config')
 const { getConfigForPackage } = require('../utils/requestHttps')
 const { getProxyPluginConfig } = require('./plugin-utils')
+const { sortByObjectKey } = require('../utils')
 
 let packageTrackerInterval
 
@@ -72,12 +73,21 @@ async function refreshPackageInfo (packageName, version) {
     return undefined
   }
 
-  const latestVersion = registryInfo ? registryInfo['dist-tags']?.latest : undefined
+  const distTags = registryInfo ? registryInfo['dist-tags'] : undefined
+  let latestVersion = distTags?.latest
+  if (distTags && config.getConfig().showPrereleases) {
+    latestVersion = Object.values(distTags)
+      .map(version => ({ version, date: registryInfo.time[version] }))
+      .sort(sortByObjectKey('date'))
+      .at(-1)
+      .version
+  }
   const versions = registryInfo ? Object.keys(registryInfo.versions) : []
 
-  const installedPackageVersion = projectPackage.dependencies[packageName]
+  const installedPackageVersion = packageJson && projectPackage.dependencies[packageName]
   const installed = !!installedPackageVersion
   const installedLocally = installedPackageVersion?.startsWith('file:')
+  const installedVersion = installed ? packageJson?.version : undefined
 
   let localVersion
 
@@ -104,7 +114,6 @@ async function refreshPackageInfo (packageName, version) {
     pluginConfig = getProxyPluginConfig(packageName)
   }
 
-  const { version: installedVersion } = installed ? packageJson : {}
   if (installedLocally) {
     localVersion = path.resolve(installedPackageVersion.replace('file:', ''))
   }

lib/plugins/plugins.js

@@ -48,6 +48,7 @@ const { startPerformanceTimer, endPerformanceTimer } = require('../utils/perform
 const { getProxyPluginConfig } = require('./plugin-utils')
 
 const pkgPath = path.join(projectDir, 'package.json')
+const pkgLockPath = path.join(projectDir, 'package-lock.json')
 
 // Generic utilities
 const removeDuplicates = arr => [...new Set(arr)]
@@ -255,7 +256,7 @@ function expandToIncludeShadowNunjucks (arr) {
 function getCurrentPlugins () {
   const timer = startPerformanceTimer()
   const pkg = fs.existsSync(pkgPath) ? fse.readJsonSync(pkgPath) : {}
-  const dependencies = pkg.dependencies || {}
+  const dependencies = pkg?.dependencies || {}
   const result = Object.keys(dependencies).filter((dependency) => fse.pathExistsSync(pathToPluginConfigFile(dependency)))
   endPerformanceTimer('getCurrentPlugins', timer)
   return result
@@ -264,7 +265,7 @@ function getCurrentPlugins () {
 let previousPlugins = getCurrentPlugins()
 
 function watchPlugins (afterWatch) {
-  chokidar.watch(pkgPath, {
+  chokidar.watch(pkgLockPath, {
     ignoreInitial: true,
     disableGlobbing: true, // Prevents square brackets from being mistaken for globbing characters
     awaitWriteFinish: true