test: collections and new test ids and classes

src/admin/components/elements/Button/index.tsx

@@ -25,7 +25,9 @@ const ButtonContents = ({ children, icon, tooltip }) => {
   const BuiltInIcon = icons[icon];
 
   return (
-    <span className={`${baseClass}__content`}>
+    <span
+      className={`${baseClass}__content`}
+    >
       {tooltip && (
         <Tooltip className={`${baseClass}__tooltip`}>
           {tooltip}
@@ -49,6 +51,7 @@ const ButtonContents = ({ children, icon, tooltip }) => {
 const Button: React.FC<Props> = (props) => {
   const {
     className,
+    id,
     type = 'button',
     el,
     to,
@@ -86,6 +89,7 @@ const Button: React.FC<Props> = (props) => {
   }
 
   const buttonProps = {
+    id,
     type,
     className: classes,
     disabled,

src/admin/components/elements/Button/types.ts

@@ -2,6 +2,7 @@ import React, { MouseEvent } from 'react';
 
 export type Props = {
   className?: string,
+  id?: string,
   type?: 'submit' | 'button',
   el?: 'link' | 'anchor' | undefined,
   to?: string,
@@ -12,6 +13,7 @@ export type Props = {
   icon?: React.ReactNode | ['chevron' | 'x' | 'plus' | 'edit'],
   iconStyle?: 'with-border' | 'without-border' | 'none',
   buttonStyle?: 'primary' | 'secondary' | 'transparent' | 'error' | 'none' | 'icon-label',
+  buttonId?: string,
   round?: boolean,
   size?: 'small' | 'medium',
   iconPosition?: 'left' | 'right',

src/admin/components/elements/DeleteDocument/index.tsx

@@ -18,6 +18,7 @@ const DeleteDocument: React.FC<Props> = (props) => {
   const {
     title: titleFromProps,
     id,
+    buttonId,
     collection: {
       admin: {
         useAsTitle,
@@ -78,6 +79,7 @@ const DeleteDocument: React.FC<Props> = (props) => {
       <React.Fragment>
         <button
           type="button"
+          id={buttonId}
           className={`${baseClass}__toggle`}
           onClick={(e) => {
             e.preventDefault();
@@ -105,6 +107,7 @@ const DeleteDocument: React.FC<Props> = (props) => {
               &quot;. Are you sure?
             </p>
             <Button
+              id="confirm-cancel"
               buttonStyle="secondary"
               type="button"
               onClick={deleting ? undefined : () => toggle(modalSlug)}
@@ -113,6 +116,7 @@ const DeleteDocument: React.FC<Props> = (props) => {
             </Button>
             <Button
               onClick={deleting ? undefined : handleDelete}
+              id="confirm-delete"
             >
               {deleting ? 'Deleting...' : 'Confirm'}
             </Button>

src/admin/components/elements/DeleteDocument/types.ts

@@ -3,5 +3,6 @@ import { SanitizedCollectionConfig } from '../../../../collections/config/types'
 export type Props = {
   collection?: SanitizedCollectionConfig,
   id?: string,
+  buttonId?: string,
   title?: string,
 }

src/admin/components/elements/DuplicateDocument/index.tsx

@@ -27,6 +27,7 @@ const Duplicate: React.FC<Props> = ({ slug }) => {
 
   return (
     <Button
+      id="action-duplicate"
       buttonStyle="none"
       className={baseClass}
       onClick={handleClick}

src/admin/components/elements/Table/index.tsx

@@ -16,7 +16,10 @@ const Table: React.FC<Props> = ({ columns, data }) => {
           <thead>
             <tr>
               {columns.map((col, i) => (
-                <th key={i}>
+                <th
+                  key={i}
+                  id={`heading-${col.accessor}`}
+                >
                   {col.components.Heading}
                 </th>
               ))}

src/admin/components/elements/WhereBuilder/Condition/index.tsx

@@ -105,6 +105,7 @@ const Condition: React.FC<Props> = (props) => {
         <div className={`${baseClass}__actions`}>
           <Button
             icon="x"
+            className={`${baseClass}__actions-remove`}
             round
             buttonStyle="icon-label"
             iconStyle="with-border"
@@ -116,6 +117,7 @@ const Condition: React.FC<Props> = (props) => {
           />
           <Button
             icon="plus"
+            className={`${baseClass}__actions-add`}
             round
             buttonStyle="icon-label"
             iconStyle="with-border"

src/admin/components/forms/Submit/index.tsx

@@ -8,7 +8,7 @@ import './index.scss';
 const baseClass = 'form-submit';
 
 const FormSubmit: React.FC<Props> = (props) => {
-  const { children, disabled: disabledFromProps, type = 'submit' } = props;
+  const { children, buttonId: id, disabled: disabledFromProps, type = 'submit' } = props;
   const processing = useFormProcessing();
   const { disabled } = useForm();
 
@@ -16,6 +16,7 @@ const FormSubmit: React.FC<Props> = (props) => {
     <div className={baseClass}>
       <Button
         {...props}
+        id={id}
         type={type}
         disabled={disabledFromProps || processing || disabled ? true : undefined}
       >

src/admin/components/views/collections/Edit/Default.tsx

@@ -134,7 +134,14 @@ const DefaultEditView: React.FC<Props> = (props) => {
                   <ul className={`${baseClass}__collection-actions`}>
                     {(permissions?.create?.permission) && (
                     <React.Fragment>
-                      <li><Link to={`${admin}/collections/${slug}/create`}>Create New</Link></li>
+                      <li>
+                        <Link
+                          id="action-create"
+                          to={`${admin}/collections/${slug}/create`}
+                        >
+                          Create New
+                        </Link>
+                      </li>
                       {!disableDuplicate && (
                       <li><DuplicateDocument slug={slug} /></li>
                       )}
@@ -145,6 +152,7 @@ const DefaultEditView: React.FC<Props> = (props) => {
                       <DeleteDocument
                         collection={collection}
                         id={id}
+                        buttonId="action-delete"
                       />
                     </li>
                   )}
@@ -167,7 +175,7 @@ const DefaultEditView: React.FC<Props> = (props) => {
                         </React.Fragment>
                       )}
                       {!collection.versions?.drafts && (
-                        <FormSubmit>Save</FormSubmit>
+                        <FormSubmit buttonId="action-save">Save</FormSubmit>
                       )}
                     </React.Fragment>
                     )}