feat: add tests to toggle-group

fix: lint, format
telekom · Aug 2, 2021 · d452bc6 · d452bc6
1 parent 8f2704f
commit d452bc6
Show file tree

Hide file tree

Showing 5 changed files with 161 additions and 4 deletions.
diff --git a/packages/components/src/components/toggle-button/toggle-button.spec.ts b/packages/components/src/components/toggle-button/toggle-button.spec.ts
@@ -12,7 +12,7 @@
 import { newSpecPage, SpecPage } from '@stencil/core/testing';
 import { ToggleButton } from './toggle-button';
 
-describe('RatingStars', () => {
+describe('Toggle Button', () => {
   let page: SpecPage;
   describe('snapshots', () => {
     it('default props', async () => {

diff --git a/packages/components/src/components/toggle-button/toggle-button.tsx b/packages/components/src/components/toggle-button/toggle-button.tsx
@@ -54,7 +54,7 @@ export class ToggleButton {
   /** (optional) set the border-radius left, right or both */
   @Prop() radius: 'left' | 'right' | 'both' | null = null;
   /** (optional) toggle button's id */
-  @Prop() toggleButtonId?: string;
+  @Prop({ reflect: true }) toggleButtonId?: string;
   /** (optional) aria-label attribute needed for icon-only buttons */
   @Prop() ariaLabel: string;
   /** (optional) Injected CSS styles */

diff --git a/packages/components/src/components/toggle-group/__snapshots__/toggle-group.spec.ts.snap b/packages/components/src/components/toggle-group/__snapshots__/toggle-group.spec.ts.snap
@@ -0,0 +1,80 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Toggle Group snapshots default props 1`] = `
+<scale-toggle-group>
+  <mock:shadow-root>
+    <div class="toggle-group toggle-group--inline" part="toggle-group inline">
+      <slot></slot>
+    </div>
+  </mock:shadow-root>
+  <scale-toggle-button disabled="false" radius="left" size="large" variant="primary">
+    Click Me!
+  </scale-toggle-button>
+  <scale-toggle-button disabled="false" size="large" variant="primary">
+    Click Me!
+  </scale-toggle-button>
+  <scale-toggle-button disabled="false" radius="right" selected="" size="large" variant="primary">
+    Click Me!
+  </scale-toggle-button>
+</scale-toggle-group>
+`;
+
+exports[`Toggle Group snapshots disabled 1`] = `
+<scale-toggle-group aria-label="Aria Label" disabled="">
+  <mock:shadow-root>
+    <div class="toggle-group toggle-group--inline" part="toggle-group inline">
+      <slot></slot>
+    </div>
+  </mock:shadow-root>
+  <scale-toggle-button disabled="disabled" radius="left" size="large" variant="primary">
+    Click Me!
+  </scale-toggle-button>
+  <scale-toggle-button disabled="disabled" size="large" variant="primary">
+    Click Me!
+  </scale-toggle-button>
+  <scale-toggle-button disabled="disabled" radius="right" selected="" size="large" variant="primary">
+    Click Me!
+  </scale-toggle-button>
+</scale-toggle-group>
+`;
+
+exports[`Toggle Group snapshots size small, multi false 1`] = `
+<scale-toggle-group multi="false" size="small">
+  <mock:shadow-root>
+    <div class="toggle-group toggle-group--inline" part="toggle-group inline">
+      <slot></slot>
+    </div>
+  </mock:shadow-root>
+  <scale-toggle-button disabled="false" radius="left" size="small" variant="primary">
+    Click Me!
+  </scale-toggle-button>
+  <scale-toggle-button disabled="false" size="small" variant="primary">
+    Click Me!
+  </scale-toggle-button>
+  <scale-toggle-button disabled="false" radius="right" selected="" size="small" variant="primary">
+    Click Me!
+  </scale-toggle-button>
+</scale-toggle-group>
+`;
+
+exports[`Toggle Group snapshots styles 1`] = `
+<scale-toggle-group styles="color:red">
+  <mock:shadow-root>
+    <style>
+      color:red
+    </style>
+    <div class="toggle-group toggle-group--inline" part="toggle-group inline">
+      <slot></slot>
+    </div>
+  </mock:shadow-root>
+  <scale-toggle-button disabled="false" radius="left" size="large" variant="primary">
+    Click Me!
+  </scale-toggle-button>
+  <scale-toggle-button disabled="false" size="large" variant="primary">
+    Click Me!
+  </scale-toggle-button>
+  <scale-toggle-button disabled="false" radius="right" selected="" size="large" variant="primary">
+    Click Me!
+  </scale-toggle-button>
+</scale-toggle-group>
+`;
diff --git a/packages/components/src/components/toggle-group/toggle-group.spec.ts b/packages/components/src/components/toggle-group/toggle-group.spec.ts
@@ -0,0 +1,78 @@
+/**
+ * @license
+ * Scale https://github.com/telekom/scale
+ *
+ * Copyright (c) 2021 Egor Kirpichev and contributors, Deutsche Telekom AG
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import { newSpecPage, SpecPage } from '@stencil/core/testing';
+import { ToggleGroup } from './toggle-group';
+
+describe('Toggle Group', () => {
+  let page: SpecPage;
+  describe('snapshots', () => {
+    it('default props', async () => {
+      page = await newSpecPage({
+        components: [ToggleGroup],
+        html: `<scale-toggle-group>
+		   <scale-toggle-button>Click Me!</scale-toggle-button>
+		   <scale-toggle-button>Click Me!</scale-toggle-button>
+		   <scale-toggle-button selected>Click Me!</scale-toggle-button>
+		 </scale-toggle-group>`,
+      });
+      expect(page.root).toMatchSnapshot();
+    });
+    it('size small, multi false', async () => {
+      page = await newSpecPage({
+        components: [ToggleGroup],
+        html: `<scale-toggle-group size="small" multi="false">
+		   <scale-toggle-button>Click Me!</scale-toggle-button>
+		   <scale-toggle-button>Click Me!</scale-toggle-button>
+		   <scale-toggle-button selected>Click Me!</scale-toggle-button>
+		 </scale-toggle-group>`,
+      });
+      expect(page.root).toMatchSnapshot();
+    });
+    it('disabled', async () => {
+      page = await newSpecPage({
+        components: [ToggleGroup],
+        html: `<scale-toggle-group disabled aria-label="Aria Label">
+		   <scale-toggle-button>Click Me!</scale-toggle-button>
+		   <scale-toggle-button>Click Me!</scale-toggle-button>
+		   <scale-toggle-button selected>Click Me!</scale-toggle-button>
+		 </scale-toggle-group>`,
+      });
+      expect(page.root).toMatchSnapshot();
+    });
+    it('styles', async () => {
+      page = await newSpecPage({
+        components: [ToggleGroup],
+        html: `<scale-toggle-group styles="color:red">
+		   <scale-toggle-button>Click Me!</scale-toggle-button>
+		   <scale-toggle-button>Click Me!</scale-toggle-button>
+		   <scale-toggle-button selected>Click Me!</scale-toggle-button>
+		 </scale-toggle-group>`,
+      });
+      expect(page.root).toMatchSnapshot();
+    });
+  });
+  describe('classes', () => {
+    it('should handle getCssClassMap() and getBasePartMap()', () => {
+      const element = new ToggleGroup();
+      expect(element.getCssClassMap()).toContain('toggle-group');
+      expect(element.getCssClassMap()).toContain('toggle-group--inline');
+      expect(element.getCssClassMap()).not.toContain('toggle-group--border');
+
+      expect(element.getBasePartMap()).toContain('toggle-group');
+      expect(element.getBasePartMap()).toContain('inline');
+      expect(element.getBasePartMap()).not.toContain('border');
+      element.border = true;
+      expect(element.getCssClassMap()).toContain('toggle-group--border');
+      expect(element.getBasePartMap()).toContain('border');
+    });
+  });
+});
diff --git a/packages/components/src/components/toggle-group/toggle-group.tsx b/packages/components/src/components/toggle-group/toggle-group.tsx
@@ -87,9 +87,8 @@ export class ToggleGroup {
       this.hostElement.querySelectorAll('scale-toggle-button')
     );
     toggleButtons.forEach((toggleButton) => {
-      const button = toggleButton.shadowRoot.querySelector('button');
       tempState.push({
-        id: button.getAttribute('id'),
+        id: toggleButton.getAttribute('toggle-button-id'),
         selected: toggleButton.hasAttribute('selected'),
       });
       toggleButton.setAttribute('size', this.size);