Skip to content

Commit f55f4a9

Browse files
interactivellamainteractivellama
authored
Vertical Progress Indicator: Add snapshots (salesforce#2928)
* Vertical Progress Indicator: Add snapshots * lint * Update package.json to CircleCI * Update to Circle CI * Comment out upload diffs * Add Chrome Bin * fix typo * Remove chrome_bin * Move to shell script * use export * Document prepare components script * Break out CircleCI tests * Remove prepare components * Add Chrome bin * Use puppeteer
1 parent 957837d commit f55f4a9

File tree

9 files changed

+424
-85
lines changed

9 files changed

+424
-85
lines changed

‎.circleci/config.yml

Lines changed: 53 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -8,37 +8,69 @@ orbs:
88
# See the orb documentation here: https://circleci.com/developer/orbs/orb/circleci/node
99
node: circleci/node@4.1
1010

11-
12-
jobs:
13-
# Below is the definition of your job to build and test your app, you can rename and customize it as you want.
14-
build-and-test:
15-
# These next lines define a Docker executor: https://circleci.com/docs/2.0/executor-types/
16-
# You can specify an image from Dockerhub or use one of our Convenience Images from CircleCI's Developer Hub.
17-
# A list of available CircleCI Docker Convenience Images are available here: https://circleci.com/developer/images/image/cimg/node
11+
executors:
12+
dsr-executor:
1813
docker:
1914
- image: cimg/node:12.20.2-browsers
20-
# Then run your tests!
21-
# CircleCI will report the results back to your VCS provider.
15+
16+
commands:
17+
install:
18+
description: Set up project
2219
steps:
23-
# Checkout the code as the first step.
2420
- checkout
25-
# Next, the node orb's install-packages step will install the dependencies from a package.json.
26-
# The orb install-packages step will also automatically cache them for faster future runs.
21+
- node/install-npm
2722
- node/install-packages
28-
# If you are using yarn instead npm, remove the line above and uncomment the two lines below.
29-
# - node/install-packages:
30-
# pkg-manager: yarn
23+
3124
- run:
32-
name: Run tests
33-
command: npm test
25+
name: Install all packages
26+
command: 'npm install'
27+
28+
jobs:
29+
lint:
30+
executor: dsr-executor
31+
steps:
32+
- install
33+
- run:
34+
name: Run Lint Validations
35+
command: 'npm run lint'
36+
dom-snapshot:
37+
executor: dsr-executor
38+
steps:
39+
- install
40+
- run:
41+
name: Run DOM snapshot tests
42+
command: 'npm run test:dom-snapshot'
43+
docs:
44+
executor: dsr-executor
45+
steps:
46+
- install
47+
- run:
48+
name: Generate library docs
49+
command: 'npm run prepare-components && npm run test:docs'
50+
unit:
51+
executor: dsr-executor
52+
steps:
53+
- install
54+
- run:
55+
name: Run in-browser unit tests
56+
command: 'CHROME_BIN=/usr/bin/google-chrome npm run test:unit'
57+
accessibility:
58+
executor: dsr-executor
59+
steps:
60+
- install
61+
- run:
62+
name: Run Static Accessibility Tests
63+
command: 'npm run test:accessibility'
3464

3565
workflows:
3666
# Below is the definition of your workflow.
3767
# Inside the workflow, you provide the jobs you want to run, e.g this workflow runs the build-and-test job above.
3868
# CircleCI will run this workflow on every commit.
3969
# For more details on extending your workflow, see the configuration docs: https://circleci.com/docs/2.0/configuration-reference/#workflows
40-
sample:
70+
dsr_build_test:
4171
jobs:
42-
- build-and-test
43-
# For running simple node tests, you could optionally use the node/test job from the orb to replicate and replace the job above in fewer lines.
44-
# - node/test
72+
- lint
73+
- dom-snapshot
74+
- docs
75+
- unit
76+
- accessibility

‎components/progress-indicator/__docs__/__snapshots__/storybook-stories.storyshot

Lines changed: 161 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1106,7 +1106,15 @@ exports[`DOM snapshots SLDSProgressIndicator SetupAssistant 1`] = `
11061106
className="slds-button slds-progress__marker"
11071107
onClick={[Function]}
11081108
type="button"
1109-
/>
1109+
>
1110+
<span
1111+
className="slds-assistive-text"
1112+
>
1113+
Step 1:
1114+
label #1
1115+
1116+
</span>
1117+
</button>
11101118
<div
11111119
className="slds-progress__item_content slds-grid slds-grid_align-spread"
11121120
id="progress-indicator-vertical-label-0"
@@ -1146,7 +1154,15 @@ exports[`DOM snapshots SLDSProgressIndicator SetupAssistant 1`] = `
11461154
className="slds-button slds-progress__marker"
11471155
onClick={[Function]}
11481156
type="button"
1149-
/>
1157+
>
1158+
<span
1159+
className="slds-assistive-text"
1160+
>
1161+
Step 2:
1162+
label #2
1163+
1164+
</span>
1165+
</button>
11501166
<div
11511167
className="slds-progress__item_content slds-grid slds-grid_align-spread"
11521168
id="progress-indicator-vertical-label-1"
@@ -1186,7 +1202,15 @@ exports[`DOM snapshots SLDSProgressIndicator SetupAssistant 1`] = `
11861202
className="slds-button slds-progress__marker"
11871203
onClick={[Function]}
11881204
type="button"
1189-
/>
1205+
>
1206+
<span
1207+
className="slds-assistive-text"
1208+
>
1209+
Step 3:
1210+
label #3
1211+
- Disabled
1212+
</span>
1213+
</button>
11901214
<div
11911215
className="slds-progress__item_content slds-grid slds-grid_align-spread"
11921216
id="progress-indicator-vertical-label-2"
@@ -1229,7 +1253,15 @@ exports[`DOM snapshots SLDSProgressIndicator SetupAssistant 1`] = `
12291253
className="slds-button slds-progress__marker"
12301254
onClick={[Function]}
12311255
type="button"
1232-
/>
1256+
>
1257+
<span
1258+
className="slds-assistive-text"
1259+
>
1260+
Step 4:
1261+
label #4
1262+
- Disabled
1263+
</span>
1264+
</button>
12331265
<div
12341266
className="slds-progress__item_content slds-grid slds-grid_align-spread"
12351267
id="progress-indicator-vertical-label-3"
@@ -1290,7 +1322,15 @@ exports[`DOM snapshots SLDSProgressIndicator SetupAssistant 1`] = `
12901322
className="slds-button slds-progress__marker"
12911323
onClick={[Function]}
12921324
type="button"
1293-
/>
1325+
>
1326+
<span
1327+
className="slds-assistive-text"
1328+
>
1329+
Step 5:
1330+
label #5
1331+
- Disabled
1332+
</span>
1333+
</button>
12941334
<div
12951335
className="slds-progress__item_content slds-grid slds-grid_align-spread"
12961336
id="progress-indicator-vertical-label-4"
@@ -1597,7 +1637,15 @@ exports[`DOM snapshots SLDSProgressIndicator Vertical 1`] = `
15971637
className="slds-button slds-progress__marker"
15981638
onClick={[Function]}
15991639
type="button"
1600-
/>
1640+
>
1641+
<span
1642+
className="slds-assistive-text"
1643+
>
1644+
Step 1:
1645+
label #1
1646+
1647+
</span>
1648+
</button>
16011649
<div
16021650
className="slds-progress__item_content slds-grid slds-grid_align-spread"
16031651
id="progress-indicator-vertical-label-0"
@@ -1612,7 +1660,15 @@ exports[`DOM snapshots SLDSProgressIndicator Vertical 1`] = `
16121660
className="slds-button slds-progress__marker"
16131661
onClick={[Function]}
16141662
type="button"
1615-
/>
1663+
>
1664+
<span
1665+
className="slds-assistive-text"
1666+
>
1667+
Step 2:
1668+
label #2
1669+
1670+
</span>
1671+
</button>
16161672
<div
16171673
className="slds-progress__item_content slds-grid slds-grid_align-spread"
16181674
id="progress-indicator-vertical-label-1"
@@ -1627,7 +1683,15 @@ exports[`DOM snapshots SLDSProgressIndicator Vertical 1`] = `
16271683
className="slds-button slds-progress__marker"
16281684
onClick={[Function]}
16291685
type="button"
1630-
/>
1686+
>
1687+
<span
1688+
className="slds-assistive-text"
1689+
>
1690+
Step 3:
1691+
label #3
1692+
- Disabled
1693+
</span>
1694+
</button>
16311695
<div
16321696
className="slds-progress__item_content slds-grid slds-grid_align-spread"
16331697
id="progress-indicator-vertical-label-2"
@@ -1642,7 +1706,15 @@ exports[`DOM snapshots SLDSProgressIndicator Vertical 1`] = `
16421706
className="slds-button slds-progress__marker"
16431707
onClick={[Function]}
16441708
type="button"
1645-
/>
1709+
>
1710+
<span
1711+
className="slds-assistive-text"
1712+
>
1713+
Step 4:
1714+
label #4
1715+
- Disabled
1716+
</span>
1717+
</button>
16461718
<div
16471719
className="slds-progress__item_content slds-grid slds-grid_align-spread"
16481720
id="progress-indicator-vertical-label-3"
@@ -1657,7 +1729,15 @@ exports[`DOM snapshots SLDSProgressIndicator Vertical 1`] = `
16571729
className="slds-button slds-progress__marker"
16581730
onClick={[Function]}
16591731
type="button"
1660-
/>
1732+
>
1733+
<span
1734+
className="slds-assistive-text"
1735+
>
1736+
Step 5:
1737+
label #5
1738+
- Disabled
1739+
</span>
1740+
</button>
16611741
<div
16621742
className="slds-progress__item_content slds-grid slds-grid_align-spread"
16631743
id="progress-indicator-vertical-label-4"
@@ -1708,6 +1788,13 @@ exports[`DOM snapshots SLDSProgressIndicator VerticalStepError 1`] = `
17081788
</svg>
17091789

17101790
</span>
1791+
<span
1792+
className="slds-assistive-text"
1793+
>
1794+
Step 1:
1795+
label #1
1796+
- Completed
1797+
</span>
17111798
</button>
17121799
<div
17131800
className="slds-progress__item_content slds-grid slds-grid_align-spread"
@@ -1735,6 +1822,13 @@ exports[`DOM snapshots SLDSProgressIndicator VerticalStepError 1`] = `
17351822
</svg>
17361823

17371824
</span>
1825+
<span
1826+
className="slds-assistive-text"
1827+
>
1828+
Step 2:
1829+
label #2
1830+
- Completed
1831+
</span>
17381832
</button>
17391833
<div
17401834
className="slds-progress__item_content slds-grid slds-grid_align-spread"
@@ -1762,6 +1856,13 @@ exports[`DOM snapshots SLDSProgressIndicator VerticalStepError 1`] = `
17621856
</svg>
17631857

17641858
</span>
1859+
<span
1860+
className="slds-assistive-text"
1861+
>
1862+
Step 3:
1863+
label #3
1864+
- Completed
1865+
</span>
17651866
</button>
17661867
<div
17671868
className="slds-progress__item_content slds-grid slds-grid_align-spread"
@@ -1789,6 +1890,13 @@ exports[`DOM snapshots SLDSProgressIndicator VerticalStepError 1`] = `
17891890
</svg>
17901891

17911892
</span>
1893+
<span
1894+
className="slds-assistive-text"
1895+
>
1896+
Step 4:
1897+
label #4
1898+
- Completed
1899+
</span>
17921900
</button>
17931901
<div
17941902
className="slds-progress__item_content slds-grid slds-grid_align-spread"
@@ -1816,6 +1924,13 @@ exports[`DOM snapshots SLDSProgressIndicator VerticalStepError 1`] = `
18161924
</svg>
18171925

18181926
</span>
1927+
<span
1928+
className="slds-assistive-text"
1929+
>
1930+
Step 5:
1931+
label #5
1932+
- Error
1933+
</span>
18191934
</button>
18201935
<div
18211936
className="slds-progress__item_content slds-grid slds-grid_align-spread"
@@ -1831,7 +1946,15 @@ exports[`DOM snapshots SLDSProgressIndicator VerticalStepError 1`] = `
18311946
className="slds-button slds-progress__marker"
18321947
onClick={[Function]}
18331948
type="button"
1834-
/>
1949+
>
1950+
<span
1951+
className="slds-assistive-text"
1952+
>
1953+
Step 6:
1954+
label #6
1955+
1956+
</span>
1957+
</button>
18351958
<div
18361959
className="slds-progress__item_content slds-grid slds-grid_align-spread"
18371960
id="progress-indicator-vertical-label-5"
@@ -1846,7 +1969,15 @@ exports[`DOM snapshots SLDSProgressIndicator VerticalStepError 1`] = `
18461969
className="slds-button slds-progress__marker"
18471970
onClick={[Function]}
18481971
type="button"
1849-
/>
1972+
>
1973+
<span
1974+
className="slds-assistive-text"
1975+
>
1976+
Step 7:
1977+
label #7
1978+
1979+
</span>
1980+
</button>
18501981
<div
18511982
className="slds-progress__item_content slds-grid slds-grid_align-spread"
18521983
id="progress-indicator-vertical-label-6"
@@ -1861,7 +1992,15 @@ exports[`DOM snapshots SLDSProgressIndicator VerticalStepError 1`] = `
18611992
className="slds-button slds-progress__marker"
18621993
onClick={[Function]}
18631994
type="button"
1864-
/>
1995+
>
1996+
<span
1997+
className="slds-assistive-text"
1998+
>
1999+
Step 8:
2000+
label #8
2001+
2002+
</span>
2003+
</button>
18652004
<div
18662005
className="slds-progress__item_content slds-grid slds-grid_align-spread"
18672006
id="progress-indicator-vertical-label-7"
@@ -1876,7 +2015,15 @@ exports[`DOM snapshots SLDSProgressIndicator VerticalStepError 1`] = `
18762015
className="slds-button slds-progress__marker"
18772016
onClick={[Function]}
18782017
type="button"
1879-
/>
2018+
>
2019+
<span
2020+
className="slds-assistive-text"
2021+
>
2022+
Step 9:
2023+
label #9
2024+
2025+
</span>
2026+
</button>
18802027
<div
18812028
className="slds-progress__item_content slds-grid slds-grid_align-spread"
18822029
id="progress-indicator-vertical-label-8"

0 commit comments

Comments
 (0)