Security News
Maven Central Adds Sigstore Signature Validation
Maven Central now validates Sigstore signatures, making it easier for developers to verify the provenance of Java packages.
@highpoint/frontend-testing
Advanced tools
Package to orchestrate configuration for storybook and cypress for testing highpoint frontend apps.
This package installs all of the necessary dependencies for Storybook.js and Cypress and includes presets and configuration for documenting and unit testing react components.
Storybook.js component documentation and development tool with preconfigured webpack config & additional settings (automatically detects and includes stories defined in *.stories.(ts|js|tsx|jsx)
files anywhere in your project)
yarn hpt-storybook
- Run the local storybook webserveryarn hpt-storybook-build
- Build a static version of the storybookCypress testing preconfigured with unit testing support, snapshot testing, cypress-axe a11y testing, and automatic report generation (automatically detects and includes tests defined in *.test.(ts|js|tsx|jsx)
files)
yarn hpt-cypress-open
- Preconfigured cypress openyarn hpt-cypress-run
- Preconfigured cypress run w/ report generationEssentially you get everything you need to develop, unit test, and document a frontend react app with all dependencies and configuration under the hood. :sunglasses:
Install the package
yarn add --dev @highpoint/frontend-testing
Add the following scripts to package.json
. These can be used to run/build Storybook and Cypress.
{
"storybook": "hpt-storybook",
"storybook:build": "hpt-storybook-build",
"test": "hpt-cypress-open",
"test:run": "hpt-cypress-run"
}
Add the Cypress types to your project's tsconfig.json includes
array
{
"includes": [..., "node_modules/@gjoneshpt/cypress-plugin-snapshots/types", "node_modules/cypress/types"]
}
Add a .storybook
folder to the root folder of the consuming project.
In that folder, add a main.ts
file. Paste in this code:
const main = require('@highpoint/frontend-testing/.storybook/main');
require('@babel/polyfill');
const webpack = require('../webpack.config');
module.exports = {
...main,
webpackFinal: async (config, { configType }) => {
// Add consuming project's webpack resolve modules config
if(typeof(webpack) === 'function') {
const baseWebpackConfig = webpack({}, configType.toLowerCase());
if(baseWebpackConfig.resolve.modules)
config.resolve.modules = baseWebpackConfig.resolve.modules;
}
// Return the altered config
return config;
}};
Also in the .storybook
folder, add a preview.ts
file. Paste in this code:
import { preview } from '@highpoint/frontend-testing';
export const Decorator = preview.Decorator;
export const decorators = preview.decorators;
export const parameters = preview.parameters;
Also in .storybook
, add a preview-head.html
file. Paste in this code:
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:100,200,300,400,500,600,700&display=swap" rel="stylesheet">
<style>
html, body, #root {
height: 100%;
}
.sbdocs-preview {
background-color: #f5f6fa !important;
}
@media print {
#root, #docs-root {
display: none !important;
}
}
</style>
Also in .storybook
, add a manager.ts
file. Paste in this code:
import { addons } from '@storybook/addons';
import { theme } from '@highpoint/frontend-testing';
addons.setConfig({
theme: theme
});
Thats it, you're ready to run Storybook and Cypress! Run yarn storybook
to run the local storybook server and yarn test
to open the cypress test runner.
Storybook and Cypress play well together!
When you write storybook story for a component, you are essentially writing a test specification for it. Each component should have multiple stories with different variations of props passed to it. Exporting a story from a *.stories.(tsx|jsx)
file adds it to the storybook. (See storybook docs for more details)
Say we have some component called HelloWorld. Our stories file could look like this:
// HelloWorld.stories.tsx
import React from 'react';
import { HelloWorld } from '.';
export default {
title: 'HelloWorld',
component: HelloWorld,
parameters: {
componentSubtitle: 'This is the HelloWorld component.',
}
};
const Template = (args) => <HelloWorld {...args} />;
export const Standard = Template.bind({});
Standard.args = {
myProp: 1
}
export const Different = Template.bind({});
Different.args = {
myProp: 2
}
Storybook automatically detects the exported stories and adds them to the storybook, but we can also import these stories into our test files and test directly against them. This means that when we write our stories, we are not only defining our component documention but also our test cases! So our test file can look like this:
// HelloWorld.test.tsx
import React from 'react';
// This mount function is the same as the mount function in 'cypress-react-unit-test' except it also renders a decorator with the @highpoint/ui-elements theme provider.
import { mount } from '@highpoint/frontend-testing';
import { Standard, Different } from './HelloWorld.stories';
describe('HelloWorld', () => {
it('Standard', () => {
// Note we have to pass the story args to the component
mount(<Standard {...Standard.args} />);
cy.document().toMatchImageSnapshot();
});
it('Different', () => {
mount(<Different {...Different.args} />);
cy.document().toMatchImageSnapshot();
});
});
Component stories and tests should both be placed inline with the component definitions. So for our HelloWorld component, the file structure should look like this:
project
│
└───components
└───HelloWorld
│ index.tsx
│ HelloWorld.stories.tsx
│ HelloWorld.test.tsx
You can modify any configuration in main.ts
and preview.ts
by overriding any field on the storybookDefaults object:
// Note, to use jsx syntax, rename the preview file to preview.tsx
/* preview.tsx */
import { preview } from '@highpoint/frontend-testing';
export const Decorator = preview.Decorator;
export const decorators = preview.decorators.concat([Story => <NotificationMananger><Story /></NotificationManager>]);
export const parameters = preview.parameters;
or
/* main.ts */
const main = require('@highpoint/frontend-testing/.storybook/main');
require('@babel/polyfill');
const webpack = require('../webpack.config');
module.exports = {
...main,
// Use different stories glob
stories: ['../src/**/*.stories.@(ts|tsx|js|jsx|mdx)']
webpackFinal: ...
};
Configuration options to come...
FAQs
Package to orchestrate configuration for storybook and cypress for testing highpoint frontend apps.
The npm package @highpoint/frontend-testing receives a total of 2 weekly downloads. As such, @highpoint/frontend-testing popularity was classified as not popular.
We found that @highpoint/frontend-testing demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Maven Central now validates Sigstore signatures, making it easier for developers to verify the provenance of Java packages.
Security News
CISOs are racing to adopt AI for cybersecurity, but hurdles in budgets and governance may leave some falling behind in the fight against cyber threats.
Research
Security News
Socket researchers uncovered a backdoored typosquat of BoltDB in the Go ecosystem, exploiting Go Module Proxy caching to persist undetected for years.