tests for new button

cypress.json

@@ -0,0 +1 @@
+{}

cypress/integration/interface.test.js

@@ -0,0 +1,35 @@
+/// <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');
+	});
+});

cypress/integration/modals.test.js

@@ -6,9 +6,9 @@ describe('Modals pop-up when header btns are pressed', () => {
 	});
 
 	// Selectors for each button
-	const ADD_LIBRARY_SEL = '[data-event-action=addLibraryButtonClick]';
-	const NEW_SEL = '[aria-label="Start a new creation"]';
-	const LOGIN_SEL = '[data-event-action=loginButtonClick]';
+	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();

cypress/support/commands.js

@@ -15,7 +15,7 @@ Cypress.Commands.add('init', () => {
 	cy.visit('http://localhost:8080');
 
 	// closing the Welcome modal
-	cy.get('button[aria-label="Close modal"]').click();
+	cy.get('button[data-testid=closeModalButton]').click();
 });
 //
 //

src/components/MainHeader.jsx

@@ -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>

src/components/Modal.jsx

@@ -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"
 						>