mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-28 18:26:54 +00:00
test: use unit tests for confetti, not e2e (#51889)
This commit is contained in:
committed by
GitHub
parent
3b25ed538b
commit
77d70bf668
@@ -30,16 +30,18 @@ const composeEnhancers = composeWithDevTools({
|
||||
// options like actionSanitizer, stateSanitizer
|
||||
});
|
||||
|
||||
export const createStore = () => {
|
||||
export const createStore = (preloadedState = {}) => {
|
||||
let store;
|
||||
if (environment === 'production') {
|
||||
store = reduxCreateStore(
|
||||
rootReducer,
|
||||
preloadedState,
|
||||
applyMiddleware(sagaMiddleware, epicMiddleware)
|
||||
);
|
||||
} else {
|
||||
store = reduxCreateStore(
|
||||
rootReducer,
|
||||
preloadedState,
|
||||
composeEnhancers(applyMiddleware(sagaMiddleware, epicMiddleware))
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,15 @@
|
||||
import React from 'react';
|
||||
import { render } from '../../../../utils/test-utils';
|
||||
|
||||
import { getCompletedPercentage } from '../../../utils/get-completion-percentage';
|
||||
import { fireConfetti } from '../../../utils/fire-confetti';
|
||||
import { createStore } from '../../../redux/create-store';
|
||||
import CompletionModal from './completion-modal';
|
||||
|
||||
jest.mock('../../../analytics');
|
||||
jest.mock('../../../utils/fire-confetti');
|
||||
jest.mock('../../../components/ProgressBar');
|
||||
const mockFireConfetti = fireConfetti as jest.Mock;
|
||||
|
||||
const completedChallengesIds = ['1', '3', '5'],
|
||||
currentBlockIds = ['1', '3', '5', '7'],
|
||||
@@ -8,6 +17,43 @@ const completedChallengesIds = ['1', '3', '5'],
|
||||
fakeCompletedChallengesIds = ['1', '3', '5', '7', '8'];
|
||||
|
||||
describe('<CompletionModal />', () => {
|
||||
describe('fireConfetti', () => {
|
||||
beforeEach(() => {
|
||||
mockFireConfetti.mockClear();
|
||||
});
|
||||
test('should fire if certification project has been completed', () => {
|
||||
const store = createStore({
|
||||
challenge: {
|
||||
modal: { completion: true },
|
||||
challengeMeta: {
|
||||
// Build a Tribute Page's id:
|
||||
id: 'bd7158d8c442eddfaeb5bd18'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
render(<CompletionModal />, store);
|
||||
|
||||
expect(mockFireConfetti).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
test('should NOT fire if the challenge is not a project', () => {
|
||||
const store = createStore({
|
||||
challenge: {
|
||||
modal: { completion: true },
|
||||
challengeMeta: {
|
||||
// id from learn-advanced-array-methods-by-building-a-statistics-calculator:
|
||||
id: '6352e79d15aae30fac58f48e'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
render(<CompletionModal />, store);
|
||||
|
||||
expect(mockFireConfetti).toHaveBeenCalledTimes(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('getCompletedPercentage', () => {
|
||||
it('returns 25 if one out of four challenges are complete', () => {
|
||||
expect(
|
||||
|
||||
@@ -8,34 +8,6 @@ const editorElements = {
|
||||
closeFlash: '.close'
|
||||
};
|
||||
|
||||
const portfolioChallenge = {
|
||||
url: '/learn/2022/responsive-web-design/build-a-personal-portfolio-webpage-project/build-a-personal-portfolio-webpage'
|
||||
};
|
||||
|
||||
const portfolioChallengeSolution = `<head>
|
||||
<style>
|
||||
@media (max-width: 500px){
|
||||
nav{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav id="navbar">
|
||||
<a href="#projects">text</a> |
|
||||
</nav>
|
||||
<main>
|
||||
<section id="welcome-section">
|
||||
<h1>text</h1>
|
||||
</section><hr>
|
||||
<section id="projects">
|
||||
<h1>Projects</h1>
|
||||
<h2 class="project-tile"><a id="profile-link" target="_blank" href="https://freecodecamp.org">text</a></h2>
|
||||
</section><hr>
|
||||
</body>
|
||||
</html>`;
|
||||
|
||||
describe('multifileCertProjects', function () {
|
||||
before(() => {
|
||||
cy.task('seed');
|
||||
@@ -67,8 +39,6 @@ describe('multifileCertProjects', function () {
|
||||
// since rapid clicks will cause the save requests to be ignored, we have to
|
||||
// purge the db:
|
||||
cy.task('seed');
|
||||
// and the redux store:
|
||||
cy.reload();
|
||||
cy.get(editorElements.container).find(editorElements.editor).click();
|
||||
cy.focused().clear().click().type(`${save2text}{ctrl+s}`);
|
||||
cy.get(editorElements.editor).contains(save2text);
|
||||
@@ -91,17 +61,4 @@ describe('multifileCertProjects', function () {
|
||||
.type(`{ctrl+s}`);
|
||||
cy.contains('Your code was not saved.');
|
||||
});
|
||||
|
||||
it('Should show the confetti when a cert challenge is completed', () => {
|
||||
cy.visit(portfolioChallenge.url);
|
||||
cy.get('[data-cy=editor-container-indexhtml]')
|
||||
.click()
|
||||
.type(portfolioChallengeSolution)
|
||||
.type('{ctrl}{enter}', { release: false, delay: 100 });
|
||||
cy.get('canvas').then(canvases => {
|
||||
const currentCanvasCount = canvases.length;
|
||||
cy.contains('Run the Tests (Ctrl + Enter)').click();
|
||||
cy.get('canvas').should('have.length', currentCanvasCount + 1);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user