* feat: add data for preview to challengeMeta
* feat: allow creation of project preview frames
* feat: make project preview data available for frame
* refactor: simplify reducer
* feat: show project preview for first challenge
* feat: show project preview on MultiFile challenges
* test: check for presence/absence of preview modal
* fix: simplify previewProject saga
* test: uncomment project preview test
* fix: increase modal size + change modal title
* modal-footer
* feat: adjust preview size
* fix: remove margin, padding, and line-height for preview of finished projects
* Revert "fix: remove margin, padding, and line-height for preview of finished projects"
This reverts commit 0db11a0819.
* fix: remove margin on all previews
* refactor: use closeModal('projectPreview') for clarity
Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>
* fix: get started -> start coding!
* fix: update closeModal type
Co-authored-by: moT01 <20648924+moT01@users.noreply.github.com>
Co-authored-by: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>
Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>
		
	
		
			
				
	
	
		
			54 lines
		
	
	
		
			2.2 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
			
		
		
	
	
			54 lines
		
	
	
		
			2.2 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
| const practiceProjectUrls = [
 | |
|   '/learn/responsive-web-design/css-variables-skyline/',
 | |
|   '/learn/responsive-web-design/basic-html-cat-photo-app/',
 | |
|   '/learn/responsive-web-design/basic-css-cafe-menu/',
 | |
|   '/learn/responsive-web-design/css-picasso-painting/',
 | |
|   '/learn/responsive-web-design/css-box-model/',
 | |
|   '/learn/responsive-web-design/css-piano/',
 | |
|   '/learn/responsive-web-design/registration-form/',
 | |
|   '/learn/responsive-web-design/accessibility-quiz/'
 | |
| ];
 | |
| 
 | |
| const legacyFirstChallengeUrls = [
 | |
|   '/learn/responsive-web-design/basic-html-and-html5/say-hello-to-html-elements',
 | |
|   '/learn/responsive-web-design/basic-css/change-the-color-of-text',
 | |
|   '/learn/responsive-web-design/applied-visual-design/create-visual-balance-using-the-text-align-property',
 | |
|   '/learn/responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility',
 | |
|   '/learn/responsive-web-design/css-flexbox/use-display-flex-to-position-two-boxes',
 | |
|   '/learn/responsive-web-design/css-grid/create-your-first-css-grid'
 | |
| ];
 | |
| 
 | |
| describe('project preview', () => {
 | |
|   if (Cypress.env('SHOW_UPCOMING_CHANGES') === 'true') {
 | |
|     it('should appear on the first challenges of each practice project', () => {
 | |
|       practiceProjectUrls.forEach(url => {
 | |
|         cy.visit(url + 'part-1');
 | |
|         cy.contains('Complete project demo.');
 | |
|         cy.get('[data-cy="project-preview-modal"]').should('be.focused');
 | |
|       });
 | |
|     });
 | |
| 
 | |
|     // Tests for the absence of an element are tricky, if, as is the case here,
 | |
|     // the element is not rendered straight away. So, instead, we test for a
 | |
|     // side effect of not showing the modal: an editor is allowed to get focus.
 | |
|     it('should NOT appear on the second challenges of each practice project', () => {
 | |
|       practiceProjectUrls.forEach(url => {
 | |
|         cy.visit(url + 'part-2');
 | |
|         cy.focused()
 | |
|           .parents()
 | |
|           .should('have.class', 'react-monaco-editor-container');
 | |
|       });
 | |
|     });
 | |
|   }
 | |
| 
 | |
|   it('should NOT appear on the first challenges of legacy blocks', () => {
 | |
|     legacyFirstChallengeUrls.forEach(url => {
 | |
|       cy.visit(url);
 | |
|       // if no modals are showing, then the editor should have focus:
 | |
|       cy.focused()
 | |
|         .parents()
 | |
|         .should('have.class', 'react-monaco-editor-container');
 | |
|     });
 | |
|   });
 | |
| });
 |