From d1e9f00cbc859546488bb6c53c4ff60a8ad91999 Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Wed, 26 Aug 2020 09:47:39 +0100 Subject: [PATCH] Remove jquery from magna charta - had to include an option for testing to return a reference to the object, in order not to have to completely rewrite the tests - at least one test was redundant so have removed, others have been modified --- .../lib/govspeak/barchart-enhancement.js | 3 +- .../lib/govspeak/magna-charta.js | 483 +++++++++--------- .../lib/govspeak/magna-charta-spec.js | 116 +++-- 3 files changed, 316 insertions(+), 286 deletions(-) diff --git a/app/assets/javascripts/govuk_publishing_components/lib/govspeak/barchart-enhancement.js b/app/assets/javascripts/govuk_publishing_components/lib/govspeak/barchart-enhancement.js index 5309079c04..74cbf47547 100644 --- a/app/assets/javascripts/govuk_publishing_components/lib/govspeak/barchart-enhancement.js +++ b/app/assets/javascripts/govuk_publishing_components/lib/govspeak/barchart-enhancement.js @@ -18,8 +18,7 @@ window.GOVUK = window.GOVUK || {}; for (var i = 0; i < $barcharts.length; i++) { var $table = $barcharts[i] - // magna charta is a jquery plugin so we have to pass a jquery object to it - $.magnaCharta($($table), { toggleText: 'Change between chart and table' }) + new GOVUK.Modules.MagnaCharta().start($table, { toggleText: 'Change between chart and table' }) $table.classList.add('js-barchart-table-init') } } diff --git a/app/assets/javascripts/govuk_publishing_components/lib/govspeak/magna-charta.js b/app/assets/javascripts/govuk_publishing_components/lib/govspeak/magna-charta.js index 8b12b72645..493ac07e93 100644 --- a/app/assets/javascripts/govuk_publishing_components/lib/govspeak/magna-charta.js +++ b/app/assets/javascripts/govuk_publishing_components/lib/govspeak/magna-charta.js @@ -1,94 +1,104 @@ -/* global jQuery */ -/* - * magna-charta - * https://github.com/alphagov/magna-charta - * - * Copyright (c) 2012 Jack Franklin - * Licensed under the MIT license. -*/ - -(function ($) { - 'use strict' - - var MagnaCharta = function () { - this.init = function (table, options) { - var defaults = { - outOf: 65, - applyOnInit: true, - toggleText: 'Toggle between chart and table', - autoOutdent: false, - outdentAll: false, - toggleAfter: false // BOOL set TRUE to append the toggle link - } +// Based on magna-charta: https://github.com/alphagov/magna-charta + +window.GOVUK = window.GOVUK || {} +window.GOVUK.Modules = window.GOVUK.Modules || {}; + +(function (Modules) { + function MagnaCharta () { } + + MagnaCharta.prototype.start = function ($module, options) { + this.$module = $module[0] + this.options = { + outOf: 65, + applyOnInit: true, + toggleText: 'Toggle between chart and table', + autoOutdent: false, + outdentAll: false, + toggleAfter: false, // BOOL set TRUE to append the toggle link + returnReference: false // for testing purposes + } - this.options = $.extend({}, defaults, options) + for (var k in options) this.options[k] = options[k] + this.detectIEVersion() - /* detecting IE version - * original from James Padolsey: https://gist.github.com/527683 - * and then rewritten by Jack Franklin to pass JSHint - */ - var ie = (function () { - var undef - var v = 3 - var div = document.createElement('div') - var all = div.getElementsByTagName('i') + // if it's IE7 or less, we just show the plain tables + this.ENABLED = !(this.ie && this.ie < 8) - do { - div.innerHTML = '' - } while (v < 10 && all[0]) + // store a reference to the table in the object + this.$table = $module - return (v > 4) ? v : undef - })() + // lets make what will become the new graph + this.$graph = document.createElement('div') + this.$graph.setAttribute('aria-hidden', 'true') // FIXME this never gets updated - // if it's IE7 or less, we just show the plain tables - this.ENABLED = !(ie && ie < 8) + // copy over classes from the table, and add the extra one + this.$graph.setAttribute('class', this.$table.className) + this.$graph.classList.add('mc-chart') - // store a reference to the table in the object - this.$table = table + // set the stacked option based on + // giving the table a class of mc-stacked + this.options.stacked = this.$table.classList.contains('mc-stacked') - // lets make what will become the new graph - this.$graph = $('
').attr('aria-hidden', 'true') + // set the negative option based on + // giving the table a class of mc-negative + this.options.negative = this.$table.classList.contains('mc-negative') - // copy over classes from the table, and add the extra one - this.$graph.attr('class', this.$table.attr('class')).addClass('mc-chart') + // true if it's a 'multiple' table + // this means multiple bars per rows, but not stacked. + var moreThanTwoTDs = this.$table.querySelectorAll('tbody tr')[0].querySelectorAll('td').length > 2 + this.options.multiple = !this.options.stacked && (this.$table.classList.contains('mc-multiple') || moreThanTwoTDs) - // set the stacked option based on - // giving the table a class of mc-stacked - this.options.stacked = this.$table.hasClass('mc-stacked') + // set the outdent options + // which can be set via classes or overriden by setting the value to true + // in the initial options object that's passed in + this.options.autoOutdent = this.options.autoOutdent || this.$table.classList.contains('mc-auto-outdent') - // set the negative option based on - // giving the table a class of mc-negative - this.options.negative = this.$table.hasClass('mc-negative') + this.options.outdentAll = this.options.outdentAll || this.$table.classList.contains('mc-outdented') - // true if it's a 'multiple' table - // this means multiple bars per rows, but not stacked. - this.options.multiple = !this.options.stacked && ( - this.$table.hasClass('mc-multiple') || - this.$table.find('tbody tr').first().find('td').length > 2) + // add a mc-multiple class if it is + if (this.options.multiple) { + this.$graph.classList.add('mc-multiple') + } - // set the outdent options - // which can be set via classes or overriden by setting the value to true - // in the initial options object that's passed in - this.options.autoOutdent = this.options.autoOutdent || - this.$table.hasClass('mc-auto-outdent') + this.options.hasCaption = !!this.$table.querySelectorAll('caption').length - this.options.outdentAll = this.options.outdentAll || - this.$table.hasClass('mc-outdented') + if (this.ENABLED) { + this.apply() + // if applyOnInit is false, toggle immediately to show the table and hide the graph + if (!this.options.applyOnInit) { + this.toggleLink.click() + } + } - // add a mc-multiple class if it is - if (this.options.multiple) { this.$graph.addClass('mc-multiple') } + if (this.options.returnReference) { + return this + } + } - this.options.hasCaption = !!this.$table.find('caption').length + MagnaCharta.prototype.detectIEVersion = function () { + // detect IE version: James Padolsey, https://gist.github.com/527683 + this.ie = (function () { + var undef + var v = 3 + var div = document.createElement('div') + var all = div.getElementsByTagName('i') - if (this.ENABLED) { - this.apply() - // if applyOnInit is false, toggle immediately - // showing the table, hiding the graph - if (!this.options.applyOnInit) { - this.toggle() - } - } - return this + do { + div.innerHTML = '' + } while (v < 10 && all[0]) + + return (v > 4) ? v : undef + })() + } + + MagnaCharta.prototype.apply = function () { + if (this.ENABLED) { + this.constructChart() + this.addClassesToHeader() + this.applyWidths() + this.insert() + this.$table.classList.add('visually-hidden') + this.applyOutdent() } } @@ -97,57 +107,76 @@ // constructs the header MagnaCharta.prototype.construct.thead = function () { - var thead = $('
', { - class: 'mc-thead' - }) + var thead = document.createElement('div') + thead.classList.add('mc-thead') + + var tr = document.createElement('div') + tr.classList.add('mc-tr') - var tr = $('
', { class: 'mc-tr' }) var output = '' - this.$table.find('th').each(function (i, item) { + var allTheTHs = this.$table.querySelectorAll('th') + + for (var i = 0; i < allTheTHs.length; i++) { output += '
' - output += $(item).html() + output += allTheTHs[i].innerHTML output += '
' - }) - tr.append(output) - thead.append(tr) + } + + tr.innerHTML = output + thead.appendChild(tr) return thead } MagnaCharta.prototype.construct.tbody = function () { - var tbody = $('
', { - class: 'mc-tbody' - }) + var tbody = document.createElement('div') + tbody.classList.add('mc-tbody') + + var allTheTbodyTrs = this.$table.querySelectorAll('tbody tr') + + for (var i = 0; i < allTheTbodyTrs.length; i++) { + var tr = document.createElement('div') + tr.classList.add('mc-tr') - this.$table.find('tbody tr').each(function (i, item) { - var tr = $('
', { class: 'mc-tr' }) var cellsOutput = '' - $(item).find('td').each(function (j, cell) { + var allTheTds = allTheTbodyTrs[i].querySelectorAll('td') + + for (var j = 0; j < allTheTds.length; j++) { cellsOutput += '
' - cellsOutput += $(cell).html() + cellsOutput += allTheTds[j].innerHTML cellsOutput += '
' - }) - tr.append(cellsOutput) - tbody.append(tr) - }) + } + tr.innerHTML = cellsOutput + tbody.appendChild(tr) + } + return tbody } MagnaCharta.prototype.construct.caption = function () { - var cap = this.$table.find('caption') - return cap.clone() + var cap = this.$table.querySelector('caption') + return cap.cloneNode(true) } // construct a link to allow the user to toggle between chart and table - MagnaCharta.prototype.construct.toggleLink = function () { + MagnaCharta.prototype.construct.toggleLink = function (toggleText) { + var link = document.createElement('a') + link.setAttribute('href', '#') + link.classList.add('mc-toggle-link') + link.innerHTML = toggleText + link.setAttribute('aria-hidden', 'true') + + return link + } + + // toggles between showing the table and showing the chart + MagnaCharta.prototype.addToggleClick = function () { var that = this - return $('', { - href: '#', - class: 'mc-toggle-link', - text: this.options.toggleText, - 'aria-hidden': 'true' - }).on('click', function (e) { - that.toggle(e) + + this.toggleLink.addEventListener('click', function (e) { + e.preventDefault() + that.$graph.classList.toggle('visually-hidden') + that.$table.classList.toggle('visually-hidden') }) } @@ -157,40 +186,22 @@ // get at options and properties var thead = this.construct.thead.call(this) var tbody = this.construct.tbody.call(this) - var toggleLink = this.construct.toggleLink.call(this) + this.toggleLink = this.construct.toggleLink(this.options.toggleText) + this.addToggleClick(this.toggleLink) if (this.options.hasCaption) { var caption = this.construct.caption.call(this) - this.$graph.append(caption) + this.$graph.appendChild(caption) } if (this.options.toggleAfter) { - this.$table.after(toggleLink) + this.$table.insertAdjacentElement('afterend', this.toggleLink) } else { - this.$table.before(toggleLink) + this.$table.insertAdjacentElement('beforebegin', this.toggleLink) } - this.$graph.append(thead) - this.$graph.append(tbody) - } - - MagnaCharta.prototype.apply = function () { - if (this.ENABLED) { - this.constructChart() - this.addClassesToHeader() - this.calculateMaxWidth() - this.applyWidths() - this.insert() - this.$table.addClass('visually-hidden') - this.applyOutdent() - } - } - - // toggles between showing the table and showing the chart - MagnaCharta.prototype.toggle = function (e) { - this.$graph.toggle() - this.$table.toggleClass('visually-hidden') - if (e) { e.preventDefault() } + this.$graph.appendChild(thead) + this.$graph.appendChild(tbody) } // some handy utility methods @@ -215,92 +226,102 @@ } MagnaCharta.prototype.addClassesToHeader = function () { - var headerCells = this.$graph.find('.mc-th').filter(':not(:first)') + var headerCells = this.$graph.querySelectorAll('.mc-th') + var looplength = headerCells.length if (this.options.stacked) { - headerCells.last().addClass('mc-stacked-header mc-header-total') - headerCells = headerCells.filter(':not(:last)') + var last = looplength - 1 + headerCells[last].classList.add('mc-stacked-header', 'mc-header-total') + looplength -= 1 } - headerCells.addClass('mc-key-header').filter(':not(.mc-stacked-header)').each(function (i, item) { - $(item).addClass('mc-key-' + (i + 1)) - }) + // we deliberately don't apply this to the first cell + for (var i = 1; i < looplength; i++) { + headerCells[i].classList.add('mc-key-header') + if (!headerCells[i].classList.contains('mc-stacked-header')) { + headerCells[i].classList.add('mc-key-' + i) + } + } } MagnaCharta.prototype.calculateMaxWidth = function () { - // JS scoping sucks - var that = this - - // store the cell values in here so later - // so we can figure out the maximum value later + // store the cell values in here so we can figure out the maximum value later var values = [] - // var to store the maximum negative value - // (used only for negative charts) + // var to store the maximum negative value (used only for negative charts) var maxNegativeValue = 0 // loop through every tr in the table - this.$graph.find('.mc-tr').each(function (i, item) { - var $this = $(item) + var trs = this.$graph.querySelectorAll('.mc-tr') + for (var i = 0; i < trs.length; i++) { + var $this = trs[i] // the first td is going to be the key, so ignore it - var $bodyCells = $this.find('.mc-td:not(:first)') - - // if it's stacked, the last column is a totals - // so we don't want that in our calculations - if (that.options.stacked) { - $bodyCells.last().addClass('mc-stacked-total') - $bodyCells = $bodyCells.filter(':not(:last)') - } - - // first td in each row is key - $this.find('.mc-td:first').addClass('mc-key-cell') - - // store the total value of the bar cells in a row - // for anything but stacked, this is just the value of one - var cellsTotalValue = 0 + var $bodyCells = $this.querySelectorAll('.mc-td:not(:first-child)') + var bodyCellsLength = $bodyCells.length + + // might be the row containing th elements, so we need to check + if (bodyCellsLength) { + // if it's stacked, the last column is a totals + // so we don't want that in our calculations + if (this.options.stacked) { + $bodyCells[bodyCellsLength - 1].classList.add('mc-stacked-total') + bodyCellsLength -= 1 + } - $bodyCells.each(function (j, cell) { - var $cell = $(cell).addClass('mc-bar-cell').addClass('mc-bar-' + (j + 1)) - var cellVal = that.utils.stripValue($cell.text()) + // first td in each row is key + var firstCell = $this.querySelector('.mc-td') + if (firstCell) { + firstCell.classList.add('mc-key-cell') + } - if (that.utils.isFloat(cellVal)) { - var parsedVal = parseFloat(cellVal, 10) - var absParsedVal = Math.abs(parsedVal) - if (parsedVal === 0) { - $cell.addClass('mc-bar-zero') - } + // store the total value of the bar cells in a row + // for anything but stacked, this is just the value of one + var cellsTotalValue = 0 + + for (var j = 0; j < bodyCellsLength; j++) { + var $cell = $bodyCells[j] + $cell.classList.add('mc-bar-cell') + $cell.classList.add('mc-bar-' + (j + 1)) + var cellVal = this.utils.stripValue($cell.innerText) + + if (this.utils.isFloat(cellVal)) { + var parsedVal = parseFloat(cellVal, 10) + var absParsedVal = Math.abs(parsedVal) + if (parsedVal === 0) { + $cell.classList.add('mc-bar-zero') + } - if (that.options.negative) { - if (that.utils.isNegative(parsedVal)) { - $cell.addClass('mc-bar-negative') - if (absParsedVal > maxNegativeValue) { - maxNegativeValue = absParsedVal + if (this.options.negative) { + if (this.utils.isNegative(parsedVal)) { + $cell.classList.add('mc-bar-negative') + if (absParsedVal > maxNegativeValue) { + maxNegativeValue = absParsedVal + } + } else { + $cell.classList.add('mc-bar-positive') } - } else { - $cell.addClass('mc-bar-positive') } - } - // now we are done with our negative calculations - // set parsedVal to absParsedVal - parsedVal = absParsedVal + // now we are done with our negative calculations + // set parsedVal to absParsedVal + parsedVal = absParsedVal - if (!that.options.stacked) { - cellsTotalValue = parsedVal - values.push(parsedVal) - } else { - cellsTotalValue += parsedVal + if (!this.options.stacked) { + cellsTotalValue = parsedVal + values.push(parsedVal) + } else { + cellsTotalValue += parsedVal + } } } - }) + } - // if stacked, we need to push the total value of the row - // to the values array - if (that.options.stacked) { values.push(cellsTotalValue) } - }) + // if stacked, we need to push the total value of the row to the values array + if (this.options.stacked) { values.push(cellsTotalValue) } + } var resp = {} - resp.max = parseFloat(that.utils.returnMax(values), 10) + resp.max = parseFloat(this.utils.returnMax(values), 10) resp.single = parseFloat(this.options.outOf / resp.max, 10) if (this.options.negative) { @@ -313,43 +334,42 @@ MagnaCharta.prototype.applyWidths = function () { this.dimensions = this.calculateMaxWidth() - var that = this + var trs = this.$graph.querySelectorAll('.mc-tr') - this.$graph.find('.mc-tr').each(function (i, row) { - var $this = $(row) + for (var i = 0; i < trs.length; i++) { + var cells = trs[i].querySelectorAll('.mc-bar-cell') - $this.find('.mc-bar-cell').each(function (j, cell) { - var $cell = $(cell) - var parsedCellVal = parseFloat(that.utils.stripValue($cell.text()), 10) - var parsedVal = parsedCellVal * that.dimensions.single + for (var j = 0; j < cells.length; j++) { + var $cell = cells[j] + var parsedCellVal = parseFloat(this.utils.stripValue($cell.innerText), 10) + var parsedVal = parsedCellVal * this.dimensions.single var absParsedCellVal = Math.abs(parsedCellVal) var absParsedVal = Math.abs(parsedVal) // apply the left margin to the positive bars - if (that.options.negative) { - if ($cell.hasClass('mc-bar-positive')) { - $cell.css('margin-left', that.dimensions.marginLeft + '%') + if (this.options.negative) { + if ($cell.classList.contains('mc-bar-positive')) { + $cell.style.marginLeft = this.dimensions.marginLeft + '%' } else { // if its negative but not the maximum negative // we need to give it enough margin to push it further right to align - if (absParsedCellVal < that.dimensions.maxNegative) { - // left margin needs to be - // (largestNegVal - thisNegVal)*single - var leftMarg = (that.dimensions.maxNegative - absParsedCellVal) * that.dimensions.single - $cell.css('margin-left', leftMarg + '%') + if (absParsedCellVal < this.dimensions.maxNegative) { + // left margin needs to be (largestNegVal - thisNegVal) * single + var leftMarg = (this.dimensions.maxNegative - absParsedCellVal) * this.dimensions.single + $cell.style.marginLeft = leftMarg + '%' } } } // wrap the cell value in a span tag - $cell.wrapInner('') - $cell.css('width', absParsedVal + '%') - }) - }) + $cell.innerHTML = '' + $cell.innerHTML + '' + $cell.style.width = absParsedVal + '%' + } + } } MagnaCharta.prototype.insert = function () { - this.$table.after(this.$graph) + this.$table.insertAdjacentElement('afterend', this.$graph) } MagnaCharta.prototype.applyOutdent = function () { @@ -360,39 +380,34 @@ * to push it out (the bar is styled to be relative) * unfortunately this has to be done once the chart has been inserted */ - var that = this + var cells = this.$graph.querySelectorAll('.mc-bar-cell') - this.$graph.find('.mc-bar-cell').each(function (i, cell) { - var $cell = $(cell) - var cellVal = parseFloat(that.utils.stripValue($cell.text()), 10) - var $cellSpan = $cell.children('span') - var spanWidth = $cellSpan.width() + 10 // +10 just for extra padding - var cellWidth = $cell.width() + for (var i = 0; i < cells.length; i++) { + var $cell = cells[i] + var cellVal = parseFloat(this.utils.stripValue($cell.innerText), 10) + var $cellSpan = $cell.querySelector('span') + var spanWidth = parseFloat(window.getComputedStyle($cellSpan, null).width.replace('px', '')) + 10 // +10 just for extra padding + var cellWidth = parseFloat(window.getComputedStyle($cell, null).width.replace('px', '')) - if (!that.options.stacked) { + if (!this.options.stacked) { // if it's 0, it is effectively outdented - if (cellVal === 0) { $cell.addClass('mc-bar-outdented') } - - if ((that.options.autoOutdent && spanWidth > cellWidth) || that.options.outdentAll) { - $cell.addClass('mc-bar-outdented') + if (cellVal === 0) { $cell.classList.add('mc-bar-outdented') } - $cellSpan.css({ - 'margin-left': '100%', - display: 'inline-block' - }) + if ((this.options.autoOutdent && spanWidth > cellWidth) || this.options.outdentAll) { + $cell.classList.add('mc-bar-outdented') + $cellSpan.style.marginLeft = '100%' + $cellSpan.style.display = 'inline-block' } else { - $cell.addClass('mc-bar-indented') + $cell.classList.add('mc-bar-indented') } } else { // if it's a stacked graph if (spanWidth > cellWidth && cellVal > 0) { - $cell.addClass('mc-value-overflow') + $cell.classList.add('mc-value-overflow') } } - }) + } } - $.magnaCharta = function (table, options) { - return new MagnaCharta().init(table, options) - } -}(jQuery)) + Modules.MagnaCharta = MagnaCharta +})(window.GOVUK.Modules) diff --git a/spec/javascripts/govuk_publishing_components/lib/govspeak/magna-charta-spec.js b/spec/javascripts/govuk_publishing_components/lib/govspeak/magna-charta-spec.js index a0ffbed818..6d623300a8 100644 --- a/spec/javascripts/govuk_publishing_components/lib/govspeak/magna-charta-spec.js +++ b/spec/javascripts/govuk_publishing_components/lib/govspeak/magna-charta-spec.js @@ -1,10 +1,14 @@ /* eslint-env jasmine, jquery */ +/* global GOVUK */ describe('Magna charta', function () { 'use strict' var element var magna + var graph + var table + var toggle // widths are 65/max * val (65 by default) var cW = function (max, val, padding) { @@ -101,7 +105,10 @@ describe('Magna charta', function () { beforeEach(function () { element = $('
').attr('id', 'test-magna-charta').html(single) $('body').append(element) - magna = $.magnaCharta(element.find('#single')) + magna = new GOVUK.Modules.MagnaCharta().start(element.find('#single')[0], { returnReference: true }) + graph = element.find('.mc-chart') + table = element.find('table') + toggle = element.find('.mc-toggle-link') }) afterEach(function () { @@ -109,70 +116,66 @@ describe('Magna charta', function () { }) it('creates a new div containing the chart', function () { - expect(magna.$graph.length).toEqual(1) - }) - - it('the new chart div has a class mc-chart', function () { - expect(magna.$graph).toHaveClass('mc-chart') + expect(graph.length).toBe(1) }) it('the new chart copies over any other classes', function () { - expect(magna.$graph).toHaveClass('no-key') + expect(graph).toHaveClass('no-key') }) it('running toggle switches between chart and table', function () { - magna.toggle() - expect(magna.$table).not.toHaveClass('visually-hidden') - expect(magna.$graph.filter(':visible').length).toBe(0) + toggle[0].click() + expect(table).not.toHaveClass('visually-hidden') + expect(graph).toHaveClass('visually-hidden') // toggle it back - magna.toggle() - expect(magna.$table).toHaveClass('visually-hidden') - expect(magna.$graph.filter(':visible').length).toBe(1) + toggle[0].click() + expect(table).toHaveClass('visually-hidden') + expect(graph).not.toHaveClass('visually-hidden') }) it('new chart div contains all table bits as divs', function () { - expect(magna.$graph.find('.mc-thead').length).toBe(1) - expect(magna.$graph.find('.mc-tr').length).toBe(4) - expect(magna.$graph.find('.mc-th').length).toBe(2) - expect(magna.$graph.find('.mc-td').length).toBe(6) + expect(graph.find('.mc-thead').length).toBe(1) + expect(graph.find('.mc-tr').length).toBe(4) + expect(graph.find('.mc-th').length).toBe(2) + expect(graph.find('.mc-td').length).toBe(6) }) it('new chart divs contain the right values', function () { - var cells = magna.$graph.find('.mc-td') + var cells = graph.find('.mc-td') expect(cells.eq(0).text()).toBe('Testing One') expect(cells.eq(1).text()).toBe('5') - expect(magna.$graph.find('.mc-th').eq(0).text()).toBe('Some Data') + expect(graph.find('.mc-th').eq(0).text()).toBe('Some Data') }) it('figures out the maximum graph value', function () { - var test = magna.calculateMaxWidth() + var test = magna.dimensions expect(test.max).toBe(parseFloat(5, 10)) expect(test.single).toBe(parseFloat(65 / 5, 10)) }) it('divs that are bars or keys are given correct classes', function () { - expect(magna.$graph.find('.mc-key-cell').length).toBe(3) - expect(magna.$graph.find('.mc-bar-cell').length).toBe(3) + expect(graph.find('.mc-key-cell').length).toBe(3) + expect(graph.find('.mc-bar-cell').length).toBe(3) }) it('bar cells have their values wrapped in a span tag', function () { - expect(magna.$graph.find('.mc-bar-cell span').length).toBe(3) + expect(graph.find('.mc-bar-cell span').length).toBe(3) }) it('bars are given the correct width', function () { - var bars = magna.$graph.find('.mc-bar-cell') + var bars = graph.find('.mc-bar-cell') expect(bars.get(0).style.width).toBe(cW(5, 5)) expect(bars.get(1).style.width).toBe(cW(5, 4)) expect(bars.get(2).style.width).toBe(cW(5, 3)) }) it('new chart is inserted into DOM after table', function () { - expect(magna.$table.next()).toHaveClass('mc-chart') + expect(table.next()).toHaveClass('mc-chart') }) it('bars are given classes to track what number they are', function () { - magna.$graph.find('.mc-bar-cell').each(function (i, item) { + graph.find('.mc-bar-cell').each(function (i, item) { expect($(item)).toHaveClass('mc-bar-1') }) }) @@ -182,7 +185,9 @@ describe('Magna charta', function () { beforeEach(function () { element = $('
').attr('id', 'test-magna-charta').html(multiple2) $('body').append(element) - magna = $.magnaCharta(element.find('#multiple2')) + magna = new GOVUK.Modules.MagnaCharta().start(element.find('#multiple2')[0], { returnReference: true }) + graph = element.find('.mc-chart') + table = element.find('table') }) afterEach(function () { @@ -190,7 +195,7 @@ describe('Magna charta', function () { }) it('the graph of a multiple table is given a class', function () { - expect(magna.$graph).toHaveClass('mc-multiple') + expect(graph).toHaveClass('mc-multiple') expect(magna.options.multiple).toBe(true) }) }) @@ -199,7 +204,9 @@ describe('Magna charta', function () { beforeEach(function () { element = $('
').attr('id', 'test-magna-charta').html(multiple) $('body').append(element) - magna = $.magnaCharta(element.find('#multiple')) + magna = new GOVUK.Modules.MagnaCharta().start(element.find('#multiple')[0], { returnReference: true }) + graph = element.find('.mc-chart') + table = element.find('table') }) afterEach(function () { @@ -211,20 +218,20 @@ describe('Magna charta', function () { }) it('the cells that become bars are given the right classes', function () { - expect(magna.$graph.find('.mc-bar-cell').length).toBe(6) // bar cells - expect(magna.$graph.find('.mc-key-cell').length).toBe(3) // key cells - expect(magna.$graph.find('.mc-stacked-total').length).toBe(3) // total cells + expect(graph.find('.mc-bar-cell').length).toBe(6) // bar cells + expect(graph.find('.mc-key-cell').length).toBe(3) // key cells + expect(graph.find('.mc-stacked-total').length).toBe(3) // total cells }) it('header cells get the right values', function () { - var head = magna.$graph.find('.mc-thead') + var head = graph.find('.mc-thead') expect(head.find('.mc-stacked-header').length).toBe(1) expect(head.find('.mc-th').eq(1)).toHaveClass('mc-key-1') expect(head.find('.mc-key-header').length).toBe(2) }) it('the bar cells are given the right widths', function () { - var cells = magna.$graph.find('.mc-bar-cell') + var cells = graph.find('.mc-bar-cell') expect(cells.get(0).style.width).toEqual(cW(12, 5)) expect(cells.get(1).style.width).toEqual(cW(12, 6)) expect(cells.get(2).style.width).toEqual(cW(12, 6)) @@ -234,7 +241,7 @@ describe('Magna charta', function () { }) it('the bar cells are given classes denoting their index', function () { - var rows = magna.$graph.find('.mc-tbody .mc-tr') + var rows = graph.find('.mc-tbody .mc-tr') rows.each(function (_, row) { var cells = $(row).find('.mc-bar-cell') cells.each(function (i, cell) { @@ -254,9 +261,12 @@ describe('Magna charta', function () { beforeEach(function () { element = $('
').attr('id', 'test-magna-charta').html(negative2) $('body').append(element) - magna = $.magnaCharta(element.find('#negative2'), { - applyOnInit: false + magna = new GOVUK.Modules.MagnaCharta().start(element.find('#negative2')[0], { + applyOnInit: false, + returnReference: true }) + graph = element.find('.mc-chart') + table = element.find('table') }) afterEach(function () { @@ -264,14 +274,14 @@ describe('Magna charta', function () { }) it('doesnt show the chart initially', function () { - expect(magna.$graph.filter(':visible').length).toBe(0) - expect(element.find('#negative2')).not.toHaveClass('visually-hidden') + expect(table).not.toHaveClass('visually-hidden') + expect(graph).toHaveClass('visually-hidden') }) it('graph is shown when toggle is called', function () { - magna.toggle() - expect(magna.$graph.filter(':visible').length).toBe(1) - expect(element.find('#negative2')).toHaveClass('visually-hidden') + element.find('.mc-toggle-link')[0].click() + expect(table).toHaveClass('visually-hidden') + expect(graph).not.toHaveClass('visually-hidden') }) }) @@ -279,7 +289,9 @@ describe('Magna charta', function () { beforeEach(function () { element = $('
').attr('id', 'test-magna-charta').html(negative) $('body').append(element) - magna = $.magnaCharta(element.find('#negative')) + magna = new GOVUK.Modules.MagnaCharta().start(element.find('#negative')[0], { returnReference: true }) + graph = element.find('.mc-chart') + table = element.find('table') }) afterEach(function () { @@ -291,12 +303,12 @@ describe('Magna charta', function () { }) it('cells are given positive and negative classes', function () { - expect(magna.$graph.find('.mc-bar-negative').length).toBe(2) - expect(magna.$graph.find('.mc-bar-positive').length).toBe(2) + expect(graph.find('.mc-bar-negative').length).toBe(2) + expect(graph.find('.mc-bar-positive').length).toBe(2) }) it('cells are given the right width', function () { - var cells = magna.$graph.find('.mc-bar-cell') + var cells = graph.find('.mc-bar-cell') expect(cells.get(0).style.width).toEqual(cW(10, 5)) expect(cells.get(1).style.width).toEqual(cW(10, 10)) expect(cells.get(2).style.width).toEqual(cW(10, 10)) @@ -304,7 +316,7 @@ describe('Magna charta', function () { }) it('positive cells are given a left margin to align them with negative cells', function () { - var cells = magna.$graph.find('.mc-bar-positive') + var cells = graph.find('.mc-bar-positive') expect(cells.get(0).style.marginLeft).toEqual(cW(10, 10)) }) @@ -322,7 +334,9 @@ describe('Magna charta', function () { beforeEach(function () { element = $('
').attr('id', 'test-magna-charta').html(outdentAll) $('body').append(element) - magna = $.magnaCharta(element.find('#outdent-all')) + magna = new GOVUK.Modules.MagnaCharta().start(element.find('#outdent-all')[0], { returnReference: true }) + graph = element.find('.mc-chart') + table = element.find('table') }) afterEach(function () { @@ -330,7 +344,7 @@ describe('Magna charta', function () { }) it('all cell values are pushed left', function () { - magna.$graph.find('.mc-bar-cell span').each(function (i, item) { + graph.find('.mc-bar-cell span').each(function (i, item) { expect(item.style.marginLeft).toBe('100%') }) }) @@ -340,7 +354,9 @@ describe('Magna charta', function () { beforeEach(function () { element = $('
').attr('id', 'test-magna-charta').html(single) $('body').append(element) - magna = $.magnaCharta(element.find('#single')) + magna = new GOVUK.Modules.MagnaCharta().start(element.find('#single')[0], { returnReference: true }) + graph = element.find('.mc-chart') + table = element.find('table') }) afterEach(function () {