test: use unit tests for confetti, not e2e (#51889)

This commit is contained in:
Oliver Eyton-Williams
2023-10-10 13:36:52 +02:00
committed by GitHub
parent 3b25ed538b
commit 77d70bf668
3 changed files with 49 additions and 44 deletions
+3 -1
View File
@@ -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);
});
});
});