diff --git a/.eslintignore b/.eslintignore index 7e54e3631..a11511b7c 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1 +1,2 @@ -**/*.spec.js \ No newline at end of file +dist/** +.github/** diff --git a/.eslintrc.json b/.eslintrc.json index 8b48e39f1..87bc4f2da 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -2,6 +2,7 @@ "env": { "browser": true, "es6": true, + "jest/globals": true, "node": true }, "parser": "@babel/eslint-parser", @@ -13,8 +14,10 @@ "sourceType": "module" }, "extends": ["eslint:recommended", "plugin:jsdoc/recommended", "plugin:prettier/recommended"], - "plugins": ["jsdoc", "prettier"], + "plugins": ["jest", "jsdoc", "prettier"], "rules": { + "no-prototype-builtins": 0, + "no-unused-vars": 0, "jsdoc/check-indentation": 0, "jsdoc/check-alignment": 0, "jsdoc/check-line-alignment": 0, diff --git a/.prettierrc b/.prettierrc.json similarity index 58% rename from .prettierrc rename to .prettierrc.json index c6420f535..8cadfefaf 100644 --- a/.prettierrc +++ b/.prettierrc.json @@ -1,6 +1,8 @@ { "endOfLine": "auto", - "plugins": ["prettier-plugin-jsdoc"], + "plugins": [ + "prettier-plugin-jsdoc" + ], "printWidth": 100, "singleQuote": true -} +} \ No newline at end of file diff --git a/__mocks__/MERMAID.js b/__mocks__/MERMAID.js index f844f1c55..58e31037a 100644 --- a/__mocks__/MERMAID.js +++ b/__mocks__/MERMAID.js @@ -1,3 +1,3 @@ -export const curveBasis = 'basis' -export const curveLinear = 'linear' -export const curveCardinal = 'cardinal' +export const curveBasis = 'basis'; +export const curveLinear = 'linear'; +export const curveCardinal = 'cardinal'; diff --git a/__mocks__/d3.js b/__mocks__/d3.js index caee810ad..c5c7deed8 100644 --- a/__mocks__/d3.js +++ b/__mocks__/d3.js @@ -1,11 +1,10 @@ -/* eslint-env jest */ let NewD3 = function () { - function returnThis () { - return this + function returnThis() { + return this; } return { append: function () { - return NewD3() + return NewD3(); }, lower: returnThis, attr: returnThis, @@ -16,41 +15,47 @@ let NewD3 = function () { getBBox: function () { return { height: 10, - width: 20 - } - } - } - } - } -} + width: 20, + }; + }, + }, + }, + }; +}; export const select = function () { - return new NewD3() -} + return new NewD3(); +}; export const selectAll = function () { - return new NewD3() -} + return new NewD3(); +}; -export const curveBasis = 'basis' -export const curveLinear = 'linear' -export const curveCardinal = 'cardinal' +export const curveBasis = 'basis'; +export const curveLinear = 'linear'; +export const curveCardinal = 'cardinal'; export const MockD3 = (name, parent) => { - const children = [] + const children = []; const elem = { - get __children () { return children }, - get __name () { return name }, - get __parent () { return parent } - } + get __children() { + return children; + }, + get __name() { + return name; + }, + get __parent() { + return parent; + }, + }; elem.append = (name) => { - const mockElem = MockD3(name, elem) - children.push(mockElem) - return mockElem - } - elem.lower = jest.fn(() => elem) - elem.attr = jest.fn(() => elem) - elem.text = jest.fn(() => elem) - elem.style = jest.fn(() => elem) - return elem -} + const mockElem = MockD3(name, elem); + children.push(mockElem); + return mockElem; + }; + elem.lower = jest.fn(() => elem); + elem.attr = jest.fn(() => elem); + elem.text = jest.fn(() => elem); + elem.style = jest.fn(() => elem); + return elem; +}; diff --git a/cypress.json b/cypress.json index a56d1ac68..5e0725b20 100644 --- a/cypress.json +++ b/cypress.json @@ -1 +1,3 @@ -{ "video": false } +{ + "video": false +} \ No newline at end of file diff --git a/cypress/.eslintrc.json b/cypress/.eslintrc.json new file mode 100644 index 000000000..fe68a538d --- /dev/null +++ b/cypress/.eslintrc.json @@ -0,0 +1,10 @@ +{ + "env": { + "cypress/globals": true + }, + "extends": ["plugin:cypress/recommended"], + "plugins": ["cypress"], + "rules":{ + "cypress/no-unnecessary-waiting": 0 + } +} diff --git a/cypress/examples/actions.spec.js b/cypress/examples/actions.spec.js index 20e12cc6d..5843547af 100644 --- a/cypress/examples/actions.spec.js +++ b/cypress/examples/actions.spec.js @@ -2,15 +2,16 @@ context('Actions', () => { beforeEach(() => { - cy.visit('https://example.cypress.io/commands/actions') - }) + cy.visit('https://example.cypress.io/commands/actions'); + }); // https://on.cypress.io/interacting-with-elements it('.type() - type into a DOM element', () => { // https://on.cypress.io/type cy.get('.action-email') - .type('fake@email.com').should('have.value', 'fake@email.com') + .type('fake@email.com') + .should('have.value', 'fake@email.com') // .type() with special character sequences .type('{leftarrow}{rightarrow}{uparrow}{downarrow}') @@ -24,48 +25,52 @@ context('Actions', () => { // Delay each keypress by 0.1 sec .type('slow.typing@email.com', { delay: 100 }) - .should('have.value', 'slow.typing@email.com') + .should('have.value', 'slow.typing@email.com'); cy.get('.action-disabled') // Ignore error checking prior to type // like whether the input is visible or disabled .type('disabled error checking', { force: true }) - .should('have.value', 'disabled error checking') - }) + .should('have.value', 'disabled error checking'); + }); it('.focus() - focus on a DOM element', () => { // https://on.cypress.io/focus - cy.get('.action-focus').focus() + cy.get('.action-focus') + .focus() .should('have.class', 'focus') - .prev().should('have.attr', 'style', 'color: orange;') - }) + .prev() + .should('have.attr', 'style', 'color: orange;'); + }); it('.blur() - blur off a DOM element', () => { // https://on.cypress.io/blur - cy.get('.action-blur').type('About to blur').blur() + cy.get('.action-blur') + .type('About to blur') + .blur() .should('have.class', 'error') - .prev().should('have.attr', 'style', 'color: red;') - }) + .prev() + .should('have.attr', 'style', 'color: red;'); + }); it('.clear() - clears an input or textarea element', () => { // https://on.cypress.io/clear - cy.get('.action-clear').type('Clear this text') + cy.get('.action-clear') + .type('Clear this text') .should('have.value', 'Clear this text') .clear() - .should('have.value', '') - }) + .should('have.value', ''); + }); it('.submit() - submit a form', () => { // https://on.cypress.io/submit - cy.get('.action-form') - .find('[type="text"]').type('HALFOFF') - cy.get('.action-form').submit() - .next().should('contain', 'Your form has been submitted!') - }) + cy.get('.action-form').find('[type="text"]').type('HALFOFF'); + cy.get('.action-form').submit().next().should('contain', 'Your form has been submitted!'); + }); it('.click() - click on a DOM element', () => { // https://on.cypress.io/click - cy.get('.action-btn').click() + cy.get('.action-btn').click(); // You can click on 9 specific positions of an element: // ----------------------------------- @@ -81,16 +86,16 @@ context('Actions', () => { // ----------------------------------- // clicking in the center of the element is the default - cy.get('#action-canvas').click() + cy.get('#action-canvas').click(); - cy.get('#action-canvas').click('topLeft') - cy.get('#action-canvas').click('top') - cy.get('#action-canvas').click('topRight') - cy.get('#action-canvas').click('left') - cy.get('#action-canvas').click('right') - cy.get('#action-canvas').click('bottomLeft') - cy.get('#action-canvas').click('bottom') - cy.get('#action-canvas').click('bottomRight') + cy.get('#action-canvas').click('topLeft'); + cy.get('#action-canvas').click('top'); + cy.get('#action-canvas').click('topRight'); + cy.get('#action-canvas').click('left'); + cy.get('#action-canvas').click('right'); + cy.get('#action-canvas').click('bottomLeft'); + cy.get('#action-canvas').click('bottom'); + cy.get('#action-canvas').click('bottomRight'); // .click() accepts an x and y coordinate // that controls where the click occurs :) @@ -102,90 +107,83 @@ context('Actions', () => { .click(100, 185) .click(125, 190) .click(150, 185) - .click(170, 165) + .click(170, 165); // click multiple elements by passing multiple: true - cy.get('.action-labels>.label').click({ multiple: true }) + cy.get('.action-labels>.label').click({ multiple: true }); // Ignore error checking prior to clicking - cy.get('.action-opacity>.btn').click({ force: true }) - }) + cy.get('.action-opacity>.btn').click({ force: true }); + }); it('.dblclick() - double click on a DOM element', () => { // https://on.cypress.io/dblclick // Our app has a listener on 'dblclick' event in our 'scripts.js' // that hides the div and shows an input on double click - cy.get('.action-div').dblclick().should('not.be.visible') - cy.get('.action-input-hidden').should('be.visible') - }) + cy.get('.action-div').dblclick().should('not.be.visible'); + cy.get('.action-input-hidden').should('be.visible'); + }); it('.check() - check a checkbox or radio element', () => { // https://on.cypress.io/check // By default, .check() will check all // matching checkbox or radio elements in succession, one after another - cy.get('.action-checkboxes [type="checkbox"]').not('[disabled]') - .check().should('be.checked') + cy.get('.action-checkboxes [type="checkbox"]').not('[disabled]').check().should('be.checked'); - cy.get('.action-radios [type="radio"]').not('[disabled]') - .check().should('be.checked') + cy.get('.action-radios [type="radio"]').not('[disabled]').check().should('be.checked'); // .check() accepts a value argument - cy.get('.action-radios [type="radio"]') - .check('radio1').should('be.checked') + cy.get('.action-radios [type="radio"]').check('radio1').should('be.checked'); // .check() accepts an array of values cy.get('.action-multiple-checkboxes [type="checkbox"]') - .check(['checkbox1', 'checkbox2']).should('be.checked') + .check(['checkbox1', 'checkbox2']) + .should('be.checked'); // Ignore error checking prior to checking - cy.get('.action-checkboxes [disabled]') - .check({ force: true }).should('be.checked') + cy.get('.action-checkboxes [disabled]').check({ force: true }).should('be.checked'); - cy.get('.action-radios [type="radio"]') - .check('radio3', { force: true }).should('be.checked') - }) + cy.get('.action-radios [type="radio"]').check('radio3', { force: true }).should('be.checked'); + }); it('.uncheck() - uncheck a checkbox element', () => { // https://on.cypress.io/uncheck // By default, .uncheck() will uncheck all matching // checkbox elements in succession, one after another - cy.get('.action-check [type="checkbox"]') - .not('[disabled]') - .uncheck().should('not.be.checked') + cy.get('.action-check [type="checkbox"]').not('[disabled]').uncheck().should('not.be.checked'); // .uncheck() accepts a value argument cy.get('.action-check [type="checkbox"]') .check('checkbox1') - .uncheck('checkbox1').should('not.be.checked') + .uncheck('checkbox1') + .should('not.be.checked'); // .uncheck() accepts an array of values cy.get('.action-check [type="checkbox"]') .check(['checkbox1', 'checkbox3']) - .uncheck(['checkbox1', 'checkbox3']).should('not.be.checked') + .uncheck(['checkbox1', 'checkbox3']) + .should('not.be.checked'); // Ignore error checking prior to unchecking - cy.get('.action-check [disabled]') - .uncheck({ force: true }).should('not.be.checked') - }) + cy.get('.action-check [disabled]').uncheck({ force: true }).should('not.be.checked'); + }); it('.select() - select an option in a