scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2025-02-17 00:21:20 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Add unit tests and correct linting problems

Browse source
This commit is contained in:
Andy O'Neill 2022-11-15 15:36:17 -05:00
parent 69065e129b
commit 3c45808380
5 changed files with 97 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/extension-landing/extension-requirements.jsx
View file

@ -73,7 +73,7 @@ ExtensionRequirements.propTypes = {
hideChromeOS: PropTypes.bool,
hideMac: PropTypes.bool,
hideScratchLink: PropTypes.bool,
hideWindows: PropTypes.bool,
hideWindows: PropTypes.bool
};
ExtensionRequirements.defaultProps = {
@ -82,7 +82,7 @@ ExtensionRequirements.defaultProps = {
hideChromeOS: false,
hideMac: false,
hideScratchLink: false,
hideWindows: false,
hideWindows: false
};
module.exports = ExtensionRequirements;

12
src/components/os-chooser/os-chooser.jsx
View file

@ -17,7 +17,7 @@ const OSChooser = props => (
<FormattedMessage id="oschooser.choose" />
{!props.hideWindows && (
<Button
className={classNames({ active: props.currentOS === OS_ENUM.WINDOWS })}
className={classNames({active: props.currentOS === OS_ENUM.WINDOWS})}
onClick={() => // eslint-disable-line react/jsx-no-bind
props.handleSetOS(OS_ENUM.WINDOWS)
}
@ -28,7 +28,7 @@ const OSChooser = props => (
)}
{!props.hideMac && (
<Button
className={classNames({ active: props.currentOS === OS_ENUM.MACOS })}
className={classNames({active: props.currentOS === OS_ENUM.MACOS})}
onClick={() => // eslint-disable-line react/jsx-no-bind
props.handleSetOS(OS_ENUM.MACOS)
}
@ -39,7 +39,7 @@ const OSChooser = props => (
)}
{!props.hideChromeOS && (
<Button
className={classNames({ active: props.currentOS === OS_ENUM.CHROMEOS })}
className={classNames({active: props.currentOS === OS_ENUM.CHROMEOS})}
onClick={() => // eslint-disable-line react/jsx-no-bind
props.handleSetOS(OS_ENUM.CHROMEOS)
}
@ -50,7 +50,7 @@ const OSChooser = props => (
)}
{!props.hideAndroid && (
<Button
className={classNames({ active: props.currentOS === OS_ENUM.ANDROID })}
className={classNames({active: props.currentOS === OS_ENUM.ANDROID})}
onClick={() => // eslint-disable-line react/jsx-no-bind
props.handleSetOS(OS_ENUM.ANDROID)
}
@ -69,14 +69,14 @@ OSChooser.propTypes = {
hideAndroid: PropTypes.bool,
hideChromeOS: PropTypes.bool,
hideMac: PropTypes.bool,
hideWindows: PropTypes.bool,
hideWindows: PropTypes.bool
};
OSChooser.defaultProps = {
hideAndroid: false,
hideChromeOS: false,
hideMac: false,
hideWindows: false,
hideWindows: false
};
const wrappedOSChooser = injectIntl(OSChooser);

52
src/views/download/scratch-link/download.jsx
View file

@ -1,5 +1,5 @@
import React, { useState } from 'react';
import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
import React, {useState} from 'react';
import {FormattedMessage, injectIntl, intlShape} from 'react-intl';
import Page from '../../../components/page/www/page.jsx';
import render from '../../../lib/render.jsx';
@ -14,14 +14,14 @@ import ExtensionHeader from '../../../components/extension-landing/extension-hea
import ExtensionRequirements from '../../../components/extension-landing/extension-requirements.jsx';
import ExtensionSection from '../../../components/extension-landing/extension-section.jsx';
import ExtensionTroubleshooting from '../../../components/extension-landing/extension-troubleshooting.jsx';
import InstallScratchLink from '../../../components/extension-landing/install-scratch-link.jsx'
import InstallScratchLink from '../../../components/extension-landing/install-scratch-link.jsx';
import { isDownloaded } from '../../../components/install-scratch/install-util.js';
import {isDownloaded} from '../../../components/install-scratch/install-util.js';
import '../../../components/extension-landing/extension-landing.scss';
import './download.scss';
const ScratchLink = ({ intl }) => {
const ScratchLink = ({intl}) => {
const [os, setOS] = useState(detectOS());
return (
@ -30,10 +30,10 @@ const ScratchLink = ({ intl }) => {
renderCopy={
<FlexRow className="column extension-copy">
<h1><img
alt={intl.formatMessage({ id: 'scratchLink.linkLogo' })}
alt={intl.formatMessage({id: 'scratchLink.linkLogo'})}
width="40px"
src="/images/scratchlink/scratch-link-logo.svg"
/>{intl.formatMessage({ id: "scratchLink.headerTitle" })}</h1>
/>{intl.formatMessage({id: 'scratchLink.headerTitle'})}</h1>
<FormattedMessage id="scratchLink.headerText" />
</FlexRow>
}
@ -41,7 +41,11 @@ const ScratchLink = ({ intl }) => {
<img src="/images/download/download.png" />
}
renderRequirements={
<ExtensionRequirements hideAndroid hideChromeOS hideScratchLink />
<ExtensionRequirements
hideAndroid
hideChromeOS
hideScratchLink
/>
}
/>
<OSChooser
@ -61,43 +65,43 @@ const ScratchLink = ({ intl }) => {
<div className="hardware-cards">
<HardwareCard
cardUrl="/microbit"
description={intl.formatMessage({ id: 'scratchLink.microbitDescription' })}
imageAlt={intl.formatMessage({ id: 'scratchLink.microbitTitle' })}
description={intl.formatMessage({id: 'scratchLink.microbitDescription'})}
imageAlt={intl.formatMessage({id: 'scratchLink.microbitTitle'})}
imageSrc="/images/microbit/microbit.svg"
title={intl.formatMessage({ id: 'scratchLink.microbitTitle' })}
title={intl.formatMessage({id: 'scratchLink.microbitTitle'})}
/>
<HardwareCard
cardUrl="/ev3"
description={intl.formatMessage({ id: 'scratchLink.ev3Description' })}
imageAlt={intl.formatMessage({ id: 'scratchLink.ev3Title' })}
description={intl.formatMessage({id: 'scratchLink.ev3Description'})}
imageAlt={intl.formatMessage({id: 'scratchLink.ev3Title'})}
imageSrc="/images/ev3/ev3.svg"
title={intl.formatMessage({ id: 'scratchLink.ev3Title' })}
title={intl.formatMessage({id: 'scratchLink.ev3Title'})}
/>
<HardwareCard
cardUrl="/wedo"
description={intl.formatMessage({ id: 'scratchLink.wedoDescription' })}
imageAlt={intl.formatMessage({ id: 'scratchLink.wedoTitle' })}
description={intl.formatMessage({id: 'scratchLink.wedoDescription'})}
imageAlt={intl.formatMessage({id: 'scratchLink.wedoTitle'})}
imageSrc="/images/wedo2/wedo2.svg"
title={intl.formatMessage({ id: 'scratchLink.wedoTitle' })}
title={intl.formatMessage({id: 'scratchLink.wedoTitle'})}
/>
<HardwareCard
cardUrl="/boost"
description={intl.formatMessage({ id: 'scratchLink.boostDescription' })}
imageAlt={intl.formatMessage({ id: 'scratchLink.boostTitle' })}
description={intl.formatMessage({id: 'scratchLink.boostDescription'})}
imageAlt={intl.formatMessage({id: 'scratchLink.boostTitle'})}
imageSrc="/images/boost/boost.svg"
title={intl.formatMessage({ id: 'scratchLink.boostTitle' })}
title={intl.formatMessage({id: 'scratchLink.boostTitle'})}
/>
<HardwareCard
cardUrl="/vernier"
description={intl.formatMessage({ id: 'scratchLink.vernierDescription' })}
imageAlt={intl.formatMessage({ id: 'scratchLink.vernierTitle' })}
description={intl.formatMessage({id: 'scratchLink.vernierDescription'})}
imageAlt={intl.formatMessage({id: 'scratchLink.vernierTitle'})}
imageSrc="/images/gdxfor/gdxfor.svg"
title={intl.formatMessage({ id: 'scratchLink.vernierTitle' })}
title={intl.formatMessage({id: 'scratchLink.vernierTitle'})}
/>
</div>
</ExtensionSection>
<ExtensionTroubleshooting
deviceName={intl.formatMessage({ id: "scratchLink.headerTitle" })}
deviceName={intl.formatMessage({id: 'scratchLink.headerTitle'})}
scratchLinkOnly
>
{isDownloaded(os) && (

29
test/unit/components/extension-requirements.test.jsx Normal file
View file

@ -0,0 +1,29 @@
import React from 'react';
import {mountWithIntl} from '../../helpers/intl-helpers.jsx';
import ExtensionRequirements from '../../../src/components/extension-landing/extension-requirements';
describe('ExtensionRequirements', () => {
test('shows default extension requirements', () => {
const component = mountWithIntl(<ExtensionRequirements />);
const requirements = component.find('.extension-requirements span').map(span => span.text());
expect(requirements).toEqual(
['Windows 10 version 1709+', 'macOS 10.13+', 'ChromeOS', 'Android 6.0+', 'Bluetooth', 'Scratch Link']
);
});
test('hides requirements', () => {
const component = mountWithIntl(<ExtensionRequirements
hideWindows
hideMac
hideChromeOS
hideAndroid
hideBluetooth
hideScratchLink
/>);
expect(component.find('.extension-requirements span').length).toEqual(0);
});
});

32
test/unit/components/os-chooser.test.jsx Normal file
View file

@ -0,0 +1,32 @@
import React from 'react';
import {mountWithIntl} from '../../helpers/intl-helpers.jsx';
import OSChooser from '../../../src/components/os-chooser/os-chooser';
describe('OSChooser', () => {
test('calls callback when OS is selected', () => {
const onSetOs = jest.fn();
const component = mountWithIntl(<OSChooser handleSetOS={onSetOs} />);
component.find('button').last()
.simulate('click');
expect(onSetOs).toBeCalledWith('Android');
});
test('has all 4 operating systems', () => {
const component = mountWithIntl(<OSChooser />);
expect(component.find('button').length).toEqual(4);
});
test('hides operating systems', () => {
const component = mountWithIntl(<OSChooser
hideWindows
hideMac
hideChromeOS
hideAndroid
/>);
expect(component.find('button').length).toEqual(0);
});
});