WIP: add tests for visual editor

package.json

@@ -4,7 +4,16 @@
   "private": true,
   "author": "Government Digital Service",
   "license": "MIT",
+  "scripts": {
+    "jasmine:prepare": "RAILS_ENV=test bundle exec rails assets:clobber assets:precompile",
+    "jasmine:ci": "yarn run jasmine:prepare && yarn run jasmine-browser-runner runSpecs",
+    "jasmine:browser": "yarn run jasmine:prepare && yarn run jasmine-browser-runner"
+  },
   "dependencies": {
     "govspeak-visual-editor": "^3.0.0"
+  },
+  "devDependencies": {
+    "jasmine-browser-runner": "^2.5.0",
+    "jasmine-core": "^5.3.0"
   }
 }

spec/features/editor_spec.rb

@@ -7,4 +7,15 @@
     expect(page).to have_content("Visual editor")
     expect(page).to have_css(".visual-editor__container")
   end
+
+  scenario "Visual editor renders markdown on demand" do
+    use_javascript_driver
+
+    visit "/editor"
+
+    click_button "Show markdown"
+
+    puts page.body
+    expect(page).to have_css(".visual-editor__markdown-section")
+  end
 end

spec/javascripts/visual-editor-spec.js

@@ -0,0 +1,83 @@
+// Using https://github.com/alphagov/signon/blob/main/spec/javascripts/modules/accessible-autocomplete-spec.js
+// as a starting point
+
+describe('visual-editor.js', function () {
+  let component, module, autocompleteInput, selectInput
+
+  beforeEach(async function () {
+    component = document.createElement('div')
+    // component.setAttribute('data-module', 'accessible-autocomplete')
+    component.innerHTML = `
+      <div class="js-visual-editor__content" hidden>
+        <p>Hello world, this is the visual editor.</p>
+        <p><a href="example.com">Example link</a></p>
+        <h2>This is an H2 heading</h2>
+        <ol>
+          <li><p>First</p></li>
+          <li><p>Second</p></li>
+          <li><p>Third</p></li>
+        </ol>
+        <ul>
+          <li><p>One</p></li>
+          <li><p>Two</p></li>
+          <li><p>Three</p></li>
+        </ul>
+      </div>
+
+      <div class="js-visual-editor__container visual-editor__container"></div>
+
+      <div class="visual-editor__markdown-toolbar">
+        <button class="js-visual-editor__markdown-button">Show markdown</button>
+      </div>
+
+      <div class="js-visual-editor__markdown-section visual-editor__markdown-section" hidden>
+
+        <h2>Markdown version of the content in visual editor</h2>
+
+        <textarea readonly class="js-visual-editor__textarea visual-editor__textarea"></textarea>
+
+        <button class="js-visual-editor__copy-button">Copy markdown</button>
+      </div>
+    </div>
+    `
+
+    // var content = document.querySelector(".js-visual-editor__content"),
+    //   container = document.querySelector(".js-visual-editor__container"),
+    //   textarea = document.querySelector(".js-visual-editor__textarea"),
+    //   markdownButton = document.querySelector(
+    //     ".js-visual-editor__markdown-button",
+    //   ),
+    //   markdownSection = document.querySelector(
+    //     ".js-visual-editor__markdown-section",
+    //   ),
+    //   copyButton = document.querySelector(".js-visual-editor__copy-button");
+
+    // new window.GovspeakVisualEditor(content, container, textarea, { images: [] });
+  })
+
+  it('reveals the textarea when "Show markdown" is clicked', async function () {
+    const textArea = component.querySelector('.js-visual-editor__markdown-section')
+    const showButton = component.querySelector('.js-visual-editor__markdown-button')
+    expect(textArea.hidden).toBe(true)
+    showButton.click();
+    expect(textArea.hidden).toBe(false)
+  })
+
+  // it('opens the menu when clicking the arrow', async function () {
+    // const menuElement = component.querySelector('.autocomplete__menu')
+    // const menuElementClassesBefore = Array.from(menuElement.classList)
+    // expect(menuElementClassesBefore.includes('autocomplete__menu--visible')).toBe(false)
+    // expect(menuElementClassesBefore.includes('autocomplete__menu--hidden')).toBe(true)
+
+    // const arrowElement = component.querySelector('.autocomplete__dropdown-arrow-down')
+    // arrowElement.dispatchEvent(new Event('click'))
+
+    // await wait()
+
+    // const menuElementClassesAfter = Array.from(menuElement.classList)
+    // expect(menuElementClassesAfter.includes('autocomplete__menu--visible')).toBe(true)
+    // expect(menuElementClassesAfter.includes('autocomplete__menu--hidden')).toBe(false)
+  // })
+})
+
+const wait = async () => await new Promise(resolve => setTimeout(resolve, 100))

spec/spec_helper.rb

@@ -95,3 +95,8 @@
   #   # as the one that triggered the failure.
   #   Kernel.srand config.seed
 end
+
+def use_javascript_driver
+  WebMock.allow_net_connect!
+  Capybara.current_driver = Capybara.javascript_driver
+end

spec/support/jasmine-browser.json

@@ -0,0 +1,17 @@
+{
+  "srcDir": "public/assets",
+  "srcFiles": [
+    "application-*.js"
+  ],
+  "cssFiles": [
+    "application-*.css"
+  ],
+  "specDir": "spec/javascripts",
+  "specFiles": [
+    "**/*[sS]pec.js"
+  ],
+  "helpers": [
+    "helpers/*.js"
+  ],
+  "browser": "headlessChrome"
+}