mirror of
https://github.com/chinchang/web-maker.git
synced 2025-07-16 19:46:19 +02:00
Merge pull request #515 from chinchang/cypress-int
Adding Cypress framework
This commit is contained in:
3
cypress.json
Normal file
3
cypress.json
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"chromeWebSecurity": false
|
||||
}
|
38
cypress/fixtures/libraries.json
Normal file
38
cypress/fixtures/libraries.json
Normal file
@@ -0,0 +1,38 @@
|
||||
{
|
||||
"jsLibs": [
|
||||
{
|
||||
"urlPref": "https://code.jquery.com/jquery",
|
||||
"label": "jQuery"
|
||||
},
|
||||
{
|
||||
"urlPref": "https://ajax.googleapis.com/ajax/libs/angularjs/",
|
||||
"label": "Angular"
|
||||
},
|
||||
{
|
||||
"urlPref": "https://cdnjs.cloudflare.com/ajax/libs/react/",
|
||||
"label": "React"
|
||||
},
|
||||
{
|
||||
"urlPref": "https://cdnjs.cloudflare.com/ajax/libs/react-dom/",
|
||||
"label": "React DOM"
|
||||
},
|
||||
{
|
||||
"urlPref": "https://unpkg.com/vue/dist/vue.min.js",
|
||||
"label": "Vue.js"
|
||||
}
|
||||
],
|
||||
"cssLibs": [
|
||||
{
|
||||
"urlPref": "https://cdnjs.cloudflare.com/ajax/libs/bulma/",
|
||||
"label": "Bulma"
|
||||
},
|
||||
{
|
||||
"urlPref": "https://cdnjs.cloudflare.com/ajax/libs/hint.css/",
|
||||
"label": "Hint.css"
|
||||
},
|
||||
{
|
||||
"urlPref": "https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css",
|
||||
"label": "Tailwind.css"
|
||||
}
|
||||
]
|
||||
}
|
64
cypress/integration/console.test.js
Normal file
64
cypress/integration/console.test.js
Normal file
@@ -0,0 +1,64 @@
|
||||
/// <reference types="cypress" />
|
||||
|
||||
const consoleAssert = (prompt, expected) => {
|
||||
cy.get('#consolePromptEl').type(`${prompt}{enter}`);
|
||||
|
||||
// append the prompt at the beginning of the expected items
|
||||
expected.unshift(`"> ${prompt}"`);
|
||||
|
||||
cy.get('ul[data-testid=consoleItems] li').should(
|
||||
'have.length',
|
||||
expected.length
|
||||
);
|
||||
|
||||
expected.forEach((expectedValue, index) => {
|
||||
cy.get('ul[data-testid=consoleItems] li').eq(index).contains(expectedValue);
|
||||
});
|
||||
};
|
||||
|
||||
describe('Console checks', () => {
|
||||
beforeEach(() => {
|
||||
cy.init();
|
||||
|
||||
cy.get('a[data-testid=toggleConsole]').click();
|
||||
});
|
||||
|
||||
it('Simple arithmetic addition', () => {
|
||||
consoleAssert('4+5', ['9']);
|
||||
});
|
||||
|
||||
it('Simple arithmetic subtraction', () => {
|
||||
consoleAssert('4-5', ['-1']);
|
||||
});
|
||||
|
||||
it('Simple arithmetic multiplication', () => {
|
||||
consoleAssert('4*5', ['20']);
|
||||
});
|
||||
|
||||
it('Simple arithmetic division', () => {
|
||||
consoleAssert('4/5', ['0.8']);
|
||||
});
|
||||
|
||||
it('Division by Zero', () => {
|
||||
consoleAssert('4/0', ['Infinity']);
|
||||
});
|
||||
|
||||
it('Console log a message', () => {
|
||||
consoleAssert("console.log('hello')", ['hello', 'undefined']);
|
||||
});
|
||||
|
||||
it('Equality check', () => {
|
||||
consoleAssert("100 == '100'", ['true']);
|
||||
});
|
||||
|
||||
it('Strict-Equality check', () => {
|
||||
consoleAssert("100 === '100'", ['false']);
|
||||
});
|
||||
|
||||
it.only('Minimizing console', () => {
|
||||
cy.get('#consoleEl').should('not.have.class', 'is-minimized');
|
||||
cy.wait(200); // wait for animation to complete
|
||||
cy.get('a[data-testid=toggleConsole]').click();
|
||||
cy.get('#consoleEl').should('have.class', 'is-minimized');
|
||||
});
|
||||
});
|
175
cypress/integration/interface.test.js
Normal file
175
cypress/integration/interface.test.js
Normal file
@@ -0,0 +1,175 @@
|
||||
/// <reference types="cypress" />
|
||||
|
||||
describe('Testing interfaces', () => {
|
||||
beforeEach(() => {
|
||||
cy.init();
|
||||
});
|
||||
|
||||
it('New button should create a new item if no unsaved changes present', () => {
|
||||
cy.get('[data-testid=newButton]').click();
|
||||
|
||||
// since we haven't made any changed it should show the modal
|
||||
cy.get('.modal__content').should('be.visible');
|
||||
});
|
||||
|
||||
it('New button should ask for confirmation if unsaved changes present, when confirmed modal should pop-up', () => {
|
||||
cy.get('#htmlCodeEl').type('Hello');
|
||||
cy.get('[data-testid=newButton]').click();
|
||||
|
||||
cy.on('window:confirm', text => {
|
||||
expect(text).to.contains('You have unsaved changes.');
|
||||
});
|
||||
cy.get('.modal__content').should('be.visible');
|
||||
});
|
||||
|
||||
it('New button should ask for confirmation if unsaved changes present, when declined modal should not pop-up', () => {
|
||||
cy.get('#htmlCodeEl').type('Hello');
|
||||
cy.get('[data-testid=newButton]').click();
|
||||
|
||||
cy.on('window:confirm', text => {
|
||||
expect(text).to.contains('You have unsaved changes.');
|
||||
return false;
|
||||
});
|
||||
cy.get('.modal__content').should('not.exist');
|
||||
});
|
||||
|
||||
it('Save button click should save the current work with a notification.', () => {
|
||||
const sampleText = 'Hello';
|
||||
cy.get('#htmlCodeEl').type(sampleText);
|
||||
|
||||
cy.on('window:confirm', text => {
|
||||
expect(text).to.contains('Do you still want to continue saving locally?');
|
||||
});
|
||||
|
||||
cy.get('#saveBtn').click();
|
||||
cy.get('#js-alerts-container').should('be.visible');
|
||||
cy.get('#js-alerts-container').contains('Auto-save enabled');
|
||||
|
||||
cy.then(() => {
|
||||
const ls = JSON.parse(localStorage.getItem('code'));
|
||||
expect(ls).to.be.not.null;
|
||||
expect(ls['title']).to.contain('Untitled');
|
||||
expect(ls['html']).to.eq(sampleText);
|
||||
});
|
||||
});
|
||||
|
||||
it('Cmd + S (Save) should save the current work with a notification.', () => {
|
||||
const sampleText = 'Hello';
|
||||
|
||||
cy.on('window:confirm', text => {
|
||||
expect(text).to.contains('Do you still want to continue saving locally?');
|
||||
});
|
||||
|
||||
cy.get('#htmlCodeEl').type(sampleText + '{ctrl+s}');
|
||||
cy.get('#js-alerts-container').should('be.visible');
|
||||
cy.get('#js-alerts-container').contains('Auto-save enabled');
|
||||
|
||||
cy.then(() => {
|
||||
const ls = JSON.parse(localStorage.getItem('code'));
|
||||
expect(ls).to.be.not.null;
|
||||
expect(ls['title']).to.contain('Untitled');
|
||||
expect(ls['html']).to.eq(sampleText);
|
||||
});
|
||||
});
|
||||
|
||||
it('Changing creation title should auto save in localstorage', () => {
|
||||
const sampleText = 'Hello';
|
||||
cy.get('#htmlCodeEl').type(sampleText);
|
||||
|
||||
cy.on('window:confirm', text => {
|
||||
expect(text).to.contains('Do you still want to continue saving locally?');
|
||||
});
|
||||
|
||||
cy.get('#saveBtn').click();
|
||||
|
||||
cy.then(() => {
|
||||
const ls = JSON.parse(localStorage.getItem('code'));
|
||||
expect(ls).to.be.not.null;
|
||||
expect(ls['title']).to.contain('Untitled');
|
||||
expect(ls['html']).to.eq(sampleText);
|
||||
});
|
||||
|
||||
cy.get('#titleInput').clear().type('test');
|
||||
|
||||
cy.get('#saveBtn').click();
|
||||
cy.get('#js-alerts-container').should('be.visible');
|
||||
cy.get('#js-alerts-container').contains('Item saved');
|
||||
|
||||
cy.wait(1000); // for the localstorage to reflect the changes
|
||||
|
||||
cy.then(() => {
|
||||
const ls = JSON.parse(localStorage.getItem('code'));
|
||||
expect(ls).to.be.not.null;
|
||||
expect(ls['title']).to.eq('test');
|
||||
expect(ls['html']).to.eq(sampleText);
|
||||
});
|
||||
});
|
||||
|
||||
it('Clicking "OPEN" should open the saved items pane', () => {
|
||||
cy.on('window:confirm', text => {
|
||||
expect(text).to.contains('Do you still want to continue saving locally?');
|
||||
return true;
|
||||
});
|
||||
|
||||
const addCreation = message => {
|
||||
// start with blank project
|
||||
cy.get('[data-testid=newButton').click();
|
||||
cy.get('[data-testid=startBlankButton]').click();
|
||||
|
||||
// type a message in the HTML section
|
||||
cy.get('#htmlCodeEl').type('{ctrl+a}{backspace}' + message);
|
||||
// type the title
|
||||
cy.get('#titleInput').clear().type(message).blur();
|
||||
|
||||
// save it
|
||||
cy.get('#saveBtn').click();
|
||||
cy.wait(1000);
|
||||
cy.then(() => {
|
||||
const ls = JSON.parse(localStorage.getItem('code'));
|
||||
console.log(ls);
|
||||
expect(ls).to.be.not.null;
|
||||
expect(ls['title']).to.eq(message);
|
||||
expect(ls['html']).to.eq(message);
|
||||
});
|
||||
};
|
||||
|
||||
// save some projects
|
||||
const messages = ['test', 'test2', 'abc'];
|
||||
messages.forEach(m => addCreation(m));
|
||||
|
||||
// check for the saved projects
|
||||
cy.get('#openItemsBtn').click();
|
||||
cy.get('#js-saved-items-wrap').should('be.visible');
|
||||
messages.forEach((m, index) => {
|
||||
cy.get('#js-saved-items-wrap')
|
||||
.children()
|
||||
.eq(messages.length - index - 1)
|
||||
.contains(m);
|
||||
});
|
||||
});
|
||||
|
||||
it('Selecting a library from dropdown should change URL in textarea', () => {
|
||||
cy.get('[data-testid=addLibraryButton]').click();
|
||||
|
||||
cy.get('#externalJsTextarea').should('exist');
|
||||
cy.get('#externalCssTextarea').should('exist');
|
||||
|
||||
const checkLibrary = (label, url, type) => {
|
||||
cy.get('#js-add-library-select').select(label);
|
||||
|
||||
cy.get(`#external${type}Textarea`).should('contain.value', '\n' + url); // \n because every url should be in a new line
|
||||
};
|
||||
|
||||
cy.fixture('libraries').then(data => {
|
||||
data['jsLibs'].forEach(lib =>
|
||||
checkLibrary(lib['label'], lib['urlPref'], 'Js')
|
||||
);
|
||||
});
|
||||
|
||||
cy.fixture('libraries').then(data => {
|
||||
data['cssLibs'].forEach(lib =>
|
||||
checkLibrary(lib['label'], lib['urlPref'], 'Css')
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
94
cypress/integration/layouts.test.js
Normal file
94
cypress/integration/layouts.test.js
Normal file
@@ -0,0 +1,94 @@
|
||||
/// <reference types="cypress" />
|
||||
|
||||
describe('Pressing the layout buttons should change the layouts accordingly', () => {
|
||||
before(() => {
|
||||
cy.init();
|
||||
cy.viewport(1270, 720);
|
||||
});
|
||||
|
||||
const getLayoutBtnId = index => `#layoutBtn${index}`;
|
||||
|
||||
it('Default Layout', () => {
|
||||
cy.get('body').should('have.class', 'layout-1');
|
||||
|
||||
cy.get('#js-code-side').should('be.visible');
|
||||
cy.get('#js-demo-side').should('be.visible');
|
||||
|
||||
cy.get('#js-code-side').should(
|
||||
'have.attr',
|
||||
'style',
|
||||
'width: calc(50% - 3px);'
|
||||
);
|
||||
cy.get('#js-code-side').should('have.attr', 'direction', 'vertical');
|
||||
|
||||
cy.get('#js-demo-side').should(
|
||||
'have.attr',
|
||||
'style',
|
||||
'width: calc(50% - 3px);'
|
||||
);
|
||||
});
|
||||
|
||||
it('Layout 2', () => {
|
||||
cy.get(getLayoutBtnId(2)).click();
|
||||
|
||||
cy.get('body').should('have.class', 'layout-2');
|
||||
|
||||
cy.get('#js-code-side').should('be.visible');
|
||||
cy.get('#js-demo-side').should('be.visible');
|
||||
|
||||
cy.get('#js-code-side').should(
|
||||
'have.attr',
|
||||
'style',
|
||||
'height: calc(50% - 3px);'
|
||||
);
|
||||
cy.get('#js-code-side').should('have.attr', 'direction', 'horizontal');
|
||||
|
||||
cy.get('#js-demo-side').should(
|
||||
'have.attr',
|
||||
'style',
|
||||
'height: calc(50% - 3px);'
|
||||
);
|
||||
});
|
||||
|
||||
it('Layout 3', () => {
|
||||
cy.get(getLayoutBtnId(3)).click();
|
||||
|
||||
cy.get('body').should('have.class', 'layout-3');
|
||||
|
||||
cy.get('#js-code-side').should('be.visible');
|
||||
cy.get('#js-demo-side').should('be.visible');
|
||||
|
||||
cy.get('#js-code-side').should(
|
||||
'have.attr',
|
||||
'style',
|
||||
'width: calc(50% - 3px);'
|
||||
);
|
||||
cy.get('#js-code-side').should('have.attr', 'direction', 'vertical');
|
||||
|
||||
cy.get('#js-demo-side').should(
|
||||
'have.attr',
|
||||
'style',
|
||||
'width: calc(50% - 3px);'
|
||||
);
|
||||
});
|
||||
|
||||
it('Layout 4', () => {
|
||||
cy.get(getLayoutBtnId(4)).click();
|
||||
|
||||
cy.get('body').should('have.class', 'layout-4');
|
||||
|
||||
cy.get('#js-code-side').should('not.be.visible');
|
||||
cy.get('#js-demo-side').should('be.visible');
|
||||
});
|
||||
|
||||
it('Layout 5', () => {
|
||||
cy.get(getLayoutBtnId(5)).click();
|
||||
|
||||
cy.get('body').should('have.class', 'layout-5');
|
||||
|
||||
cy.get('#js-code-side').should('be.visible');
|
||||
cy.get('#js-demo-side').should('be.visible');
|
||||
|
||||
cy.get('#js-code-side').should('have.attr', 'direction', 'horizontal');
|
||||
});
|
||||
});
|
27
cypress/integration/modals.test.js
Normal file
27
cypress/integration/modals.test.js
Normal file
@@ -0,0 +1,27 @@
|
||||
/// <reference types="cypress" />
|
||||
|
||||
describe('Modals pop-up when header btns are pressed', () => {
|
||||
beforeEach(() => {
|
||||
cy.init();
|
||||
});
|
||||
|
||||
// Selectors for each button
|
||||
const ADD_LIBRARY_SEL = '[data-testid=addLibraryButton]';
|
||||
const NEW_SEL = '[data-testid=newButton]';
|
||||
const LOGIN_SEL = '[data-testid=loginButton]';
|
||||
|
||||
it('Add Library', () => {
|
||||
cy.get(ADD_LIBRARY_SEL).click();
|
||||
cy.get('.modal__content').should('be.visible');
|
||||
});
|
||||
|
||||
it('+ New', () => {
|
||||
cy.get(NEW_SEL).click();
|
||||
cy.get('.modal__content').should('be.visible');
|
||||
});
|
||||
|
||||
it('Login/SignUp', () => {
|
||||
cy.get(LOGIN_SEL).click();
|
||||
cy.get('.modal__content').should('be.visible');
|
||||
});
|
||||
});
|
22
cypress/plugins/index.js
Normal file
22
cypress/plugins/index.js
Normal file
@@ -0,0 +1,22 @@
|
||||
/// <reference types="cypress" />
|
||||
// ***********************************************************
|
||||
// This example plugins/index.js can be used to load plugins
|
||||
//
|
||||
// You can change the location of this file or turn off loading
|
||||
// the plugins file with the 'pluginsFile' configuration option.
|
||||
//
|
||||
// You can read more here:
|
||||
// https://on.cypress.io/plugins-guide
|
||||
// ***********************************************************
|
||||
|
||||
// This function is called when a project is opened or re-opened (e.g. due to
|
||||
// the project's config changing)
|
||||
|
||||
/**
|
||||
* @type {Cypress.PluginConfig}
|
||||
*/
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
module.exports = (on, config) => {
|
||||
// `on` is used to hook into various events Cypress emits
|
||||
// `config` is the resolved Cypress config
|
||||
};
|
31
cypress/support/commands.js
Normal file
31
cypress/support/commands.js
Normal file
@@ -0,0 +1,31 @@
|
||||
// ***********************************************
|
||||
// This example commands.js shows you how to
|
||||
// create various custom commands and overwrite
|
||||
// existing commands.
|
||||
//
|
||||
// For more comprehensive examples of custom
|
||||
// commands please read more here:
|
||||
// https://on.cypress.io/custom-commands
|
||||
// ***********************************************
|
||||
//
|
||||
//
|
||||
// -- This is a parent command --
|
||||
// Cypress.Commands.add('login', (email, password) => { ... })
|
||||
Cypress.Commands.add('init', () => {
|
||||
cy.visit('http://localhost:8080');
|
||||
|
||||
// closing the Welcome modal
|
||||
cy.get('button[data-testid=closeModalButton]').click();
|
||||
});
|
||||
//
|
||||
//
|
||||
// -- This is a child command --
|
||||
// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
|
||||
//
|
||||
//
|
||||
// -- This is a dual command --
|
||||
// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
|
||||
//
|
||||
//
|
||||
// -- This will overwrite an existing command --
|
||||
// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
|
20
cypress/support/index.js
Normal file
20
cypress/support/index.js
Normal file
@@ -0,0 +1,20 @@
|
||||
// ***********************************************************
|
||||
// This example support/index.js is processed and
|
||||
// loaded automatically before your test files.
|
||||
//
|
||||
// This is a great place to put global configuration and
|
||||
// behavior that modifies Cypress.
|
||||
//
|
||||
// You can change the location of this file or turn off
|
||||
// automatically serving support files with the
|
||||
// 'supportFile' configuration option.
|
||||
//
|
||||
// You can read more here:
|
||||
// https://on.cypress.io/configuration
|
||||
// ***********************************************************
|
||||
|
||||
// Import commands.js using ES2015 syntax:
|
||||
import './commands';
|
||||
|
||||
// Alternatively you can use CommonJS syntax:
|
||||
// require('./commands')
|
BIN
cypress/videos/console.test.js.mp4
Normal file
BIN
cypress/videos/console.test.js.mp4
Normal file
Binary file not shown.
BIN
cypress/videos/interface.test.js.mp4
Normal file
BIN
cypress/videos/interface.test.js.mp4
Normal file
Binary file not shown.
BIN
cypress/videos/layouts.test.js.mp4
Normal file
BIN
cypress/videos/layouts.test.js.mp4
Normal file
Binary file not shown.
BIN
cypress/videos/modals.test.js.mp4
Normal file
BIN
cypress/videos/modals.test.js.mp4
Normal file
Binary file not shown.
@@ -14,7 +14,9 @@
|
||||
"add-locale": "lingui add-locale",
|
||||
"extract": "lingui extract",
|
||||
"compile": "lingui compile",
|
||||
"release:dev": "gulp devRelease"
|
||||
"release:dev": "gulp devRelease",
|
||||
"cypress:open": "cypress open",
|
||||
"cypress": "cypress run"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": "eslint-config-synacor"
|
||||
@@ -42,6 +44,7 @@
|
||||
"babel-minify": "^0.2.0",
|
||||
"babel-plugin-macros": "^2.6.1",
|
||||
"concurrently": "^7.0.0",
|
||||
"cypress": "^9.5.3",
|
||||
"eslint": "^4.9.0",
|
||||
"eslint-config-prettier": "^2.3.0",
|
||||
"eslint-config-synacor": "^2.0.2",
|
||||
|
@@ -119,6 +119,7 @@ export class Console extends PureComponent {
|
||||
class="code-wrap__header-btn code-wrap__collapse-btn"
|
||||
title={i18n._(t`Toggle console`)}
|
||||
onClick={toggleConsole}
|
||||
data-testid="toggleConsole"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -127,6 +128,7 @@ export class Console extends PureComponent {
|
||||
ref={el => {
|
||||
this.logContainerEl = el;
|
||||
}}
|
||||
data-testid="consoleItems"
|
||||
>
|
||||
{logs.map(log => (
|
||||
<LogRow data={log} />
|
||||
|
@@ -159,6 +159,7 @@ export class CreateNewModal extends Component {
|
||||
trackEvent('ui', 'startBlankBtnClick');
|
||||
onBlankTemplateSelect();
|
||||
}}
|
||||
data-testid="startBlankButton"
|
||||
>
|
||||
Start Blank
|
||||
</button>
|
||||
|
@@ -43,6 +43,7 @@ export function MainHeader(props) {
|
||||
onClick={props.addLibraryBtnHandler}
|
||||
data-event-category="ui"
|
||||
data-event-action="addLibraryButtonClick"
|
||||
data-testid="addLibraryButton"
|
||||
class="btn btn--dark hint--rounded hint--bottom-left"
|
||||
aria-label={i18n._(t`Add a JS/CSS library`)}
|
||||
>
|
||||
@@ -62,6 +63,7 @@ export function MainHeader(props) {
|
||||
<button
|
||||
class="btn btn--dark hint--rounded hint--bottom-left"
|
||||
aria-label={i18n._(t`Start a new creation`)}
|
||||
data-testid="newButton"
|
||||
onClick={props.newBtnHandler}
|
||||
>
|
||||
<svg viewBox="0 0 24 24">
|
||||
@@ -106,6 +108,7 @@ export function MainHeader(props) {
|
||||
onClick={props.loginBtnHandler}
|
||||
data-event-category="ui"
|
||||
data-event-action="loginButtonClick"
|
||||
data-testid="loginButton"
|
||||
class="btn btn--dark hint--rounded hint--bottom-left"
|
||||
>
|
||||
<Trans>Login/Signup</Trans>
|
||||
|
@@ -92,6 +92,7 @@ const Modal = ({
|
||||
type="button"
|
||||
onClick={closeHandler}
|
||||
aria-label="Close modal"
|
||||
data-testid="closeModalButton"
|
||||
title="Close"
|
||||
class="js-modal__close-btn modal__close-btn"
|
||||
>
|
||||
|
Reference in New Issue
Block a user