Skip to content

Commit 6d22d3c

Browse files
author
Chris Johnson
committed
base-input test updates
1 parent 734493d commit 6d22d3c

File tree

7 files changed

+151
-150
lines changed

7 files changed

+151
-150
lines changed

‎cypress/support/constants/base-components.ts‎

Lines changed: 90 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,112 +1,112 @@
11
import type { ComponentDataAttributes } from '@ts/cypress';
22

33
export const BASE_BANNER = {
4-
buttons: {
5-
action: '[data-cy="base-banner-action-btn"]',
6-
close: '[data-cy="base-banner-close-btn"]',
7-
},
8-
icons: {
9-
alertTriangle: '[data-cy="base-banner-icon-alert-triangle"]',
10-
checkCircle: '[data-cy="base-banner-icon-check-circle"]',
11-
message: '[data-cy="base-banner-icon-message"]',
12-
stars: '[data-cy="base-banner-icon-stars"]',
13-
xClose: '[data-cy="base-banner-icon-x-close"]',
14-
},
15-
labels: {
16-
header: '[data-cy="base-banner-header"]',
17-
subheader: '[data-cy="base-banner-subheader"]',
18-
},
19-
wrappers: {
20-
error: '[data-cy="base-banner-error"]',
21-
info: '[data-cy="base-banner-info"]',
22-
persistent: '[data-cy="base-banner-persistent"]',
23-
success: '[data-cy="base-banner-success"]',
24-
},
4+
buttons: {
5+
action: '[data-cy="base-banner-action-btn"]',
6+
close: '[data-cy="base-banner-close-btn"]',
7+
},
8+
icons: {
9+
alertTriangle: '[data-cy="base-banner-icon-alert-triangle"]',
10+
checkCircle: '[data-cy="base-banner-icon-check-circle"]',
11+
message: '[data-cy="base-banner-icon-message"]',
12+
stars: '[data-cy="base-banner-icon-stars"]',
13+
xClose: '[data-cy="base-banner-icon-x-close"]',
14+
},
15+
labels: {
16+
header: '[data-cy="base-banner-header"]',
17+
subheader: '[data-cy="base-banner-subheader"]',
18+
},
19+
wrappers: {
20+
error: '[data-cy="base-banner-error"]',
21+
info: '[data-cy="base-banner-info"]',
22+
persistent: '[data-cy="base-banner-persistent"]',
23+
success: '[data-cy="base-banner-success"]',
24+
},
2525
} satisfies ComponentDataAttributes;
2626

2727
export const BASE_BUTTON = {
28-
icons: {
29-
default: '[data-cy="base-button-icon-default"]',
30-
ellipsis: '[data-cy="base-button-loader"]',
31-
},
32-
wrappers: {
33-
button: '[data-cy="base-button"]',
34-
},
28+
icons: {
29+
default: '[data-cy="base-button-icon-default"]',
30+
ellipsis: '[data-cy="base-button-loader"]',
31+
},
32+
wrappers: {
33+
button: '[data-cy="base-button"]',
34+
},
3535
} satisfies ComponentDataAttributes;
3636

3737
export const BASE_INPUT = {
38-
icons: {
39-
password: '[data-cy="base-input-password-view-icon"]',
40-
},
41-
inputs: {
42-
input: '[data-cy="base-input-input"]',
43-
},
44-
labels: {
45-
hint: '[data-cy="base-input-hint"]',
46-
inputLabel: '[data-cy="base-input-label"]',
47-
instructions: '[data-cy="base-input-instructions"]',
48-
},
38+
icons: {
39+
password: '[data-cy="base-input-password-view-icon"]',
40+
},
41+
inputs: {
42+
input: '[data-cy="base-input-input"]',
43+
},
44+
labels: {
45+
hint: '[data-cy="base-input-hint"]',
46+
inputLabel: '[data-cy="base-input-label"]',
47+
instructions: '[data-cy="base-input-instructions"]',
48+
},
4949
} satisfies ComponentDataAttributes;
5050

5151
export const BASE_MODAL = {
52-
icons: {
53-
close: '[data-cy="base-modal-close-icon"]',
54-
slot: '[data-cy="base-modal-text-content-icon"]',
55-
},
56-
labels: {
57-
header: '[data-cy="base-modal-text-content-header"]',
58-
subheader: '[data-cy="base-modal-text-content-subheader"]',
59-
},
60-
wrappers: {
61-
bg: '[data-cy="base-modal"]',
62-
content: '[data-cy="base-modal-content"]',
63-
modal: '[data-cy="base-modal-modal"]',
64-
},
52+
icons: {
53+
close: '[data-cy="base-modal-close-icon"]',
54+
slot: '[data-cy="base-modal-text-content-icon"]',
55+
},
56+
labels: {
57+
header: '[data-cy="base-modal-text-content-header"]',
58+
subheader: '[data-cy="base-modal-text-content-subheader"]',
59+
},
60+
wrappers: {
61+
bg: '[data-cy="base-modal"]',
62+
content: '[data-cy="base-modal-content"]',
63+
modal: '[data-cy="base-modal-modal"]',
64+
},
6565
} satisfies ComponentDataAttributes;
6666

6767
export const BASE_RADIO_INPUT = {
68-
inputs: {
69-
input: '[data-cy="base-radio-input-input"]',
70-
},
71-
labels: {
72-
label: '[data-cy="base-radio-input-label"]',
73-
supportingLabel: '[data-cy="base-radio-input-supporting-label"]',
74-
},
75-
wrappers: {
76-
radioInput: '[data-cy="base-radio-input"]',
77-
},
68+
inputs: {
69+
input: '[data-cy="base-radio-input-input"]',
70+
},
71+
labels: {
72+
label: '[data-cy="base-radio-input-label"]',
73+
supportingLabel: '[data-cy="base-radio-input-supporting-label"]',
74+
},
75+
wrappers: {
76+
radioInput: '[data-cy="base-radio-input"]',
77+
},
7878
} satisfies ComponentDataAttributes;
7979

8080
export const BASE_SELECT = {
81-
buttons: {
82-
clear: '.vs__clear',
83-
open: '.vs__actions',
84-
},
85-
icons: {
86-
deselect: '',
87-
openIndicator: '[data-cy="base-select-open-indicator-icon"]',
88-
},
89-
inputs: {
90-
search: '.vs__search',
91-
},
92-
labels: {
93-
dropdownOption: '.vs__dropdown-option',
94-
inputLabel: '[data-cy="base-select-label"]',
95-
noOptions: '.vs__no-options',
96-
selected: '.vs__selected',
97-
},
98-
wrappers: {
99-
baseSelect: '[data-cy="base-select"]',
100-
dropdownMenu: '.vs__dropdown-menu',
101-
select: '[data-cy="base-select-select"]',
102-
},
81+
buttons: {
82+
clear: '.vs__clear',
83+
open: '.vs__actions',
84+
},
85+
icons: {
86+
deselect: '',
87+
openIndicator: '[data-cy="base-select-open-indicator-icon"]',
88+
},
89+
inputs: {
90+
search: '.vs__search',
91+
},
92+
labels: {
93+
dropdownOption: '.vs__dropdown-option',
94+
inputLabel: '[data-cy="base-select-label"]',
95+
noOptions: '.vs__no-options',
96+
selected: '.vs__selected',
97+
},
98+
wrappers: {
99+
baseSelect: '[data-cy="base-select"]',
100+
dropdownMenu: '.vs__dropdown-menu',
101+
select: '[data-cy="base-select-select"]',
102+
},
103103
} satisfies ComponentDataAttributes;
104104

105105
export const BASE_TAG = {
106-
icons: {
107-
icon: '[data-cy="base-tag-icon"]',
108-
},
109-
labels: {
110-
tag: '[data-cy="base-tag"]',
111-
},
106+
icons: {
107+
icon: '[data-cy="base-tag-icon"]',
108+
},
109+
labels: {
110+
tag: '[data-cy="base-tag"]',
111+
},
112112
} satisfies ComponentDataAttributes;

‎cypress/tsconfig.json‎

Lines changed: 30 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,34 @@
11
{
2-
"compilerOptions": {
3-
"baseUrl": ".",
4-
"target": "es6",
5-
"lib": [
6-
"es6",
7-
"dom"
8-
],
9-
/* If transpiling with TypeScript: */
10-
"moduleResolution": "Bundler",
11-
"module": "es2022",
12-
"paths": {
13-
"@cypress/*": [
14-
"./*"
15-
],
16-
"@src/*": [
17-
"../src/*"
18-
],
19-
"@ts/*": [
20-
"../types/*"
21-
],
2+
"compilerOptions": {
3+
"baseUrl": ".",
4+
"target": "es6",
5+
"lib": [
6+
"es6",
7+
"dom"
8+
],
9+
/* If transpiling with TypeScript: */
10+
"moduleResolution": "Bundler",
11+
"module": "es2022",
12+
"paths": {
13+
"@cypress/*": [
14+
"./*"
15+
],
16+
"@src/*": [
17+
"../src/*"
18+
],
19+
"@ts/*": [
20+
"../types/*"
21+
]
22+
},
23+
"types": [
24+
"cypress",
25+
"node",
26+
"../cypress.d.ts"
27+
]
2228
},
23-
"types": [
24-
"cypress",
25-
"node",
26-
"../cypress.d.ts",
29+
"include": [
30+
"**/*.ts",
31+
"**/*.cy.ts",
32+
"../cypress.d.ts"
2733
]
28-
},
29-
"include": [
30-
"**/*.ts",
31-
"../cypress.d.ts",
32-
]
3334
}

‎eslint.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ const tsConfig = [
109109
"**/cypress",
110110
'*.d.ts',
111111
'**/coverage',
112-
'**/dist',
112+
'**/dist/*',
113113
'*.config.{js,ts}',
114114
],
115115
languageOptions: {

‎src/components/base/base-banner.cy.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// Components
2-
import BaseBanner from '@src/components/base/base-banner.vue';
3-
import Styleguide from '@src/Styleguide.vue';
2+
import BaseBanner from './base-banner.vue';
3+
import Styleguide from '../../Styleguide.vue';
44
// helpers
55
import {
66
BASE_BANNER,

‎src/components/base/base-input.cy.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -656,7 +656,7 @@ describe('<BaseInput />', () => {
656656
});
657657
});
658658

659-
context('Styles', () => {
659+
context.only('Styles', () => {
660660
it('Disabled', () => {
661661
cy.mount(BaseInput, {
662662
props: {

‎src/components/base/base-input.vue‎

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -272,20 +272,6 @@ const toggleInputType = (): void => {
272272
position: relative;
273273
width: rems(250px);
274274
275-
&[disabled],
276-
&[aria-disabled="true"] {
277-
color: $secondary-25-color;
278-
pointer-events: none;
279-
}
280-
281-
&:focus {
282-
box-shadow: rems(0px) rems(0px) rems(0px) rems(4px) rgba(227, 236, 235, 1), $box-shadow-inputs;
283-
}
284-
285-
&::placeholder {
286-
color: $secondary-25-color;
287-
}
288-
289275
// Prevent 1Password from displaying their icon on every input
290276
// :global(com-1password-button)
291277
// display: none
@@ -322,8 +308,30 @@ const toggleInputType = (): void => {
322308
box-shadow: $box-shadow-inputs;
323309
color: $secondary-900-bg;
324310
outline: none;
325-
padding: $spacing-2 $spacing-3;
326-
width: 100%;
311+
padding: $spacing-2 $spacing-3;
312+
width: 100%;
313+
314+
&::placeholder {
315+
color: $secondary-25-color;
316+
}
317+
318+
&[disabled],
319+
&[aria-disabled="true"] {
320+
color: $secondary-25-color;
321+
pointer-events: none;
322+
}
323+
324+
&:focus {
325+
box-shadow: rems(0px) rems(0px) rems(0px) rems(4px) rgba(227, 236, 235, 1), $box-shadow-inputs;
326+
}
327+
328+
&--borderless {
329+
border: none;
330+
}
331+
332+
&--error {
333+
border-color: $error-300-bg;
334+
}
327335
}
328336
329337
&__label {
@@ -347,13 +355,5 @@ const toggleInputType = (): void => {
347355
stroke: $secondary-25-color;
348356
width: rems(14px);
349357
}
350-
351-
&--error {
352-
border-color: $error-300-bg;
353-
}
354-
355-
&--borderless {
356-
border: none;
357-
}
358358
}
359359
</style>

‎vite.config.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -44,9 +44,9 @@ export default defineConfig({
4444

4545
resolve: {
4646
alias: {
47-
'@cypress': path.resolve(__dirname, './cypress'),
48-
'@src': path.resolve(__dirname, './src'),
49-
'@ts': path.resolve(__dirname, './types'),
47+
'@cypress': path.resolve(__dirname, 'cypress'),
48+
'@src': path.resolve(__dirname, 'src'),
49+
'@ts': path.resolve(__dirname, 'types'),
5050
},
5151
},
5252
});

0 commit comments

Comments
 (0)