From 1d6c5440f8ffd4109f5fd653fad5da4b9916015b Mon Sep 17 00:00:00 2001
From: Taylor Jones <taylor.jones826@gmail.com>
Date: Wed, 21 Jul 2021 10:50:08 -0500
Subject: [PATCH 1/3] test(checkbox): add e2e test, percy snapshot

---
 .../components/Checkbox/Checkbox-test.e2e.js  | 55 +++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 packages/react/src/components/Checkbox/Checkbox-test.e2e.js

diff --git a/packages/react/src/components/Checkbox/Checkbox-test.e2e.js b/packages/react/src/components/Checkbox/Checkbox-test.e2e.js
new file mode 100644
index 000000000000..49d4a8416198
--- /dev/null
+++ b/packages/react/src/components/Checkbox/Checkbox-test.e2e.js
@@ -0,0 +1,55 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import 'carbon-components/scss/components/checkbox/_checkbox.scss';
+
+import React from 'react';
+import { mount } from '@cypress/react';
+import Checkbox from '../Checkbox';
+
+describe('Checkbox', () => {
+  beforeEach(() => {
+    mount(
+      <fieldset className={`fieldset`}>
+        <legend className={`label`}>Checkbox heading</legend>
+        <Checkbox labelText={`Checkbox label 1`} id="checkbox-label-1" />
+        <Checkbox labelText={`Checkbox label 2`} id="checkbox-label-2" />
+      </fieldset>
+    );
+  });
+
+  it('should render unselected', () => {
+    cy.findByText(/Checkbox label 1/).should('be.visible');
+    cy.findByText(/Checkbox label 2/).should('be.visible');
+
+    // snapshots should always be taken _after_ an assertion that
+    // a element/component should be visible. This is to ensure
+    // the DOM has settled and the element has fully loaded.
+    cy.percySnapshot();
+  });
+
+  it('should be selected and focused on click', () => {
+    // must force the interaction because cypress detects the original
+    // input hidden due to how we style the checkbox
+    cy.findByLabelText('Checkbox label 1').click({ force: true });
+    cy.findByLabelText(/Checkbox label 1/)
+      .should('be.visible')
+      .and('have.focus')
+      .and('be.checked');
+
+    cy.findByLabelText('Checkbox label 2').click({ force: true });
+    cy.findByLabelText(/Checkbox label 2/)
+      .should('be.visible')
+      .and('have.focus')
+      .and('be.checked');
+
+    // snapshots should always be taken _after_ an assertion that
+    // a element/component should be visible. This is to ensure
+    // the DOM has settled and the element has fully loaded.
+    cy.percySnapshot();
+  });
+});

From d6a817530da86c52bb442f718024d9f12af258c2 Mon Sep 17 00:00:00 2001
From: Taylor Jones <taylor.jones826@gmail.com>
Date: Mon, 26 Jul 2021 14:42:23 -0500
Subject: [PATCH 2/3] test(checkbox): add checkbox skeleton to e2e snapshot

---
 packages/react/src/components/Checkbox/Checkbox-test.e2e.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/react/src/components/Checkbox/Checkbox-test.e2e.js b/packages/react/src/components/Checkbox/Checkbox-test.e2e.js
index 49d4a8416198..93b86edf611f 100644
--- a/packages/react/src/components/Checkbox/Checkbox-test.e2e.js
+++ b/packages/react/src/components/Checkbox/Checkbox-test.e2e.js
@@ -10,6 +10,7 @@ import 'carbon-components/scss/components/checkbox/_checkbox.scss';
 import React from 'react';
 import { mount } from '@cypress/react';
 import Checkbox from '../Checkbox';
+import CheckboxSkeleton from '../Checkbox.Skeleton';
 
 describe('Checkbox', () => {
   beforeEach(() => {
@@ -18,6 +19,7 @@ describe('Checkbox', () => {
         <legend className={`label`}>Checkbox heading</legend>
         <Checkbox labelText={`Checkbox label 1`} id="checkbox-label-1" />
         <Checkbox labelText={`Checkbox label 2`} id="checkbox-label-2" />
+        <CheckboxSkeleton />
       </fieldset>
     );
   });

From b562672c12342859767b80c89585afae8104476e Mon Sep 17 00:00:00 2001
From: Taylor Jones <taylor.jones826@gmail.com>
Date: Thu, 29 Jul 2021 14:58:45 -0500
Subject: [PATCH 3/3] fix(checkbox): correct skeleton import path

---
 packages/react/src/components/Checkbox/Checkbox-test.e2e.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/components/Checkbox/Checkbox-test.e2e.js b/packages/react/src/components/Checkbox/Checkbox-test.e2e.js
index 93b86edf611f..9fb35782e445 100644
--- a/packages/react/src/components/Checkbox/Checkbox-test.e2e.js
+++ b/packages/react/src/components/Checkbox/Checkbox-test.e2e.js
@@ -10,7 +10,7 @@ import 'carbon-components/scss/components/checkbox/_checkbox.scss';
 import React from 'react';
 import { mount } from '@cypress/react';
 import Checkbox from '../Checkbox';
-import CheckboxSkeleton from '../Checkbox.Skeleton';
+import CheckboxSkeleton from '../Checkbox/Checkbox.Skeleton';
 
 describe('Checkbox', () => {
   beforeEach(() => {