@@ -51,6 +53,7 @@ PreviewToolbar.propTypes = {
nLogEntries: PropTypes.number.isRequired
}),
showLogs: PropTypes.bool.isRequired,
+ onClearCache: PropTypes.func.isRequired,
onRecompile: PropTypes.func.isRequired,
onRunSyntaxCheckNow: PropTypes.func.isRequired,
onSetAutoCompile: PropTypes.func.isRequired,
diff --git a/services/web/frontend/js/ide/pdf/controllers/PdfController.js b/services/web/frontend/js/ide/pdf/controllers/PdfController.js
index 52dd8fbb39..8fa6d65c76 100644
--- a/services/web/frontend/js/ide/pdf/controllers/PdfController.js
+++ b/services/web/frontend/js/ide/pdf/controllers/PdfController.js
@@ -20,12 +20,14 @@ App.controller('PdfController', function(
$modal,
synctex,
eventTracking,
- localStorage
+ localStorage,
+ $q
) {
let autoCompile = true
// pdf.view = uncompiled | pdf | errors
$scope.pdf.view = $scope.pdf.url ? 'pdf' : 'uncompiled'
+ $scope.pdf.clearingCache = false
$scope.shouldShowLogs = false
$scope.wikiEnabled = window.wikiEnabled
@@ -796,7 +798,10 @@ App.controller('PdfController', function(
}
$scope.clearCache = function() {
- return $http({
+ $scope.pdf.clearingCache = true
+ const deferred = $q.defer()
+
+ $http({
url: `/project/${$scope.project_id}/output`,
method: 'DELETE',
params: {
@@ -806,6 +811,20 @@ App.controller('PdfController', function(
'X-Csrf-Token': window.csrfToken
}
})
+ .then(function(response) {
+ $scope.pdf.clearingCache = false
+ return deferred.resolve()
+ })
+ .catch(function(response) {
+ console.error(response)
+ const error = response.data
+ $scope.pdf.clearingCache = false
+ $scope.pdf.renderingError = false
+ $scope.pdf.error = true
+ $scope.pdf.view = 'errors'
+ return deferred.reject(error)
+ })
+ return deferred.promise
}
$scope.toggleLogs = function() {
@@ -1056,14 +1075,20 @@ App.controller('PdfLogEntryController', function($scope, ide, eventTracking) {
})
App.controller('ClearCacheModalController', function($scope, $modalInstance) {
- $scope.state = { inflight: false }
+ $scope.state = { error: false, inflight: false }
$scope.clear = function() {
$scope.state.inflight = true
- $scope.clearCache().then(function() {
- $scope.state.inflight = false
- $modalInstance.close()
- })
+ $scope
+ .clearCache()
+ .then(function() {
+ $scope.state.inflight = false
+ $modalInstance.close()
+ })
+ .catch(function() {
+ $scope.state.error = true
+ $scope.state.inflight = false
+ })
}
$scope.cancel = () => $modalInstance.dismiss('cancel')
diff --git a/services/web/locales/en.json b/services/web/locales/en.json
index 732c34fa3d..e6e449d8f7 100644
--- a/services/web/locales/en.json
+++ b/services/web/locales/en.json
@@ -3,6 +3,7 @@
"n_warnings_plural": "__count__ warnings",
"n_errors": "__count__ error",
"n_errors_plural": "__count__ errors",
+ "toggle_compile_options_menu": "Toggle compile options menu",
"view_pdf": "View PDF",
"your_project_has_errors": "Your project has errors",
"view_warnings": "View warnings",
diff --git a/services/web/test/frontend/features/preview/components/preview-recompile-button.test.js b/services/web/test/frontend/features/preview/components/preview-recompile-button.test.js
new file mode 100644
index 0000000000..df3ec91438
--- /dev/null
+++ b/services/web/test/frontend/features/preview/components/preview-recompile-button.test.js
@@ -0,0 +1,118 @@
+import React from 'react'
+import sinon from 'sinon'
+import { screen, render, fireEvent } from '@testing-library/react'
+import PreviewRecompileButton from '../../../../../frontend/js/features/preview/components/preview-recompile-button'
+const { expect } = require('chai')
+
+describe('
', function() {
+ let onRecompile, onClearCache
+
+ beforeEach(function() {
+ onRecompile = sinon.stub().resolves()
+ onClearCache = sinon.stub().resolves()
+ })
+
+ it('renders all items', function() {
+ renderPreviewRecompileButton()
+
+ const menuItems = screen.getAllByRole('menuitem')
+ expect(menuItems.length).to.equal(8)
+ expect(menuItems.map(item => item.textContent)).to.deep.equal([
+ 'On',
+ 'Off',
+ 'Normal',
+ 'Fast [draft]',
+ 'Check syntax before compile',
+ "Don't check syntax",
+ 'Run syntax check now',
+ 'Recompile from scratch'
+ ])
+
+ const menuHeadingItems = screen.getAllByRole('heading')
+ expect(menuHeadingItems.length).to.equal(3)
+ expect(menuHeadingItems.map(item => item.textContent)).to.deep.equal([
+ 'Auto Compile',
+ 'Compile Mode',
+ 'Syntax Checks'
+ ])
+ })
+
+ describe('Recompile from scratch', function() {
+ describe('click', function() {
+ it('should call onClearCache and onRecompile', async function() {
+ renderPreviewRecompileButton()
+
+ const button = screen.getByRole('menuitem', {
+ name: 'Recompile from scratch'
+ })
+ await fireEvent.click(button)
+ expect(onClearCache).to.have.been.calledOnce
+ expect(onRecompile).to.have.been.calledOnce
+ })
+ })
+ describe('processing', function() {
+ it('shows processing view and disable menuItem when clearing cache', function() {
+ renderPreviewRecompileButton({ isClearingCache: true })
+
+ screen.getByRole('button', { name: 'Compiling …' })
+ expect(
+ screen
+ .getByRole('menuitem', {
+ name: 'Recompile from scratch'
+ })
+ .getAttribute('aria-disabled')
+ ).to.equal('true')
+ expect(
+ screen
+ .getByRole('menuitem', {
+ name: 'Recompile from scratch'
+ })
+ .closest('li')
+ .getAttribute('class')
+ ).to.equal('disabled')
+ })
+
+ it('shows processing view and disable menuItem when recompiling', function() {
+ renderPreviewRecompileButton({ isCompiling: true })
+
+ screen.getByRole('button', { name: 'Compiling …' })
+ expect(
+ screen
+ .getByRole('menuitem', {
+ name: 'Recompile from scratch'
+ })
+ .getAttribute('aria-disabled')
+ ).to.equal('true')
+ expect(
+ screen
+ .getByRole('menuitem', {
+ name: 'Recompile from scratch'
+ })
+ .closest('li')
+ .getAttribute('class')
+ ).to.equal('disabled')
+ })
+ })
+ })
+
+ function renderPreviewRecompileButton(compilerState = {}) {
+ render(
+
{}}
+ onSetAutoCompile={() => {}}
+ onSetDraftMode={() => {}}
+ onSetSyntaxCheck={() => {}}
+ onClearCache={onClearCache}
+ />
+ )
+ }
+})