i am trying to send current video object and timeStam of current selected video to action using dispatch but it does not work ..
onPause={(e)=>{dispatch(Pause(e.timeStamp,state.video))}}
but from this code of line it didn't work
I sent data through dispatch in the form of object like this
onPause={(e) => {
dispatch(Pause({pauseTime: pauseTime, selectedVideoID: ID}));
}}
Related
I've been searching for a solution all day, googling and StackOverflowing, but nothing appears to be working.
I've got a very simple NextJS app. On page load, I load a fact from a third party API automatically. Then a user can enter a search query, press enter, and search again based on that query. I want to create a Cypress test that checks for the functionality of that search feature.
Right now, I'm getting a timeout on cy.wait(), and it states that No request ever occurred.
app.spec.js
import data from '../fixtures/data';
describe('Test search functionality', () => {
it('renders new fact when search is performed', () => {
// Visit page
cy.visit('/');
// Wait for page to finish loading initial fact
cy.wait(1000);
// Intercept call to API
cy.intercept("GET", `${process.env.NEXT_PUBLIC_API_ENDPOINT}/jokes/search?query=Test`, {
fixture: "data.json",
}).as("fetchFact");
// Type in search input
cy.get('input').type('Test');
// Click on search button
cy.get('.submit-btn').click();
// Wait for the request to be made
cy.wait('#fetchFact').its('response.statusCode').should('eq', 200);
cy.get('p.copy').should('contain', data.result[0].value);
})
});
One thing I've noticed, is that the data being displayed on the page is coming from the actual API response, rather than the json file I'm attempting to stub with. None of React code is written server-side either, this is all client-side.
As you can see, the test is pretty simple, and I feel like I've tried every variation of intercept, changing order of things, etc. What could be causing this timeout? Why isn't the json being stubbed correctly in place of the network request?
And of course, I figure out the issue minutes after posting this question.
I realized that Cypress doesn't like Next's way of handling env variables, and instead needed to create a cypress.env.json. I've updated my test to look like this:
import data from '../fixtures/data';
describe('Test search functionality', () => {
it('renders new fact when search is performed', () => {
// Visit page
cy.visit('/');
// Wait for page to finish loading initial fact
cy.wait(1000);
// Intercept call to API
const url = `${Cypress.env('apiEndpoint')}/jokes/search?query=Test`;
cy.intercept("GET", url, {
fixture: "data",
}).as("fetchFact");
// Type in search input
cy.get('input').type('Test');
// Click on search button
cy.get('.submit-btn').click();
// Wait for the request to be made
cy.wait('#fetchFact').its('response.statusCode').should('eq', 200);
cy.get('p.copy').should('contain', data.result[0].value);
})
});
I have a component that receives data from an emit function and I wish to push object's onto an array. The trouble is when I push object onto array the object is empty?? Here is the code :
<script setup>
let formDataHistory = ref([]);
// Method to be called when there is an emiterUIUpdate event emiited
// from form-modal.vue #param(data) is the form data sent from the
// form submission via the event bus. We will then send this data back
// down to child display-scrap component via a prop.
const updateUI = (data) => {
console.log(data);
formDataHistory.value.push(data);
console.log(formDataHistory);
};
</script>
And a snapshot in devtools after pushing item onto array:
formdataHistory's first element is an empty object after the push action. Any help on proper way to mutate an array is most welcome.
Two suggestions:
Always use const on reactive variables: const formDataHistory = ref([]);. The reference itself should never change, only the value.
Try formDataHistory.value = [...formDataHistory.value, data];. It might be that refs only update if the content is replaced instead of mutated.
I want to get the order ID from the API response. When I click on the Create Order button it will send a POST API request and return the ID that I want to save in my JSON file.
This is my order creation code.
cy.clickOnElement(practicePageSelectors.CreateOrder).click(); // click on add Rx button
cy.readFile('cypress/fixtures/Data.json').then((profile) => {
cy.searchPatients(practicePageSelectors.searchPatient1, profile.Patient_fullName);
})
cy.searchDoctors(); // search for the doctor
cy.clickOnElementUsingXpath(practicePageSelectors.nextButtonId); // click on the next button
cy.clickOnElement(practicePageSelectors.createOnetimeOrder)
cy.searchMedicine() //search for Medicine
cy.clickOnElementUsingXpathfirst(practicePageSelectors.addMedicine); // click on add button
cy.clickOnElementUsingText(practiceData.paymentButtonName, practiceData.buttonTag); // click on skip payment button
cy.clickOnElementUsingXpath(practicePageSelectors.submit_CreateOrderButton)
And I tried something like this
cy.intercept({
method: 'POST',
url: 'https://ibis-dev.droicelabs.us/api/dispenser/orders/',
}).then((responce)=>{
let body = JSON.parse(responce.body)
cy.log(body)
})
I don't know how to use intercept. Please guide me
You have to register the interceptor before the http call will be made and then wait for the data within your test.
This should happen either in before hook or on top of your actual test case.
cy.intercept({
method: 'POST',
url: 'https://ibis-dev.droicelabs.us/api/dispenser/orders/',
}).as('ordersCall')
and then in place where you will need the ID
cy.wait('#ordersCall')
.its('response.body')
.then((body) => {
// parsing might be not needed always, depends on the api response
const bodyData = JSON.parse(body)
cy.log(bodyData)
})
Side note: cy.fixture() reads directly from fixtures directory - no need to use cy.readFile
My component needs data from the API.
It lets the store dispatches an action, but before dispatching this action some other data needs to be obtained first. Thus, dispatched action is dependent on data that needs to be fetched before the actual action is called and the fetched data is passed to the action.
this.d1 = this.store.pipe(select(selectData1));
this.d2 = this.store.pipe(select(selectData2));
// ...
// dispatch the actions below to and pass identifier (id) in order to get its object from the API and put the fetched data in store.
this.store.dispatch(action1({data1Id}));
this.store.dispatch(action1({data2Id}));
// dispatch the actual action and pass this.d1 and this.d2
this.store.dispatch(targetAction({this.d1, this.d2}));
What is the best practise for the situation described above?
One way you could do this is to subscribe to this.d1 and this.d2 and then dispatch the target action when they emit:
combineLatest([this.d1 this.d2])
.subscribe(([d1, d2]) => {
if (d1 && d2) {
this.store.dispatch(targetAction(d1, d2));
}
})
However, it might be better to use an effect for this:
https://ngrx.io/guide/effects
I am sending events not as a JSON array, but like this:
{"result":"success",
"events":[
{"end":"2012-07-14T11:00:00", "description":"1", "title":"2", "start":"2012-07-14T07:00:00"},
{"end":"2012-07-14T11:00:00", "description":"3", "title":"4", "start":"2012-07-14T07:00:00"}
]}
And receive it from FullCalendar this way:
events:{
url:'/sweatiquette/calendar/events/',
type:'POST',
allDayDefault:false,
data:{action:'get'}
}
I wonder if I can configure FullCalendar to process data from "events" field if I send it using this structure.
Use http://arshaw.com/fullcalendar/docs/event_data/events_function/ "Events as a function".
Fetch your JSON object and parse the events-array from there.