Skip to content

Commit

Permalink
chore(test): tests for code examples (#34)
Browse files Browse the repository at this point in the history
  • Loading branch information
bkemper authored Sep 5, 2022
1 parent 805dfb8 commit d26ba55
Show file tree
Hide file tree
Showing 14 changed files with 2,726 additions and 19 deletions.
6 changes: 5 additions & 1 deletion components/Code.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -240,10 +240,14 @@ type CodeProps = {
code: string;
};

export const removeCodeTags = (code: string) => {
return code.replaceAll('[]', '').replaceAll(/\[#(\S+)\]/g, '');
};

export const Code: FC<CodeProps> = (props) => {
const { code } = props;
const string = code.trim();
const copyString = string.replaceAll('[]', '').replaceAll(/\[#(\S+)\]/g, '');
const copyString = removeCodeTags(string);

return (
<Wrapper>
Expand Down
8 changes: 5 additions & 3 deletions content/Dialog.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,22 +5,24 @@ import { CodeSection } from '~components/CodeSection';
import { InlineCode } from '~components/InlineCode';
import { InlineLink } from '~components/InlineLink';

const toggle = `
export const code = `
<button type="button">Open dialog</button>
<div
[#dialog-role]role="dialog"[]
[#dialog-modal]aria-modal="true"[]
[#dialog-labelledby]aria-labelledby="dialog-label"[]
[#dialog-describedby]aria-describedby="dialog-desc"[]
>
<h3 [#dialog-labelledby]id="dialog-label"[]>Dialog Title</h3>
<h2 [#dialog-labelledby]id="dialog-label"[]>Dialog Title</h2>
<p [#dialog-describedby]id="dialog-desc"[]>Dialog Description</p>
</div>
`;

export const displayName = 'Dialog';

export const Dialog: FC = () => {
return (
<CodeContainer code={toggle} title="Dialog" id="dialog">
<CodeContainer code={code} title={displayName} id="dialog">
<p>
A dialog is an interactive overlay component, such as a dismissible
alert or confirmation window, that separates content from the rest of
Expand Down
6 changes: 4 additions & 2 deletions content/Menu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { CodeSection } from '~components/CodeSection';
import { InlineCode } from '~components/InlineCode';
import { InlineLink } from '~components/InlineLink';

const menu = `
export const code = `
<button
[#menu-idtrigger]id="menu-trigger"[]
[#menu-haspopup]aria-haspopup="true"[]
Expand All @@ -28,9 +28,11 @@ const menu = `
</div>
`;

export const displayName = 'Menu';

export const Menu: FC = () => {
return (
<CodeContainer code={menu} title="Dropdown Menu" id="menu">
<CodeContainer code={code} title={'Dropdown ' + displayName} id="menu">
<p>
A menu is an interactive component that groups together a list of
actions or choices that a user can invoke.
Expand Down
6 changes: 4 additions & 2 deletions content/Popover.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { CodeSection } from '~components/CodeSection';
import { InlineCode } from '~components/InlineCode';
import { InlineLink } from '~components/InlineLink';

const popover = `
export const code = `
<button
type="button"
[#popover-expanded]aria-expanded="true"[]
Expand All @@ -23,9 +23,11 @@ const popover = `
`;

export const displayName = 'Popover';

export const Popover: FC = () => {
return (
<CodeContainer code={popover} title="Popover" id="popover">
<CodeContainer code={code} title={displayName} id="popover">
<p>
A popover is an non-modal overlay element that displays additional
content.
Expand Down
6 changes: 4 additions & 2 deletions content/Switch.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { CodeSection } from '~components/CodeSection';
import { InlineCode } from '~components/InlineCode';
import { InlineLink } from '~components/InlineLink';

const switchCode = `
export const code = `
<button
type="button"
[#toggle-role]role="switch"[]
Expand All @@ -15,9 +15,11 @@ const switchCode = `
</button>
`;

export const displayName = 'Switch';

export const Switch: FC = () => {
return (
<CodeContainer code={switchCode} title="Switch (Toggle)" id="switch">
<CodeContainer code={code} title={displayName + ' (Toggle)'} id="switch">
<p>
A type of checkbox that represents on and off values, as opposed to
checked and unchecked values. Functionally similar to a{' '}
Expand Down
6 changes: 4 additions & 2 deletions content/ToggleButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { CodeSection } from '~components/CodeSection';
import { InlineCode } from '~components/InlineCode';
import { InlineLink } from '~components/InlineLink';

const toggleButton = `
export const code = `
<button
type="button"
[#togglebutton-pressed]aria-pressed="true"[]
Expand All @@ -14,9 +14,11 @@ const toggleButton = `
</button>
`;

export const displayName = 'Toggle Button';

export const ToggleButton: FC = () => {
return (
<CodeContainer code={toggleButton} title="Toggle Button" id="togglebutton">
<CodeContainer code={code} title={displayName} id="togglebutton">
<p>
A toggle button that represents on or off values. Functionally similar
to <InlineCode>switch</InlineCode>, but supports mixed values and should
Expand Down
6 changes: 4 additions & 2 deletions content/Tooltip.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { CodeSection } from '~components/CodeSection';
import { InlineCode } from '~components/InlineCode';
import { InlineLink } from '~components/InlineLink';

const tooltip = `
export const code = `
<a [#tooltip-describedby]aria-describedby="tooltip"[]>
Link
</a>
Expand All @@ -18,9 +18,11 @@ const tooltip = `
</span>
`;

export const displayName = 'Tooltip';

export const Tooltip: FC = () => {
return (
<CodeContainer code={tooltip} title="Tooltip" id="tooltip">
<CodeContainer code={code} title={displayName} id="tooltip">
<p>
A tooltip is a small overlay element that provides auxiliary content for
another focusable or interactive element, such as a field, link or
Expand Down
10 changes: 10 additions & 0 deletions cypress.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { defineConfig } from "cypress";

export default defineConfig({
component: {
devServer: {
framework: "next",
bundler: "webpack",
},
},
});
34 changes: 34 additions & 0 deletions cypress/component/content.cy.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import { mount } from 'cypress/react18';
import { removeCodeTags } from '../../components/Code';
import * as Dialog from '../../content/Dialog';
import * as Menu from '../../content/Menu';
import * as Popover from '../../content/Popover';
import * as Switch from '../../content/Switch';
import * as ToggleButton from '../../content/ToggleButton';
import * as Tooltip from '../../content/Tooltip';

type ContentComponent = {
code: string;
displayName: string;
};

// todo, probably a better way to do this
const contents = [Dialog, Menu, Popover, Switch, ToggleButton, Tooltip];

const accessibilityTest = (content: ContentComponent) => () => {
const __html = removeCodeTags(content.code);

mount(<div dangerouslySetInnerHTML={{ __html }}></div>);

// note, You must run this after a call to cy.visit() and before you run the checkA11y command.
cy.injectAxe();

// note, The default operation is to run all rules except for rules with the "experimental" tag
cy.checkA11y('[data-cy-root]');
};

describe('content', () => {
for (const content of contents) {
it(content.displayName, accessibilityTest(content));
}
});
39 changes: 39 additions & 0 deletions cypress/support/commands.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
/// <reference types="cypress" />
// ***********************************************
// This example commands.ts shows you how to
// create various custom commands and overwrite
// existing commands.
//
// For more comprehensive examples of custom
// commands please read more here:
// https://on.cypress.io/custom-commands
// ***********************************************
//
//
// -- This is a parent command --
// Cypress.Commands.add('login', (email, password) => { ... })
//
//
// -- This is a child command --
// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
//
//
// -- This is a dual command --
// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
//
//
// -- This will overwrite an existing command --
// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
//
// declare global {
// namespace Cypress {
// interface Chainable {
// login(email: string, password: string): Chainable<void>
// drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
// dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
// visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
// }
// }
// }

import 'cypress-axe';
14 changes: 14 additions & 0 deletions cypress/support/component-index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Components App</title>
<!-- Used by Next.js to inject CSS. -->
<div id="__next_css__DO_NOT_USE__"></div>
</head>
<body>
<div data-cy-root></div>
</body>
</html>
17 changes: 17 additions & 0 deletions cypress/support/component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
// ***********************************************************
// This example support/component.ts is processed and
// loaded automatically before your test files.
//
// This is a great place to put global configuration and
// behavior that modifies Cypress.
//
// You can change the location of this file or turn off
// automatically serving support files with the
// 'supportFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/configuration
// ***********************************************************

// Import commands.js using ES2015 syntax:
import './commands';
Loading

1 comment on commit d26ba55

@vercel
Copy link

@vercel vercel bot commented on d26ba55 Sep 5, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.