`
+ document.body.appendChild(block)
+}
+
+/*
+We need to load some scripts into the global browser context, since that's how they're loaded in an
+XBlock environment. If we try to just import them, they'll be scoped to module contexts and won't be
+able to affect global variables in the same way they would in production.
+ */
+const loadJsPayload = async (path: string, id?: string) => {
+ const scriptTag = document.createElement('script')
+ scriptTag.textContent = await server.commands.readFile(path)
+ if (id) {
+ scriptTag.setAttribute('id', id)
+ }
+ document.body.appendChild(scriptTag)
+}
+
+const JQueryDetails: Record = {
+ 'src': 'https://code.jquery.com/jquery-3.7.1.js',
+ 'integrity': 'sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=',
+ 'crossorigin': 'anonymous'
+} as const
+
+
+// Can be used outside tests, whereas expect cannot.
+const assert = ((value: unknown) => {
+ if (!!value) {
+ return
+ }
+ throw Error(`Assertion failed: ${value}`)
+})
+
+
+describe("PDF Block Initializer", () => {
+ beforeEach(async () => {
+ const scriptTag = document.createElement('script')
+ Object.keys(JQueryDetails).forEach((key) => {
+ scriptTag.setAttribute(key, JQueryDetails[key])
+ })
+ document.body.appendChild(scriptTag)
+ await loadJsPayload('specs/helpers/proveJQuery.js')
+ await vi.waitFor(() => assert(document.querySelector('div[data-testid="jquery-loaded"]')))
+ await loadJsPayload('../static/js/pdf.js')
+ await loadJsPayload('specs/helpers/mockRuntime.js')
+ })
+ afterEach(() => {
+ // Vitest browser isolation isn't perfect, apparently but this makes it good enough.
+ document.body.innerHTML = ''
+ })
+ const testButton = async () => {
+ await vi.waitFor(async () => {
+ const button = page.getByTestId('download-button')
+ await button.click()
+ })
+ await vi.waitFor(() => expect.element(page.getByTestId('post-call')).toBeInTheDocument())
+ }
+ it("Sets a callback upon download when handed an element", async () => {
+ await renderButton()
+ await loadJsPayload('specs/helpers/loadAsElement.js', 'init')
+ await testButton()
+ })
+ it("Sets a callback when handed a JQuery object", async () => {
+ await renderButton()
+ await loadJsPayload('specs/helpers/loadAsJQuery.js', 'init')
+ await testButton()
+ })
+})
diff --git a/xblock_pdf/js_tests/tsconfig.json b/xblock_pdf/js_tests/tsconfig.json
new file mode 100644
index 00000000..22828fa2
--- /dev/null
+++ b/xblock_pdf/js_tests/tsconfig.json
@@ -0,0 +1,10 @@
+{
+ "compilerOptions": {
+ "module": "commonjs",
+ "noImplicitAny": true,
+ "removeComments": true,
+ "skipLibCheck": true,
+ "allowJs": true
+ },
+ "types": ["jquery"],
+}
diff --git a/xblock_pdf/js_tests/vitest.config.ts b/xblock_pdf/js_tests/vitest.config.ts
new file mode 100644
index 00000000..44f19bd2
--- /dev/null
+++ b/xblock_pdf/js_tests/vitest.config.ts
@@ -0,0 +1,15 @@
+import { defineConfig } from 'vitest/config'
+import { playwright } from '@vitest/browser-playwright'
+
+export default defineConfig({
+ test: {
+ isolate: true,
+ browser: {
+ enabled: true,
+ provider: playwright(),
+ instances: [{
+ browser: 'firefox',
+ }],
+ },
+ },
+})
diff --git a/xblock_pdf/pdf.py b/xblock_pdf/pdf.py
index 91a27c25..2457593c 100644
--- a/xblock_pdf/pdf.py
+++ b/xblock_pdf/pdf.py
@@ -75,7 +75,7 @@ def raw_settings(self):
def student_view(self, context=None): # pylint: disable=unused-argument
"""Primary view of the XBlock, shown to students when viewing courses."""
html = resource_loader.render_django_template(
- 'templates/html/pdf_view.html',
+ 'templates/html/pdf.html',
context=self.raw_settings,
i18n_service=self.runtime.service(self, "i18n"),
)
@@ -87,33 +87,15 @@ def student_view(self, context=None): # pylint: disable=unused-argument
}
self.runtime.publish(self, event_type, event_data)
frag = Fragment(html)
- frag.add_javascript(resource_loader.load_unicode("static/js/pdf_view.js"))
+ frag.add_javascript(resource_loader.load_unicode("static/js/pdf.js"))
frag.initialize_js('pdfXBlockInitView')
return frag
def studio_view(self, context=None):
- """
- Secondary view of the XBlock.
-
- Shown to teachers when editing the XBlock.
- """
- context = {
- 'display_name': self.display_name,
- 'url': self.url,
- 'allow_download': self.allow_download,
- 'disable_all_download': is_all_download_disabled(),
- 'source_text': self.source_text,
- 'source_url': self.source_url
- }
- html = resource_loader.render_django_template(
- 'templates/html/pdf_edit.html',
- context=context,
- i18n_service=self.runtime.service(self, "i18n"),
- )
- frag = Fragment(html)
- frag.add_javascript(resource_loader.load_unicode("static/js/pdf_edit.js"))
- frag.initialize_js('pdfXBlockInitEdit')
- return frag
+ """Return a fragment that contains the html for the studio view."""
+ # Only the ReactJS editor is supported for this block.
+ # See https://github.com/openedx/frontend-app-authoring/tree/master/src/editors/containers/PdfEditor
+ raise NotImplementedError # pragma: no cover
@XBlock.json_handler
def on_download(self, data, suffix=''): # pylint: disable=unused-argument
diff --git a/xblock_pdf/static/js/pdf.js b/xblock_pdf/static/js/pdf.js
new file mode 100644
index 00000000..d67d11d1
--- /dev/null
+++ b/xblock_pdf/static/js/pdf.js
@@ -0,0 +1,17 @@
+/* Javascript for pdfXBlock. */
+function pdfXBlockInitView(runtime, element) {
+ /* Weird behaviour :
+ * In the LMS, element is the DOM container.
+ * In the CMS, element is the jQuery object associated*
+ * So here I make sure element is the jQuery object */
+ if (element.innerHTML) {
+ element = $(element);
+ }
+
+ $(function () {
+ element.find('.pdf-download-button').on('click', function () {
+ var handlerUrl = runtime.handlerUrl(element, 'on_download');
+ $.post(handlerUrl, '{}');
+ });
+ });
+}
diff --git a/xblock_pdf/static/js/pdf_edit.js b/xblock_pdf/static/js/pdf_edit.js
deleted file mode 100644
index 73a537cd..00000000
--- a/xblock_pdf/static/js/pdf_edit.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/* Javascript for pdfXBlock. */
-function pdfXBlockInitEdit(runtime, element) {
- $(element).find('.action-cancel').bind('click', function () {
- runtime.notify('cancel', {});
- });
-
- $(element).find('.action-save').bind('click', function () {
- var data = {
- 'display_name': $('#pdf_edit_display_name').val(),
- 'url': $('#pdf_edit_url').val(),
- 'allow_download': $('#pdf_edit_allow_download').val() || '',
- 'source_text': $('#pdf_edit_source_text').val() || '',
- 'source_url': $('#pdf_edit_source_url').val() || ''
- };
-
- runtime.notify('save', { state: 'start' });
-
- var handlerUrl = runtime.handlerUrl(element, 'save_pdf');
- $.post(handlerUrl, JSON.stringify(data)).done(function (response) {
- if (response.result === 'success') {
- runtime.notify('save', { state: 'end' });
- }
- else {
- runtime.notify('error', { msg: response.message });
- }
- });
- });
-}
diff --git a/xblock_pdf/static/js/pdf_view.js b/xblock_pdf/static/js/pdf_view.js
deleted file mode 100644
index 4a6a8739..00000000
--- a/xblock_pdf/static/js/pdf_view.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/* Javascript for pdfXBlock. */
-function pdfXBlockInitView(runtime, element) {
- /* Weird behaviour :
- * In the LMS, element is the DOM container.
- * In the CMS, element is the jQuery object associated*
- * So here I make sure element is the jQuery object */
- if (element.innerHTML) {
- element = $(element);
- }
-
- $(function () {
- element.find('.pdf-download-button').on('click', function () {
- var handlerUrl = runtime.handlerUrl(element, 'on_download');
- $.post(handlerUrl, '{}');
- });
- });
-}
diff --git a/xblock_pdf/templates/html/pdf_view.html b/xblock_pdf/templates/html/pdf.html
similarity index 80%
rename from xblock_pdf/templates/html/pdf_view.html
rename to xblock_pdf/templates/html/pdf.html
index 65dc13e6..1092531e 100644
--- a/xblock_pdf/templates/html/pdf_view.html
+++ b/xblock_pdf/templates/html/pdf.html
@@ -9,7 +9,7 @@
{{ display_name }}
{% if allow_download %}
{% trans "Download the PDF" %}
- (Right click or long press on the download link and select the "Save as" option to download. Clicking on the link might open it in a tab.)
+ {% trans "(Right click or long press on the download link and select the \"Save as\" option to download. Clicking on the link might open it in a tab.)" %}
- {% trans "This name appears in the horizontal navigation at the top of the page." %}
-
-
-
-
-
-
-
- {% trans "The URL for your PDF." %}
-
-
- {% if not disable_all_download %}
-
-
-
-
-
- {% trans "Display a download link to this PDF for convenience. Please note that even if this is disabled, the embedded PDF viewer may still display its own download button." %}
-
-
-
-
-
-
-
-
-
-
-
- {% trans "Add a download link for the source file of your PDF. Use it for example to provide the PowerPoint file used to create this PDF." %}
-