How to work vue i18n pluralization? - vue.js

I have locale messages the below:
timing: {
viewer: {
count: 'нету таймингов | 1 тайминг | 2 тайминга | 3 тайминга | 4 тайминга | {count} таймингов'
}
}
My template the below:
<span>{{ $tc('timing.viewer.count', 50, {count: 50}) }}</span>
Output the below:
<span>2 тайминга</span>
Why?? tag span must have "50 таймингов"

Your template is wrong.
Try it like this
timing: {
viewer: {
count: 'нету таймингов | 1 тайминг | {count} таймингов'
}
}
When using the count version of $tc i18n will look at the 3rd argument in the template.

Related

Incorrect display of Morris Area chart and missing x-axis data

I would like to know if someone can point me to the right direction. I have a View query named 'VwDashBoard_Areachart' that contains the following five fields with some information from the MSSQL server:
+-----+------+-----+-----+-----+
| ID | Year | OC | SS | ST |
+-----+------+-----+-----+-----+
| 1 | 2017 | 1 | 1 | 3 |
| 2 | 2018 | 1 | 1 | 2 |
| 3 | 2019 | 1 | 1 | 2 |
+-----+------+-----+-----+-----+
and I would like to present the data in the Morris Area Chart. I have the following code in the controller below:
public ActionResult AreaChart()
{
var mc = from mon in db.VwDashBoard_Areachart
select new
{
year = mon.Year,
value = mon.SS,
value1 = mon.OC,
value2 = mon.ST,
};
return Json(mc, JsonRequestBehavior.AllowGet);
}
And here's my script:
$(document).ready(function () {
$.get('#Url.Action("AreaChart")', function (result) {
new Morris.Area({
// ID of the element in which to draw the chart.
element: 'morris-area-charts',//'myfirstchart',
data: result,
xkey: 'year',
ykeys: ['value', 'value1', 'value2'],
labels: ['OC', 'SS', 'ST'],
pointFillColors: ['#ffffff'],
lineColors: ['#ccc', '#7a6fbe', '#28bbe3'],
redraw: true,
lineWidth: [1, 1, 1],
pointSize: 1,
});
});
});
This is the code from the razor:
<div class="panel-body">
<div id="morris-area-charts"></div>
</div>
Now when I run the script, it displays the Area chart but the chart display looks incorrect and does not display the year on the x-axis. However, the same result looks good if I display the chart as a bar chart.
I was wondering if I have forget to include something in the script or controller or the presentation of data layout from the View query needs to be modified in order to display the Area chart correctly.
I have tried putting in some static data and the Area chart displays correctly. The issue is when I am trying to fetch data from database. Any help would be really appreciated.
Your code looks good. Set the parseTime parameter to false to avoid Morris interpreting dates:
parseTime: false
Please try the following snippet based on your data:
var result = [
{ "year": "2017", "value": 1, "value1": 1, "value2": 3 },
{ "year": "2018", "value": 1, "value1": 1, "value2": 2 },
{ "year": "2019", "value": 1, "value1": 1, "value2": 2 }
];
new Morris.Area({
element: 'morris-area-charts',
data: result,
xkey: 'year',
ykeys: ['value', 'value1', 'value2'],
labels: ['OC', 'SS', 'ST'],
pointFillColors: ['#ffffff'],
lineColors: ['#ccc', '#7a6fbe', '#28bbe3'],
redraw: true,
lineWidth: [1, 1, 1],
pointSize: 1,
parseTime: false
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" rel="stylesheet" />
<div class="panel-body">
<div id="morris-area-charts"></div>
</div>

Errors when using template literals in Vue

I have the following in my Vue project:
:customHighlight = `(props) => ({
highlight: {
pre_tags: ['<mark>'],
post_tags: ['</mark>'],
fields: {
text: {},
title: {},
},
number_of_fragments: 0,
},
})`
and I am getting the following errors:
Module Warning (from ./node_modules/eslint-loader/index.js):
error: 'v-bind' directives require an attribute value (vue/valid-v-bind) at src\views\Home.vue:24:7:
22 | ]"
23 |
> 24 | :customHighlight = `(props) => ({
| ^
25 | highlight: {
26 | pre_tags: ['<mark>'],
27 | post_tags: ['</mark>'],
error: Parsing error: unexpected-character-in-unquoted-attribute-value (vue/no-parsing-error) at src\views\Home.vue:24:26:
22 | ]"
23 |
> 24 | :customHighlight = `(props) => ({
| ^
25 | highlight: {
26 | pre_tags: ['<mark>'],
27 | post_tags: ['</mark>'],
error: Parsing error: Line 1: Unterminated template
> 1 | 0(`(props))
| ^ (vue/no-parsing-error) at src\views\Home.vue:24:27:
22 | ]"
23 |
> 24 | :customHighlight = `(props) => ({
| ^
25 | highlight: {
26 | pre_tags: ['<mark>'],
27 | post_tags: ['</mark>'],
error: Parsing error: unexpected-equals-sign-before-attribute-name (vue/no-parsing-error) at src\views\Home.vue:24:35:
22 | ]"
23 |
> 24 | :customHighlight = `(props) => ({
| ^
25 | highlight: {
26 | pre_tags: ['<mark>'],
27 | post_tags: ['</mark>'],
I am getting this snippet from: https://opensource.appbase.io/reactive-manual/vue/search-components/datasearch.html
I am a bit stuck and I am thinking that there is something wrong with the way he template literal is stuctured?
Thanks!
The example you've copied this from does appear to be wrong.
In JavaScript backticks are often used to create strings that span multiple lines. This makes them very useful for writing Vue templates.
However...
This particular example isn't in JavaScript, it's HTML. HTML attribute values need to be surrounded by single or double quotes, not backticks. Attribute values can span multiple lines without needing any other special treatment.
So, in short, just replace the backticks with double quotes, ", and everything should be fine.

Karate API - How to parameterize below Json post request

how to parameterize the item block in code :-
Scenario Outline: parameterization
* text query =
"""
{
"add":"Product",
"item":[
{"pn":"12345","qn":1,"m":"mk"}
]
}
"""
Given url baseURL
And request { query: '#(query)' }
And header Accept = 'application/json'
When method post
Then status 200
Examples:
| item_num |
| 12345 |
| 67890 |
Scenario Outline:
* def json = { add: 'Product', item: [{ pn: '<itemNum>', qn: 1, m: 'mk'}]}
* print json
Examples:
| itemNum |
| 12345 |
| 67890 |

Match each using Examples from Scenario Outline

I find using * match each response.xyz super powerful for merging object structure testing with content testing. Is there a way to use it with Examples tables and <placeholder>?
I've got something like this, that I want to use an Examples table on:
* match each response.Services ==
"""
{
"ServiceId" : #present,
"Name" : <Name>,
"Description" : #present,
"InActive" : <Inactive>,
}
"""
Examples:
| ClientId | Name | Status | ErrorCode | Inactive |
| 400152 | "Foxtrot" | 200 | 0 | false |
| 400152 | "Waltz" | 200 | 0 | false |
I get
"Services": [
{
"ServiceId": 3,
"Name": "Waltz",
"Description": "Waltzing like Matilda",
"InActive": false,
},
{
"ServiceId": 4,
"Name": "Foxtrot",
"Description": "",
"InActive": false,
},
back as a response.
Obviously, when I'm using multiple lines in Examples:, it results in several tests.
What I'm looking for is to test each object in the array against predefined values, but without knowing what order they'll show up in. And use the ordered approach like tables produce.
Instead of each, try this:
* match response.Services contains
"""
{
"ServiceId" : #present,
"Name" : <Name>,
"Description" : #present,
"InActive" : <Inactive>,
}
"""
EDIT: okay, an alternate option. By the way there are at least 5 different ways I can think of :P
Scenario:
* table data
| ClientId | Name | Status | ErrorCode | Inactive |
| 400152 | "Foxtrot" | 200 | 0 | false |
| 400152 | "Waltz" | 200 | 0 | false |
* def expected = karate.map(data, function(x){ return { ServiceId: '#present', Name: x.Name, Description: '#present', InActive: x.Inactive} })
* match response.Services contains expected
EDIT2: if you can control the whole table:
Scenario:
* table expected
| Name | InActive | ServiceId | Description |
| "Foxtrot" | false | '#present' | '#present' |
| "Waltz" | false | '#present' | '#present' |
* match response.Services contains expected

How can I write parameterized tests with open source testcafe?

I found a lot of introductions to parameterized tests/ test cases for test cafe, but the syntax is completely different to the one I am using. I guess they're for the discontinued paid version. How can I do the same thing with the free version? I'm not looking for user roles specifically, I want to write tests with parameters in general.
Do you want to do something like this?
This works for me perfectly
import { Selector } from 'testcafe';
fixture `Your fixture`
.page `http://some_url.com`
const testCases = [
{ name: 'name1', param: 'param1' },
{ name: 'name2', param: 'param2' }
...
];
for (const c of testCases) {
test(`Test ${c.name}`, async t => {
yourTestMethod(c.param)
});
}
An additional twist can be added by using a combination of JS and YAML
import YamlTableReader, {fixtureData, TestData} from "./YamlTableReader";
var table = fixtureData `
| ID | N1 | N2 | Equals |
| Should Be equal | 1 | 1 | true |
| Shouldn't be equal | 1 | 2 | false |
| Shouldn't be equal | 1 | "hans" | false |
| Should be equal | hans | "hans" | true |
`;
table.forEach(row => {
test('Should be equal', t => {
row["Equals"] == (row["N1"] === row["N2"]));
}
});
Simple Sources for this can be found here https://github.com/deicongmbh/jasmine-param-tests