I'm using Laravel 7 with Vue 2 to show some results on landing pages. I wanted to pass the data from an object to an API stuctured in this way.
// file config/posts.php
[
"id" => 1,
"name" => "...",
"description" => "...",
"github_url" => "...",
"site_url" => "...",
"imgs" => [
"img1" => "...",
"img2" => "...",
"img3" => "...",
],
],
// file api.php
Route::namespace('Api')->group(function () {
Route::get('/', 'PostController#index');
Route::get('/posts/{id}', 'PostController#show');
});
I have a problem when i want to click on a single element and get the results of the element I clicked on through the API. In my PostController#show function I structured the data to pass as so:
49 public function show($id)
50 {
51 $posts = config('posts');
52 $post = $posts->find($id);
53
54 return response()->json(compact('post'));
}
The result of the API gives me an error:
Error: Call to a member function find() on array in file app\Http\Controllers\Api\PostController.php on line 52
How can I fix this? Thank you!
Related
I'm really new at testing with vue-test-utis/jest, but I've stumbled upon an issue that I'm not sure how to test it. Could someone help me? I have an action in my store that uses a globalProperties and when I try to use it in tests it's not working.
Basically this is my test:
describe('test: actions', () => {
it('buildReservationsTableData', () => {
let data = actions.buildReservationsTableData(mockDataBefore);
expect(data).toEqual(tableData);
})
})
And this is the action that I'm trying to write a test:
buildReservationsTableData(channelsData) {
let renderTable = ant_table.getRender('table');
if (!channelsData) {
return renderTable.handle([], []);
}
let data = [],
sortable = [],
headers = {
"code" : "Code",
"guestName" : "Guest name",
"checkin" : "Check-in",
"checkout" : "Check-out",
"nights": "Nights",
"ratePlan": "Rate plan",
"roomType": "Room Type",
"totalAmount": "Total amount",
"channel": "Channel",
"status": "Status",
"date": "Date"
},
slots = {};
for (let idx in channelsData){
if (Object.prototype.hasOwnProperty.call(channelsData[idx], "sentToPms")) {
headers.sentToPms = "Sent to PMS";
break;
}
}
for (let idx in channelsData) {
let record = {
id : channelsData[idx].code,
child : channelsData[idx].teste
};
for (let key in headers) {
record[key] = channelsData[idx][key];
if (key == "totalAmount"){
record[key] = global.dashboards.$filters.currency(channelsData[idx][key]);
}
sortable.push(key);
if (key == 'status' || key == 'sentToPms'){
slots[key] = {customRender : 'format'};
}
}
data.push(record);
}
return renderTable.handle(headers, data, {"sortable": sortable, slots: slots});
},
My problem is that the test suit doesn't know what is global.dashboards.$filters.currency, my globalProperties. I get this error:
● test: actions › buildReservationsTableData
TypeError: Cannot read properties of undefined (reading '$filters')
84 | record[key] = channelsData[idx][key];
85 | if (key == "totalAmount"){
> 86 | record[key] = global.dashboards.$filters.currency(channelsData[idx][key]);
| ^
87 | }
88 |
89 | sortable.push(key);
On my jest.init.js file I have this config, but the action is not aware of that.
import { config } from "#vue/test-utils";
config.global.mocks = {
$filters: {
translate: (msg) => msg,
currency: (currency) => currency
},
$t: (text) => text
}
How do I fix it? Thanks in advance.
Judging by the error it your dashboards object which is not defined.
I don't know how you create it or what it is, but if you want to try to mock in Vue-test-utils config file please note that global doesn't seem to be a valid config option, you might want to try:
config.mocks = {
global: {
dashboards: {
$filters: {
translate: (msg) => msg,
currency: (currency) => currency
},
$t: (text) => text
}
}
}
Alternatively Jest provide a way to define global variables that need to be available in all test in jest.config.js:
// globals: {},
This is the body for reorder. How can I do assertions to check the order for particular in array[3]
{
"dimName": "Women's Clothing",
"dimOrder": 2,
"dimType": "wa",
"dimId": "category#womens-clothing",
"dimParent": "category"
},
{
"dimName": "Jewelry 1",
"dimOrder": 1,
"dimType": "wa",
"dimId": "category#jewelry",
"dimParent": "category"
},
{
"dimName": "Handbags",
"dimOrder": 3,
"dimType": "wa",
"dimId": "category#handbags",
"dimParent": "category"
}
If you received the above as a json response in an API test, a couple of quick examples:
Check the order of id's like this
cy.request(...)
.then(response => {
expect(response[0].dimId).to.eq('category#womens-clothing')
expect(response[1].dimId).to.eq('category#jewelry')
expect(response[2].dimId).to.eq('category#handbags')
})
Check the dimOrder field is sequential like this
cy.request(...)
.then(response => {
const dimOrder = response.map(item => item.dimOrder)
expect(dimOrder).to.deep.eq([1,2,3]) // deep because is array matching
})
For easier assertions on a response, especially nested properties, you can use cy-spok. It's also quicker to comprehend.
const spok = require('cy-spok')
cy.request(...)
.its('response.body')
.should(spok({
propertieWithArray: [
{
// you can assert the properties equal exact values
dimName: "Women's Clothing",
dimOrder: 2,
dimType: "wa",
dimId: "category#womens-clothing",
dimParent: "category"
},
{
// you can assert properties meet specifications
dimName: spok.string, // Jewelry 1
dimOrder: spok.number, // 1
dimType: spok.type('string'), // wa
dimId: spok.startsWith('category'), // category#jewelry
dimParent: spok.endsWith('category') // category
},
{
// use combination
dimName: spok.string,
dimOrder: spok.gt(0),
dimType: "wa",
dimId: spok.test(/#/),
dimParent: "category"
}
I am building a CMS SPA with Laravel 8 and I wanted to seperate the routes by category (admin, api, auth) in seperate route files with the use of custom slugs (/admin/settings , /auth/login) but I cant seem to get it to work so what am I doing wrong? It all did work when it was the API file but when dividing it over seprate files it wont work.
routes/admin.php
Route::group(['middleware' => 'auth:sanctum'], function () {
Route::get('settings', [SettingsController::class, 'index'])->name('settings');
});
routeServiceProvider.php
public function boot()
{
$this->configureRateLimiting();
$this->routes(function () {
Route::middleware('web')
->group(base_path('routes/web.php'));
Route::prefix('api')
->middleware('api')
->group(base_path('routes/api.php'));
Route::prefix('auth')
->middleware('auth')
->namespace($this->namespace)
->group(base_path('routes/auth.php'));
Route::prefix('admin')
->middleware('admin')
->namespace($this->namespace)
->group(base_path('routes/admin.php'));
});
}
routes/web.php
Route::get('/{any}', function () {
return view('layouts.vue');
})->where('any', '^(?!api|admin|auth).*$');
kernel.php
protected $middlewareGroups = [
'web' => [
\App\Http\Middleware\EncryptCookies::class,
\Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
\Illuminate\Session\Middleware\StartSession::class,
// \Illuminate\Session\Middleware\AuthenticateSession::class,
\Illuminate\View\Middleware\ShareErrorsFromSession::class,
\App\Http\Middleware\VerifyCsrfToken::class,
\Illuminate\Routing\Middleware\SubstituteBindings::class,
],
'api' => [
\Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
'throttle:60,1',
\Illuminate\Routing\Middleware\SubstituteBindings::class,
],
'admin' => [
\Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
'throttle:60,1',
\Illuminate\Routing\Middleware\SubstituteBindings::class,
],
'auth' => [
\Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
'throttle:60,1',
\Illuminate\Routing\Middleware\SubstituteBindings::class,
]
];
Component.vue
const response = axios.get('/admin/settings')// not giving the data back
const response = axios.get('/api/settings')// in the past did work
While someone else gives a better answer about your approach. As simple way to achieve /admin/settings in the web/routes.php file would be to use prefixes
Route::prefix('admin')->middleware(['auth:sanctum'])->group(function() {
Route::get('settings', [SettingsController::class, 'index']);
});
With this approach you won't need to make changes to your app\Http\kernel.php or routeServiceProvider.php files.
Also if you want to abstract it away, you could put your it in a new file and just require require_once __DIR__ . '/admin.php'; as you would a regular php file.
i want to display related data on react native, i have 2 response api
response 1
{
"total": 2,
"data" : [
{
"date" : "2020-12-01",
"time" : "08:00:00"
},
{
"date" : "2020-12-02",
"time" : "09:00:00"
}
]
}
response 2, date is parameter
date : 2020-12-01
{
"total": 2,
"data" : [
{
"date" : "2020-12-01",
"description" : "bla bla bla"
},
{
"date" : "2020-12-01",
"description" : "vla vla vla"
}
]
}
date : 2020-12-02
{
"total": 1,
"data" : [
{
"date" : "2020-12-02",
"description" : "cla cla cla"
}
]
}
how to use promises on fetch and how components return them,
so it can display content descriptions like this
Are you asking how to use promises with Fetch? Or how to take the results of those promises and use them to create a visual component?
It doesn't look like you've put any work into asking this question and it's quite wide ranging, from setting up components, creating fetch requests to an API and formatting them into visual components.
I'd consider starting here for your fetch request:
https://reactnative.dev/docs/network#making-requests
Then look at how they take the text and place it on a screen here:
https://reactnative.dev/docs/network#making-requests
EDIT:
Per the comments below.
You would most likely want to store the results of your request in some form of local state, and pass that state to your FlatList or similar, for instance:
const PromiseExample = () => {
const [listItems, setListItems] = useState([])
useEffect(() => {
async function fetchData() {
const data = await fetch('localhost:3000/data').json()
const otherData = await fetch('localhost:3000/otherData').json()
let joinedData = []
// at this point you would join your two data structures in whatever way you need to and push the joined data to the var.
setListItems(joinedData)
}
}, [])
return (
<FlatList data={listItems} />
)
}
Anyone know how the "item.read" hooks is meant to work?
return [
'filters' => [
'item.update.table:before' => function (\Directus\Hook\Payload $payload) {
$payload->set('field', my_encrypt($payload->get('password'), $key));
return $payload;
},
'item.read.table:before' => function(\Directus\Hook\Payload $payload){
<how to set the 'field' before view??>
return $payload;
},
],
];
I need to unecrypt the stored field for view....
I found the way.
First you need the
'item.read.coll' => function ($payload)
Second you get the data from the payload - alter the data and replace the data in the payload - like this
$data = $payload->getData();
$data[0]['field'] = "NEW DATA";
$payload->replace($data);
return $payload;