fix(learn): split and simplified learn map (#39154)
This commit is contained in:
Kabindra Shrestha
committed by
Mrugesh Mohapatra
Mrugesh Mohapatra
parent
48c97238fc
commit
ac3d762bb5
@ -116,12 +116,12 @@ class ShowUser extends Component {
|
||||
<title>{t('report.portfolio')} | freeCodeCamp.org</title>
|
||||
</Helmet>
|
||||
<Spacer size={2} />
|
||||
<Row className='text-center'>
|
||||
<Row className='text-center overflow-fix'>
|
||||
<Col sm={8} smOffset={2} xs={12}>
|
||||
<h2>{t('report.portfolio-2', { username: username })}</h2>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Row className='overflow-fix'>
|
||||
<Col sm={6} smOffset={3} xs={12}>
|
||||
<p>
|
||||
<Trans email={email} i18nKey='report.notify-1'>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.site-footer {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
color: var(--tertiary-color);
|
||||
background: var(--tertiary-background);
|
||||
line-height: 1.6;
|
||||
|
||||
@ -1,145 +1,29 @@
|
||||
/* global expect jest */
|
||||
|
||||
import React from 'react';
|
||||
import { useStaticQuery } from 'gatsby';
|
||||
import { render } from '@testing-library/react';
|
||||
import { Provider } from 'react-redux';
|
||||
import { createStore } from '../../redux/createStore';
|
||||
|
||||
import { Map } from './';
|
||||
import mockChallengeNodes from '../../__mocks__/challenge-nodes';
|
||||
import mockIntroNodes from '../../__mocks__/intro-nodes';
|
||||
|
||||
import { dasherize } from '../../../../utils/slugs';
|
||||
|
||||
function renderWithRedux(ui) {
|
||||
return render(<Provider store={createStore()}>{ui}</Provider>);
|
||||
}
|
||||
|
||||
const baseProps = {
|
||||
introNodes: mockIntroNodes,
|
||||
nodes: mockChallengeNodes,
|
||||
toggleBlock: () => {},
|
||||
toggleSuperBlock: () => {},
|
||||
resetExpansion: () => {},
|
||||
isSignedIn: true
|
||||
};
|
||||
beforeEach(() => {
|
||||
useStaticQuery.mockImplementationOnce(() => ({
|
||||
allChallengeNode: {
|
||||
nodes: mockChallengeNodes
|
||||
}
|
||||
}));
|
||||
});
|
||||
|
||||
// set .scrollTo to avoid errors in default test environment
|
||||
window.scrollTo = jest.fn();
|
||||
|
||||
test('<Map /> snapshot', () => {
|
||||
const { container } = renderWithRedux(
|
||||
<Map
|
||||
introNodes={mockIntroNodes}
|
||||
nodes={mockChallengeNodes}
|
||||
resetExpansion={() => {}}
|
||||
toggleBlock={() => {}}
|
||||
toggleSuperBlock={() => {}}
|
||||
/>
|
||||
);
|
||||
const { container } = render(<Map {...props} />);
|
||||
|
||||
expect(container).toMatchSnapshot('Map');
|
||||
});
|
||||
|
||||
describe('<Map/>', () => {
|
||||
describe('after reload', () => {
|
||||
const defaultNode = mockChallengeNodes[0];
|
||||
const idNode = mockChallengeNodes[7];
|
||||
const hashNode = mockChallengeNodes[9];
|
||||
const currentChallengeId = idNode.id;
|
||||
const hash = dasherize(hashNode.superBlock);
|
||||
|
||||
it('should expand the block with the most recent challenge', () => {
|
||||
const initializeSpy = jest.spyOn(
|
||||
Map.prototype,
|
||||
'initializeExpandedState'
|
||||
);
|
||||
|
||||
const blockSpy = jest.fn();
|
||||
const superSpy = jest.fn();
|
||||
const props = {
|
||||
...baseProps,
|
||||
toggleBlock: blockSpy,
|
||||
toggleSuperBlock: superSpy
|
||||
};
|
||||
|
||||
renderWithRedux(<Map {...props} />);
|
||||
|
||||
expect(blockSpy).toHaveBeenCalledTimes(1);
|
||||
expect(superSpy).toHaveBeenCalledTimes(1);
|
||||
expect(initializeSpy).toHaveBeenCalledTimes(1);
|
||||
initializeSpy.mockRestore();
|
||||
});
|
||||
|
||||
it('should use the hash prop if it exists', () => {
|
||||
const blockSpy = jest.fn();
|
||||
const superSpy = jest.fn();
|
||||
const props = {
|
||||
...baseProps,
|
||||
hash,
|
||||
toggleBlock: blockSpy,
|
||||
toggleSuperBlock: superSpy,
|
||||
currentChallengeId
|
||||
};
|
||||
|
||||
renderWithRedux(<Map {...props} />);
|
||||
|
||||
expect(blockSpy).toHaveBeenCalledTimes(1);
|
||||
// the block here should always be the first block of the superblock
|
||||
// this is tested implicitly, as there is a second block in the mock nodes
|
||||
expect(blockSpy).toHaveBeenCalledWith(hashNode.block);
|
||||
|
||||
expect(superSpy).toHaveBeenCalledTimes(1);
|
||||
expect(superSpy).toHaveBeenCalledWith(hashNode.superBlock);
|
||||
});
|
||||
|
||||
it('should use the currentChallengeId prop if there is no hash', () => {
|
||||
const blockSpy = jest.fn();
|
||||
const superSpy = jest.fn();
|
||||
const props = {
|
||||
...baseProps,
|
||||
toggleBlock: blockSpy,
|
||||
toggleSuperBlock: superSpy,
|
||||
currentChallengeId
|
||||
};
|
||||
|
||||
renderWithRedux(<Map {...props} />);
|
||||
|
||||
expect(blockSpy).toHaveBeenCalledTimes(1);
|
||||
expect(blockSpy).toHaveBeenCalledWith(idNode.block);
|
||||
|
||||
expect(superSpy).toHaveBeenCalledTimes(1);
|
||||
expect(superSpy).toHaveBeenCalledWith(idNode.superBlock);
|
||||
});
|
||||
|
||||
it('should default to the first challenge otherwise', () => {
|
||||
const blockSpy = jest.fn();
|
||||
const superSpy = jest.fn();
|
||||
const props = {
|
||||
...baseProps,
|
||||
toggleBlock: blockSpy,
|
||||
toggleSuperBlock: superSpy
|
||||
};
|
||||
|
||||
renderWithRedux(<Map {...props} />);
|
||||
|
||||
expect(blockSpy).toHaveBeenCalledTimes(1);
|
||||
expect(blockSpy).toHaveBeenCalledWith(defaultNode.block);
|
||||
|
||||
expect(superSpy).toHaveBeenCalledTimes(1);
|
||||
expect(superSpy).toHaveBeenCalledWith(defaultNode.superBlock);
|
||||
});
|
||||
|
||||
it('calls resetExpansion when initializing', () => {
|
||||
const expansionSpy = jest.fn();
|
||||
const props = {
|
||||
...baseProps,
|
||||
resetExpansion: expansionSpy
|
||||
};
|
||||
|
||||
renderWithRedux(<Map {...props} />);
|
||||
|
||||
expect(expansionSpy).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
});
|
||||
const props = {
|
||||
forLanding: true
|
||||
};
|
||||
|
||||
@ -3,92 +3,310 @@
|
||||
exports[`<Map /> snapshot: Map 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="row"
|
||||
class="map-ui"
|
||||
data-test-label="learn-curriculum-map"
|
||||
>
|
||||
<div
|
||||
class="col-sm-10 col-sm-offset-1 col-xs-12"
|
||||
<ul
|
||||
data-test-label="certifications"
|
||||
>
|
||||
<div
|
||||
class="map-ui"
|
||||
data-test-label="learn-curriculum-map"
|
||||
>
|
||||
<ul>
|
||||
<li
|
||||
class="superblock "
|
||||
id="super-block-one"
|
||||
<li>
|
||||
<a
|
||||
class="btn link-btn btn-lg"
|
||||
href="/learn/super-block-one/"
|
||||
>
|
||||
Super Block One
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="inherit"
|
||||
height="20px"
|
||||
version="1.1"
|
||||
viewBox="0 0 16 20"
|
||||
width="18px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<button
|
||||
aria-expanded="false"
|
||||
class="map-title"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 100 100"
|
||||
width="25px"
|
||||
>
|
||||
<polygon
|
||||
points="-6.04047,17.1511 81.8903,58.1985 -3.90024,104.196"
|
||||
style="stroke: var(--primary-color); fill: var(--primary-color); stroke-width: 1px;"
|
||||
transform="matrix(0.999729, 0.023281, -0.023281, 0.999729, 7.39321, -10.0425)"
|
||||
/>
|
||||
</svg>
|
||||
<h4>
|
||||
Super Block One Certification (300 hours)
|
||||
</h4>
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
class="superblock "
|
||||
id="super-block-two"
|
||||
<g>
|
||||
<polygon
|
||||
points="-2.68014473e-15 -1.06357708e-13 2.01917516 -1.06357708e-13 8.99824941 9.00746464 2.01917516 18.0149293 -2.66453526e-15 18.0149293 7.00955027 9"
|
||||
/>
|
||||
<polygon
|
||||
points="7.99971435 -1.06357708e-13 10.0188895 -1.06357708e-13 16.9979638 9.00746464 10.0188895 18.0149293 7.99971435 18.0149293 15.0092646 9"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="btn link-btn btn-lg"
|
||||
href="/learn/super-block-one/"
|
||||
>
|
||||
Super Block One
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="inherit"
|
||||
height="20px"
|
||||
version="1.1"
|
||||
viewBox="0 0 16 20"
|
||||
width="18px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<button
|
||||
aria-expanded="false"
|
||||
class="map-title"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 100 100"
|
||||
width="25px"
|
||||
>
|
||||
<polygon
|
||||
points="-6.04047,17.1511 81.8903,58.1985 -3.90024,104.196"
|
||||
style="stroke: var(--primary-color); fill: var(--primary-color); stroke-width: 1px;"
|
||||
transform="matrix(0.999729, 0.023281, -0.023281, 0.999729, 7.39321, -10.0425)"
|
||||
/>
|
||||
</svg>
|
||||
<h4>
|
||||
Super Block Two Certification (300 hours)
|
||||
</h4>
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
class="superblock "
|
||||
id="super-block-three"
|
||||
<g>
|
||||
<polygon
|
||||
points="-2.68014473e-15 -1.06357708e-13 2.01917516 -1.06357708e-13 8.99824941 9.00746464 2.01917516 18.0149293 -2.66453526e-15 18.0149293 7.00955027 9"
|
||||
/>
|
||||
<polygon
|
||||
points="7.99971435 -1.06357708e-13 10.0188895 -1.06357708e-13 16.9979638 9.00746464 10.0188895 18.0149293 7.99971435 18.0149293 15.0092646 9"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="btn link-btn btn-lg"
|
||||
href="/learn/super-block-one/"
|
||||
>
|
||||
Super Block One
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="inherit"
|
||||
height="20px"
|
||||
version="1.1"
|
||||
viewBox="0 0 16 20"
|
||||
width="18px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<button
|
||||
aria-expanded="false"
|
||||
class="map-title"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 100 100"
|
||||
width="25px"
|
||||
>
|
||||
<polygon
|
||||
points="-6.04047,17.1511 81.8903,58.1985 -3.90024,104.196"
|
||||
style="stroke: var(--primary-color); fill: var(--primary-color); stroke-width: 1px;"
|
||||
transform="matrix(0.999729, 0.023281, -0.023281, 0.999729, 7.39321, -10.0425)"
|
||||
/>
|
||||
</svg>
|
||||
<h4>
|
||||
Super Block Three Certification (300 hours)
|
||||
</h4>
|
||||
</button>
|
||||
</li>
|
||||
<div
|
||||
class="spacer"
|
||||
style="padding: 15px 0px; height: 1px;"
|
||||
/>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<g>
|
||||
<polygon
|
||||
points="-2.68014473e-15 -1.06357708e-13 2.01917516 -1.06357708e-13 8.99824941 9.00746464 2.01917516 18.0149293 -2.66453526e-15 18.0149293 7.00955027 9"
|
||||
/>
|
||||
<polygon
|
||||
points="7.99971435 -1.06357708e-13 10.0188895 -1.06357708e-13 16.9979638 9.00746464 10.0188895 18.0149293 7.99971435 18.0149293 15.0092646 9"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="btn link-btn btn-lg"
|
||||
href="/learn/super-block-one/"
|
||||
>
|
||||
Super Block One
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="inherit"
|
||||
height="20px"
|
||||
version="1.1"
|
||||
viewBox="0 0 16 20"
|
||||
width="18px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<g>
|
||||
<polygon
|
||||
points="-2.68014473e-15 -1.06357708e-13 2.01917516 -1.06357708e-13 8.99824941 9.00746464 2.01917516 18.0149293 -2.66453526e-15 18.0149293 7.00955027 9"
|
||||
/>
|
||||
<polygon
|
||||
points="7.99971435 -1.06357708e-13 10.0188895 -1.06357708e-13 16.9979638 9.00746464 10.0188895 18.0149293 7.99971435 18.0149293 15.0092646 9"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="btn link-btn btn-lg"
|
||||
href="/learn/super-block-one/"
|
||||
>
|
||||
Super Block One
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="inherit"
|
||||
height="20px"
|
||||
version="1.1"
|
||||
viewBox="0 0 16 20"
|
||||
width="18px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<g>
|
||||
<polygon
|
||||
points="-2.68014473e-15 -1.06357708e-13 2.01917516 -1.06357708e-13 8.99824941 9.00746464 2.01917516 18.0149293 -2.66453526e-15 18.0149293 7.00955027 9"
|
||||
/>
|
||||
<polygon
|
||||
points="7.99971435 -1.06357708e-13 10.0188895 -1.06357708e-13 16.9979638 9.00746464 10.0188895 18.0149293 7.99971435 18.0149293 15.0092646 9"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="btn link-btn btn-lg"
|
||||
href="/learn/super-block-two/"
|
||||
>
|
||||
Super Block Two
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="inherit"
|
||||
height="20px"
|
||||
version="1.1"
|
||||
viewBox="0 0 16 20"
|
||||
width="18px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<g>
|
||||
<polygon
|
||||
points="-2.68014473e-15 -1.06357708e-13 2.01917516 -1.06357708e-13 8.99824941 9.00746464 2.01917516 18.0149293 -2.66453526e-15 18.0149293 7.00955027 9"
|
||||
/>
|
||||
<polygon
|
||||
points="7.99971435 -1.06357708e-13 10.0188895 -1.06357708e-13 16.9979638 9.00746464 10.0188895 18.0149293 7.99971435 18.0149293 15.0092646 9"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="btn link-btn btn-lg"
|
||||
href="/learn/super-block-two/"
|
||||
>
|
||||
Super Block Two
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="inherit"
|
||||
height="20px"
|
||||
version="1.1"
|
||||
viewBox="0 0 16 20"
|
||||
width="18px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<g>
|
||||
<polygon
|
||||
points="-2.68014473e-15 -1.06357708e-13 2.01917516 -1.06357708e-13 8.99824941 9.00746464 2.01917516 18.0149293 -2.66453526e-15 18.0149293 7.00955027 9"
|
||||
/>
|
||||
<polygon
|
||||
points="7.99971435 -1.06357708e-13 10.0188895 -1.06357708e-13 16.9979638 9.00746464 10.0188895 18.0149293 7.99971435 18.0149293 15.0092646 9"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="btn link-btn btn-lg"
|
||||
href="/learn/super-block-two/"
|
||||
>
|
||||
Super Block Two
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="inherit"
|
||||
height="20px"
|
||||
version="1.1"
|
||||
viewBox="0 0 16 20"
|
||||
width="18px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<g>
|
||||
<polygon
|
||||
points="-2.68014473e-15 -1.06357708e-13 2.01917516 -1.06357708e-13 8.99824941 9.00746464 2.01917516 18.0149293 -2.66453526e-15 18.0149293 7.00955027 9"
|
||||
/>
|
||||
<polygon
|
||||
points="7.99971435 -1.06357708e-13 10.0188895 -1.06357708e-13 16.9979638 9.00746464 10.0188895 18.0149293 7.99971435 18.0149293 15.0092646 9"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="btn link-btn btn-lg"
|
||||
href="/learn/super-block-two/"
|
||||
>
|
||||
Super Block Two
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="inherit"
|
||||
height="20px"
|
||||
version="1.1"
|
||||
viewBox="0 0 16 20"
|
||||
width="18px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<g>
|
||||
<polygon
|
||||
points="-2.68014473e-15 -1.06357708e-13 2.01917516 -1.06357708e-13 8.99824941 9.00746464 2.01917516 18.0149293 -2.66453526e-15 18.0149293 7.00955027 9"
|
||||
/>
|
||||
<polygon
|
||||
points="7.99971435 -1.06357708e-13 10.0188895 -1.06357708e-13 16.9979638 9.00746464 10.0188895 18.0149293 7.99971435 18.0149293 15.0092646 9"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="btn link-btn btn-lg"
|
||||
href="/learn/super-block-three/"
|
||||
>
|
||||
Super Block Three
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="inherit"
|
||||
height="20px"
|
||||
version="1.1"
|
||||
viewBox="0 0 16 20"
|
||||
width="18px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<g>
|
||||
<polygon
|
||||
points="-2.68014473e-15 -1.06357708e-13 2.01917516 -1.06357708e-13 8.99824941 9.00746464 2.01917516 18.0149293 -2.66453526e-15 18.0149293 7.00955027 9"
|
||||
/>
|
||||
<polygon
|
||||
points="7.99971435 -1.06357708e-13 10.0188895 -1.06357708e-13 16.9979638 9.00746464 10.0188895 18.0149293 7.99971435 18.0149293 15.0092646 9"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="btn link-btn btn-lg"
|
||||
href="/learn/super-block-three/"
|
||||
>
|
||||
Super Block Three
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="inherit"
|
||||
height="20px"
|
||||
version="1.1"
|
||||
viewBox="0 0 16 20"
|
||||
width="18px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<g>
|
||||
<polygon
|
||||
points="-2.68014473e-15 -1.06357708e-13 2.01917516 -1.06357708e-13 8.99824941 9.00746464 2.01917516 18.0149293 -2.66453526e-15 18.0149293 7.00955027 9"
|
||||
/>
|
||||
<polygon
|
||||
points="7.99971435 -1.06357708e-13 10.0188895 -1.06357708e-13 16.9979638 9.00746464 10.0188895 18.0149293 7.99971435 18.0149293 15.0092646 9"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -1,117 +0,0 @@
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { bindActionCreators } from 'redux';
|
||||
import { connect } from 'react-redux';
|
||||
import { createSelector } from 'reselect';
|
||||
import { uniq, find } from 'lodash';
|
||||
import { dasherize } from '../../../../../utils/slugs';
|
||||
|
||||
import Block from './Block';
|
||||
|
||||
import { makeExpandedSuperBlockSelector, toggleSuperBlock } from '../redux';
|
||||
import Caret from '../../../assets/icons/Caret';
|
||||
import { ChallengeNode } from '../../../redux/propTypes';
|
||||
|
||||
const mapStateToProps = (state, ownProps) => {
|
||||
const expandedSelector = makeExpandedSuperBlockSelector(ownProps.superBlock);
|
||||
|
||||
return createSelector(
|
||||
expandedSelector,
|
||||
isExpanded => ({ isExpanded })
|
||||
)(state);
|
||||
};
|
||||
|
||||
function mapDispatchToProps(dispatch) {
|
||||
return bindActionCreators(
|
||||
{
|
||||
toggleSuperBlock
|
||||
},
|
||||
dispatch
|
||||
);
|
||||
}
|
||||
|
||||
const propTypes = {
|
||||
introNodes: PropTypes.arrayOf(
|
||||
PropTypes.shape({
|
||||
fields: PropTypes.shape({ slug: PropTypes.string.isRequired }),
|
||||
frontmatter: PropTypes.shape({
|
||||
title: PropTypes.string.isRequired,
|
||||
block: PropTypes.string.isRequired
|
||||
})
|
||||
})
|
||||
),
|
||||
isExpanded: PropTypes.bool,
|
||||
nodes: PropTypes.arrayOf(ChallengeNode),
|
||||
superBlock: PropTypes.string,
|
||||
toggleSuperBlock: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
const codingPrepRE = new RegExp('Interview Prep');
|
||||
|
||||
function createSuperBlockTitle(str) {
|
||||
return codingPrepRE.test(str)
|
||||
? `${str} (Thousands of hours of challenges)`
|
||||
: `${str} Certification (300\xa0hours)`;
|
||||
}
|
||||
|
||||
export class SuperBlock extends Component {
|
||||
renderBlock(superBlock) {
|
||||
const { nodes, introNodes } = this.props;
|
||||
const blocksForSuperBlock = nodes.filter(
|
||||
node => node.superBlock === superBlock
|
||||
);
|
||||
const blockDashedNames = uniq(
|
||||
blocksForSuperBlock.map(({ block }) => block)
|
||||
);
|
||||
// render all non-empty blocks
|
||||
return (
|
||||
<ul>
|
||||
{blockDashedNames.map(blockDashedName => (
|
||||
<Block
|
||||
blockDashedName={blockDashedName}
|
||||
challenges={blocksForSuperBlock.filter(
|
||||
node => node.block === blockDashedName
|
||||
)}
|
||||
intro={find(
|
||||
introNodes,
|
||||
({ frontmatter: { block } }) =>
|
||||
block
|
||||
.toLowerCase()
|
||||
.split(' ')
|
||||
.join('-') === blockDashedName
|
||||
)}
|
||||
key={blockDashedName}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { superBlock, isExpanded, toggleSuperBlock } = this.props;
|
||||
return (
|
||||
<li
|
||||
className={`superblock ${isExpanded ? 'open' : ''}`}
|
||||
id={dasherize(superBlock)}
|
||||
>
|
||||
<button
|
||||
aria-expanded={isExpanded}
|
||||
className='map-title'
|
||||
onClick={() => toggleSuperBlock(superBlock)}
|
||||
>
|
||||
<Caret />
|
||||
<h4>{createSuperBlockTitle(superBlock)}</h4>
|
||||
</button>
|
||||
{isExpanded ? this.renderBlock(superBlock) : null}
|
||||
</li>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
SuperBlock.displayName = 'SuperBlock';
|
||||
SuperBlock.propTypes = propTypes;
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(SuperBlock);
|
||||
@ -1,78 +0,0 @@
|
||||
/* global jest, expect */
|
||||
|
||||
import React from 'react';
|
||||
import { render, fireEvent } from '@testing-library/react';
|
||||
import { Provider } from 'react-redux';
|
||||
import { createStore } from '../../../redux/createStore';
|
||||
|
||||
import { SuperBlock } from './SuperBlock';
|
||||
import mockChallengeNodes from '../../../__mocks__/challenge-nodes';
|
||||
import mockIntroNodes from '../../../__mocks__/intro-nodes';
|
||||
|
||||
function renderWithRedux(ui, store) {
|
||||
return render(<Provider store={store || createStore()}>{ui}</Provider>);
|
||||
}
|
||||
|
||||
test('<SuperBlock /> not expanded snapshot', () => {
|
||||
const props = {
|
||||
introNodes: mockIntroNodes,
|
||||
isExpanded: false,
|
||||
nodes: mockChallengeNodes,
|
||||
superBlock: 'Super Block One',
|
||||
toggleSuperBlock: () => {}
|
||||
};
|
||||
|
||||
const { container } = render(<SuperBlock {...props} />);
|
||||
|
||||
expect(container).toMatchSnapshot('superBlock-not-expanded');
|
||||
});
|
||||
|
||||
test('<SuperBlock /> expanded snapshot', () => {
|
||||
const props = {
|
||||
introNodes: mockIntroNodes,
|
||||
isExpanded: true,
|
||||
nodes: mockChallengeNodes,
|
||||
superBlock: 'Super Block One',
|
||||
toggleSuperBlock: () => {}
|
||||
};
|
||||
|
||||
const { container } = renderWithRedux(<SuperBlock {...props} />);
|
||||
|
||||
expect(container).toMatchSnapshot('superBlock-expanded');
|
||||
});
|
||||
|
||||
test('<SuperBlock should handle toggle clicks correctly', () => {
|
||||
const toggleSpy = jest.fn();
|
||||
const props = {
|
||||
introNodes: mockIntroNodes,
|
||||
isExpanded: false,
|
||||
nodes: mockChallengeNodes,
|
||||
superBlock: 'Super Block One',
|
||||
toggleSuperBlock: toggleSpy
|
||||
};
|
||||
|
||||
const store = createStore();
|
||||
const { container, rerender } = renderWithRedux(
|
||||
<SuperBlock {...props} />,
|
||||
store
|
||||
);
|
||||
|
||||
expect(toggleSpy).not.toHaveBeenCalled();
|
||||
expect(container.querySelector('.map-title h4')).toHaveTextContent(
|
||||
'Super Block One Certification (300 hours)'
|
||||
);
|
||||
expect(container.querySelector('ul')).not.toBeInTheDocument();
|
||||
|
||||
fireEvent.click(container.querySelector('.map-title'));
|
||||
|
||||
expect(toggleSpy).toHaveBeenCalledTimes(1);
|
||||
expect(toggleSpy).toHaveBeenCalledWith('Super Block One');
|
||||
|
||||
rerender(
|
||||
<Provider store={store}>
|
||||
<SuperBlock {...props} isExpanded={true} />
|
||||
</Provider>
|
||||
);
|
||||
|
||||
expect(container.querySelector('ul')).toBeInTheDocument();
|
||||
});
|
||||
@ -1,242 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<SuperBlock /> expanded snapshot: superBlock-expanded 1`] = `
|
||||
<div>
|
||||
<li
|
||||
class="superblock open"
|
||||
id="super-block-one"
|
||||
>
|
||||
<button
|
||||
aria-expanded="true"
|
||||
class="map-title"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 100 100"
|
||||
width="25px"
|
||||
>
|
||||
<polygon
|
||||
points="-6.04047,17.1511 81.8903,58.1985 -3.90024,104.196"
|
||||
style="stroke: var(--primary-color); fill: var(--primary-color); stroke-width: 1px;"
|
||||
transform="matrix(0.999729, 0.023281, -0.023281, 0.999729, 7.39321, -10.0425)"
|
||||
/>
|
||||
</svg>
|
||||
<h4>
|
||||
Super Block One Certification (300 hours)
|
||||
</h4>
|
||||
</button>
|
||||
<ul>
|
||||
<li
|
||||
class="block "
|
||||
>
|
||||
<button
|
||||
aria-expanded="false"
|
||||
class="map-title"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 100 100"
|
||||
width="25px"
|
||||
>
|
||||
<polygon
|
||||
points="-6.04047,17.1511 81.8903,58.1985 -3.90024,104.196"
|
||||
style="stroke: var(--primary-color); fill: var(--primary-color); stroke-width: 1px;"
|
||||
transform="matrix(0.999729, 0.023281, -0.023281, 0.999729, 7.39321, -10.0425)"
|
||||
/>
|
||||
</svg>
|
||||
<h4>
|
||||
Block A
|
||||
</h4>
|
||||
<div
|
||||
class="map-title-completed"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
class="sr-only"
|
||||
>
|
||||
icons.not-passed
|
||||
</span>
|
||||
<svg
|
||||
height="50"
|
||||
style="height: 15px; margin-right: 10px; width: 15px;"
|
||||
viewBox="0 0 200 200"
|
||||
width="50"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g>
|
||||
<title>
|
||||
icons.not-passed
|
||||
</title>
|
||||
<circle
|
||||
cx="100"
|
||||
cy="99"
|
||||
fill="var(--primary-background)"
|
||||
r="95"
|
||||
stroke="var(--primary-color)"
|
||||
stroke-dasharray="null"
|
||||
stroke-linecap="null"
|
||||
stroke-linejoin="null"
|
||||
stroke-width="10"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
0/2
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
<ul />
|
||||
</li>
|
||||
<li
|
||||
class="block "
|
||||
>
|
||||
<button
|
||||
aria-expanded="false"
|
||||
class="map-title"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 100 100"
|
||||
width="25px"
|
||||
>
|
||||
<polygon
|
||||
points="-6.04047,17.1511 81.8903,58.1985 -3.90024,104.196"
|
||||
style="stroke: var(--primary-color); fill: var(--primary-color); stroke-width: 1px;"
|
||||
transform="matrix(0.999729, 0.023281, -0.023281, 0.999729, 7.39321, -10.0425)"
|
||||
/>
|
||||
</svg>
|
||||
<h4>
|
||||
Block B
|
||||
</h4>
|
||||
<div
|
||||
class="map-title-completed"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
class="sr-only"
|
||||
>
|
||||
icons.not-passed
|
||||
</span>
|
||||
<svg
|
||||
height="50"
|
||||
style="height: 15px; margin-right: 10px; width: 15px;"
|
||||
viewBox="0 0 200 200"
|
||||
width="50"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g>
|
||||
<title>
|
||||
icons.not-passed
|
||||
</title>
|
||||
<circle
|
||||
cx="100"
|
||||
cy="99"
|
||||
fill="var(--primary-background)"
|
||||
r="95"
|
||||
stroke="var(--primary-color)"
|
||||
stroke-dasharray="null"
|
||||
stroke-linecap="null"
|
||||
stroke-linejoin="null"
|
||||
stroke-width="10"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
0/2
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
<ul />
|
||||
</li>
|
||||
<li
|
||||
class="block "
|
||||
>
|
||||
<button
|
||||
aria-expanded="false"
|
||||
class="map-title"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 100 100"
|
||||
width="25px"
|
||||
>
|
||||
<polygon
|
||||
points="-6.04047,17.1511 81.8903,58.1985 -3.90024,104.196"
|
||||
style="stroke: var(--primary-color); fill: var(--primary-color); stroke-width: 1px;"
|
||||
transform="matrix(0.999729, 0.023281, -0.023281, 0.999729, 7.39321, -10.0425)"
|
||||
/>
|
||||
</svg>
|
||||
<h4>
|
||||
Block C
|
||||
</h4>
|
||||
<div
|
||||
class="map-title-completed"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
class="sr-only"
|
||||
>
|
||||
icons.not-passed
|
||||
</span>
|
||||
<svg
|
||||
height="50"
|
||||
style="height: 15px; margin-right: 10px; width: 15px;"
|
||||
viewBox="0 0 200 200"
|
||||
width="50"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g>
|
||||
<title>
|
||||
icons.not-passed
|
||||
</title>
|
||||
<circle
|
||||
cx="100"
|
||||
cy="99"
|
||||
fill="var(--primary-background)"
|
||||
r="95"
|
||||
stroke="var(--primary-color)"
|
||||
stroke-dasharray="null"
|
||||
stroke-linecap="null"
|
||||
stroke-linejoin="null"
|
||||
stroke-width="10"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
0/1
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
<ul />
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`<SuperBlock /> not expanded snapshot: superBlock-not-expanded 1`] = `
|
||||
<div>
|
||||
<li
|
||||
class="superblock "
|
||||
id="super-block-one"
|
||||
>
|
||||
<button
|
||||
aria-expanded="false"
|
||||
class="map-title"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 100 100"
|
||||
width="25px"
|
||||
>
|
||||
<polygon
|
||||
points="-6.04047,17.1511 81.8903,58.1985 -3.90024,104.196"
|
||||
style="stroke: var(--primary-color); fill: var(--primary-color); stroke-width: 1px;"
|
||||
transform="matrix(0.999729, 0.023281, -0.023281, 0.999729, 7.39321, -10.0425)"
|
||||
/>
|
||||
</svg>
|
||||
<h4>
|
||||
Super Block One Certification (300 hours)
|
||||
</h4>
|
||||
</button>
|
||||
</li>
|
||||
</div>
|
||||
`;
|
||||
@ -1,138 +1,98 @@
|
||||
import React, { Component } from 'react';
|
||||
import React from 'react';
|
||||
import { Row, Col } from '@freecodecamp/react-bootstrap';
|
||||
import { connect } from 'react-redux';
|
||||
import { bindActionCreators } from 'redux';
|
||||
import PropTypes from 'prop-types';
|
||||
import uniq from 'lodash/uniq';
|
||||
import { createSelector } from 'reselect';
|
||||
import { graphql, useStaticQuery } from 'gatsby';
|
||||
|
||||
import SuperBlock from './components/SuperBlock';
|
||||
import Spacer from '../helpers/Spacer';
|
||||
|
||||
import './map.css';
|
||||
import { ChallengeNode } from '../../redux/propTypes';
|
||||
import { toggleSuperBlock, toggleBlock, resetExpansion } from './redux';
|
||||
import { currentChallengeIdSelector } from '../../redux';
|
||||
import { Link } from '../helpers';
|
||||
import LinkButton from '../../assets/icons/LinkButton';
|
||||
import { dasherize } from '../../../../utils/slugs';
|
||||
import './map.css';
|
||||
|
||||
const propTypes = {
|
||||
currentChallengeId: PropTypes.string,
|
||||
hash: PropTypes.string,
|
||||
introNodes: PropTypes.arrayOf(
|
||||
PropTypes.shape({
|
||||
fields: PropTypes.shape({ slug: PropTypes.string.isRequired }),
|
||||
frontmatter: PropTypes.shape({
|
||||
title: PropTypes.string.isRequired,
|
||||
block: PropTypes.string.isRequired
|
||||
})
|
||||
})
|
||||
),
|
||||
isSignedIn: PropTypes.bool,
|
||||
nodes: PropTypes.arrayOf(ChallengeNode),
|
||||
resetExpansion: PropTypes.func,
|
||||
toggleBlock: PropTypes.func.isRequired,
|
||||
toggleSuperBlock: PropTypes.func.isRequired
|
||||
forLanding: PropTypes.bool
|
||||
};
|
||||
|
||||
const mapStateToProps = state => {
|
||||
return createSelector(
|
||||
currentChallengeIdSelector,
|
||||
currentChallengeId => ({
|
||||
currentChallengeId
|
||||
})
|
||||
)(state);
|
||||
};
|
||||
const codingPrepRE = new RegExp('Interview Prep');
|
||||
|
||||
function mapDispatchToProps(dispatch) {
|
||||
return bindActionCreators(
|
||||
{
|
||||
resetExpansion,
|
||||
toggleSuperBlock,
|
||||
toggleBlock
|
||||
},
|
||||
dispatch
|
||||
function createSuperBlockTitle(str) {
|
||||
return codingPrepRE.test(str)
|
||||
? `${str} (Thousands of hours of challenges)`
|
||||
: `${str} Certification (300\xa0hours)`;
|
||||
}
|
||||
|
||||
function renderLandingMap(nodes) {
|
||||
return (
|
||||
<ul data-test-label='certifications'>
|
||||
{nodes.map((node, i) => (
|
||||
<li key={i}>
|
||||
<Link
|
||||
className='btn link-btn btn-lg'
|
||||
to={`/learn/${dasherize(node.superBlock)}/`}
|
||||
>
|
||||
{node.superBlock}
|
||||
<LinkButton />
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
export class Map extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.initializeExpandedState();
|
||||
}
|
||||
function renderLearnMap(nodes) {
|
||||
return (
|
||||
<Row>
|
||||
<Col sm={10} smOffset={1} xs={12}>
|
||||
<ul data-test-label='learn-curriculum-map'>
|
||||
{nodes.map((node, i) => (
|
||||
<li key={i}>
|
||||
<Link
|
||||
className='btn link-btn btn-lg'
|
||||
to={`/learn/${dasherize(node.superBlock)}/`}
|
||||
>
|
||||
{createSuperBlockTitle(node.superBlock)}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
|
||||
// As this happens in the constructor, it's necessary to manipulate state
|
||||
// directly.
|
||||
initializeExpandedState() {
|
||||
const {
|
||||
currentChallengeId,
|
||||
hash,
|
||||
nodes,
|
||||
resetExpansion,
|
||||
toggleBlock,
|
||||
toggleSuperBlock,
|
||||
isSignedIn
|
||||
} = this.props;
|
||||
resetExpansion();
|
||||
|
||||
let node;
|
||||
|
||||
// find the challenge that has the same superblock with hash
|
||||
if (hash) {
|
||||
node = nodes.find(node => dasherize(node.superBlock) === hash);
|
||||
}
|
||||
|
||||
// without hash only expand when signed in
|
||||
if (isSignedIn) {
|
||||
// if there is no hash or the hash did not match any challenge superblock
|
||||
// and there was a currentChallengeId
|
||||
if (!node && currentChallengeId) {
|
||||
node = nodes.find(node => node.id === currentChallengeId);
|
||||
export function Map({ forLanding = false }) {
|
||||
/*
|
||||
* this query gets the first challenge from each block and the second block
|
||||
* from each superblock, leaving you with one challenge from each
|
||||
* superblock
|
||||
*/
|
||||
const data = useStaticQuery(graphql`
|
||||
query SuperBlockNodes {
|
||||
allChallengeNode(
|
||||
sort: { fields: [superOrder] }
|
||||
filter: { order: { eq: 2 }, challengeOrder: { eq: 1 } }
|
||||
) {
|
||||
nodes {
|
||||
superBlock
|
||||
dashedName
|
||||
}
|
||||
}
|
||||
if (!node) node = nodes[0];
|
||||
}
|
||||
`);
|
||||
|
||||
if (!node) return;
|
||||
let nodes = data.allChallengeNode.nodes;
|
||||
|
||||
toggleBlock(node.block);
|
||||
toggleSuperBlock(node.superBlock);
|
||||
if (forLanding) {
|
||||
nodes = nodes.filter(node => node.superBlock !== 'Coding Interview Prep');
|
||||
}
|
||||
|
||||
renderSuperBlocks(superBlocks) {
|
||||
const { nodes, introNodes } = this.props;
|
||||
return superBlocks.map(superBlock => (
|
||||
<SuperBlock
|
||||
introNodes={introNodes}
|
||||
key={superBlock}
|
||||
nodes={nodes}
|
||||
superBlock={superBlock}
|
||||
/>
|
||||
));
|
||||
}
|
||||
|
||||
render() {
|
||||
const { nodes } = this.props;
|
||||
// if a given superBlock's nodes have been filtered that
|
||||
// superBlock will not appear in superBlocks and will not be rendered.
|
||||
const superBlocks = uniq(nodes.map(({ superBlock }) => superBlock));
|
||||
return (
|
||||
<Row>
|
||||
<Col sm={10} smOffset={1} xs={12}>
|
||||
<div className='map-ui' data-test-label='learn-curriculum-map'>
|
||||
<ul>
|
||||
{this.renderSuperBlocks(superBlocks)}
|
||||
<Spacer />
|
||||
</ul>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className='map-ui' data-test-label='learn-curriculum-map'>
|
||||
{forLanding ? renderLandingMap(nodes) : renderLearnMap(nodes)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Map.displayName = 'Map';
|
||||
Map.propTypes = propTypes;
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(Map);
|
||||
export default Map;
|
||||
|
||||
@ -28,6 +28,24 @@ button.map-title:hover {
|
||||
background-color: var(--tertiary-background);
|
||||
}
|
||||
|
||||
div.map-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
padding-top: 18px;
|
||||
padding-bottom: 18px;
|
||||
padding-left: 5px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
div.map-title:hover {
|
||||
color: var(--tertiary-color);
|
||||
background-color: var(--tertiary-background);
|
||||
}
|
||||
|
||||
.map-title > h4 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@ -38,7 +56,7 @@ button.map-title:hover {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.superblock .map-title svg {
|
||||
.map-title svg {
|
||||
width: 14px;
|
||||
margin-right: 5px;
|
||||
flex-shrink: 0;
|
||||
@ -86,7 +104,14 @@ li.open > .map-title svg:first-child {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* 14px is the width of the expansion arrow */
|
||||
.superblock {
|
||||
.block {
|
||||
max-width: calc(100% - 14px);
|
||||
}
|
||||
|
||||
.block svg {
|
||||
width: 14px;
|
||||
margin-right: 5px;
|
||||
flex-shrink: 0;
|
||||
fill: var(--color-quaternary) !important;
|
||||
stroke: var(--color-quaternary);
|
||||
}
|
||||
|
||||
@ -1,29 +1,19 @@
|
||||
import { createAction, handleActions } from 'redux-actions';
|
||||
|
||||
import { createTypes } from '../../../../utils/stateManagement';
|
||||
|
||||
export const ns = 'curriculumMap';
|
||||
|
||||
export const getNS = () => ns;
|
||||
|
||||
const initialState = {
|
||||
expandedState: {
|
||||
superBlock: {},
|
||||
block: {}
|
||||
}
|
||||
};
|
||||
|
||||
const types = createTypes(
|
||||
['resetExpansion', 'toggleSuperBlock', 'toggleBlock'],
|
||||
ns
|
||||
);
|
||||
const types = createTypes(['resetExpansion', 'toggleBlock'], ns);
|
||||
|
||||
export const resetExpansion = createAction(types.resetExpansion);
|
||||
export const toggleBlock = createAction(types.toggleBlock);
|
||||
export const toggleSuperBlock = createAction(types.toggleSuperBlock);
|
||||
|
||||
export const makeExpandedSuperBlockSelector = superBlock => state =>
|
||||
!!state[ns].expandedState.superBlock[superBlock];
|
||||
export const makeExpandedBlockSelector = block => state =>
|
||||
!!state[ns].expandedState.block[block];
|
||||
|
||||
@ -32,7 +22,6 @@ export const reducer = handleActions(
|
||||
[types.resetExpansion]: state => ({
|
||||
...state,
|
||||
expandedState: {
|
||||
superBlock: {},
|
||||
block: {}
|
||||
}
|
||||
}),
|
||||
@ -45,16 +34,6 @@ export const reducer = handleActions(
|
||||
[payload]: !state.expandedState.block[payload]
|
||||
}
|
||||
}
|
||||
}),
|
||||
[types.toggleSuperBlock]: (state, { payload }) => ({
|
||||
...state,
|
||||
expandedState: {
|
||||
...state.expandedState,
|
||||
superBlock: {
|
||||
...state.expandedState.superBlock,
|
||||
[payload]: !state.expandedState.superBlock[payload]
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
initialState
|
||||
|
||||
@ -1,41 +1,23 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Col, Row } from '@freecodecamp/react-bootstrap';
|
||||
import { uniq } from 'lodash';
|
||||
import { Spacer, Link } from '../../helpers';
|
||||
import LinkButton from '../../../assets/icons/LinkButton';
|
||||
import { Spacer } from '../../helpers';
|
||||
import BigCallToAction from './BigCallToAction';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import Map from '../../Map/index';
|
||||
|
||||
const propTypes = {
|
||||
nodes: PropTypes.array,
|
||||
page: PropTypes.string
|
||||
};
|
||||
|
||||
const Certifications = ({ nodes, page }) => {
|
||||
const Certifications = ({ page = 'landing' }) => {
|
||||
const { t } = useTranslation();
|
||||
const superBlocks = uniq(nodes.map(node => node.superBlock)).filter(
|
||||
cert => cert !== 'Coding Interview Prep'
|
||||
);
|
||||
|
||||
return (
|
||||
<Row className='certification-section'>
|
||||
<Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
|
||||
<p className='big-heading'>{t('landing.certification-heading')}</p>
|
||||
<ul data-test-label='certifications'>
|
||||
{superBlocks.map((superBlock, i) => (
|
||||
<li key={i}>
|
||||
<Link
|
||||
className='btn link-btn btn-lg'
|
||||
state={{ superBlock: superBlock }}
|
||||
to={`/learn`}
|
||||
>
|
||||
{superBlock}
|
||||
<LinkButton />
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<h1 className='big-heading'>{t('landing.certification-heading')}</h1>
|
||||
<Map forLanding={true} />
|
||||
<Spacer />
|
||||
<BigCallToAction page={page} />
|
||||
<Spacer />
|
||||
|
||||
@ -2,7 +2,6 @@ import React, { Fragment } from 'react';
|
||||
import { Grid } from '@freecodecamp/react-bootstrap';
|
||||
import Helmet from 'react-helmet';
|
||||
import PropTypes from 'prop-types';
|
||||
import { graphql, useStaticQuery } from 'gatsby';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import Testimonials from './components/Testimonials';
|
||||
@ -19,18 +18,6 @@ const propTypes = {
|
||||
export const Landing = ({ page = 'landing' }) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const data = useStaticQuery(graphql`
|
||||
query certifications {
|
||||
challenges: allChallengeNode(
|
||||
sort: { fields: [superOrder, order, challengeOrder] }
|
||||
) {
|
||||
nodes {
|
||||
superBlock
|
||||
}
|
||||
}
|
||||
}
|
||||
`);
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<Helmet>
|
||||
@ -45,7 +32,7 @@ export const Landing = ({ page = 'landing' }) => {
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Testimonials />
|
||||
<Certifications nodes={data.challenges.nodes} page={page} />
|
||||
<Certifications />
|
||||
</Grid>
|
||||
</main>
|
||||
</Fragment>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { Fragment, Component } from 'react';
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { connect } from 'react-redux';
|
||||
import { bindActionCreators } from 'redux';
|
||||
@ -142,7 +142,7 @@ class DefaultLayout extends Component {
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<div className='page-wrapper'>
|
||||
<Helmet
|
||||
bodyAttributes={{
|
||||
class: useTheme
|
||||
@ -202,17 +202,17 @@ class DefaultLayout extends Component {
|
||||
<style>{fontawesome.dom.css()}</style>
|
||||
</Helmet>
|
||||
<WithInstantSearch>
|
||||
<Header fetchState={fetchState} user={user} />
|
||||
<div className={`default-layout`}>
|
||||
<Header fetchState={fetchState} user={user} />
|
||||
<OfflineWarning isOnline={isOnline} isSignedIn={isSignedIn} />
|
||||
{hasMessage && flashMessage ? (
|
||||
<Flash flashMessage={flashMessage} onClose={removeFlashMessage} />
|
||||
) : null}
|
||||
{children}
|
||||
{showFooter && <Footer />}
|
||||
</div>
|
||||
{showFooter && <Footer />}
|
||||
</WithInstantSearch>
|
||||
</Fragment>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,14 +1,30 @@
|
||||
html {
|
||||
height: 100%;
|
||||
font-size: 18px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
color: var(--secondary-color);
|
||||
background: var(--secondary-background);
|
||||
}
|
||||
|
||||
#___gatsby {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#gatsby-focus-wrapper {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.page-wrapper {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.btn-cta-big {
|
||||
max-height: 100%;
|
||||
font-size: 1.5rem;
|
||||
@ -16,12 +32,20 @@ body {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/*
|
||||
Row from @freecodecamp/react-bootstrap adds some negative margin which causes
|
||||
a little bit of horizontal overflow on certain pages. This eliminates that
|
||||
for those pages.
|
||||
*/
|
||||
.overflow-fix {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.default-layout {
|
||||
flex: 1 0 auto;
|
||||
margin-top: var(--header-height, 0px);
|
||||
background: var(--secondary-background);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: calc(100vh - var(--header-height, 0px));
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
||||
@ -7,8 +7,8 @@ import Helmet from 'react-helmet';
|
||||
import { connect } from 'react-redux';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { Spacer } from '../components/helpers';
|
||||
import LearnLayout from '../components/layouts/Learn';
|
||||
import { dasherize } from '../../../utils/slugs';
|
||||
import Map from '../components/Map';
|
||||
import Intro from '../components/Intro';
|
||||
import {
|
||||
@ -16,11 +16,7 @@ import {
|
||||
isSignedInSelector,
|
||||
userSelector
|
||||
} from '../redux';
|
||||
import {
|
||||
ChallengeNode,
|
||||
AllChallengeNode,
|
||||
AllMarkdownRemark
|
||||
} from '../redux/propTypes';
|
||||
import { ChallengeNode } from '../redux/propTypes';
|
||||
|
||||
const mapStateToProps = createSelector(
|
||||
userFetchStateSelector,
|
||||
@ -35,18 +31,14 @@ const mapStateToProps = createSelector(
|
||||
|
||||
const propTypes = {
|
||||
data: PropTypes.shape({
|
||||
challengeNode: ChallengeNode,
|
||||
allChallengeNode: AllChallengeNode,
|
||||
allMarkdownRemark: AllMarkdownRemark
|
||||
challengeNode: ChallengeNode
|
||||
}),
|
||||
fetchState: PropTypes.shape({
|
||||
pending: PropTypes.bool,
|
||||
complete: PropTypes.bool,
|
||||
errored: PropTypes.bool
|
||||
}),
|
||||
hash: PropTypes.string,
|
||||
isSignedIn: PropTypes.bool,
|
||||
location: PropTypes.object,
|
||||
state: PropTypes.object,
|
||||
user: PropTypes.shape({
|
||||
name: PropTypes.string,
|
||||
@ -55,28 +47,18 @@ const propTypes = {
|
||||
})
|
||||
};
|
||||
|
||||
// choose between the state from landing page and hash from url.
|
||||
const hashValueSelector = (state, hash) => {
|
||||
if (state && state.superBlock) return dasherize(state.superBlock);
|
||||
else if (hash) return hash.substr(1);
|
||||
else return null;
|
||||
};
|
||||
|
||||
export const LearnPage = ({
|
||||
location: { hash = '', state = '' },
|
||||
isSignedIn,
|
||||
fetchState: { pending, complete },
|
||||
user: { name = '', completedChallengeCount = 0 },
|
||||
data: {
|
||||
challengeNode: {
|
||||
fields: { slug }
|
||||
},
|
||||
allChallengeNode: { edges },
|
||||
allMarkdownRemark: { edges: mdEdges }
|
||||
}
|
||||
}
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const hashValue = hashValueSelector(state, hash);
|
||||
|
||||
return (
|
||||
<LearnLayout>
|
||||
<Helmet title={t('meta.title')} />
|
||||
@ -89,14 +71,8 @@ export const LearnPage = ({
|
||||
pending={pending}
|
||||
slug={slug}
|
||||
/>
|
||||
<Map
|
||||
hash={hashValue}
|
||||
introNodes={mdEdges.map(({ node }) => node)}
|
||||
isSignedIn={isSignedIn}
|
||||
nodes={edges
|
||||
.map(({ node }) => node)
|
||||
.filter(({ isPrivate }) => !isPrivate)}
|
||||
/>
|
||||
<Map />
|
||||
<Spacer size={2} />
|
||||
</Grid>
|
||||
</LearnLayout>
|
||||
);
|
||||
@ -114,33 +90,5 @@ export const query = graphql`
|
||||
slug
|
||||
}
|
||||
}
|
||||
allChallengeNode(sort: { fields: [superOrder, order, challengeOrder] }) {
|
||||
edges {
|
||||
node {
|
||||
fields {
|
||||
slug
|
||||
blockName
|
||||
}
|
||||
id
|
||||
block
|
||||
title
|
||||
superBlock
|
||||
dashedName
|
||||
}
|
||||
}
|
||||
}
|
||||
allMarkdownRemark(filter: { frontmatter: { block: { ne: null } } }) {
|
||||
edges {
|
||||
node {
|
||||
frontmatter {
|
||||
title
|
||||
block
|
||||
}
|
||||
fields {
|
||||
slug
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
10
client/src/pages/learn/coding-interview-prep/index.md
Normal file
10
client/src/pages/learn/coding-interview-prep/index.md
Normal file
@ -0,0 +1,10 @@
|
||||
---
|
||||
title: Coding Interview Prep
|
||||
superBlock: Coding Interview Prep
|
||||
---
|
||||
|
||||
## Introduction to Coding Interview Prep
|
||||
|
||||
This introduction is a stub
|
||||
|
||||
Help us make it real on [GitHub](https://github.com/freeCodeCamp/learn/tree/master/src/introductions).
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Introduction to the Python for Penetration Testing Lectures
|
||||
block: Python for Penetration Testing
|
||||
superBlock: Data Analysis with Python
|
||||
superBlock: Information Security
|
||||
---
|
||||
## Introduction to the Python for Penetration Testing Challenges
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Introduction to the How Neural Networks Work Lectures
|
||||
block: How Neural Networks Work
|
||||
superBlock: Data Analysis with Python
|
||||
superBlock: Machine Learning with Python
|
||||
---
|
||||
## Introduction to the How Neural Networks Work Challenges
|
||||
|
||||
|
||||
@ -1,49 +1,206 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import React, { Fragment, Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Helmet from 'react-helmet';
|
||||
import { graphql } from 'gatsby';
|
||||
import { uniq, find } from 'lodash';
|
||||
import { connect } from 'react-redux';
|
||||
import { createSelector } from 'reselect';
|
||||
import { bindActionCreators } from 'redux';
|
||||
|
||||
import FullWidthRow from '../../components/helpers/FullWidthRow';
|
||||
import { MarkdownRemark } from '../../redux/propTypes';
|
||||
import Block from '../../components/Map/components/Block';
|
||||
import { FullWidthRow, Spacer } from '../../components/helpers';
|
||||
import { currentChallengeIdSelector, isSignedInSelector } from '../../redux';
|
||||
import { resetExpansion, toggleBlock } from '../../components/Map/redux';
|
||||
import {
|
||||
MarkdownRemark,
|
||||
AllChallengeNode,
|
||||
AllMarkdownRemark
|
||||
} from '../../redux/propTypes';
|
||||
|
||||
import './intro.css';
|
||||
|
||||
const propTypes = {
|
||||
currentChallengeId: PropTypes.string,
|
||||
data: PropTypes.shape({
|
||||
markdownRemark: MarkdownRemark
|
||||
})
|
||||
markdownRemark: MarkdownRemark,
|
||||
allChallengeNode: AllChallengeNode,
|
||||
allMarkdownRemark: AllMarkdownRemark
|
||||
}),
|
||||
expandedState: PropTypes.object,
|
||||
isSignedIn: PropTypes.bool,
|
||||
resetExpansion: PropTypes.func,
|
||||
toggleBlock: PropTypes.func
|
||||
};
|
||||
|
||||
function SuperBlockIntroductionPage({ data: { markdownRemark } }) {
|
||||
const {
|
||||
html,
|
||||
frontmatter: { superBlock }
|
||||
} = markdownRemark;
|
||||
return (
|
||||
<Fragment>
|
||||
<Helmet>
|
||||
<title>{superBlock} | freeCodeCamp.org</title>
|
||||
</Helmet>
|
||||
<FullWidthRow>
|
||||
<div
|
||||
className='intro-layout'
|
||||
dangerouslySetInnerHTML={{ __html: html }}
|
||||
/>
|
||||
</FullWidthRow>
|
||||
</Fragment>
|
||||
const mapStateToProps = state => {
|
||||
return createSelector(
|
||||
currentChallengeIdSelector,
|
||||
isSignedInSelector,
|
||||
(currentChallengeId, isSignedIn) => ({
|
||||
currentChallengeId,
|
||||
isSignedIn
|
||||
})
|
||||
)(state);
|
||||
};
|
||||
|
||||
const mapDispatchToProps = dispatch =>
|
||||
bindActionCreators(
|
||||
{ resetExpansion, toggleBlock: b => toggleBlock(b) },
|
||||
dispatch
|
||||
);
|
||||
|
||||
function renderBlock(blocksForSuperBlock, introNodes) {
|
||||
// since the nodes have been filtered based on isHidden, any blocks whose
|
||||
// nodes have been entirely removed will not appear in this array.
|
||||
const blockDashedNames = uniq(blocksForSuperBlock.map(({ block }) => block));
|
||||
|
||||
// render all non-empty blocks
|
||||
return (
|
||||
<ul className='block'>
|
||||
{blockDashedNames.map(blockDashedName => (
|
||||
<Block
|
||||
blockDashedName={blockDashedName}
|
||||
challenges={blocksForSuperBlock.filter(
|
||||
node => node.block === blockDashedName
|
||||
)}
|
||||
intro={find(
|
||||
introNodes,
|
||||
({ frontmatter: { block } }) =>
|
||||
block
|
||||
.toLowerCase()
|
||||
.split(' ')
|
||||
.join('-') === blockDashedName
|
||||
)}
|
||||
key={blockDashedName}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
export class SuperBlockIntroductionPage extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.initializeExpandedState();
|
||||
}
|
||||
|
||||
initializeExpandedState() {
|
||||
const {
|
||||
resetExpansion,
|
||||
data: {
|
||||
allChallengeNode: { edges }
|
||||
},
|
||||
isSignedIn,
|
||||
currentChallengeId,
|
||||
toggleBlock
|
||||
} = this.props;
|
||||
|
||||
resetExpansion();
|
||||
|
||||
let edge;
|
||||
|
||||
if (isSignedIn) {
|
||||
// see if currentChallenge is in this superBlock
|
||||
edge = edges.find(edge => edge.node.id === currentChallengeId);
|
||||
}
|
||||
|
||||
// else, find first block in superBlock
|
||||
let i = 0;
|
||||
while (!edge && i < 20) {
|
||||
// eslint-disable-next-line no-loop-func
|
||||
edge = edges.find(edge => edge.node.order === i);
|
||||
i++;
|
||||
}
|
||||
|
||||
if (edge) toggleBlock(edge.node.block);
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
data: {
|
||||
markdownRemark: {
|
||||
frontmatter: { superBlock }
|
||||
},
|
||||
allChallengeNode: { edges },
|
||||
allMarkdownRemark: { edges: mdEdges }
|
||||
}
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<Helmet>
|
||||
<title>{superBlock} | freeCodeCamp.org</title>
|
||||
</Helmet>
|
||||
<FullWidthRow className='overflow-fix'>
|
||||
<Spacer size={2} />
|
||||
<h1 className='text-center'>
|
||||
{superBlock}
|
||||
{superBlock !== 'Coding Interview Prep' ? ' Certification' : ''}
|
||||
</h1>
|
||||
<Spacer />
|
||||
<div className='block-ui'>
|
||||
{renderBlock(
|
||||
edges.map(({ node }) => node),
|
||||
mdEdges.map(({ node }) => node)
|
||||
)}
|
||||
</div>
|
||||
<Spacer />
|
||||
</FullWidthRow>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
SuperBlockIntroductionPage.displayName = 'SuperBlockIntroductionPage';
|
||||
SuperBlockIntroductionPage.propTypes = propTypes;
|
||||
|
||||
export default SuperBlockIntroductionPage;
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(SuperBlockIntroductionPage);
|
||||
|
||||
export const query = graphql`
|
||||
query SuperBlockIntroPageBySlug($slug: String!) {
|
||||
query SuperBlockIntroPageBySlug($slug: String!, $superBlock: String!) {
|
||||
markdownRemark(fields: { slug: { eq: $slug } }) {
|
||||
frontmatter {
|
||||
superBlock
|
||||
}
|
||||
html
|
||||
}
|
||||
allChallengeNode(
|
||||
sort: { fields: [superOrder, order, challengeOrder] }
|
||||
filter: { superBlock: { eq: $superBlock } }
|
||||
) {
|
||||
edges {
|
||||
node {
|
||||
fields {
|
||||
slug
|
||||
blockName
|
||||
}
|
||||
id
|
||||
block
|
||||
title
|
||||
order
|
||||
superBlock
|
||||
dashedName
|
||||
}
|
||||
}
|
||||
}
|
||||
allMarkdownRemark(
|
||||
filter: {
|
||||
frontmatter: { block: { ne: null }, superBlock: { eq: $superBlock } }
|
||||
}
|
||||
) {
|
||||
edges {
|
||||
node {
|
||||
frontmatter {
|
||||
title
|
||||
block
|
||||
}
|
||||
fields {
|
||||
slug
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
@ -1,3 +1,20 @@
|
||||
.block-ui {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.block-ui ul {
|
||||
list-style: none;
|
||||
color: var(--secondary-color);
|
||||
}
|
||||
|
||||
.block-ui > ul {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.block a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.intro-layout-container {
|
||||
padding: 0 10px;
|
||||
|
||||
@ -122,7 +122,7 @@ exports.createSuperBlockIntroPages = createPage => edge => {
|
||||
path: slug,
|
||||
component: superBlockIntro,
|
||||
context: {
|
||||
superBlock: dasherize(superBlock),
|
||||
superBlock: superBlock,
|
||||
slug
|
||||
}
|
||||
});
|
||||
|
||||
@ -11,6 +11,7 @@ export default function layoutSelector({ element, props }) {
|
||||
const {
|
||||
location: { pathname }
|
||||
} = props;
|
||||
|
||||
if (element.type === FourOhFourPage) {
|
||||
return <DefaultLayout pathname={pathname}>{element}</DefaultLayout>;
|
||||
}
|
||||
@ -22,10 +23,14 @@ export default function layoutSelector({ element, props }) {
|
||||
if (/^\/guide(\/.*)*/.test(pathname)) {
|
||||
console.log('Hitting guide for some reason. Need a redirect.');
|
||||
}
|
||||
if (
|
||||
/^\/learn(\/.*)*/.test(pathname) &&
|
||||
false === /^\/learn\/$|^\/learn$/.test(pathname)
|
||||
) {
|
||||
|
||||
const splitPath = pathname.split('/');
|
||||
const splitPathThree = splitPath.length > 2 ? splitPath[3] : '';
|
||||
|
||||
const isNotSuperBlockIntro =
|
||||
splitPath.length > 3 && splitPathThree.length > 1;
|
||||
|
||||
if (/^\/learn(\/.*)*/.test(pathname) && isNotSuperBlockIntro) {
|
||||
return (
|
||||
<DefaultLayout pathname={pathname} showFooter={false}>
|
||||
{element}
|
||||
|
||||
@ -41,7 +41,7 @@ describe('Learn Landing page (not logged in)', () => {
|
||||
it('Should render a curriculum map', () => {
|
||||
cy.document().then(document => {
|
||||
const superBlocks = document.querySelectorAll(
|
||||
`${selectors.challengeMap} > ul > li`
|
||||
`${selectors.challengeMap} > li > a`
|
||||
);
|
||||
expect(superBlocks).to.have.length(11);
|
||||
|
||||
@ -77,44 +77,9 @@ describe('Superblocks and Blocks', () => {
|
||||
cy.contains("Get started (it's free)").click();
|
||||
});
|
||||
|
||||
it('Has first superblock and block collapsed by default', () => {
|
||||
cy.contains(superBlockNames[0])
|
||||
.should('be.visible')
|
||||
.and('have.attr', 'aria-expanded', 'true');
|
||||
|
||||
cy.contains('Basic HTML and HTML5')
|
||||
.should('be.visible')
|
||||
.and('have.attr', 'aria-expanded', 'true');
|
||||
});
|
||||
|
||||
it('Has all supeblocks visible but folded (excluding the first one)', () => {
|
||||
it('Has all supeblocks visible', () => {
|
||||
cy.wrap(superBlockNames.slice(1)).each(name => {
|
||||
cy.contains(name)
|
||||
.should('be.visible')
|
||||
.and('have.attr', 'aria-expanded', 'false');
|
||||
cy.contains(name).should('be.visible');
|
||||
});
|
||||
});
|
||||
it('Superblocks should be collapsable and foldable', () => {
|
||||
cy.contains(superBlockNames[0])
|
||||
.click()
|
||||
.should('have.attr', 'aria-expanded', 'false');
|
||||
cy.contains('Basic HTML and HTML5').should('not.exist');
|
||||
|
||||
cy.contains(superBlockNames[0])
|
||||
.click()
|
||||
.should('have.attr', 'aria-expanded', 'true');
|
||||
cy.contains('Basic HTML and HTML5').should('be.visible');
|
||||
});
|
||||
|
||||
it('Blocks should be collapsable and foldable', () => {
|
||||
cy.contains('Basic HTML and HTML5')
|
||||
.click()
|
||||
.should('have.attr', 'aria-expanded', 'false');
|
||||
cy.contains('Introduction to Basic HTML and HTML5').should('not.exist');
|
||||
|
||||
cy.contains('Basic HTML and HTML5')
|
||||
.click()
|
||||
.should('have.attr', 'aria-expanded', 'true');
|
||||
cy.contains('Introduction to Basic HTML and HTML5').should('be.visible');
|
||||
});
|
||||
});
|
||||
|
||||
6
package-lock.json
generated
6
package-lock.json
generated
@ -9480,6 +9480,12 @@
|
||||
"detect-newline": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"jest-dom": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/jest-dom/-/jest-dom-4.0.0.tgz",
|
||||
"integrity": "sha512-gBxYZlZB1Jgvf2gP2pRfjjUWF8woGBHj/g5rAQgFPB/0K2atGuhVcPO+BItyjWeKg9zM+dokgcMOH01vrWVMFA==",
|
||||
"dev": true
|
||||
},
|
||||
"jest-each": {
|
||||
"version": "24.9.0",
|
||||
"resolved": "https://registry.npmjs.org/jest-each/-/jest-each-24.9.0.tgz",
|
||||
|
||||
@ -77,7 +77,8 @@
|
||||
"gray-matter": "^4.0.2",
|
||||
"husky": "^3.1.0",
|
||||
"jest": "^24.9.0",
|
||||
"js-yaml": "^3.14.1",
|
||||
"jest-dom": "^4.0.0",
|
||||
"js-yaml": "^3.14.0",
|
||||
"lerna": "^3.22.1",
|
||||
"lint-staged": "^8.2.1",
|
||||
"lodash": "^4.17.20",
|
||||
|
||||
Reference in New Issue
Block a user