Skip to content
Snippets Groups Projects
Commit 3831bba4 authored by Arie Peterson's avatar Arie Peterson
Browse files

Fix tests and dev environment

parent c0c3415e
No related branches found
No related tags found
1 merge request!14Resolve "Make contact form submission possible"
Hide whitespace changes
Inline Side-by-side
public/index.html
+ 3
− 25
View file @ 3831bba4
......@@ -3,9 +3,9 @@
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" />
<link rel="stylesheet" href="/style-copied-from-website.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Web site created using create-snowpack-app" />
<title>Snowpack App</title>
<title>Helpful contact form | Development version</title>
</head>
<body>
<div style="border: 2pt solid red; font-size: 200%; padding: 5pt;">Warning: this is a development version of
......@@ -14,28 +14,6 @@
for actual support.</div>
<div lang="en" id="helpful-contact-form" style="width: 40rem; margin:10rem auto 0 auto"></div>
<noscript>You need to enable JavaScript to run this app.</noscript>
<script type="module" src="/dist/index.js"></script>
<script>
if ('%MODE%' === 'development') {
// we wrap this in a function to prevent the variables from leaking out
(function () {
console.log('[dev] injecting greenhost stylesheet..')
var greenhostCss = document.createElement('link');
greenhostCss.setAttribute('rel', 'stylesheet');
greenhostCss.setAttribute('href', '/style-copied-from-website.css');
document.head.appendChild(greenhostCss);
}())
}
</script>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<script type="module" src="/bundle.js"></script>
</body>
</html>
src/components/contact-form/ContactForm.test.tsx
+ 0
− 11
View file @ 3831bba4
......@@ -94,17 +94,6 @@ describe('<ContactForm problemGroup="%s"}>', () => {
expect(modal).not.toBeInTheDocument();
});
it('can be submitted by a form submit event', ()=>{
const problemGroup = 'technical';
const { getByRole } = render(
<ContactForm formAction='' problem={problem} problemGroup={problemGroup} />,
);
const form = getByRole("form", {name:"Contact form"});
fireEvent.submit(form);
const modal = getByRole('dialog', { name: /thank you/i });
expect(modal).toBeInTheDocument();
});
it('has an option to make the request urgent', () => {
const problemGroup = 'technical';
const { getByText, getByRole } = render(
......
src/components/contact-form/ContactForm.tsx
+ 28
− 37
View file @ 3831bba4
import React, { ChangeEvent, FormEvent, useState } from 'react';
import React, { ChangeEvent, MouseEventHandler, useState } from 'react';
import { useTranslation } from 'react-i18next';
import UrgentRequest from '../urgent-request/UrgentRequest';
import { CSSTransition, SwitchTransition } from 'react-transition-group';
import styles from './ContactForm.module.scss';
import panelTransition from '../../styles/transitions/panel.module.scss';
import Fieldset from '../fieldset/Fieldset';
......@@ -33,9 +32,14 @@ export const ContactForm: React.FC<ContactFormProps> = ({
setUrgentIntent(event.target.checked);
};
// For use in the CSSTransition, see
// https://github.com/reactjs/react-transition-group/issues/668#issuecomment-695162879
const submitRef = React.useRef<any>(null);
const submit: MouseEventHandler<HTMLButtonElement> = (event) => {
if (process.env.NODE_ENV !== 'production') {
event.preventDefault();
console.log('Not submitting if not in production mode.');
const formData = { ...state, ...{ urgent: urgentIntent ? 'yes' : 'no' } };
setModalContent('form contents: ' + JSON.stringify(formData));
}
};
return (
<form
......@@ -95,38 +99,25 @@ export const ContactForm: React.FC<ContactFormProps> = ({
</div>
)}
<div className="field">
<SwitchTransition>
<CSSTransition
key={urgentIntent ? 'urgent' : 'normal'}
in={urgentIntent}
classNames={{ ...panelTransition }}
nodeRef={submitRef}
unmountOnExit={true}
mountOnEnter={true}
addEndListener={(done: () => void) => {
// use the css transitionend event to mark the finish of a transition
submitRef.current?.addEventListener('transitionend', done, false);
}}
>
<div ref={submitRef}>
<input
name="HelpfulContactForm[urgency]"
value={urgentIntent ? 'urgent' : 'normal'}
type="hidden"
/>
{urgentIntent ? (
<UrgentRequest/>
) : (
<button
className="good"
type="submit"
>
{t('submit')}
</button>
)}
</div>
</CSSTransition>
</SwitchTransition>
<div>
<input
name="HelpfulContactForm[urgency]"
value={urgentIntent ? 'urgent' : 'normal'}
type="hidden"
/>
{urgentIntent && (
<UrgentRequest submit={submit}/>
)}
{!urgentIntent && (
<button
className="good"
type="submit"
onClick={submit}
>
{t('submit')}
</button>
)}
</div>
</div>
{modalContent && (
<Modal
......
src/components/urgent-request/UrgentRequest.test.tsx
+ 5
− 4
View file @ 3831bba4
......@@ -3,12 +3,14 @@ import { render } from '@testing-library/react';
import UrgentRequest from './UrgentRequest';
import userEvent from '@testing-library/user-event';
const mockSendUrgent = jest.fn();
const mockSubmit: React.MouseEventHandler<HTMLButtonElement> = jest.fn().mockImplementation((e) => e.preventDefault());
describe('<UrgentRequest>', () => {
it('renders the option to make a contact request urgent', () => {
const { getByRole } = render(
<UrgentRequest/>,
<UrgentRequest
submit={mockSubmit}
/>,
);
const urgentFieldset = getByRole('group');
const urgentInput = getByRole('textbox');
......@@ -34,9 +36,8 @@ describe('<UrgentRequest>', () => {
expect(urgentSubmit).toBeEnabled();
// Can submit now..
urgentSubmit.onsubmit = mockSendUrgent;
userEvent.click(urgentSubmit);
// Triggers a message sent up the hierarchy..
expect(mockSendUrgent).toBeCalled();
expect(mockSubmit).toBeCalled();
});
});
src/components/urgent-request/UrgentRequest.tsx
+ 9
− 2
View file @ 3831bba4
import Markdown from 'markdown-to-jsx';
import React, { ChangeEvent, useEffect, useState } from 'react';
import React, { ChangeEvent, MouseEventHandler, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import styles from './UrgentRequest.module.scss';
export const UrgentRequest: React.FC = () => {
export interface UrgentRequestProps {
submit: MouseEventHandler<HTMLButtonElement>;
}
export const UrgentRequest: React.FC<UrgentRequestProps> = ({
submit,
}: UrgentRequestProps) => {
const [urgent, setUrgent] = useState<boolean>(false);
const [urgentText, setUrgentText] = useState<string>('');
const { t } = useTranslation();
......@@ -31,6 +37,7 @@ export const UrgentRequest: React.FC = () => {
disabled={!urgent}
className="bad"
type="submit"
onClick={submit}
>
{t('urgency.submit')}
</button>
......
webpack.config.js
+ 13
− 3
View file @ 3831bba4
......@@ -2,6 +2,15 @@ const CopyPlugin = require("copy-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');
staticFiles = [
{ from: "public/style-copied-from-website.css" },
];
if (process.env.NODE_ENV === 'development') {
staticFiles.append(
{ from: "public/index.html" }
);
}
module.exports = {
entry: './src/index.tsx',
plugins: [
......@@ -11,14 +20,15 @@ module.exports = {
ignoreOrder: false, // Enable to remove warnings about conflicting order
}),
new CopyPlugin({
patterns: [
{ from: "public/style-copied-from-website.css" },
],
patterns: staticFiles,
options: {
concurrency: 100,
},
}),
],
devServer: {
contentBase: path.join(__dirname, 'public'),
},
module: {
rules: [
{
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment