chore(react): add snapshot tests

wso2 · Feb 9, 2023 · dbe4242 · dbe4242
1 parent 6128139
commit dbe4242
Show file tree

Hide file tree

Showing 16 changed files with 329 additions and 0 deletions.
diff --git a/packages/react/src/components/AppBar/__tests__/AppBar.test.tsx b/packages/react/src/components/AppBar/__tests__/AppBar.test.tsx
@@ -25,4 +25,9 @@ describe('AppBar', () => {
     const {baseElement} = render(<AppBar />);
     expect(baseElement).toBeTruthy();
   });
+
+  it('should match the snapshot', () => {
+    const {baseElement} = render(<AppBar />);
+    expect(baseElement).toMatchSnapshot();
+  });
 });
diff --git a/packages/react/src/components/AppBar/__tests__/__snapshots__/AppBar.test.tsx.snap b/packages/react/src/components/AppBar/__tests__/__snapshots__/AppBar.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AppBar should match the snapshot 1`] = `
+<body>
+  <div>
+    <header
+      class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionFixed oxygen-app-bar mui-fixed css-vfrfmn-MuiPaper-root-MuiAppBar-root"
+    />
+  </div>
+</body>
+`;
diff --git a/packages/react/src/components/Button/__tests__/Button.test.tsx b/packages/react/src/components/Button/__tests__/Button.test.tsx
@@ -25,4 +25,9 @@ describe('Button', () => {
     const {baseElement} = render(<Button />);
     expect(baseElement).toBeTruthy();
   });
+
+  it('should match the snapshot', () => {
+    const {baseElement} = render(<Button />);
+    expect(baseElement).toMatchSnapshot();
+  });
 });
diff --git a/packages/react/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap b/packages/react/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap
@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Button should match the snapshot 1`] = `
+<body>
+  <div>
+    <button
+      class="MuiButtonBase-root MuiButton-root MuiLoadingButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-disableElevation MuiButton-root MuiLoadingButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-disableElevation oxygen-button css-133vz7u-MuiButtonBase-root-MuiButton-root-MuiLoadingButton-root"
+      id=":r1:"
+      tabindex="0"
+      type="button"
+    />
+  </div>
+</body>
+`;
diff --git a/packages/react/src/components/ColorModeToggle/__tests__/ColorModeToggle.test.tsx b/packages/react/src/components/ColorModeToggle/__tests__/ColorModeToggle.test.tsx
@@ -25,4 +25,9 @@ describe('ColorModeToggle', () => {
     const {baseElement} = render(<ColorModeToggle />);
     expect(baseElement).toBeTruthy();
   });
+
+  it('should match the snapshot', () => {
+    const {baseElement} = render(<ColorModeToggle />);
+    expect(baseElement).toMatchSnapshot();
+  });
 });
diff --git a/...eact/src/components/ColorModeToggle/__tests__/__snapshots__/ColorModeToggle.test.tsx.snap b/...eact/src/components/ColorModeToggle/__tests__/__snapshots__/ColorModeToggle.test.tsx.snap
@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ColorModeToggle should match the snapshot 1`] = `
+<body>
+  <div>
+    <button
+      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit MuiIconButton-sizeMedium oxygen-color-mode-toggle css-95qhwe-MuiButtonBase-root-MuiIconButton-root"
+      tabindex="0"
+      type="button"
+    >
+      <svg
+        fill="none"
+        height="24"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        width="24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+        />
+      </svg>
+      <span
+        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+      />
+    </button>
+  </div>
+</body>
+`;
diff --git a/packages/react/src/components/Grid/__tests__/Grid.test.tsx b/packages/react/src/components/Grid/__tests__/Grid.test.tsx
@@ -25,4 +25,9 @@ describe('Grid', () => {
     const {baseElement} = render(<Grid />);
     expect(baseElement).toBeTruthy();
   });
+
+  it('should match the snapshot', () => {
+    const {baseElement} = render(<Grid />);
+    expect(baseElement).toMatchSnapshot();
+  });
 });
diff --git a/packages/react/src/components/Grid/__tests__/__snapshots__/Grid.test.tsx.snap b/packages/react/src/components/Grid/__tests__/__snapshots__/Grid.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Grid should match the snapshot 1`] = `
+<body>
+  <div>
+    <div
+      class="MuiGrid2-root MuiGrid2-direction-xs-row oxygen-grid css-27y2fm-MuiGrid2-root"
+    />
+  </div>
+</body>
+`;
diff --git a/packages/react/src/components/Link/__tests__/Link.test.tsx b/packages/react/src/components/Link/__tests__/Link.test.tsx
@@ -25,4 +25,9 @@ describe('Link', () => {
     const {baseElement} = render(<Link href="https://test.com" />);
     expect(baseElement).toBeTruthy();
   });
+
+  it('should match the snapshot', () => {
+    const {baseElement} = render(<Link href="https://test.com" />);
+    expect(baseElement).toMatchSnapshot();
+  });
 });
diff --git a/packages/react/src/components/Link/__tests__/__snapshots__/Link.test.tsx.snap b/packages/react/src/components/Link/__tests__/__snapshots__/Link.test.tsx.snap
@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Link should match the snapshot 1`] = `
+<body>
+  <div>
+    <a
+      class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover oxygen-link css-1kwgxwv-MuiTypography-root-MuiLink-root"
+      href="https://test.com"
+    />
+  </div>
+</body>
+`;
diff --git a/packages/react/src/components/SignIn/__tests__/SignIn.test.tsx b/packages/react/src/components/SignIn/__tests__/SignIn.test.tsx
@@ -25,4 +25,9 @@ describe('SignIn', () => {
     const {baseElement} = render(<SignIn signUpUrl="#" logoUrl="#" />);
     expect(baseElement).toBeTruthy();
   });
+
+  it('should match the snapshot', () => {
+    const {baseElement} = render(<SignIn signUpUrl="#" logoUrl="#" />);
+    expect(baseElement).toMatchSnapshot();
+  });
 });
diff --git a/packages/react/src/components/SignIn/__tests__/__snapshots__/SignIn.test.tsx.snap b/packages/react/src/components/SignIn/__tests__/__snapshots__/SignIn.test.tsx.snap
@@ -0,0 +1,144 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SignIn should match the snapshot 1`] = `
+<body>
+  <div>
+    <div
+      class="oxygen-sign-in MuiBox-root css-0"
+    >
+      <img
+        class="oxygen-sign-in-logo MuiBox-root css-0"
+        src="#"
+      />
+      <div
+        class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded oxygen-sign-in-box css-1fbvlaf-MuiPaper-root"
+      >
+        <h5
+          class="MuiTypography-root MuiTypography-h5 oxygen-sign-in-header css-b9o9n7-MuiTypography-root"
+        >
+          Sign in
+        </h5>
+        <form
+          class="oxygen-sign-in-form MuiBox-root css-164r41r"
+          novalidate=""
+        >
+          <div
+            class="oxygen-text-field"
+          >
+            <label
+              class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-animated MuiInputLabel-shrink MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-animated MuiInputLabel-shrink oxygen-text-field__label css-pytyk4-MuiFormLabel-root-MuiInputLabel-root"
+              data-shrink="true"
+              for="id"
+            >
+              Username
+            </label>
+            <div
+              class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root oxygen-text-field__input css-wb57ya-MuiFormControl-root-MuiTextField-root"
+            >
+              <div
+                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth Mui-focused MuiInputBase-formControl css-14ld83m-MuiInputBase-root-MuiOutlinedInput-root"
+              >
+                <input
+                  aria-invalid="false"
+                  class="MuiInputBase-input MuiOutlinedInput-input css-d9o7zs-MuiInputBase-input-MuiOutlinedInput-input"
+                  id="name"
+                  name="text"
+                  placeholder="Enter your username"
+                  required=""
+                  type="text"
+                  value=""
+                />
+                <fieldset
+                  aria-hidden="true"
+                  class="MuiOutlinedInput-notchedOutline css-116asjz-MuiOutlinedInput-notchedOutline"
+                >
+                  <legend
+                    class="css-ihdtdm"
+                  >
+                    <span
+                      class="notranslate"
+                    >
+                      
+                    </span>
+                  </legend>
+                </fieldset>
+              </div>
+            </div>
+          </div>
+          <div
+            class="oxygen-text-field"
+          >
+            <label
+              class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-animated MuiInputLabel-shrink MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-animated MuiInputLabel-shrink oxygen-text-field__label css-pytyk4-MuiFormLabel-root-MuiInputLabel-root"
+              data-shrink="true"
+              for="id"
+            >
+              Password
+            </label>
+            <div
+              class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root oxygen-text-field__input css-wb57ya-MuiFormControl-root-MuiTextField-root"
+            >
+              <div
+                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl css-14ld83m-MuiInputBase-root-MuiOutlinedInput-root"
+              >
+                <input
+                  aria-invalid="false"
+                  autocomplete="current-password"
+                  class="MuiInputBase-input MuiOutlinedInput-input css-d9o7zs-MuiInputBase-input-MuiOutlinedInput-input"
+                  id="password"
+                  name="password"
+                  placeholder="Enter your password"
+                  required=""
+                  type="password"
+                  value=""
+                />
+                <fieldset
+                  aria-hidden="true"
+                  class="MuiOutlinedInput-notchedOutline css-116asjz-MuiOutlinedInput-notchedOutline"
+                >
+                  <legend
+                    class="css-ihdtdm"
+                  >
+                    <span
+                      class="notranslate"
+                    >
+                      
+                    </span>
+                  </legend>
+                </fieldset>
+              </div>
+            </div>
+          </div>
+          <button
+            class="MuiButtonBase-root MuiButton-root MuiLoadingButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButton-root MuiLoadingButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButton-fullWidth oxygen-button oxygen-sign-in-cta css-q4mdss-MuiButtonBase-root-MuiButton-root-MuiLoadingButton-root"
+            id=":r5:"
+            tabindex="0"
+            type="submit"
+          >
+            Sign In
+          </button>
+          <div
+            class="MuiGrid-root MuiGrid-container oxygen-sign-in-sign-up-link css-11lq3yg-MuiGrid-root"
+          >
+            <div
+              class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+            >
+              Don't have an account?
+            </div>
+            <div
+              class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+            >
+              <a
+                class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover oxygen-link oxygen-sign-in-sign-up-link-action css-1kwgxwv-MuiTypography-root-MuiLink-root"
+                href="#"
+              >
+                Sign up
+              </a>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</body>
+`;
diff --git a/packages/react/src/components/TextField/__test__/TextField.test.tsx b/packages/react/src/components/TextField/__test__/TextField.test.tsx
@@ -25,4 +25,9 @@ describe('TextField', () => {
     const {baseElement} = render(<TextField />);
     expect(baseElement).toBeTruthy();
   });
+
+  it('should match the snapshot', () => {
+    const {baseElement} = render(<TextField />);
+    expect(baseElement).toMatchSnapshot();
+  });
 });
diff --git a/packages/react/src/components/TextField/__test__/__snapshots__/TextField.test.tsx.snap b/packages/react/src/components/TextField/__test__/__snapshots__/TextField.test.tsx.snap
@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TextField should match the snapshot 1`] = `
+<body>
+  <div>
+    <div
+      class="oxygen-text-field"
+    >
+      <label
+        class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-animated MuiInputLabel-shrink MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-animated MuiInputLabel-shrink oxygen-text-field__label css-pytyk4-MuiFormLabel-root-MuiInputLabel-root"
+        data-shrink="true"
+        for="id"
+      />
+      <div
+        class="MuiFormControl-root MuiTextField-root oxygen-text-field__input css-1u3bzj6-MuiFormControl-root-MuiTextField-root"
+      >
+        <div
+          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl css-10tivov-MuiInputBase-root-MuiOutlinedInput-root"
+        >
+          <input
+            aria-invalid="false"
+            class="MuiInputBase-input MuiOutlinedInput-input css-d9o7zs-MuiInputBase-input-MuiOutlinedInput-input"
+            id=":r1:"
+            type="text"
+            value=""
+          />
+          <fieldset
+            aria-hidden="true"
+            class="MuiOutlinedInput-notchedOutline css-116asjz-MuiOutlinedInput-notchedOutline"
+          >
+            <legend
+              class="css-ihdtdm"
+            >
+              <span
+                class="notranslate"
+              >
+                
+              </span>
+            </legend>
+          </fieldset>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+`;
diff --git a/packages/react/src/components/Tooltip/__tests__/Tooltip.test.tsx b/packages/react/src/components/Tooltip/__tests__/Tooltip.test.tsx
@@ -29,4 +29,13 @@ describe('Tooltip', () => {
     );
     expect(baseElement).toBeTruthy();
   });
+
+  it('should match the snapshot', () => {
+    const {baseElement} = render(
+      <Tooltip title="This is a tooltip">
+        <div>Tooltip Trigger</div>
+      </Tooltip>,
+    );
+    expect(baseElement).toMatchSnapshot();
+  });
 });
diff --git a/packages/react/src/components/Tooltip/__tests__/__snapshots__/Tooltip.test.tsx.snap b/packages/react/src/components/Tooltip/__tests__/__snapshots__/Tooltip.test.tsx.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tooltip should match the snapshot 1`] = `
+<body>
+  <div>
+    <div
+      aria-label="This is a tooltip"
+      class="oxygen-tooltip"
+      data-mui-internal-clone-element="true"
+    >
+      Tooltip Trigger
+    </div>
+  </div>
+</body>
+`;