Skip to content

Commit 08357d3

Browse files
kazuponkazupon
authored
support datetime format component (#10)
* feat: datetime foramt component * fix lint errors * fix e2e * update test workflow * add debugging * add timezone setup * updates
1 parent d626bf7 commit 08357d3

File tree

15 files changed

+358
-13
lines changed

15 files changed

+358
-13
lines changed

‎.github/workflows/test.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ jobs:
1515
strategy:
1616
matrix:
1717
os: [ubuntu-latest, windows-latest, macos-latest]
18-
node: [10, 12.16.1, 13]
18+
node: [10, 12, 13]
1919
steps:
2020
- name: Checkout
2121
uses: actions/checkout@v2

‎e2e/components/datetime-format.test.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
;['composable', 'legacy'].forEach(pattern => {
2+
describe(`${pattern}`, () => {
3+
beforeAll(async () => {
4+
await page.goto(
5+
`http://localhost:8080/examples/${pattern}/components/datetime-format.html`
6+
)
7+
})
8+
9+
test('rendering', async () => {
10+
await expect(page).toMatch(
11+
/([1-9]|1[0-2])\/([1-9]|[12]\d|3[01])\/([12]\d{3})/
12+
)
13+
await expect(page).toMatch(
14+
/(0[1-9]|1[0-2])\/(0[1-9]|[12]\d|3[01])\/([12]\d{3}), (0[0-9]|1[0-2]):([0-5][0-9]):([0-5][0-9]) (AM|PM)/
15+
)
16+
await expect(page).toMatch(
17+
/令和([1-9]|1[0-2])年([1-9]|1[0-2])月([1-9]|[1-3][0-9])日(月|火|水|木|金|土|日)曜日 (午前|午後)([0-9]|1[0-2]):([0-5][0-9]):([0-5][0-9]) 協定世界時/
18+
)
19+
await expect(page).toMatch(
20+
/R([1-9]|1[0-2])年([1-9]|1[0-2])月([1-9]|[1-3][0-9])日(月|火|水|木|金|土|日)曜日 (午前|午後)([0-9]|1[0-2]):([0-5][0-9]):([0-5][0-9]) 協定世界時/
21+
)
22+
})
23+
})
24+
})

‎examples/composable/components/datetime-format.html‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>DatetimeFormat component examples</title>
6+
<script src="../../../node_modules/vue/dist/vue.global.js"></script>
7+
<script src="../../../dist/vue-i18n.global.js"></script>
8+
</head>
9+
<body>
10+
<h1>DatetimeFormat component examples</h1>
11+
12+
<div id="app">
13+
<h2>basic usages:</h2>
14+
<i18n-d tag="p" :value="new Date()"></i18n-d>
15+
<i18n-d tag="p" :value="new Date()" format="long"></i18n-d>
16+
<i18n-d
17+
tag="p"
18+
:value="new Date()"
19+
format="long"
20+
locale="ja-JP-u-ca-japanese"
21+
></i18n-d>
22+
23+
<h2>slot usages:</h2>
24+
<i18n-d
25+
:value="new Date()"
26+
locale="ja-JP-u-ca-japanese"
27+
:format="{ key: 'long', era: 'narrow' }"
28+
>
29+
<template #era="props"
30+
><span style="color: green;">{{ props.era }}</span></template
31+
>
32+
</i18n-d>
33+
</div>
34+
<script>
35+
const { createApp } = Vue
36+
const { createI18n, useI18n } = VueI18n
37+
38+
const i18n = createI18n({
39+
locale: 'en-US',
40+
datetimeFormats: {
41+
'en-US': {
42+
long: {
43+
year: 'numeric',
44+
month: '2-digit',
45+
day: '2-digit',
46+
hour: '2-digit',
47+
minute: '2-digit',
48+
second: '2-digit'
49+
}
50+
},
51+
'ja-JP-u-ca-japanese': {
52+
long: {
53+
era: 'long',
54+
year: 'numeric',
55+
month: 'numeric',
56+
day: 'numeric',
57+
hour: 'numeric',
58+
minute: 'numeric',
59+
second: 'numeric',
60+
weekday: 'long',
61+
hour12: true,
62+
timeZoneName: 'long'
63+
}
64+
}
65+
}
66+
})
67+
68+
const app = createApp({
69+
setup() {
70+
return useI18n()
71+
}
72+
})
73+
app.use(i18n)
74+
app.mount('#app')
75+
</script>
76+
</body>
77+
</html>

‎examples/composable/components/number-format.html‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,18 @@ <h2>basic usages:</h2>
1717

1818
<h2>slot usages:</h2>
1919
<i18n-n :value="1234" :format="{ key: 'currency', currency: 'EUR' }">
20-
<template #currency="props"><span style="color: green">{{ props.currency }}</span></template>
21-
<template #integer="props"><span style="font-weight: bold">{{ props.integer }}</span></template>
22-
<template #group="props"><span style="font-weight: bold">{{ props.group }}</span></template>
23-
<template #fraction="props"><span style="font-size: small">{{ props.fraction }}</span></template>
20+
<template #currency="props"
21+
><span style="color: green;">{{ props.currency }}</span></template
22+
>
23+
<template #integer="props"
24+
><span style="font-weight: bold;">{{ props.integer }}</span></template
25+
>
26+
<template #group="props"
27+
><span style="font-weight: bold;">{{ props.group }}</span></template
28+
>
29+
<template #fraction="props"
30+
><span style="font-size: small;">{{ props.fraction }}</span></template
31+
>
2432
</i18n-n>
2533
</div>
2634
<script>
@@ -44,7 +52,8 @@ <h2>slot usages:</h2>
4452
'ja-JP': {
4553
currency: {
4654
style: 'currency',
47-
currency: 'JPY', currencyDisplay: 'symbol'
55+
currency: 'JPY',
56+
currencyDisplay: 'symbol'
4857
},
4958
numeric: {
5059
style: 'decimal',

‎examples/legacy/components/datetime-format.html‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>DatetimeFormat component examples</title>
6+
<script src="../../../node_modules/vue/dist/vue.global.js"></script>
7+
<script src="../../../dist/vue-i18n.global.js"></script>
8+
</head>
9+
<body>
10+
<h1>DatetimeFormat component examples</h1>
11+
12+
<div id="app">
13+
<h2>basic usages:</h2>
14+
<i18n-d tag="p" :value="new Date()"></i18n-d>
15+
<i18n-d tag="p" :value="new Date()" format="long"></i18n-d>
16+
<i18n-d
17+
tag="p"
18+
:value="new Date()"
19+
format="long"
20+
locale="ja-JP-u-ca-japanese"
21+
></i18n-d>
22+
23+
<h2>slot usages:</h2>
24+
<i18n-d
25+
:value="new Date()"
26+
locale="ja-JP-u-ca-japanese"
27+
:format="{ key: 'long', era: 'narrow' }"
28+
>
29+
<template #era="props"
30+
><span style="color: green;">{{ props.era }}</span></template
31+
>
32+
</i18n-d>
33+
</div>
34+
<script>
35+
const { createApp } = Vue
36+
const { createI18n } = VueI18n
37+
38+
const i18n = createI18n({
39+
legacy: true,
40+
locale: 'en-US',
41+
datetimeFormats: {
42+
'en-US': {
43+
long: {
44+
year: 'numeric',
45+
month: '2-digit',
46+
day: '2-digit',
47+
hour: '2-digit',
48+
minute: '2-digit',
49+
second: '2-digit'
50+
}
51+
},
52+
'ja-JP-u-ca-japanese': {
53+
long: {
54+
era: 'long',
55+
year: 'numeric',
56+
month: 'numeric',
57+
day: 'numeric',
58+
hour: 'numeric',
59+
minute: 'numeric',
60+
second: 'numeric',
61+
weekday: 'long',
62+
hour12: true,
63+
timeZoneName: 'long'
64+
}
65+
}
66+
}
67+
})
68+
69+
const app = createApp({})
70+
app.use(i18n)
71+
app.mount('#app')
72+
</script>
73+
</body>
74+
</html>

‎examples/legacy/components/number-format.html‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,18 @@ <h2>basic usages:</h2>
1717

1818
<h2>slot usages:</h2>
1919
<i18n-n :value="1234" :format="{ key: 'currency', currency: 'EUR' }">
20-
<template #currency="props"><span style="color: green">{{ props.currency }}</span></template>
21-
<template #integer="props"><span style="font-weight: bold">{{ props.integer }}</span></template>
22-
<template #group="props"><span style="font-weight: bold">{{ props.group }}</span></template>
23-
<template #fraction="props"><span style="font-size: small">{{ props.fraction }}</span></template>
20+
<template #currency="props"
21+
><span style="color: green;">{{ props.currency }}</span></template
22+
>
23+
<template #integer="props"
24+
><span style="font-weight: bold;">{{ props.integer }}</span></template
25+
>
26+
<template #group="props"
27+
><span style="font-weight: bold;">{{ props.group }}</span></template
28+
>
29+
<template #fraction="props"
30+
><span style="font-size: small;">{{ props.fraction }}</span></template
31+
>
2432
</i18n-n>
2533
</div>
2634
<script>
@@ -45,7 +53,8 @@ <h2>slot usages:</h2>
4553
'ja-JP': {
4654
currency: {
4755
style: 'currency',
48-
currency: 'JPY', currencyDisplay: 'symbol'
56+
currency: 'JPY',
57+
currencyDisplay: 'symbol'
4958
},
5059
numeric: {
5160
style: 'decimal',

‎jest-e2e-environment.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
const PuppeteerEnvironment = require('jest-environment-puppeteer')
2+
3+
class CustomEnvironment extends PuppeteerEnvironment {
4+
async setup() {
5+
await super.setup()
6+
await this.global.page.emulateTimezone('UTC')
7+
}
8+
9+
async teardown() {
10+
// Your teardown
11+
await super.teardown()
12+
}
13+
}
14+
15+
module.exports = CustomEnvironment

‎jest.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ module.exports = {
5151

5252
// A path to a module which exports an async function that is triggered once before all test suites
5353
// globalSetup: null,
54+
globalSetup: require('set-tz')('UTC'),
5455

5556
// A path to a module which exports an async function that is triggered once after all test suites
5657
// globalTeardown: null,

‎jest.e2e.config.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ module.exports = {
5454

5555
// A path to a module which exports an async function that is triggered once before all test suites
5656
// globalSetup: null,
57+
// globalSetup: './jest-global-setup.js',
5758

5859
// A path to a module which exports an async function that is triggered once after all test suites
5960
// globalTeardown: null,
@@ -134,6 +135,7 @@ module.exports = {
134135

135136
// The test environment that will be used for testing
136137
// testEnvironment: 'node',
138+
testEnvironment: './jest-e2e-environment.js',
137139

138140
// Options that will be passed to the testEnvironment
139141
// testEnvironmentOptions: {},

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@
6060
"rollup": "^2.3.0",
6161
"rollup-plugin-terser": "^5.2.0",
6262
"rollup-plugin-typescript2": "^0.27.0",
63+
"set-tz": "^0.2.0",
6364
"shipjs": "^0.18.1",
6465
"ts-jest": "^25.3.0",
6566
"typescript": "^3.8.3",
@@ -106,6 +107,7 @@
106107
"docs:api": "api-documenter markdown -i ./temp -o docs",
107108
"format": "prettier --config .prettierrc --ignore-path .prettierignore '**/*.{js,json,html}'",
108109
"format:fix": "yarn format --write",
110+
"fix": "yarn lint:fix && yarn format:fix",
109111
"lint": "eslint ./src ./test ./e2e --ext .js,.ts",
110112
"lint:fix": "yarn lint --fix",
111113
"release:prepare": "shipjs prepare",

0 commit comments

Comments
 (0)