feat: implement UsaStepIndicatorSegment component

ISSUES CLOSED: #70
patrickcate · Nov 20, 2021 · 13d914c · 13d914c
1 parent a97ca6d
commit 13d914c
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 41 deletions.
diff --git a/src/components/UsaStepIndicatorSegment/UsaStepIndicatorSegment.stories.js b/src/components/UsaStepIndicatorSegment/UsaStepIndicatorSegment.stories.js
@@ -1,31 +1,65 @@
 import UsaStepIndicatorSegment from './UsaStepIndicatorSegment.vue'
+import UsaStepIndicator from '@/components/UsaStepIndicator'
 
-const defaultProps = {}
+const defaultProps = {
+  status: '',
+  label: '',
+}
 
 export default {
   component: UsaStepIndicatorSegment,
   title: 'Components/UsaStepIndicatorSegment',
   argTypes: {
-    defaultSlot: {
+    status: {
+      control: {
+        options: ['', 'current', 'completed'],
+        type: 'select',
+        labels: {
+          '': 'not completed',
+        },
+      },
+    },
+    label: {
       control: { type: 'text' },
     },
   },
   args: {
-    defaultSlot: 'Test',
+    status: defaultProps.status,
   },
 }
 
 const DefaultTemplate = (args, { argTypes }) => ({
-  components: { UsaStepIndicatorSegment },
+  components: { UsaStepIndicator, UsaStepIndicatorSegment },
   props: Object.keys(argTypes),
   setup() {
     return { ...args }
   },
-  template: `<UsaStepIndicatorSegment>${args.defaultSlot}</UsaStepIndicatorSegment>`,
+  template: `
+    <UsaStepIndicator counters>
+      <UsaStepIndicatorSegment :status="status" :label="label"></UsaStepIndicatorSegment>
+      <template #header>&nbsp</template>
+  </UsaStepIndicator>`,
 })
 
 export const DefaultStepIndicatorSegment = DefaultTemplate.bind({})
 DefaultStepIndicatorSegment.args = {
   ...defaultProps,
+  label: 'Test Step 1',
 }
 DefaultStepIndicatorSegment.storyName = 'Default'
+
+export const CurrentStepIndicatorSegment = DefaultTemplate.bind({})
+CurrentStepIndicatorSegment.args = {
+  ...defaultProps,
+  status: 'current',
+  label: 'Test Current Step 1',
+}
+CurrentStepIndicatorSegment.storyName = 'Current'
+
+export const CompletedStepIndicatorSegment = DefaultTemplate.bind({})
+CompletedStepIndicatorSegment.args = {
+  ...defaultProps,
+  status: 'completed',
+  label: 'Test Completed Step 1',
+}
+CompletedStepIndicatorSegment.storyName = 'Completed'
diff --git a/src/components/UsaStepIndicatorSegment/UsaStepIndicatorSegment.test.js b/src/components/UsaStepIndicatorSegment/UsaStepIndicatorSegment.test.js
@@ -2,9 +2,47 @@ import '@module/uswds/dist/css/uswds.min.css'
 import { mount } from '@cypress/vue'
 import UsaStepIndicatorSegment from './UsaStepIndicatorSegment.vue'
 
+const testSteps = ['First Step', 'Second Step', 'Third Step', 'Fourth Step']
+
 describe('UsaStepIndicatorSegment', () => {
   it('renders the component', () => {
-    mount(UsaStepIndicatorSegment, {})
-    cy.get('.usa-step-indicator-segment').should('exist')
+    mount(UsaStepIndicatorSegment, {
+      props: {
+        label: testSteps[0],
+      },
+    }).as('wrapper')
+
+    cy.get('.usa-step-indicator__segment').should('contain', testSteps[0])
+
+    cy.get('@wrapper').invoke('setProps', { status: 'current' })
+    cy.get('.usa-step-indicator__segment').should(
+      'have.class',
+      'usa-step-indicator__segment--current'
+    )
+
+    cy.get('@wrapper').invoke('setProps', { status: 'completed' })
+    cy.get('.usa-step-indicator__segment').should(
+      'have.class',
+      'usa-step-indicator__segment--complete'
+    )
+  })
+
+  it('warns in console about invalid step status', () => {
+    cy.stub(window.console, 'warn').as('consoleWarn')
+
+    mount(UsaStepIndicatorSegment, {
+      props: {
+        label: testSteps[0],
+      },
+    })
+      .as('wrapper')
+      .should('exist')
+
+    cy.get('@wrapper').invoke('setProps', { status: 'notastatus' })
+
+    cy.get('@consoleWarn').should(
+      'be.calledWith',
+      `[Vue warn]: Invalid prop: custom validator check failed for prop "status".`
+    )
   })
 })
diff --git a/src/components/UsaStepIndicatorSegment/UsaStepIndicatorSegment.vue b/src/components/UsaStepIndicatorSegment/UsaStepIndicatorSegment.vue
@@ -2,51 +2,19 @@
 import { computed } from 'vue'
 
 const props = defineProps({
-  // stepNumber: {
-  //   type: Number,
-  //   required: true,
-  //   validator(currentStepNumber) {
-  //     return currentStepNumber > 0
-  //   },
-  // },
   status: {
     type: String,
     default: '',
     validator(status) {
-      return ['current', 'completed'].includes(status)
+      return ['current', 'completed', ''].includes(status)
     },
   },
   label: {
     type: String,
     required: true,
   },
-  // currentStepNumber: {
-  //   type: Number,
-  //   required: true,
-  //   validator(currentStepNumber) {
-  //     return currentStepNumber > 0
-  //   },
-  // },
 })
 
-// const currentStepNumber = inject('currentStepNumber')
-
-// const completedStatus = computed(() => {
-//   if (currentStepNumber.value > props.stepNumber) {
-//     return 'completed'
-//   }
-
-//   if (currentStepNumber.value < props.stepNumber) {
-//     return 'not completed'
-//   }
-
-//   return null
-// })
-
-// const isCurrentStep = computed(() => {
-//   return currentStepNumber.value === props.stepNumber || null
-// })
-
 const statusLabel = computed(() => {
   if (props.status === 'current') {
     return null
@@ -69,7 +37,7 @@ const classes = computed(() => [
   <li
     class="usa-step-indicator__segment"
     :class="classes"
-    :aria-current="props.status === 'current' || null"
+    :aria-current="status === 'current' || null"
   >
     <span class="usa-step-indicator__segment-label"
       >{{ label }}